/* ============================================================
   PT BPR CERDAS
   MOBILE DASHBOARD CSS
   ONLY MOBILE DEVICE
   Desktop tidak disentuh
============================================================ */



@media (max-width:768px){



/* ============================================================
   GLOBAL MOBILE
============================================================ */


html,
body{

    overflow-x:hidden;

}


body{

    background:#f4f6fb;

}


.page{

    min-height:100vh;

}



/* ============================================================
   PAGE WRAPPER
============================================================ */


.page-wrapper{

    margin-left:0!important;

    width:100%;

}



/* ============================================================
   MOBILE NAVBAR
============================================================ */


.navbar-bank{

    height:70px;

    padding:0 12px;

}


.navbar-bank .container-fluid{

    padding:0;

}



.navbar-toggler{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    border:none;

    background:#f1f5f9;

}


.navbar-toggler i{

    font-size:25px;

    color:#163B73;

}



.navbar-bank .page-title{

    font-size:17px;

    line-height:20px;

}


.navbar-bank .small{

    font-size:11px;

}



/* icon kanan */

.navbar-bank .btn-icon{

    width:38px;

    height:38px;

}


.navbar-bank .dropdown{

    margin-right:5px!important;

}



/* avatar */

.navbar-bank .avatar{

    width:38px;

    height:38px;

}



/* ============================================================
   SIDEBAR MOBILE
============================================================ */


.sidebar-bank{


    position:fixed!important;

    top:0;

    left:0;

    width:280px;

    height:100vh;


    z-index:1050;


    transform:translateX(-100%);


    transition:
    transform .35s ease;


}



/* aktif */

.sidebar-bank.show{


    transform:translateX(0);


}



/* isi sidebar */


.sidebar-bank .container-fluid{


    height:100%;

    display:flex;

    flex-direction:column;


}




/* ============================================================
   SIDEBAR BRAND
============================================================ */


.sidebar-logo{


    width:65px;

    height:65px;


}


.sidebar-logo i{


    font-size:32px;


}



.sidebar-title{


    font-size:18px;


}



.sidebar-subtitle{


    font-size:12px;


}



/* ============================================================
   SIDEBAR MENU
============================================================ */


.sidebar-bank .navbar-nav{


    gap:4px;


}



.sidebar-bank .nav-link{


    margin:0 8px;


    padding:12px 14px;


    border-radius:12px;


}



.nav-link-icon{


    width:32px;


}



/* ============================================================
   SIDEBAR FOOTER
============================================================ */


.sidebar-footer{


    margin-top:auto;


    padding-bottom:20px;


}



.user-card{


    padding:15px;


}



.user-avatar{


    width:55px;

    height:55px;


}



/* ============================================================
   OVERLAY
============================================================ */


#sidebarOverlay{


    position:fixed;


    inset:0;


    background:
    rgba(0,0,0,.45);


    z-index:1040;


    display:none;


}



#sidebarOverlay.show{


    display:block;


}



/* ============================================================
   CONTENT DASHBOARD
============================================================ */


.page-body{


    padding-top:10px;


}



.container-xl{


    padding-left:12px!important;

    padding-right:12px!important;


}



/* ============================================================
   DASHBOARD CARD
============================================================ */


.card{


    border-radius:16px;


    margin-bottom:15px;


}



.card-body{


    padding:18px;


}



/* judul card */


.card-title{


    font-size:15px;


}



/* ============================================================
   STAT CARD
============================================================ */


.row{


    margin-left:-6px;

    margin-right:-6px;


}



.row > *{


    padding-left:6px;

    padding-right:6px;


}



/* ============================================================
   CHART
============================================================ */


.apexcharts-canvas,


.apexcharts-svg{


    width:100%!important;


}



.apexcharts-toolbar{


    display:none;


}



/* ============================================================
   TABLE MONITORING
============================================================ */


.table-responsive{


    width:100%;


    overflow-x:auto;


    -webkit-overflow-scrolling:touch;


}



.table{


    white-space:nowrap;


}



.table th,
.table td{


    font-size:13px;


    padding:10px;


}



/* ============================================================
   BUTTON
============================================================ */


.btn{


    border-radius:12px;


}



/* ============================================================
   LOGIN CARD
============================================================ */


.sidebar-bank .card-body{


    padding:15px;


}




}
/* =====================================================
   MOBILE FINISHING FIX
===================================================== */


@media(max-width:768px){


/* =====================================================
   1. LOGIN BUTTON MOBILE
===================================================== */


.navbar-bank .btn-warning{

    white-space:nowrap;

    padding:8px 12px;

    font-size:13px;

}



/* cegah navbar pecah */

.navbar-bank .container-fluid{

    flex-wrap:nowrap;

}


.navbar-bank .flex-grow-1{

    min-width:0;

}



/* =====================================================
   2. SIDEBAR ABOVE NAVBAR
===================================================== */


/*
   Navbar tetap terlihat
   sidebar sedikit turun
*/


.sidebar-bank{

    top:70px!important;

    height:calc(100vh - 70px)!important;

    z-index:1060!important;

}



.navbar-bank{

    position:relative;

    z-index:1070;

}



/* overlay jangan menutup navbar */


#sidebarOverlay{

    top:70px;

    z-index:1050;

}



/* =====================================================
   3. SIDEBAR BRAND POSITION
===================================================== */


.sidebar-bank .container-fluid{

    padding-top:20px;

}



.sidebar-bank .text-center.py-4{

    padding-top:25px!important;

    padding-bottom:20px!important;

}



/* logo jangan transparan */


.sidebar-logo{

    background:#ffffff!important;

    box-shadow:

    0 8px 20px rgba(0,0,0,.15);

}



.sidebar-logo i{

    color:#FF8A00!important;

    opacity:1!important;

}



.sidebar-title{

    color:#ffffff!important;

}



.sidebar-subtitle{

    color:#d5deea!important;

}



}
/* =====================================================
   MOBILE SIDEBAR FINAL BRAND FIX
===================================================== */


@media(max-width:768px){


/* =====================================
   SIDEBAR NAVY BACKGROUND
===================================== */


.sidebar-bank{

    background:
    linear-gradient(
        180deg,
        #163B73 0%,
        #102B54 100%
    )!important;


    border:none!important;


    box-shadow:
    8px 0 25px rgba(0,0,0,.25);


}



/* =====================================
   BRAND CENTER POSITION
===================================== */


.sidebar-bank .container-fluid{

    padding-left:20px!important;

    padding-right:20px!important;

}



.sidebar-bank .text-center.py-4{


    width:100%;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    padding-top:35px!important;


}



/* =====================================
   LOGO BANK
===================================== */


.sidebar-logo{


    width:75px!important;


    height:75px!important;


    background:
    rgba(255,255,255,.12)!important;


    border-radius:20px;


    display:flex!important;


    align-items:center;


    justify-content:center;


    margin:auto!important;


}



.sidebar-logo i{


    color:#FF8A00!important;


    font-size:38px!important;


    opacity:1!important;


}




/* =====================================
   TITLE
===================================== */


.sidebar-title{


    width:100%;


    text-align:center;


    color:white!important;


    font-size:20px!important;


    margin-top:15px;


    white-space:nowrap;


}



.sidebar-subtitle{


    width:100%;


    text-align:center;


    color:#cbd5e1!important;


}



/* =====================================
   MENU START POSITION
===================================== */


.sidebar-divider{


    margin-top:10px!important;


}



.sidebar-heading{


    padding-left:5px;


}



}
/* =====================================================
   FINAL MOBILE SIDEBAR ALIGNMENT FIX
===================================================== */


@media(max-width:768px){


/* =====================================
   SIDEBAR HEIGHT FIX
===================================== */


.sidebar-bank{

    overflow:hidden!important;

}



.sidebar-bank .container-fluid{


    padding-left:0!important;

    padding-right:0!important;

    padding-top:0!important;


}



/* =====================================
   BRAND CENTER
===================================== */


.sidebar-bank .text-center.py-4{


    width:100%;

    padding-top:25px!important;

    padding-left:15px;

    padding-right:15px;


}




/* =====================================
   MENU CENTER ALIGN
===================================== */


.sidebar-bank .navbar-collapse{


    width:100%;


}



.sidebar-bank .navbar-nav{


    width:100%;


}



.sidebar-bank .nav-item{


    width:100%;


}



.sidebar-bank .nav-link{


    margin-left:15px!important;

    margin-right:15px!important;


    width:calc(100% - 30px);


}



/* icon + tulisan seimbang */


.sidebar-bank .nav-link-title{


    flex:1;

}



/* =====================================
   FOOTER LOGIN / USER FIX
===================================== */


.sidebar-footer{


    position:absolute;


    bottom:0;


    left:0;


    width:100%;


    padding:15px!important;


    background:
    linear-gradient(
        180deg,
        transparent,
        rgba(0,0,0,.15)
    );


}



/* kartu login tidak keluar */

.sidebar-footer .card{


    margin-bottom:0!important;


}



.sidebar-footer .card-body{


    padding:12px!important;


}



/* user card */


.user-card{


    padding:12px!important;


}



/* =====================================
   SIDEBAR INTERNAL SCROLL
===================================== */


.sidebar-bank .container-fluid{


    overflow-y:auto;

    padding-bottom:180px!important;


}



}
/* =====================================================
   FINAL MOBILE SIDEBAR POLISH
===================================================== */


@media(max-width:768px){


/* =====================================
   SIDEBAR BENAR-BENAR FIXED
===================================== */


.sidebar-bank{

    position:fixed!important;

    top:70px!important;

    bottom:0!important;

    height:auto!important;

    overflow:hidden!important;

    overscroll-behavior:none;

}



/* sidebar internal scroll */

.sidebar-bank .container-fluid{


    height:100%!important;


    overflow-y:auto!important;


    overflow-x:hidden!important;


    padding-bottom:120px!important;


}



/* =====================================
   FOOTER NAIK SEDIKIT
===================================== */


.sidebar-footer{


    position:absolute!important;


    bottom:20px!important;


    left:0;


    width:100%;


    padding:12px 15px!important;


}



/* login card */

.sidebar-footer .card{


    margin-bottom:0!important;


}



/* login icon */

.sidebar-footer .ti-lock{


    font-size:32px!important;


}



/* teks administrator */

.sidebar-footer h4{


    font-size:16px!important;


    margin-bottom:5px!important;


}



/* tombol login */

.sidebar-footer .btn{


    padding:9px!important;


}



/* =====================================
   KUNCI BODY SAAT SIDEBAR TERBUKA
===================================== */


body.sidebar-open{


    overflow:hidden!important;


}




}
/* =====================================================
   SIDEBAR LOCK BODY WHEN OPEN
===================================================== */


@media(max-width:768px){


body.sidebar-open{

    overflow:hidden!important;

    position:fixed!important;

    width:100%;

    height:100%;

}



/* sidebar tetap menempel */

.sidebar-bank.show{

    position:fixed!important;

    top:70px!important;

    bottom:0!important;

    height:calc(100vh - 70px)!important;

    overflow:hidden!important;


}



/* isi sidebar yang boleh scroll */

.sidebar-bank.show .container-fluid{


    height:100%!important;


    overflow-y:auto!important;


    overflow-x:hidden!important;


}



}
html.sidebar-open,
body.sidebar-open{

    overflow:hidden!important;

}
/* =====================================================
   MOBILE SIDEBAR FOOTER POSITION FIX
===================================================== */


@media(max-width:768px){


/* naikkan area administrator/login */

.sidebar-footer{

    bottom:70px!important;

    padding:10px 15px!important;

}



/* card login */

.sidebar-footer .card{


    margin:0!important;

}



/* isi card lebih compact */

.sidebar-footer .card-body{


    padding:10px!important;


}



/* icon lock administrator */

.sidebar-footer .ti-lock{


    font-size:28px!important;

    margin-bottom:5px!important;


}



/* tulisan administrator */

.sidebar-footer h4{


    margin-top:5px!important;

    margin-bottom:4px!important;

    font-size:15px!important;


}



/* deskripsi */

.sidebar-footer small{


    font-size:11px!important;


}



/* tombol login */


.sidebar-footer .btn{


    padding:8px!important;

    font-size:13px!important;


}



/* jika user login */


.user-card{


    padding:10px!important;


}


.user-avatar{


    width:50px!important;

    height:50px!important;


}



}