:root{
    --main-padding-top:60px;
    --main-header-background:#2c3e50;
    --main-aside-header-background:#27ae60;
    --main-aside-background:#007bff;
    --main-grid-template-columns:210px auto;
    --default-margin-left:10px;
    --default-margin-right:10px;
    --main-header-padding:7px 7px
}
*{
    padding:0;
    margin:0;
    box-sizing:border-box
}
body{
    font-size:13px
}
.header{
    display:grid;
    grid-template-columns:var(--main-grid-template-columns);
    padding:0;
    background:var(--main-header-background);
    width:100%;
    color:#fff;
    position:fixed
}
.header-mini{
    display:block;
    padding:0;
    background:var(--main-header-background);
    width:100%;
    color:#fff;
    position:fixed
}
.header-side,.header-side-mobile{
    background:var(--main-aside-header-background);
    padding:var(--main-header-padding);
    font-weight:normal;
}
.header-main{
    padding:var(--main-header-padding);
	padding-top: 13px;
}
.dashboard-content{
    display:grid;
    grid-template-columns:var(--main-grid-template-columns)
}
.dashboard-content-full{
    display:block
}
.dash-aside-content,.dash-main-content{
    height:100vh;
    overflow:auto
}
.dash-aside-content{
    background:var(--main-aside-background);
	padding-top:var(--main-padding-top);
}
.dash-aside-content .menu .menu-item,.menu_mobile .menu-item{
    background:#fff;
    color:#000;
    padding:7px 10px;
    cursor:pointer;
    margin-bottom:5px;
    user-select:none;
    margin-left:var(--default-margin-left);
    margin-right:var(--default-margin-right);
    border-radius:3px
}
.menu-sub-item{
    display:none
}
.menu-sub-item{
    margin-top:10px;
    border-top:1px solid #ddd
}
.menu-sub-item ul{
    margin-bottom:0
}
.menu-sub-item ul li{
    list-style:none;
    padding:5px 7px;
    padding-left:30px;
    color:#555
}
.menu-sub-item ul li:hover{
    color:#111
}
#dash-ajax-container{
    position:relative
}
.loader{
    position:fixed;
    left:50%;
    top:40%;
    z-index:3;
    border:6px solid #d9d9d9;
    border-radius:50%;
    border-top:6px solid #3498db;
    width:40px;
    height:40px;
    -webkit-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite
}
.dash-main-content{
    height:100vh;
    position:relative;
    overflow:auto;
	background: rgba(236,240,241,.5);
}
.card{
    word-break:break-word!important
}
nav.top-menu li{
    list-style:none;
    display:inline-block;
    margin-left:10px;
    font-size:12px
}
@keyframes spin{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(360deg)
    }
}
@media print{
    #dataTable_paginate,.box-header,.dash-aside-content,.dataTables_info,.dontPrint,.header,header{
        display:none!important
    }
    .dashboard-content{
        display:block
    }
    table{
        width:100%
    }
    .box-body,.container-fluid{
        padding:0;
        margin:0
    }
    .billModal{
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0
    }
}
#menuIcon_mobile,.mobile_topmenu{
    display:none
}
.materialUsedItem:hover{
    background:#f4f4f4
}
.header-side-mobile{
    display:none;
    margin-bottom:10px
}
.menu_mobile{
    display:none;
    width:190px;
    position:fixed;
    height:100vh;
    top:0;
    bottom:0;
    z-index:1000;
    background:#00f;
    box-shadow:0 -5px 10px rgba(0,0,0,.5)
}
.menu_mobile_overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.1);
    z-index:900;
    width:100vw;
    height:100vh
}
.dash{
    box-shadow:0 .125rem .25rem rgba(0,0,0,.075)
}
.dash:hover{
    cursor:pointer;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.15)
}
.dash .dash-content{
    display:grid;
    grid-template-columns:50% 50%;
    align-content:center;
    align-items:center;
    padding-top:10px
}
.dash .dash-count{
    font-size:25px
}
.dash-icon{
    top:25px;
    right:35px;
    opacity:.2;
    font-size:30px;
    position:absolute
}
.dash-title{
    font-size:13px;
    opacity:.6;
    text-transform:uppercase
}
.bg-lightgrey{
    background:#ddd
}
.text-span{
    display:inline-block;
    border-radius:50%;
    border:2px solid #fff;
    position:absolute;
    width:28px;
    height:28px;
    background:green;
    padding:0 2px;
    transform:scale(.9);
    vertical-align:middle;
    display:inline-block;
    line-height:25px;
    margin-top:-4px
}
@media only screen and (max-width:768px){
    .dashboard-content,.header,.header-side-mobile,.wrapper{
        display:block
    }
    #menuIcon,.dash-aside-content,.header-side,.top-menu{
        display:none
    }
    .wrapper{
        margin-top:-36px!important
    }
    .mobile_topmenu{
        display:block
    }
    #menuIcon_mobile{
        display:inline-block
    }
}