@import url('https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,500,700,800');
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap');


:root{
    --prime-color:#12133D;
    --second-color:#1D1F5E;
}
/* RESET */
*,
*:after,
*::before {
    box-sizing: border-box;
    margin:0px;
    padding:0px;
}
html{
    font-size:12px;
}
/* GENERAL */
body{
    background: #F6F9FC;
    font-family: 'Raleway',sans-serif !important;
    color:#555;
    overflow-x: hidden;
    position: relative;
    font-weight:500;
}
a{
    color:var(--second-color);
}
.overflow-visible{
    overflow:visible;
}
.font-small{
    font-size:12px;
}
.object-fit-cover{
    object-fit: cover;
}
.object-fit-contain{
    object-fit: contain;
}
article ul,
article ol{
    margin-left:2em;
    line-height:200%;
}
/* BG & COLOR */
.bg-none{
    background: none!important;
}
.bg-prime{
    background: var(--prime-color)!important;
}
.bg-second{
    background: var(--second-color)!important;
}
.bg-gray{
    background:#efefef!important;
}
.bg-space-gray{
    background:#bcbcbc!important;
}
.bg-orange{
    background:#f5a81e!important;
}
.text-prime{
    color:var(--prime-color)!important;
}
.text-second{
    color:var(--second-color)!important;
}
.text-orange{
    color: #fd7e14
}
.text-red{
    color: #FF0000
}
.text-yellow{
    color: #FFFF00
}
.bg-prime-gradient-transparent{
    background: linear-gradient(rgba(0,0,0,0), var(--prime-color));
}
.bg-dark-gradient-transparent{
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
}
/* BUTTON */
.btn.btn-circle{
    width:40px;
    height:40px;
    line-height:40px;;
    padding:0;
    text-align:center;
    border-radius:50em;
}
.btn.btn-circle-sm{
    width:30px;
    height:30px;
    line-height:30px;;
    padding:0;
    text-align:center;
    border-radius:50em;
}
/* MATERIAL ICONS */
.material-icons{
    vertical-align: middle;
    display: inline-block;
    font-size:1.5rem;
}
.btn .material-icons{
    font-size:1.5rem;
}
.input-group-prepend .material-icons{
    font-size:1.5rem;
}
.table th .material-icons{
    font-size:1.2rem;
}
.table td .material-icons{
    font-size:1.2rem;
}
/* FORM */
.form label{
    color:var(--prime-color);
}
.form-border-bottom{
    border:none;
    border-bottom:1px solid #ddd;
    border-radius:0;
    outline: none!important;
    box-shadow:none!important;
    padding-left:0;
    padding-right:0;
}
.form-border-bottom:focus{
    border-bottom-color:var(--prime-color);
}
.form-border-bottom.bootstrap-select>.dropdown-toggle.btn-light{
    border:none;
    border-bottom:1px solid #ddd;
    border-radius:0;
    padding-left:0;
    padding-right:0;
}
.form-border-bottom.bootstrap-select>.dropdown-toggle.btn-light:focus{
    border-bottom-color:var(--prime-color);
}
/* TABLE */
table.table tr td{
    background:#fff;
    border-right:none;
    border-left:none;
    border-top:none;
    border-bottom:4px solid #F6F9FC;
}
.table thead th{
    border-color:#fff2;
}

/* add sorting icons to gridview sort links */

#pjax-table th a:before, .grid-view th a:before, a.asc:before, a.desc:before, a.sort:before {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

#pjax-table th a:not(.asc):before, #pjax-table th a:not(.desc):before, .grid-view th a:not(.asc):before, .grid-view th a:not(.desc):before, .sort:before {
    content: "\f0dc\2002";
}

a.asc:before {
    content: "\f0de\2002" !important;
}

a.desc:before {
    content: "\f0dd\2002" !important;
}

.gird-table thead {
    background: var(--second-color)!important;
}

.gird-table thead a {
    color: #FFF !important;
}

.gird-table thead th {
    color: #FFF !important;
}

/* NAVBAR */
#navbar{
    position: sticky;
    position: -webkit-sticky;
    top:0;
    z-index: 99;
    transition: .3s ease;
    padding:0;
    background:var(--prime-color);
    margin:0;
}
.navbar-brand h4{
    font-size: 20px;
    margin:0;
    font-weight: bold;
    color:#333;
}
.navbar-brand h4 span{
    font-size:12px;
    font-weight: normal;
    vertical-align: middle;
    margin-left:10px;
    color:#fffa;
}
.navbar-brand h5{
    margin:0;
    font-size: 11px;
    color:#aaa;
    font-weight: 400;
}
#navbar .navbar-nav > li > a{
    font-size:12px;
    color:#fff;
    font-weight: 500;
    padding:0 15px;
    height:70px;
    line-height:70px;
}
#navbar .navbar-nav > li > a.active{
    border-bottom: 2px solid #fff;
    color:#fff;
}
#navbar .navbar-nav > li.nav-border{
    border-left:1px solid #fff2;
}
#navbar .navbar-nav > li.active > a{
    border-bottom: 2px solid #fff;
    color:#fff;
}
#navbar .navbar-nav > li > .nav-icon i{
    color:#BBBDC7;
}
#navbar .navbar-nav > li > .nav-icon svg path{
    fill:#BBBDC7;
}
#navbar .navbar-nav > li > .nav-icon:hover i{
    color:#fff;
}
#navbar .navbar-nav > li > .nav-icon:hover svg path{
    fill:#fff;
}
#navbar .dropdown-menu{
    border-radius:2px;
    border:none;
    box-shadow:0px 3px 10px rgba(0,0,0,0.1);
    min-width:220px;
}
.nav-user{
    font-size:12px;
}
.nav-user h6{
    font-size:14px;
    font-weight: 500;
}
#navbar .btn{
    font-size:12px;
    font-weight:bold;
}
/* NAV PANEL */
nav.panel{
    border-bottom:1px solid #e6e6e6;
}
.nav-panel a{
    font-weight:bold;
    color:#5e5e79;
    padding:20px 10px;
    font-weight:600;
}
.nav-panel a:hover{
    background:#eee;
    border-bottom:2px solid transparent;
}
.nav-panel > li.active > a{
    color:var(--prime-color);
    border-bottom:2px solid var(--prime-color);
    font-weight:bold;
}
/* PAGINATION */
.pagination{
    margin:0;
    padding:0;
}
.pagination a{
    border:1px solid #ccc;
    color:#555;
}
.pagination .material-icons{
    font-size: inherit;
}
.rounded-50{
    border-radius:50%;
}

/* Bootstrap Pagination & Pager Theme */
.pagination{
    margin:0px!important;
    padding:0px!important;
    border-radius: 0!important;
}
.pagination li{
    padding:0px!important;
    margin:0px!important;
    float: left;
}
.pagination li a,
.pager li a{
    background:#fff;
    color:#555;
    width: auto!important;
    padding:5px 10px!important;
    margin:0!important;
    border:none;
    border-right: 1px solid #eee;
}
.pagination li a:hover,
.pager li a:hover{
    background:#eee;
    z-index: 99;
    color:#111;
}
.pagination li.active a,
.pagination li.active a:hover,
.pager li.active a,
.pager li.active a:hover{
    background:#f5f5f5;
    border:none;
    color:#111;
    font-weight: bold;
}
.pagination li.disabled {
    display:none;
}
.pagination li.disabled a:hover,
.pager li.disabled a,
.pager li.disabled a:hover{
    color:#aaa;
    background:#eee;
}
/* BOOTSTRAP SELECT */
.bootstrap-select>.dropdown-toggle.btn-light{
    background:#fff;
    border:1px solid #ced4da;
    outline: none!important;
    box-shadow:none!important;
}
.bootstrap-select .dropdown-toggle .filter-option{
    padding-right:20px;
}
.bootstrap-select .dropdown-menu{
    border-radius:2px;
    border:none;
    box-shadow:0px 3px 10px rgba(0,0,0,0.1);
}
.bootstrap-select .dropdown-item.active, .dropdown-item:active{
    background:#b6b6b6;
}
/* MODAL */
.modal.show{
    display:table-cell!important;
    vertical-align: middle;
}
.modal-backdrop{
    background:var(--second-color);
}
.modal-backdrop.show{
    opacity:0.9;
}
.modal-dialog{
    height:100vh;
    width:100vw;
    max-width:100vw;
    display: table-cell;
    vertical-align: middle;
    margin:0!important;
}
.modal-dialog .modal-content{
    width:500px;
    max-width:100%;
    margin:0 auto;
}
.modal-header{
    border:none;
}
.modal-footer{
    border:none;
}

.empty {
    text-align: center;
}
/* CUSTOM DATEPICKER */
.datepicker{
    padding:0!important;
    box-shadow:0px 5px 10px rgba(0,0,0,0.1);
    border:none;
    border-radius:5px;
    overflow:hidden;
}
.datepicker table thead{
    background: var(--prime-color);
    color:#fff;
}
.datepicker table thead th{
    border-radius:0;
    padding:10px;
    background: none!important;
}
.datepicker table td.day{
    padding:5px;
    text-shadow:none!important;
}
.datepicker table td.day.active{
    background:#F5A81E!important;
}

/*custom datepiker jui*/
.ui-datepicker-prev{
    background: white !important;
}
.ui-datepicker-next{
    background: white !important;
}
.ui-datepicker-header{
    background: var(--prime-color)!important;
    color: white!important;
}
.ui-datepicker-calendar thead {
    background: var(--prime-color)!important;
    color: white!important;
}
.ui-state-default {
    border: none!important;
    background:unset !important;
}
.ui-state-active{
    background: #F5A81E!important;
}

footer{
    position: sticky;
    position: -webkit-sticky;
    bottom:0;
    z-index:99;
    background:#F6F9FC;
}
/* RESPONSIVE */
@media (max-width: 768px){
    #navbar{
        padding:15px;
    }
}
@media (max-width: 480px){
    .navbar-toggler{
        border:none;
        outline: none!important;
    }
    #navbar .navbar-nav > li.nav-border{
        border:none;
    }
    #navigation{
        display: flex;
        flex-direction:column;
        justify-content: flex-start!important;
        align-items: start;
        flex:1;
        position: fixed;
        top:61.5px;
        bottom:0;
        left:0;
        right:0;
        background: var(--prime-color);
        max-height:none!important;
        height:auto!important;
        visibility: hidden;
        opacity: 0;
        transform:translateX(100%);
        transition: .3s ease;
    }
    #navigation.show{
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
    #navigation > .navbar-nav{
        width:100%;
    }
    #navigation .navbar-nav li a{
        padding:20px;
        height:auto;
        line-height: 100%;
    }
    #navigation .navbar-nav li.active a{
        border:none;
    }
    .nav-menubox{
        order:2;
        padding:15px;
    }
    .nav-menubox > li > a{
        border-bottom:1px solid #fff2!important;
        margin:0 0 10px;
        font-size:14px!important;
    }
    .nav-userbox{
        background: #0003;
        margin:0;
        padding:15px;
        order: 0;   
    }
    #navigation .nav-userbox.navbar-nav li a{
        padding:15px;
    }
    #navigation .dropdown-menu{
        position: fixed;
        top:auto;
        bottom:0;
        left:0;
        right:0;
        width:auto;
        min-width:auto;
        z-index:999;
    }
}
    
/*select2 custom*/
.select2-container--krajee .select2-selection {
    box-shadow : none !important;
    -webkit-box-shadow : none !important;
    border: none!important;;
    border-bottom: 1px solid #ddd!important;;
}
.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #66afe9!important;
}
.select2-selection__arrow{
    border-left: none!important;
}
.dropdown-menu-notifikasi{
    right: 20;
    left: auto;
    max-height: 250px;
    overflow: auto;
}
.dropdown-menu-notifikasi ul{
    list-style: none;
    padding: 5px;
}
.dropdown-menu-notifikasi ul li span{
    color: #a77b7b
}
.dropdown-menu-notifikasi ul li label{
    margin-bottom: 0px !important;
}
.tox-statusbar__branding{
    display: none !important;
}