@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
html,body{
    font-family: 'Poppins', sans-serif !important;
}
body.login{
    background-color: white;
}
.table-bordered thead th,.table-bordered tbody td,.table-bordered tfoot td,.table-bordered tfoot th{
    padding: 5px !important;    
}
.table-bordered thead tr th{
    font-weight:bold !important;
}
.table-bordered tbody tr.bg-primary{
    color: #ffffff !important;
}
.table-bordered tbody tr td{
    vertical-align: top !important;
}
.table-bordered tbody tr td ol{
    padding-left: 15px;
    padding-right: 15px;
}
.apps-login{
    margin-top: 60px;
}

.box {
    position: relative;
    background: #ffffff;
    width: 100%;
}
.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 10px;
}
.box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}
.dropzone-wrapper {
    border: 2px dashed #91b0b3;
    color: #92b0b3;
    position: relative;
    height: 150px;
}
.dropzone-desc {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    width: 40%;
    top: 50px;
    font-size: 12px;
}
.dropzone,
.dropzone:focus {
    position: absolute;
    outline: none !important;
    width: 100%;
    height: 150px;
    cursor: pointer;
    opacity: 0;
}
.dropzone-file,
.dropzone-file:focus {
    position: absolute;
    outline: none !important;
    width: 100%;
    height: 150px;
    cursor: pointer;
    opacity: 0;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
    background: #ecf0f5;
}
.preview-zone {
    text-align: center;
}
.preview-zone .box {
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}
div.form-control-plaintext{
    background-color:#f4f3f3;
    min-height: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.form-control-plaintext ol{
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
}
.fixed-bottom{
    background-color: white !important;
    border-top: 2px solid #eee9e9;
    padding-top: 10px;
    padding-bottom: 10px;
}
.fixed-bottom h4{
    font-weight: normal;
    margin: 0 !important;
}

/*modal fullscreen*/
.modal.modal-fullscreen .modal-dialog {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    max-width: none; 
}
.modal.modal-fullscreen .modal-header{
    position: fixed;
    width: 100vw; 
    z-index: 1060; 
    background-color: white;
}
.modal.modal-fullscreen .modal-body {
    height: 100vh;
    width: 99.5vw;
    margin-top: 50px; 
    margin-bottom: 50px;
}

.modal.modal-fullscreen .modal-body {
    overflow-y: auto; 
}
.modal.modal-fullscreen .modal-footer{
    position: fixed;
    width: 100vw; 
    z-index: 1060; 
    background-color: white; 
    bottom: 0; 
    left: 0;
}
.modal-fullscreen .modal-footer h4{
    font-weight: normal;
    margin: 0 !important;
}
body.fullscreen-mode.modal-open {
    overflow: hidden !important;
    padding-right: 0 !important; /* mencegah body bergeser */
    position: fixed;
    width: 100%;
}
.modal-footer .row{
    width: 100%;
}
/*end modal*/

/*start apps channel*/
.apps-channel img.card-img-top{
    height: 50px;
}
.apps-channel .apps-link-channel:hover .card,.apps-channel .apps-link-channel.active .card{
    border: 3px solid #327A82;
}
.apps-channel .apps-logo-bank{
    height: 80px;
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover;
}
/*end apps channel*/


/*start button*/
.btn-success{
    background-color: #439CAA;
}
.btn-success:hover{
    background-color: #439CAA;
}
.btn-group-mini .btn{
    font-size: 8pt !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}
.btn-link{
    color: #3B47B8 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.btn-link:hover,
.btn-link:focus,
.btn-link:active{
    color: #2f3a9b !important;
    text-decoration: none;
}
/*end button*/

/*modal*/
.modal.modal-lg{ 
    overflow: auto !important; 
}
.modal-title{
    margin: 0; 
    font-size: 13pt;
}
/*end modal*/


/*badge*/
.badge-menu{
    color:white !important;
    height: 22px !important;
    width: 22px !important;
    padding: 4px !important;
    border-radius: 100%;
    position: absolute;
    right: 5px;
    background-color: red;
    text-align: center;
}
/*end badge*/

/*datepicker*/
.datepicker{
    border: 1px solid #cccccc;
}

/*card*/
#list-channel .card{
    border: 2px solid white;
}
#list-channel a:hover .card{
    border: 2px solid #1D6738;
}
#list-channel a.active .card{
    border: 2px solid #1D6738;
}
#list-channel .image{
    width: 100%;
    height: 60px;
    text-align: center;
}
#list-channel .image img{
    height: 100%;
}

.apps-total h4{
    font-weight: bold;
    margin-top: 5px; 
    margin-bottom: 0;
    color: #1D6738;
}
.apps-total small{
    position: absolute; 
    top: -10px;
    color:#2061AC;
    font-weight: bold;
}
/*loading*/
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../../files/images/Skolastika.id.png) 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
/*select2*/
.select2-selection__rendered{
    margin-top:-10px !important;
}
del{
    color: #cccccc;
}

/*shimmer*/
.shimmer {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px; 
    display: inline-block;
    position: relative; 

    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: placeholderShimmer;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes placeholderShimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0; 
    }
}

.button-fixed-top{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
}

.table-input td{
    padding: 5px !important;
}

/*start user panel*/
.user-panel{
    color: white; 
    float: left; 
    padding-top:13px; 
    padding-right: 10px;
}
.user-panel .user-name{
    margin: 0; font-size: 10pt; text-align: right;
}
.user-panel .user-level{
    margin: 0; font-size: 10pt; text-align: right;
}
/*end user panel*/

.logo-large,.logo-small{
    height: 40px !important;
}


/*start font size*/
.fs-30{
    font-size: 30pt !important;
}
.fs-20{
    font-size: 20pt !important;
}
.fs-16{
    font-size: 16pt !important;
}
.fs-14{
    font-size: 14pt !important;
}
.fs-13{
    font-size: 13pt !important;
}
.fs-12{
    font-size: 12pt !important;
}
.fs-11{
    font-size: 11pt !important;
}
.fs-10{
    font-size: 10pt !important;
}
.fs-9-5{
    font-size: 9.5pt !important;
}
.fs-9{
    font-size: 9pt !important;
}
.fs-8-5{
    font-size: 8.5pt !important;
}
.fs-8{
    font-size: 8pt !important;
}
.fs-7-5{
    font-size: 7.5pt !important;
}
.fs-7{
    font-size: 7pt !important;
}
/*start shadow*/
.shadow-custom{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
/*end shadow*/
/*end font size*/
.apps-name{
    position: absolute; 
    top: 10px; 
    left: 90px;
}
/*start notification*/
.notification-item-list{
    max-height: 80vh; 
    overflow-y: auto;
}
.notification-item{
    position: relative;
}
.notification-remove{
    position: absolute; 
    top: 10px; 
    right: 10px;
    background: none !important;
    border: 2px solid red;
    border-radius: 100%;
    color: red;
    width: 20px;
    height: 20px;
    font-size: 8pt;
    padding: 0 !important;
}
/*end notification*/
/* fix select2 inside input-group */
.input-group .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}

/* tinggi box */
.input-group-sm .select2-selection--single {
    height: calc(1.8125rem + 2px) !important;
}

/* INI YANG PALING PENTING -> center text */
.input-group-sm .select2-selection__rendered {
     display: flex !important;
    align-items: center !important;
    padding-left: .1rem !important;
}

/* posisi arrow */
.input-group-sm .select2-selection__arrow {
    height: calc(1.8125rem + 2px) !important;
}
/*start tinymce*/
.mce-fullscreen {
    z-index: 999999 !important;
}

.mce-fullscreen .mce-toolbar,
.mce-fullscreen .mce-container,
.mce-fullscreen .mce-panel {
    z-index: 999999 !important;
}
/*end tinymce*/
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
    .table-bordered tr td:first-child{
        padding-left:25px !important;
    }
    .table-bordered tr.child td{
        padding-left:5px !important;
        padding-right:5px !important;
    }
    .table-bordered tr.child td ul.dtr-details{
        width: 100%;
    }
    .table-bordered tr.child td ul.dtr-details li{
        text-align: center !important;
    }
    /*start userpanel*/
    .user-panel{
        display:none;
    }
    /*end user panel*/
    .apps-name{
        display: none;
    }
}