/* width */
::-webkit-scrollbar {
    width: 5px;
    height:5px;
}

/* Track */
::-webkit-scrollbar-track {
    border-radius: .5rem;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: lightgrey; 
    border-radius: .5rem;
    cursor:auto;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: grey; 
}
a[onclick],a[data-toggle]{
    cursor:pointer;
    font-family:"Ubuntu",sans-serif;
}
a[href],a[onclick]:not([href]){
    color:#3299fe;
    font-family:"Ubuntu",sans-serif;
}
body{
    font-family:"Ubuntu",sans-serif;
    color:#3c434a;
    font-size:13px;
    background:var(--color-body);
}
.text-default{
    color:#3c434a!important;
}
.loader{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background:#f2f2f2;
    z-index:99999;
    background-image:url(../icon/loading.svg),url(../img/logo.png);
    background-size:64px,256px;
    background-position:calc(50% + 90px) calc(50% - 50px),center center;
    background-repeat:no-repeat;
    transition:all .5s linear;
    opacity:1;
}
.loader.hidden{
    display:none;
    opacity:0;
    z-index:-1;
}
textarea{
    resize:none;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
    font-weight:500;
    color:#424542;
}
h6,.h6{
    font-size:120%;
}
h5,.h5{
    font-size:140%;
}
h4,.h4{
    font-size:160%;
}
h3,.h3{
    font-size:180%;
}
h2,.h2{
    font-size:200%;
}
h1,.h1{
    font-size:220%;
}
.form-group{
    margin-bottom:.5rem;
}
.form-group:last-child{
    margin-bottom:0px;
}
.loading{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    display:none;
    z-index:9998;
    /*background:#0003;*/
}
.loading .loading-dialog .loading-text{
    text-align:center;
}.loading{
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    display:none;
    z-index:9998;
    /*background:#0003;*/
}
.loading .loading-dialog{
    position:absolute;
    font-weight:normal;
    top:calc(50% - 75px);
    left:calc(50% - 150px);
    width:300px;
    background:white url(../img/logo.png) no-repeat top center;
    background-size:70px;
    background-position:top left;
    text-align:center;
    padding-top:80px;
    padding-bottom:.5rem;
    border:2px solid var(--color-border);
    border-radius:1rem;
    color:#707070;
    box-shadow:2px 2px 2px #0002;
}
.loading .loading-dialog .loading-text{
    text-align:center;
    padding:.5rem 1rem;
    text-transform:capitalize;
}
.loading .loading-dialog .loading-bar{
    padding:.5rem 1rem;
}
.loading .loading-dialog .loading-bar .loading-bar-animate{
    height:10px;
    background:var(--color-border);
    border-radius:5rem;
    position:relative;
    overflow:hidden;
    border:2px solid var(--color-border);
}
.loading .loading-dialog .loading-bar .loading-bar-animate::before{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    border-radius:.2rem;
    width:50px;
    background:yellow;
    animation:bouncing infinite 5s;
}
@keyframes bouncing{
    from {
        left:0px;
    }
    to{
        left:100%;
    }
}
label,.label{
    color:#424542;
    font-weight:500;
    margin-bottom:3px;
}
.dropdown-menu{
    box-shadow:2px 2px 2px #0002;
}
.dropdown-menu.dropdown-menu-right{
    box-shadow:-2px 2px 2px #0002;
}
.dropdown-item,a.dropdown-item{
    font-size:12px;
    padding:10px 15px!important;
    color:#5d5d5d!important;
    cursor:pointer;
    font-family:"Ubuntu",sans-serif;
}
.dropdown-item.active, .dropdown-item:active{
    background-color:#f2f2f2;
}
.text-small{
    font-size:10px;
}
.text-primary{
    color:var(--color-primary)!important;
}
.text-danger{
    color:var(--color-danger)!important;
}
.text-info{
    color:var(--color-info)!important;
}
.text-warning{
    color:var(--color-warning)!important;
}
.text-dark{
    color:var(--color-dark)!important;
}
.text-default{
    color:var(--color-default)!important;
}
.text-muted{
    color:var(--color-muted)!important;
}
.bg-primary{
    background-color:var(--color-primary)!important;
}
.bg-danger{
    background-color:var(--color-danger)!important;
}
.bg-info{
    background-color:var(--color-info)!important;
}
.bg-warning{
    background-color:var(--color-warning)!important;
}
hr{
    border-bottom:0px;
    margin:.75rem 0;
}
.line{
    position:relative;
    text-align:center;
}
.line span{
    background:#fff;
    padding-left:.75rem;
    padding-right:.75rem;
}
.line::before{
    content:"";
    border-top:1px solid #e0e0e0;
    position:absolute;
    width:100%;
    left:0px;
    top:50%;
    z-index:-1;
}
.card{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
    border: 0;
    border-radius:.42rem;
    border:1px solid #c3c4c7;
    box-shadow:none;
    border-radius:0px;
}
.card.card-primary .card-header{
    background:linear-gradient(135deg, rgb(0, 97, 194) 0%, rgb(0, 46, 92) 100%);
    color:white;
}
.card .card-header:first-child{
    border-radius:.42rem .42rem 0 0;
    border-radius:0px;
}
.card .card-header:last-of-type{
    border-bottom:.5px solid lightslategrey;
    border-radius:0px;
}
.card .card-footer{
    background:#fff;
}
.card .card-footer:first-of-type{
    border-top:.5px solid lightslategrey;
}
.card .card-footer:last-child{
    border-radius:0 0 .42rem .42rem;
    border-radius:0px;
}

.modal-title{
    font-weight:bold;
    font-size:12px;
    font-size:inherit;
}
.modal-backdrop.show{
    opacity:.1;
}
.modal-content{
    border:0px;
    -webkit-box-shadow: 0 0 30px 0 rgba(82,63,105,.25);
    box-shadow: 0 0 30px 0 rgba(82,63,105,.25);
    border-radius:.42rem;
    border-radius:0px;
    border:1px solid #c3c4c7;
    background:#f0f0f0;
    border:0px;
    -border-radius:.375rem;
    -overflow:hidden;
    background:white;
}

.pagination .page-link{
    font-size:12px;
    background-color:#1bc5bd22;
    border:0px;
    color:#606060;
    border-radius:.25rem!important;
    border-radius:0px;
    height:32px;
    background:#f0f0f0;
    opacity:.8;
}
.pagination .page-link:hover,.pagination .page-link:focus{
    background-color:#27aae2;
    color:#fff!important;
}
.pagination .page-link.cur-page{
    background-color:#f64e6022;
    border:0px;
    color:#f64e60;
}
.pagination .page-link.cur-page:hover,.pagination .page-link.cur-page:focus{
    background-color:#f64e60;
    color:#fff;
}
.pagination .page-item{
    margin-left:.25rem;
    margin-right:.25rem;
}
.pagination .btn-paging{
    border-radius:.35rem;
    padding:6px 1rem;
    text-align:center;
    background:#27aae2;
    color:white;
    height:32px;
    border:0px;
    cursor:pointer;
    position:relative;
}
.pagination .btn-paging:hover,.pagination .btn-paging:focus{
    filter:brightness(.95);
    border:0px;
    outline:none;
}
.pagination .btn-paging:active{
    top:1px;
}
.text-muted{
    color:#878789!important;
}
.rounded{
    border-radius:.42rem!important;
}
.select-box{
    position:relative;
    cursor:pointer;
}
.select-box:hover{
    border-color: #80bdff;
    outline: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(128,189,255,.5);
}
.select-box .select-list{
    position:absolute;
    left:0px;
    width:100%;
    border-radius:.25rem;
    background:#fff;
    list-style:none;
    list-style-type:none;
    padding:.5rem;
    margin:0px;
    border:1px solid #ced4da;
    transition:all .2s linear;
    top:80%;
    display:none;
}
.select-box.show .select-list{
    display:block;
    top:calc(100% + .1rem);
    transition:all .2s linear;
}
.select-box .select-list li{
    list-style:none;
    list-style-type:none;
    padding:.5rem 1rem;
    border-radius:.25rem;
    transition:all .2s linear;
}
.select-box .select-list li+li{
    margin-top:.25rem;
}
.select-box .select-list li:hover{
    background:#f7f7f7;
}
.panel{
    background:white;
    padding:.5rem;
    border:1px solid #c0ccdb;
    /*box-shadow:1px 1px 10px #0002;*/
    border-radius:.357rem;
    
    box-shadow: 0px 1px 3px 0px #0002;
}
.modal-full{
    max-width:100%;
    width:calc(100% - 50px);
}
.nav.nav-tabs{
    border:0px;
}
.nav-tabs .nav-item>.nav-link{
    border:0px;
    border-radius:0px;
    color:#0F7BB5;
    background:#fff;
    padding:.25rem .75rem;
    min-width:80px;
    text-transform:uppercase;
    text-align:center;
    border:1px solid #0F7BB5;
    border-radius:.25rem;
}
.nav-tabs .nav-item+.nav-item{
    margin-left:.5rem;
}
.nav-tabs .nav-item>.nav-link.active{
    background:linear-gradient(45deg,#fff,#f0f0f0);
    position:relative;
    top:1px;
}

.overflow-auto{
    overflow:auto!important;
}
.overflow-hidden{
    overflow:hidden!important;
}
.overflow-auto-x{
    overflow-x:auto!important;
}
.overflow-auto-y{
    overflow-y:auto!important;
}
.overflow-hidden-y{
    overflow-y:hidden!important;
}
.overflow-hidden-x{
    overflow-x:hidden!important;
}
.bg-light{
    background-color:#f2f2f2!important;
}
.pagination{
    margin:0px;
    padding:0px;
    justify-content:end;
    align-items:center;
}
.pagination .page-info{
    opacity:.9;
}
.pagination li{
    margin-left:.25rem;
    margin-right:.25rem;
}
.pagination li.active a{
    color:dimgrey;
}
.border,.border-top,.border-bottom,.border-right,.border-left{
    border-color:#c0ccdb!important;
}
.modal-content .modal-body{
    background:none;
}
.modal-content .modal-footer{
    background:none;
    border-radius:0 0 .42rem .42rem;
    border-radius:0px;
    padding:10px 15px;
    border-top:1px solid #c9c9c9;
    border:0px;
    background:#f7f7f7;
}
.modal-content .modal-header{
    letter-spacing:.5px;
    font-weight:bold;
    text-transform:uppercase;
    background:linear-gradient(45deg,var(--color-blue-dark),var(--color-blue-light));
    padding:10px 15px;
    position:relative;
    border-bottom:0px;
    min-height:40px;
    position:relative;
    border-radius:0px;
    background:none;
    border-bottom:.5px solid #c3c4c7;
    background:linear-gradient(45deg,#1D2327,#657179);
    color:white;
    background:linear-gradient(45deg, #27AAE2,#27aae2aa);
}
.modal-content a.close{
    padding:.1rem .5rem .25rem .5rem;
    margin:0px;
    border-radius:0 5px 0 5px;
    color:steelblue;
    background:white;
    opacity:.85;
    position:absolute;
    top:3px;
    right:0px;
    border-radius:0px;
    color:white;
    background:none;
}
.modal-content a.close:hover{
    opacity:1;
    color:white;
}
.modal-content .modal-close{
    position:absolute;
    display:inline-block;
    top:0px;
    right:0px;
    padding:4px 5px;
    width:28px;
    height:28px;
    background:transparent url(../icon/times.png) no-repeat center center;
    background-size:28px;
    cursor:pointer;
    background-color:#DF4F5F;
    border-radius:0px 5px;
}
.modal-content .modal-close:hover{
    transform:scale(1.05);
}
.text-bold{
    font-weight:500;
}
.media .separator{
    height:20px;
    background:#0003;
    width:1px;
    margin:0 .25rem;
}
.sidebar{
    position:absolute;
    top:-500px;
    width:100%;
    left:0px;
    z-index:99;
    transition:all .2s ease;
    background:#f2f2f2;
    border:1px solid lightgrey;
    box-shadow:0 0 10px #0003;
}
.sidebar.show{
    top:0px;
}
.filter{
    position:absolute;
    width:auto;
    box-shadow:2px 2px 2px #0002;
    z-index:99;
    margin-top:3px;
}
.filter.align-right{
    right:5px;
}
.icon{
    height:16px;
    width:16px;
    display:inline-block;
    vertical-align:middle;
    margin-right:.5rem;
}
.caption{
    font-family:"Ubuntu",sans-serif,tahoma;
    padding:5px 10px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:#1054a1;
    background-color:white;
    border-top:3px solid #1054a1;
    box-shadow:1px 0 inset #c0ccdb,-1px 0 inset #c0ccdb;
}
.caption>i,.caption>span{
    display:inline-block;
    vertical-align:middle;
}
.caption+.caption{
    margin-top:.25rem;
}
.swal-footer{
    display:flex;
    justify-content:center;
}
.swal-button{
    min-width:100px;
    border-radius:20px;
}
.width-auto,.w-auto{
    width:auto!important;
    min-width:auto!important;
}
.custom-control .custom-control-input{
    width:100%;
    z-index:0;
}
fieldset{
    border:1px solid #c0ccdb;
    border-radius:4px;
    background:white;
}
fieldset legend{
    width:90%;
    border-radius:4px;
    font-size:14px;
    text-transform:uppercase;
    font-weight:700;
    padding:.25rem .5rem;
    background:steelblue;
    color:white;
    margin:0px;
}
.ui-datepicker{
    border-color:#c0ccdb!important;
    box-shadow:3px 3px 3px #0002;
    width:auto!important;
    padding:.5rem;
    z-index:2000!important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
    padding:.3rem .5rem;
    border-radius:3px;
    background-color:white;
    border:1px solid #c0ccdb;
}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary{
    background-color:#f2f2f2;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{
    font-family:inherit;
}
.ui-datepicker-month,.ui-datepicker-year{
    border-radius:3px;
    border:1px solid #c0ccdb;
    margin:0.2rem!important;
    padding:.2rem .5rem;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
    background-color:lightgoldenrodyellow;
    border-color:orange;
    color:inherit;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
    border-color:steelblue;
    background-color:cornflowerblue;
    color:white;
}
.ui-datepicker .ui-datepicker-header{
    background:none;
    border:0px;
}
.ui-state-hover.ui-datepicker-next-hover{
    background:none;
    border:0px;
    right:2px;
    top:2px;
    transform:scale(1.1);
}
.ui-state-hover.ui-datepicker-prev-hover{
    background:none;
    border:0px;
    left:2px;
    top:2px;
    transform:scale(1.1);
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span{
    margin:0px;
    top:4px;
    left:0px;
}
.ui-widget-header .ui-icon{
    background:none;
    border:1px solid #c0ccdb;
    border-radius:3px;
    width:24px;
    height:24px;
}
.ui-widget-header .ui-icon.ui-icon-circle-triangle-e{
    background:#fff url(../icon/chev-right.png) center center no-repeat;
    background-size:14px;
}
.ui-widget-header .ui-icon.ui-icon-circle-triangle-w{
    background:#fff url(../icon/chev-right.png) center center no-repeat;
    background-size:14px;
    transform:rotateY(180deg);
}
.swal2-styled{
    min-width:100px;
}
.swal2-styled:focus,.swal2-styled:hover{
    outline:none!important;
    box-shadow:2px 2px 2px #0002 !important;
}
.swal2-styled:active{
    position:relative;
    top:2px;
}
.swal2-styled.swal2-confirm{
    background-color:lightseagreen!important;
}
.swal2-actions{
    direction:rtl;
}

.custom-control-label::before,.custom-control-label::after{
    width:20px;
    height:20px;
}
.custom-control .custom-control-label{
    height:20px;
    padding:1px 5px;
}
.custom-control .custom-control-input{
    z-index:2;
    margin-left:-25px;
    margin-top:5px;
    height:20px;
    width:20px;
    cursor:pointer;
}
*[data-deny]{
    display:none
}

/*override*/
.modal-backdrop.show{
    opacity:.3;
    background:black;
}
.card-title{
    font-weight:bold;
}
.header{
    text-align:left;
    color: #fff;
    border-radius:.25rem;
    font-size:12px;
    font-weight:bold;
    background:linear-gradient(45deg,lightgrey,antiquewhite);
    background:linear-gradient(45deg,var(--color-yellow-dark),var(--color-yellow-light));

    padding:.35rem 1.5rem;
    text-align:center;
    text-transform:uppercase;
    font-family:"Ubuntu",sans-serif;
    color:white;
    position:relative;
    z-index:5;
}
.header i+span{
    margin-left:.5rem;
}
.badge{
    font-size:90%;
    font-weight:500;
}
.modal.show{
    background:#0003;
}

.table-properties tr td:first-child{
    font-weight:600;
}
.font-title{
    font-weight:600;
    font-size:15px;
}
.tree-list ul,.tree-list ul li{
    list-style:none;
    list-style-type:none;
    padding:0px;
    margin:0px;
}
.tree-list ul ul{
    margin-left:1rem;
}
.tree-list li{
    padding:1rem 0;
    position:relative;
}

.tree-list li li:not(:last-child):before{
    content: "";
    height: calc(100% + 1rem);
    width: 1px;
    top: -8px;
    left: -12px;
    z-index: 0;
    border-left: 1px solid #c0ccdb;
    position: absolute;
}
.tree-list li li:last-child:before{
    content: "";
    height: 16px;
    width: 1px;
    top: -8px;
    left: -12px;
    z-index: 0;
    border-left: 1px solid #c0ccdb;
    position: absolute;
}
.tree-list li li:after{
    content: "";
    position: absolute;
    top: 8px;
    left: -12px;
    width: 10px;
    z-index: 0;
    border-top: 1px solid #c0ccdb;
}
.swal2-html-container{
    line-height:1.5!important;
    font-size:14px!important;
}
.bg-none{
    background:none!important;
}
.modal-content{
    border-radius:.35rem;
}
.modal-content>.modal-header:first-child,.modal-content>.modal-body:first-child{
    border-radius:.35rem .35rem 0 0;
}
.modal-content>.modal-body:last-child,.modal-content>.modal-footer:last-child{
    border-radius:0 0 .35rem .35rem;
}
b,strong{
    font-weight:500;
}
.font-bold{
    font-weight:500;
}
.badge.badge-primary{
    background:var(--color-primary)!important;
    color:white!important;
}
.badge.badge-danger{
    background:var(--color-danger)!important;
    color:white!important;
}
.badge.badge-warning{
    background:var(--color-danger)!important;
    color:white!important;
}
.badge.badge-success{
    background:var(--color-success)!important;
    color:white!important;
}
.badge.badge-info{
    background:var(--color-info)!important;
    color:white!important;
}
.badge.badge-muted{
    background:var(--color-muted)!important;
    color:#505050;
}
.swal2-html-container{
    text-transform:capitalize;
}
.badge.badge-enabled{
    background:var(--color-success);
}
.badge.badge-disabled{
    background:var(--color-danger);
}
.badge.badge-closed{
    background:var(--color-dark);
}
.badge.badge-approved{
    background:var(--color-primary);
}
.badge.badge-deleted{
    background:var(--color-danger);
}