:root{
    --sidebar:#172536;
    --sidebar-deep:#142333;

    --green:#39c45c;
    --green-dark:#20a94a;

    --text:#172033;
    --muted:#667085;

    --border:#e4e8ee;
    --bg:#f6f8fb;
    --white:#fff;

    --blue:#1677ff;
    --yellow:#e9b800;
    --purple:#6639c8;
    --red:#e5484d;
}

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;

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

    background:var(--bg);
    color:var(--text);
}

body{
    min-height:100vh;
}

a{
    color:inherit;
}

button,
input,
select,
textarea{
    font:inherit;
}


/* =========================================================
   APP SHELL
========================================================= */

.sidebar{
    position:fixed;

    inset:
        0
        auto
        0
        0;

    width:270px;

    background:
        linear-gradient(
            180deg,
            var(--sidebar) 0%,
            var(--sidebar-deep) 100%
        );

    color:#fff;

    z-index:1000;

    display:flex;
    flex-direction:column;

    box-shadow:
        2px 0 12px
        rgba(15,23,42,.08);
}


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

.sidebar-brand{
    min-height:112px;

    padding:
        22px;

    display:flex;

    align-items:center;

    gap:13px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

.sidebar-brand-logo{
    width:46px;
    height:46px;

    flex:
        0 0 46px;

    border:
        3px solid
        var(--green);

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    color:var(--green);

    font-size:29px;
    font-weight:700;
}

.sidebar-brand-title{
    font-size:19px;
    font-weight:700;

    letter-spacing:.2px;
}

.sidebar-brand-subtitle{
    margin-top:4px;

    color:#43d463;

    font-size:14px;
    font-weight:600;
}


/* =========================================================
   SIDEBAR - MENU AREA
========================================================= */

.sidebar-menu-wrapper{
    flex:1;

    overflow-y:auto;

    padding:
        8px
        12px;
}


/* scrollbar */

.sidebar-menu-wrapper::-webkit-scrollbar{
    width:4px;
}

.sidebar-menu-wrapper::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar-menu-wrapper::-webkit-scrollbar-thumb{
    background:
        rgba(255,255,255,.12);
}


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

.sidebar-section-title{
    padding:
        18px
        12px
        9px;

    color:#8d9bab;

    font-size:11px;
    font-weight:700;

    letter-spacing:.9px;
}


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

.sidebar-menu{
    display:flex;

    flex-direction:column;

    gap:3px;
}

.sidebar-menu-item{
    min-height:47px;

    padding:
        0
        13px;

    display:flex;

    align-items:center;

    gap:12px;

    color:#dfe6ed;

    text-decoration:none;

    border-left:
        3px solid
        transparent;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.sidebar-menu-item:hover{
    background:
        rgba(255,255,255,.055);

    color:#fff;
}

.sidebar-menu-item.active{
    background:
        rgba(57,201,94,.13);

    border-left-color:
        var(--green);

    color:#fff;
}

.sidebar-menu-icon{
    width:25px;
    height:25px;

    flex:
        0 0 25px;

    display:flex;

    align-items:center;
    justify-content:center;

    color:#9eacba;

    font-size:19px;
}

.sidebar-menu-item:hover
.sidebar-menu-icon{
    color:#fff;
}

.sidebar-menu-item.active
.sidebar-menu-icon{
    color:var(--green);
}

.sidebar-menu-text{
    font-size:14px;
    font-weight:600;
}


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

.sidebar-divider{
    height:1px;

    margin:
        13px
        8px;

    background:
        rgba(255,255,255,.07);
}


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

.sidebar-bottom{
    padding:
        15px
        20px
        18px;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}

.sidebar-status{
    display:flex;

    align-items:center;

    gap:8px;

    color:#cfd8e2;

    font-size:12px;
}

.sidebar-status-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#39c95e;

    box-shadow:
        0 0 0 3px
        rgba(57,201,94,.12);
}

.sidebar-copyright{
    margin-top:9px;

    color:#758596;

    font-size:11px;
}

.sidebar-copyright span{
    margin:
        0
        4px;
}


/* =========================================================
   KOMPATIBILITAS SIDEBAR LAMA
   ---------------------------------------------------------
   Class lama tetap dipertahankan supaya halaman lama
   tidak langsung rusak apabila masih menggunakannya.
========================================================= */

.brand{
    min-height:112px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:
        22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}

.brand-logo{
    width:46px;
    height:46px;

    border:
        3px solid
        var(--green);

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    color:var(--green);

    font-size:29px;
}

.brand-title{
    font-size:19px;
    font-weight:700;
}

.brand-subtitle{
    margin-top:4px;

    color:#43d463;

    font-size:14px;
    font-weight:600;
}

.menu-title{
    padding:
        18px
        24px
        9px;

    color:#8d9bab;

    font-size:11px;

    font-weight:700;

    letter-spacing:.9px;
}

.main-menu{
    padding:
        0
        12px;
}

.main-menu a{
    display:flex;

    align-items:center;

    gap:12px;

    min-height:47px;

    padding:
        0
        13px;

    margin:
        3px
        0;

    border-left:
        3px solid
        transparent;

    color:#dfe6ed;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:
        background .15s ease,
        color .15s ease;
}

.main-menu a:hover{
    background:
        rgba(255,255,255,.055);

    color:#fff;
}

.main-menu a.active{
    background:
        rgba(57,201,94,.13);

    border-left-color:
        var(--green);

    color:#fff;
}

.menu-icon{
    width:25px;

    text-align:center;

    font-size:19px;

    flex:
        0 0 25px;

    color:#9eacba;
}

.main-menu a:hover .menu-icon{
    color:#fff;
}

.main-menu a.active .menu-icon{
    color:var(--green);
}

.sidebar-footer{
    margin-top:auto;

    padding:
        15px
        20px
        18px;

    color:#cfd8e2;

    font-size:12px;

    line-height:1.8;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}


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

.sidebar-overlay{
    display:none;
}


/* =========================================================
   MAIN
========================================================= */

.main{
    min-height:100vh;

    margin-left:270px;
}

.topbar{
    height:92px;

    padding:
        0
        26px;

    background:#fff;

    border-bottom:
        1px solid
        var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;
}

.sidebar-toggle{
    border:0;

    background:transparent;

    color:#536274;

    font-size:27px;

    line-height:1;

    cursor:pointer;
}

.topbar-clock{
    text-align:right;
}

.topbar-date{
    color:#536274;

    font-size:14px;

    margin-bottom:7px;
}

.topbar-time{
    color:var(--text);

    font-size:15px;
}

.content{
    max-width:1500px;

    margin:
        0
        auto;

    padding:
        30px
        28px;
}

.site-footer{
    margin-left:0;

    width:100%;

    padding:
        18px
        28px
        28px;

    color:#667085;

    font-size:13px;

    background:var(--bg);

    text-align:center;
}


/* =========================================================
   COMMON PAGE ELEMENTS
========================================================= */

.page-heading{
    display:flex;

    align-items:center;

    gap:15px;
}

.page-heading-icon{
    width:44px;
    height:44px;

    border-radius:50%;

    background:#23354a;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;
}

.page-heading h1{
    margin:0;

    font-size:30px;
}

.page-heading p{
    margin:
        9px
        0
        0;

    color:#5e6d80;

    font-size:16px;
}

.panel{
    background:#fff;

    border:
        1px solid
        var(--border);

    box-shadow:
        0 2px 7px
        rgba(15,23,42,.03);
}

.panel-title{
    font-size:18px;

    font-weight:700;
}


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

.btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:40px;

    padding:
        0
        15px;

    border:
        1px solid
        #dce2e9;

    background:#fff;

    color:#24364a;

    text-decoration:none;

    cursor:pointer;
}

.btn:hover{
    background:#f8fafc;
}

.btn-primary{
    background:var(--green);

    border-color:var(--green);

    color:#fff;
}

.btn-primary:hover{
    background:var(--green-dark);

    border-color:var(--green-dark);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .sidebar{
        width:270px;

        transform:
            translateX(-100%);

        transition:
            transform .2s ease;
    }

    body.sidebar-open
    .sidebar{
        transform:
            translateX(0);
    }

    .sidebar-overlay{
        position:fixed;

        inset:0;

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

        z-index:999;

        opacity:0;

        pointer-events:none;

        display:block;

        transition:
            opacity .2s ease;
    }

    body.sidebar-open
    .sidebar-overlay{
        opacity:1;

        pointer-events:auto;
    }

    .main{
        margin-left:0;
    }

    .site-footer{
        margin-left:0;
        text-align:center;
    }

    .sidebar{
        width:270px;

        transform:translateX(-100%);

        transition:transform .2s ease;
    }

    body.sidebar-open .sidebar{
        transform:translateX(0);
    }

    .sidebar-overlay{
        position:fixed;
        inset:0;

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

        z-index:999;

        opacity:0;

        pointer-events:none;

        display:block;

        transition:opacity .2s ease;
    }

    body.sidebar-open .sidebar-overlay{
        opacity:1;
        pointer-events:auto;
    }

    .main{
        margin-left:0;
    }

}


@media(max-width:600px){

    .topbar{
        height:76px;

        padding:
            0
            16px;
    }

    .content{
        padding:
            22px
            15px
            25px;
    }

    .page-heading h1{
        font-size:23px;
    }

    .page-heading-icon{
        width:38px;
        height:38px;

        font-size:18px;
    }

}