/* =========================================
   RAIN PANEL
   MENU STYLE
========================================= */


/* =========================================
   FONT
========================================= */

@font-face{

    font-family:"Poppins";

    src:url("../fonts/Poppins-Regular.woff2")
        format("woff2");

    font-weight:400;

    font-style:normal;

    font-display:swap;

}


/* =========================================
   TOMBOL MENU
========================================= */

.menu-toggle{

    position:fixed;

    top:12px;

    left:12px;

    z-index:1100;

    width:42px;

    height:42px;

    border:0;

    border-radius:6px;

    font-size:23px;

    cursor:pointer;

    color:#fff;

    background:rgba(17,24,39,.65);

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;

}


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

.sidebar{

    position:fixed;

    top:0;

    left:-235px;

    width:235px;

    height:100vh;

    z-index:1000;

    padding:15px;

    overflow-y:auto;

    transition:left .3s ease;

    background:rgba(15,24,39,.82);

    backdrop-filter:blur(8px);

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================
   SIDEBAR TERBUKA
========================================= */

.sidebar.active{

    left:0;

}


/* =========================================
   HEADER SIDEBAR
========================================= */

.sidebar-header{

    color:#fff;

    font-size:18px;

    font-weight:bold;

    padding:12px 0 18px;

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;

}


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

.sidebar-menu a{

    display:block;

    padding:11px;

    margin:5px 0;

    color:#fff;

    text-decoration:none;

    border-radius:5px;

    background:rgba(255,255,255,.08);

    font-size:14px;

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;

}


.sidebar-menu a:hover{

    background:rgba(37,99,235,.6);

}


/* =========================================
   JUDUL MENU
========================================= */

.menu-title{

    padding:11px;

    margin-top:6px;

    color:#fff;

    cursor:pointer;

    border-radius:5px;

    background:rgba(255,255,255,.05);

    font-size:14px;

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================
   SUBMENU DEFAULT TERTUTUP
========================================= */

.submenu{

    display:none;

    padding-left:8px;

}


.submenu.active{

    display:block;

}


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

.overlay{

    display:none;

    position:fixed;

    inset:0;

    z-index:900;

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

}


.overlay.active{

    display:block;

}