/* =========================================================
   SIMPANSE GLOBAL THEME
   Sistem Penatakelolaan Persediaan
   Login + Forgot Password
========================================================= */


/* =========================================================
   ROOT COLORS
========================================================= */

:root{

    --simpanse-primary:#147f91;
    --simpanse-primary-dark:#0b6170;
    --simpanse-primary-darker:#074653;

    --simpanse-primary-light:#22a1b4;
    --simpanse-primary-soft:#ecf8fa;

    --simpanse-cyan:#25a7ba;
    --simpanse-accent:#a3607c;

    --simpanse-text:#17292e;
    --simpanse-muted:#71858b;

    --simpanse-border:#dce8eb;

    --simpanse-white:#ffffff;
    --simpanse-bg:#f3f8f9;

}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html,
body{
    width:100%;
    height:100%;
}


body{

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

    color:var(--simpanse-text);

    background:var(--simpanse-bg);

    overflow-x:hidden;
    overflow-y:auto;

}


/* =========================================================
   LOGIN PAGE
========================================================= */

.simpanse-auth-page{

    position:relative;

    width:100%;

    height:100vh;
    height:100dvh;

    display:flex;

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

    overflow:hidden;

    padding:14px;

    background:

        radial-gradient(
            circle at 5% 8%,
            rgba(20,127,145,.13),
            transparent 28%
        ),

        radial-gradient(
            circle at 94% 92%,
            rgba(37,167,186,.11),
            transparent 30%
        ),

        var(--simpanse-bg);

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.simpanse-bg-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}


.simpanse-bg-shape.one{

    width:320px;
    height:320px;

    top:-165px;
    left:-150px;

    background:
        rgba(20,127,145,.055);

}


.simpanse-bg-shape.two{

    width:430px;
    height:430px;

    right:-210px;
    bottom:-220px;

    background:
        rgba(37,167,186,.06);

}


/* =========================================================
   MAIN AUTH CARD
========================================================= */

.simpanse-auth-wrapper{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1100px;

    height:min(
        640px,
        calc(100vh - 28px)
    );

    height:min(
        640px,
        calc(100dvh - 28px)
    );

    min-height:500px;

    display:grid;

    grid-template-columns:
        1.04fr .96fr;

    overflow:hidden;

    background:#fff;

    border-radius:27px;

    border:
        1px solid rgba(20,127,145,.08);

    box-shadow:
        0 30px 75px rgba(14,73,84,.16);

}


/* =========================================================
   FORGOT PASSWORD WRAPPER
========================================================= */

.simpanse-auth-wrapper.forgot{

    max-width:1050px;

    height:min(
        580px,
        calc(100vh - 28px)
    );

    height:min(
        580px,
        calc(100dvh - 28px)
    );

    min-height:470px;

    grid-template-columns:
        1.03fr .97fr;

}


/* =========================================================
   LEFT BRAND PANEL
========================================================= */

.simpanse-brand-side{

    position:relative;

    overflow:hidden;

    padding:
        30px 42px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    color:#fff;

    background:

        linear-gradient(
            145deg,
            #074653 0%,
            #0b6271 38%,
            #147f91 72%,
            #1d94a7 100%
        );

}


.simpanse-brand-side.center{

    justify-content:center;

}


.simpanse-brand-side::before{

    content:"";

    position:absolute;

    width:390px;
    height:390px;

    right:-220px;
    top:-210px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(115,228,237,.23),
            transparent 68%
        );

}


.simpanse-brand-side::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    left:-190px;
    bottom:-190px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.10),
            transparent 70%
        );

}


.simpanse-brand-content,
.simpanse-brand-footer{

    position:relative;

    z-index:2;

}


/* =========================================================
   APP NAME
========================================================= */

.simpanse-brand-name{

    display:flex;

    align-items:center;

    font-size:34px;

    line-height:1;

    font-weight:800;

    letter-spacing:-1.5px;

}


.simpanse-brand-name .sim{
    color:#ffffff;
}


.simpanse-brand-name .pan{
    color:#83e4ed;
}


.simpanse-brand-name .se{
    color:#edbdd0;
}


.simpanse-brand-subtitle{

    margin-top:7px;

    color:
        rgba(255,255,255,.74);

    font-size:11px;

    font-weight:600;

    letter-spacing:1.2px;

    text-transform:uppercase;

}


/* =========================================================
   LOGO AREA
========================================================= */

.simpanse-logo-area{

    position:relative;

    width:100%;

    display:flex;

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

    margin:
        10px 0 14px;

}


.simpanse-logo-glow{

    position:absolute;

    width:225px;
    height:225px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(113,225,235,.22),
            rgba(113,225,235,.07) 45%,
            transparent 70%
        );

}


.simpanse-logo-circle{

    position:relative;

    z-index:2;

    width:180px;
    height:180px;

    display:flex;

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

    overflow:hidden;

    border-radius:50%;

    background:#fff;

    border:
        6px solid rgba(255,255,255,.20);

    box-shadow:
        0 18px 38px rgba(0,0,0,.20);

}


.simpanse-logo-circle img{

    width:89%;
    height:89%;

    object-fit:contain;

}


/* =========================================================
   BRAND TEXT
========================================================= */

.simpanse-brand-heading{

    margin-bottom:8px;

    font-size:24px;

    line-height:1.28;

    font-weight:800;

    letter-spacing:-.5px;

}


.simpanse-brand-description{

    max-width:465px;

    color:
        rgba(255,255,255,.80);

    font-size:13px;

    line-height:1.6;

}


/* =========================================================
   FEATURE GRID
========================================================= */

.simpanse-feature-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:7px;

    margin-top:17px;

}


.simpanse-feature-item{

    min-height:66px;

    display:flex;

    flex-direction:column;

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

    padding:
        8px 5px;

    text-align:center;

    border-radius:10px;

    color:
        rgba(255,255,255,.92);

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

    border:
        1px solid rgba(255,255,255,.10);

    font-size:11px;

    font-weight:600;

    line-height:1.3;

}


.simpanse-feature-icon{

    width:28px;
    height:28px;

    display:flex;

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

    margin-bottom:6px;

    border-radius:8px;

    color:#91edf4;

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

    font-size:13px;

}


.simpanse-brand-footer{

    margin-top:10px;

    color:
        rgba(255,255,255,.50);

    font-size:10px;

    letter-spacing:.4px;

}


/* =========================================================
   FORM PANEL
========================================================= */

.simpanse-form-side{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        38px 55px;

    background:#fff;

}


/* =========================================================
   MOBILE BRAND
========================================================= */

.simpanse-mobile-brand{

    display:none;

}


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

.simpanse-small-title{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:10px;

    color:var(--simpanse-primary);

    font-size:12px;

    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;

}


.simpanse-small-title::before{

    content:"";

    width:24px;
    height:3px;

    border-radius:20px;

    background:

        linear-gradient(
            90deg,
            var(--simpanse-primary),
            var(--simpanse-cyan)
        );

}


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

.simpanse-title{

    margin-bottom:8px;

    color:#17282d;

    font-size:30px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-.8px;

}


.simpanse-subtitle{

    margin-bottom:20px;

    color:#75878d;

    font-size:13px;

    line-height:1.6;

}


/* =========================================================
   INFO BOX
========================================================= */

.simpanse-info-box{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:19px;

    padding:
        11px 13px;

    border-radius:10px;

    color:#61777d;

    background:#f0fafb;

    border:
        1px solid #d8eef1;

    font-size:11px;

    line-height:1.55;

}


.simpanse-info-box i{

    margin-top:2px;

    color:var(--simpanse-primary);

    font-size:14px;

}


/* =========================================================
   FORM GROUP
========================================================= */

.simpanse-form-group{

    margin-bottom:15px;

}


.simpanse-form-label{

    display:block;

    margin-bottom:7px;

    color:#365058;

    font-size:12px;

    font-weight:700;

}


/* =========================================================
   INPUT
========================================================= */

.simpanse-input-wrapper{

    width:100%;

    height:50px;

    display:flex;

    align-items:center;

    overflow:hidden;

    border:
        1px solid #dae6e9;

    border-radius:11px;

    background:#f8fbfb;

    transition:
        border-color .2s,
        box-shadow .2s,
        background .2s;

}


.simpanse-input-wrapper:focus-within{

    background:#fff;

    border-color:
        var(--simpanse-primary-light);

    box-shadow:
        0 0 0 4px rgba(20,127,145,.08);

}


.simpanse-input-icon{

    width:48px;
    height:100%;

    flex-shrink:0;

    display:flex;

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

    color:#8da1a6;

    font-size:15px;

}


.simpanse-input-wrapper:focus-within
.simpanse-input-icon{

    color:
        var(--simpanse-primary);

}


.simpanse-form-control{

    flex:1;

    width:100%;
    height:100%;

    padding:
        0 10px 0 0;

    border:0;

    outline:0;

    background:transparent;

    color:#1c3036;

    font-family:'Inter',sans-serif;

    font-size:13px;

    font-weight:500;

}


.simpanse-form-control::placeholder{

    color:#a4b2b6;

    opacity:1;

    font-weight:400;

}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.simpanse-password-toggle{

    width:45px;
    height:100%;

    flex-shrink:0;

    display:flex;

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

    border:0;

    outline:0;

    background:transparent;

    color:#8da1a6;

    cursor:pointer;

    font-size:14px;

}


.simpanse-password-toggle:hover{

    color:
        var(--simpanse-primary);

}


/* =========================================================
   OPTIONS
========================================================= */

.simpanse-options{

    display:flex;

    justify-content:flex-end;

    margin-top:-1px;

    margin-bottom:18px;

}


.simpanse-forgot-link{

    display:flex;

    align-items:center;

    gap:6px;

    color:
        var(--simpanse-primary);

    font-size:12px;

    font-weight:600;

    text-decoration:none;

}


.simpanse-forgot-link:hover{

    color:
        var(--simpanse-primary-dark);

}


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

.simpanse-btn{

    width:100%;

    height:50px;

    display:flex;

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

    gap:7px;

    border:0;

    outline:0;

    border-radius:11px;

    cursor:pointer;

    color:#fff;

    background:

        linear-gradient(
            135deg,
            #0b6170 0%,
            #147f91 52%,
            #21a0b2 100%
        );

    font-family:'Inter',sans-serif;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    box-shadow:
        0 12px 23px rgba(20,127,145,.22);

    transition:
        transform .2s,
        box-shadow .2s;

}


.simpanse-btn:hover{

    transform:
        translateY(-1px);

    box-shadow:
        0 15px 27px rgba(20,127,145,.30);

}


.simpanse-btn:active{

    transform:none;

}


/* =========================================================
   BACK LOGIN LINK
========================================================= */

.simpanse-back-link{

    display:flex;

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

    gap:6px;

    margin-top:18px;

    color:
        var(--simpanse-primary);

    font-size:12px;

    font-weight:600;

    text-decoration:none;

}


.simpanse-back-link:hover{

    color:
        var(--simpanse-primary-dark);

}


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

.simpanse-auth-footer{

    margin-top:21px;

    text-align:center;

    color:#94a3a7;

    font-size:10px;

    line-height:1.7;

}


.simpanse-auth-footer a{

    color:
        var(--simpanse-primary);

    font-weight:700;

    text-decoration:none;

}


/* =========================================================
   DESKTOP SHORT HEIGHT
========================================================= */

@media
(max-height:680px)
and (min-width:901px){

    .simpanse-auth-page{

        padding:8px;

    }


    .simpanse-auth-wrapper{

        height:
            calc(100vh - 16px);

        height:
            calc(100dvh - 16px);

        min-height:0;

        max-height:none;

    }


    .simpanse-auth-wrapper.forgot{

        height:
            calc(100vh - 16px);

        height:
            calc(100dvh - 16px);

        min-height:0;

        max-height:none;

    }


    .simpanse-brand-side{

        padding:
            18px 36px;

    }


    .simpanse-brand-name{

        font-size:29px;

    }


    .simpanse-brand-subtitle{

        margin-top:4px;

        font-size:10px;

    }


    .simpanse-logo-area{

        margin:
            3px 0 7px;

    }


    .simpanse-logo-glow{

        width:175px;
        height:175px;

    }


    .simpanse-logo-circle{

        width:140px;
        height:140px;

    }


    .simpanse-brand-heading{

        margin-bottom:4px;

        font-size:20px;

    }


    .simpanse-brand-description{

        font-size:11px;

        line-height:1.45;

    }


    .simpanse-feature-grid{

        margin-top:10px;

        gap:5px;

    }


    .simpanse-feature-item{

        min-height:48px;

        padding:
            5px 3px;

        font-size:9px;

    }


    .simpanse-feature-icon{

        width:21px;
        height:21px;

        margin-bottom:3px;

        font-size:10px;

    }


    .simpanse-brand-footer{

        margin-top:6px;

        font-size:8px;

    }


    .simpanse-form-side{

        padding:
            21px 48px;

    }


    .simpanse-small-title{

        margin-bottom:6px;

        font-size:10px;

    }


    .simpanse-title{

        margin-bottom:5px;

        font-size:25px;

    }


    .simpanse-subtitle{

        margin-bottom:12px;

        font-size:11px;

    }


    .simpanse-info-box{

        margin-bottom:12px;

        padding:
            7px 10px;

        font-size:9px;

    }


    .simpanse-form-group{

        margin-bottom:10px;

    }


    .simpanse-form-label{

        margin-bottom:5px;

        font-size:10px;

    }


    .simpanse-input-wrapper{

        height:43px;

    }


    .simpanse-form-control{

        font-size:12px;

    }


    .simpanse-options{

        margin-bottom:10px;

    }


    .simpanse-forgot-link{

        font-size:10px;

    }


    .simpanse-btn{

        height:43px;

        font-size:11px;

    }


    .simpanse-back-link{

        margin-top:11px;

        font-size:10px;

    }


    .simpanse-auth-footer{

        margin-top:11px;

        font-size:8px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

    html,
    body{

        height:auto;

        min-height:100%;

        overflow:auto;

    }


    body{

        background:#fff;

    }


    .simpanse-auth-page{

        height:auto;

        min-height:100vh;

        padding:14px;

        overflow:visible;

    }


    .simpanse-auth-wrapper,
    .simpanse-auth-wrapper.forgot{

        display:block;

        width:100%;

        max-width:500px;

        height:auto;

        min-height:0;

        border-radius:22px;

    }


    .simpanse-brand-side{

        display:none;

    }


    .simpanse-form-side{

        padding:
            27px 34px;

    }


    .simpanse-mobile-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

        margin-bottom:20px;

    }


    .simpanse-mobile-logo{

        width:110px;
        height:110px;

        display:flex;

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

        overflow:hidden;

        margin-bottom:8px;

        border-radius:50%;

        background:#fff;

        border:
            1px solid #dcebec;

        box-shadow:
            0 12px 27px rgba(20,127,145,.14);

    }


    .simpanse-mobile-logo img{

        width:89%;
        height:89%;

        object-fit:contain;

    }


    .simpanse-mobile-name{

        display:flex;

        font-size:26px;

        line-height:1;

        font-weight:800;

        letter-spacing:-1.2px;

    }


    .simpanse-mobile-name .sim{

        color:
            var(--simpanse-primary-dark);

    }


    .simpanse-mobile-name .pan{

        color:
            var(--simpanse-primary);

    }


    .simpanse-mobile-name .se{

        color:
            var(--simpanse-accent);

    }


    .simpanse-mobile-subtitle{

        margin-top:5px;

        color:#8b9ca1;

        font-size:9px;

        font-weight:600;

        letter-spacing:.8px;

        line-height:1.4;

        text-transform:uppercase;

    }

}


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

@media(max-width:575px){

    body{

        background:#fff;

    }


    .simpanse-auth-page{

        padding:0;

        align-items:flex-start;

        background:#fff;

    }


    .simpanse-bg-shape{

        display:none;

    }


    .simpanse-auth-wrapper,
    .simpanse-auth-wrapper.forgot{

        width:100%;

        max-width:none;

        border:0;

        border-radius:0;

        box-shadow:none;

    }


    .simpanse-form-side{

        min-height:100vh;
        min-height:100dvh;

        padding:
            max(16px, env(safe-area-inset-top))
            23px
            max(16px, env(safe-area-inset-bottom));

    }


    .simpanse-mobile-brand{

        margin-bottom:15px;

    }


    .simpanse-mobile-logo{

        width:92px;
        height:92px;

        margin-bottom:6px;

    }


    .simpanse-mobile-name{

        font-size:24px;

    }


    .simpanse-mobile-subtitle{

        max-width:285px;

        font-size:9px;

    }


    .simpanse-small-title{

        margin-bottom:6px;

        font-size:10px;

    }


    .simpanse-title{

        margin-bottom:5px;

        font-size:25px;

    }


    .simpanse-subtitle{

        margin-bottom:13px;

        font-size:12px;

    }


    .simpanse-info-box{

        margin-bottom:12px;

        padding:
            8px 10px;

        font-size:10px;

    }


    .simpanse-form-group{

        margin-bottom:11px;

    }


    .simpanse-form-label{

        margin-bottom:5px;

        font-size:11px;

    }


    .simpanse-input-wrapper{

        height:47px;

    }


    .simpanse-form-control{

        font-size:13px;

    }


    .simpanse-options{

        margin-bottom:12px;

    }


    .simpanse-forgot-link{

        font-size:11px;

    }


    .simpanse-btn{

        height:48px;

        font-size:12px;

    }


    .simpanse-back-link{

        margin-top:14px;

        font-size:11px;

    }


    .simpanse-auth-footer{

        margin-top:auto;

        padding-top:15px;

        font-size:9px;

    }

}


/* =========================================================
   VERY SHORT MOBILE
========================================================= */

@media
(max-width:575px)
and (max-height:690px){

    .simpanse-form-side{

        padding-top:9px;

        padding-bottom:9px;

    }


    .simpanse-mobile-brand{

        margin-bottom:8px;

    }


    .simpanse-mobile-logo{

        width:72px;
        height:72px;

    }


    .simpanse-mobile-name{

        font-size:20px;

    }


    .simpanse-mobile-subtitle{

        font-size:7px;

    }


    .simpanse-small-title{

        margin-bottom:4px;

        font-size:8px;

    }


    .simpanse-title{

        font-size:21px;

    }


    .simpanse-subtitle{

        margin-bottom:8px;

        font-size:10px;

    }


    .simpanse-info-box{

        margin-bottom:8px;

        padding:
            6px 8px;

        font-size:8px;

    }


    .simpanse-form-group{

        margin-bottom:7px;

    }


    .simpanse-form-label{

        margin-bottom:4px;

        font-size:9px;

    }


    .simpanse-input-wrapper{

        height:40px;

    }


    .simpanse-form-control{

        font-size:11px;

    }


    .simpanse-options{

        margin-bottom:7px;

    }


    .simpanse-btn{

        height:41px;

        font-size:10px;

    }


    .simpanse-back-link{

        margin-top:8px;

        font-size:9px;

    }


    .simpanse-auth-footer{

        padding-top:7px;

        font-size:7px;

    }

}

/* =========================================================
   SIMPANSE APP GLOBAL
   Header / Sidebar / Profile / Footer / Preloader
========================================================= */


/* =========================================================
   APP COLORS
========================================================= */

:root{

    --app-primary:#147f91;
    --app-primary-dark:#0b6170;
    --app-primary-darker:#074653;

    --app-primary-light:#22a1b4;
    --app-primary-soft:#eaf7f9;

    --app-accent:#a3607c;

    --app-text:#26383d;
    --app-muted:#75878d;

    --app-border:#e1eaec;

    --app-sidebar-width:240px;

}


/* =========================================================
   TOP HEADER
========================================================= */

.topbar,
.topbar .navbar,
.navbar-header{

    background:
        linear-gradient(
            135deg,
            #074653 0%,
            #0b6170 45%,
            #147f91 100%
        ) !important;

}


.topbar{

    box-shadow:
        0 3px 14px rgba(7,70,83,.18);

}


.topbar .navbar{

    min-height:64px;

}


.topbar .navbar-nav > .nav-item > .nav-link{

    color:
        rgba(255,255,255,.94) !important;

}


.topbar .navbar-nav > .nav-item > .nav-link:hover{

    color:#fff !important;

}


/* =========================================================
   BRANCH HEADER
========================================================= */

.simpanse-header-branch{

    display:flex;

    align-items:center;

    gap:10px;

    height:64px;

    padding-left:18px;

}


.simpanse-header-branch-icon{

    width:34px;
    height:34px;

    flex:0 0 34px;

    display:flex;

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

    border-radius:10px;

    color:#ffffff;

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

    border:
        1px solid rgba(255,255,255,.13);

}


.simpanse-header-branch-info{

    display:flex;

    flex-direction:column;

    line-height:1.2;

}


.simpanse-header-branch-label{

    color:
        rgba(255,255,255,.60);

    font-size:10px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.8px;

}


.simpanse-header-branch-name{

    margin-top:3px;

    color:#fff;

    font-size:14px;

    font-weight:700;

}


/* =========================================================
   MOBILE HEADER BRAND
========================================================= */

.simpanse-mobile-header{

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff !important;

    font-size:14px;

    font-weight:700;

}


.simpanse-mobile-header i{

    font-size:19px;

}


.simpanse-mobile-header-name{

    display:flex;

    align-items:center;

    letter-spacing:-.4px;

}


.simpanse-mobile-header-name .sim{
    color:#fff;
}

.simpanse-mobile-header-name .pan{
    color:#91edf4;
}

.simpanse-mobile-header-name .se{
    color:#efbfd0;
}


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

.left-sidebar{

    background:
        linear-gradient(
            180deg,
            #083f4b 0%,
            #07505d 100%
        ) !important;

    box-shadow:
        3px 0 16px rgba(7,61,72,.12);

}


.scroll-sidebar{

    background:transparent !important;

}


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

.simpanse-sidebar-brand{

    padding:
        20px 14px 17px;

    text-align:center;

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

    margin-bottom:8px;

}


.simpanse-sidebar-logo{

    width:74px;
    height:74px;

    margin:
        0 auto 10px;

    display:flex;

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

    border-radius:50%;

    overflow:hidden;

    background:#ffffff;

    border:
        4px solid rgba(255,255,255,.13);

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

}


.simpanse-sidebar-logo img{

    width:88%;
    height:88%;

    object-fit:contain;

}


.simpanse-sidebar-name{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:800;

    line-height:1;

    letter-spacing:-1px;

}


.simpanse-sidebar-name .sim{
    color:#fff;
}

.simpanse-sidebar-name .pan{
    color:#91edf4;
}

.simpanse-sidebar-name .se{
    color:#efbfd0;
}


.simpanse-sidebar-subtitle{

    margin-top:6px;

    color:
        rgba(255,255,255,.55);

    font-size:8px;

    line-height:1.4;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.7px;

}


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

.sidebar-nav{

    padding:
        3px 9px 25px !important;

}


.sidebar-nav ul{

    background:transparent !important;

}


.sidebar-nav > ul > li{

    margin-bottom:4px;

}


.sidebar-nav > ul > li > a{

    min-height:46px;

    display:flex !important;

    align-items:center;

    padding:
        10px 12px !important;

    border-radius:10px;

    color:
        rgba(255,255,255,.82) !important;

    font-size:13px;

    font-weight:700;

    transition:.2s ease;

}


.sidebar-nav > ul > li > a:hover{

    color:#fff !important;

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

}


.sidebar-nav > ul > li > a i{

    width:27px;

    margin-right:5px;

    color:#86e4ec !important;

    text-align:center;

    font-size:16px;

}


/* ACTIVE */

.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li > a.active{

    color:#fff !important;

    background:
        linear-gradient(
            135deg,
            rgba(34,161,180,.90),
            rgba(20,127,145,.95)
        ) !important;

    box-shadow:
        0 7px 18px rgba(0,0,0,.14);

}


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

.sidebar-nav ul li ul{

    padding:
        5px 0 7px 10px;

}


.sidebar-nav ul li ul li{

    margin:
        2px 0;

}


.sidebar-nav ul li ul li a{

    display:flex;

    align-items:center;

    min-height:37px;

    padding:
        7px 10px !important;

    border-radius:8px;

    color:
        rgba(255,255,255,.65) !important;

    font-size:12px !important;

    line-height:1.3;

    transition:.18s;

}


.sidebar-nav ul li ul li a:hover{

    color:#fff !important;

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

    padding-left:13px !important;

}


.sidebar-nav ul li ul li a i{

    width:18px;

    margin-right:5px;

    color:
        rgba(145,237,244,.70) !important;

    font-size:8px;

}


/* =========================================================
   PROFILE RIGHT
========================================================= */

.simpanse-profile-link{

    height:64px;

    display:flex !important;

    align-items:center;

    padding:
        0 15px !important;

}


.simpanse-profile-photo{

    width:36px !important;
    height:36px !important;

    object-fit:cover;

    border-radius:50%;

    border:
        2px solid rgba(255,255,255,.72);

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

}


.simpanse-profile-name{

    margin-left:8px;

    color:#fff;

    font-size:13px;

    font-weight:600;

}


.u-pro .dropdown-menu{

    min-width:285px;

    margin-top:2px;

    border:0;

    border-radius:12px;

    box-shadow:
        0 15px 40px rgba(18,53,60,.18);

    overflow:hidden;

}


.dropdown-user{

    padding:0 !important;

}


.dw-user-box{

    display:flex;

    align-items:center;

    padding:
        18px !important;

    background:
        linear-gradient(
            135deg,
            #f0fafb,
            #ffffff
        );

}


.dw-user-box .u-img{

    width:62px !important;

    flex:0 0 62px;

}


.dw-user-box .u-img img{

    width:58px !important;
    height:58px !important;

    object-fit:cover;

    border-radius:50%;

    border:
        3px solid #d8eef1;

}


.dw-user-box .u-text{

    padding-left:12px;

    min-width:0;

}


.dw-user-box .u-text h4{

    margin:
        0 0 3px;

    color:#21383e;

    font-size:14px;

    font-weight:700;

}


.dw-user-box .u-text p{

    max-width:160px;

    margin-bottom:9px;

    overflow:hidden;

    color:#7d8d92 !important;

    font-size:11px;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.simpanse-profile-button{

    padding:
        5px 12px !important;

    border:0 !important;

    background:
        var(--app-primary) !important;

    color:#fff !important;

    font-size:10px !important;

}


.dropdown-user > li > a{

    padding:
        11px 18px !important;

    color:#43565b !important;

    font-size:12px;

}


.dropdown-user > li > a:hover{

    color:
        var(--app-primary) !important;

    background:
        var(--app-primary-soft);

}


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

.footer{

    padding:
        13px 20px !important;

    background:#fff !important;

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

    color:#839398;

    font-size:11px;

    text-align:center;

}


.footer p{

    margin:0;

}


.footer strong{

    color:
        var(--app-primary);

}


.footer a{

    color:
        var(--app-primary);

    font-weight:700;

}


/* =========================================================
   PRELOADER
========================================================= */

.preloader{

    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:0;

    z-index:99999;

    display:flex;

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

    background:
        rgba(242,248,249,.66) !important;

    backdrop-filter:
        blur(2px);

    -webkit-backdrop-filter:
        blur(2px);

}


.simpanse-preloader{

    min-width:220px;

    padding:
        23px 28px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    border-radius:18px;

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

    border:
        1px solid rgba(20,127,145,.10);

    box-shadow:
        0 16px 45px rgba(10,72,84,.16);

}


.simpanse-preloader-logo{

    position:relative;

    width:80px;
    height:80px;

    display:flex;

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

    margin-bottom:13px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 7px 20px rgba(20,127,145,.14);

}


.simpanse-preloader-logo img{

    width:72%;
    height:72%;

    object-fit:contain;

}


.simpanse-preloader-logo::after{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    border:
        3px solid rgba(20,127,145,.12);

    border-top-color:
        var(--app-primary);

    animation:
        simpanseLoaderSpin
        .9s
        linear
        infinite;

}


@keyframes simpanseLoaderSpin{

    to{
        transform:rotate(360deg);
    }

}


.simpanse-preloader-title{

    margin:0;

    color:#213a40;

    font-size:14px;

    font-weight:700;

}


.simpanse-preloader-text{

    margin:
        5px 0 0;

    color:#7b8d92;

    font-size:11px;

}


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

@media(max-width:767px){

    .topbar .navbar{

        min-height:58px;

    }


    .simpanse-mobile-header{

        height:58px;

        padding-left:5px !important;

    }


    .simpanse-header-branch{

        display:none;

    }


    .simpanse-profile-link{

        height:58px;

        padding:
            0 8px !important;

    }


    .simpanse-profile-photo{

        width:34px !important;
        height:34px !important;

    }


    .u-pro .dropdown-menu{

        position:absolute !important;

        right:5px !important;
        left:auto !important;

        min-width:
            min(285px, calc(100vw - 20px));

        transform:none !important;

    }


    .simpanse-sidebar-brand{

        padding:
            15px 12px;

    }


    .simpanse-sidebar-logo{

        width:62px;
        height:62px;

    }


    .simpanse-sidebar-name{

        font-size:19px;

    }


    .simpanse-sidebar-subtitle{

        font-size:7px;

    }


    .sidebar-nav > ul > li > a{

        font-size:13px;

    }


    .sidebar-nav ul li ul li a{

        font-size:12px !important;

    }


    .simpanse-preloader{

        min-width:190px;

        padding:
            19px 22px;

    }

}


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

@media(min-width:768px){

    body.mini-sidebar
    .simpanse-sidebar-brand{

        padding:
            14px 5px;

    }


    body.mini-sidebar
    .simpanse-sidebar-logo{

        width:45px;
        height:45px;

        margin-bottom:0;

    }


    body.mini-sidebar
    .simpanse-sidebar-name,
    body.mini-sidebar
    .simpanse-sidebar-subtitle{

        display:none;

    }

}

/* =========================================================
   SIMPANSE LAYOUT FIX
   TOPBAR + SIDEBAR TIDAK BERTABRAKAN
========================================================= */

:root{
    --simpanse-topbar-height:64px;
    --simpanse-sidebar-width:240px;
}


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

#main-wrapper{
    width:100%;
    min-height:100vh;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar{
    position:fixed !important;

    top:0;
    left:0;
    right:0;

    height:var(--simpanse-topbar-height);

    z-index:1000 !important;

    background:
        linear-gradient(
            135deg,
            #074653 0%,
            #0b6170 48%,
            #147f91 100%
        ) !important;

    box-shadow:
        0 3px 15px rgba(7,70,83,.18);
}


.topbar .top-navbar{
    height:var(--simpanse-topbar-height);
    min-height:var(--simpanse-topbar-height);

    padding:0 !important;

    background:transparent !important;
}


/* =========================================================
   NAVBAR HEADER / BRAND
========================================================= */

.navbar-header{
    width:var(--simpanse-sidebar-width) !important;
    min-width:var(--simpanse-sidebar-width) !important;

    height:var(--simpanse-topbar-height);

    display:flex;
    align-items:center;

    padding:0 15px;

    background:
        rgba(0,0,0,.08) !important;

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


.navbar-header .navbar-brand{
    width:100%;

    height:var(--simpanse-topbar-height);

    display:flex !important;

    align-items:center;

    padding:0 !important;
    margin:0 !important;

    color:#fff !important;
}


.navbar-header .navbar-brand b{
    width:38px;
    height:38px;

    flex:0 0 38px;

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

    margin-right:10px;

    overflow:hidden;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 4px 12px rgba(0,0,0,.14);
}


.navbar-header .navbar-brand b img{
    width:32px !important;
    height:32px !important;

    object-fit:contain;
}


.simpanse-navbar-brand-text{
    min-width:0;

    display:flex;
    flex-direction:column;

    justify-content:center;

    line-height:1;
}


.simpanse-navbar-app-name{
    display:flex;

    font-size:18px;
    font-weight:800;

    letter-spacing:-.7px;
}


.simpanse-navbar-app-name .sim{
    color:#fff;
}

.simpanse-navbar-app-name .pan{
    color:#91edf4;
}

.simpanse-navbar-app-name .se{
    color:#efbfd0;
}


.simpanse-navbar-app-subtitle{
    margin-top:4px;

    color:
        rgba(255,255,255,.58);

    font-size:6.5px;

    font-weight:600;

    line-height:1.2;

    letter-spacing:.6px;

    text-transform:uppercase;

    white-space:nowrap;
}


/* =========================================================
   NAVBAR CONTENT RIGHT OF BRAND
========================================================= */

.navbar-collapse{
    height:var(--simpanse-topbar-height);

    display:flex !important;

    align-items:center;

    padding:0 12px !important;

    background:transparent !important;
}


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

.left-sidebar{
    position:fixed !important;

    top:var(--simpanse-topbar-height) !important;
    left:0 !important;
    bottom:0 !important;

    width:var(--simpanse-sidebar-width) !important;

    height:
        calc(
            100vh - var(--simpanse-topbar-height)
        ) !important;

    padding-top:0 !important;

    z-index:900 !important;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #083f4b 0%,
            #07505d 100%
        ) !important;

    box-shadow:
        3px 0 15px rgba(7,61,72,.12);
}


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

.left-sidebar .scroll-sidebar{
    position:relative;

    width:100%;
    height:100% !important;

    padding-top:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    background:transparent !important;
}


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

.simpanse-sidebar-brand{
    position:relative;

    width:100%;

    padding:
        17px 13px 15px;

    margin:0 0 7px;

    text-align:center;

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

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


.simpanse-sidebar-logo{
    width:62px;
    height:62px;

    margin:
        0 auto 8px;

    display:flex;

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

    overflow:hidden;

    border-radius:50%;

    background:#fff;

    border:
        3px solid rgba(255,255,255,.14);

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);
}


.simpanse-sidebar-logo img{
    width:88%;
    height:88%;

    object-fit:contain;
}


.simpanse-sidebar-name{
    display:flex;

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

    font-size:20px;
    font-weight:800;

    letter-spacing:-.8px;

    line-height:1;
}


.simpanse-sidebar-name .sim{
    color:#fff;
}

.simpanse-sidebar-name .pan{
    color:#91edf4;
}

.simpanse-sidebar-name .se{
    color:#efbfd0;
}


.simpanse-sidebar-subtitle{
    margin-top:5px;

    color:
        rgba(255,255,255,.52);

    font-size:7px;

    font-weight:600;

    line-height:1.3;

    letter-spacing:.65px;

    text-transform:uppercase;
}


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

.sidebar-nav{
    padding:
        4px 9px 25px !important;
}


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

.page-wrapper{
    position:relative;

    min-height:
        calc(
            100vh - var(--simpanse-topbar-height)
        );

    margin-left:
        var(--simpanse-sidebar-width) !important;

    padding-top:
        var(--simpanse-topbar-height) !important;

    background:#f4f7f8;
}


/* =========================================================
   PAGE CONTENT
========================================================= */

.page-wrapper .container-fluid{
    padding-top:18px;
}


/* jangan ada gap template lama */
.page-titles{
    margin-top:0 !important;
}


/* =========================================================
   PROFILE HEADER
========================================================= */

.simpanse-header-branch{
    height:var(--simpanse-topbar-height);
}


.simpanse-profile-link{
    height:var(--simpanse-topbar-height);
}


/* =========================================================
   PRELOADER MUST COVER EVERYTHING
========================================================= */

.preloader{
    z-index:99999 !important;
}


/* =========================================================
   DESKTOP MINI SIDEBAR
========================================================= */

@media(min-width:768px){

    body.mini-sidebar
    .left-sidebar{
        width:70px !important;
    }


    body.mini-sidebar
    .page-wrapper{
        margin-left:70px !important;
    }


    body.mini-sidebar
    .navbar-header{
        width:70px !important;
        min-width:70px !important;

        justify-content:center;

        padding:0 8px;
    }


    body.mini-sidebar
    .navbar-header .navbar-brand{
        justify-content:center;
    }


    body.mini-sidebar
    .navbar-header .navbar-brand b{
        margin-right:0;
    }


    body.mini-sidebar
    .simpanse-navbar-brand-text{
        display:none;
    }


    body.mini-sidebar
    .simpanse-sidebar-brand{
        padding:
            12px 5px;
    }


    body.mini-sidebar
    .simpanse-sidebar-logo{
        width:45px;
        height:45px;

        margin-bottom:0;
    }


    body.mini-sidebar
    .simpanse-sidebar-name,
    body.mini-sidebar
    .simpanse-sidebar-subtitle{
        display:none;
    }

}


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

@media(max-width:767px){

    :root{
        --simpanse-topbar-height:58px;
    }


    /* TOP BAR */

    .topbar{
        height:
            var(--simpanse-topbar-height);
    }


    .topbar .top-navbar{
        height:
            var(--simpanse-topbar-height);

        min-height:
            var(--simpanse-topbar-height);
    }


    /* jangan sisakan 240px di mobile */

    .navbar-header{
        width:auto !important;
        min-width:0 !important;

        height:
            var(--simpanse-topbar-height);

        flex:0 0 auto;

        padding:
            0 7px;

        border-right:0;

        background:transparent !important;
    }


    .navbar-header .navbar-brand{
        display:none !important;
    }


    .navbar-collapse{
        flex:1;

        height:
            var(--simpanse-topbar-height);

        padding:
            0 6px !important;
    }


    /* SIDEBAR MOBILE */

    .left-sidebar{
        top:
            var(--simpanse-topbar-height) !important;

        height:
            calc(
                100vh - var(--simpanse-topbar-height)
            ) !important;

        width:
            var(--simpanse-sidebar-width) !important;

        transform:
            translateX(-100%);

        transition:
            transform .25s ease;
    }


    /*
    Template biasanya menambah class show-sidebar
    saat hamburger diklik.
    */

    body.show-sidebar
    .left-sidebar,
    .show-sidebar
    .left-sidebar{

        transform:
            translateX(0);

    }


    .page-wrapper{
        width:100%;

        margin-left:0 !important;

        padding-top:
            var(--simpanse-topbar-height) !important;
    }


    .simpanse-sidebar-brand{
        padding:
            14px 12px 12px;
    }


    .simpanse-sidebar-logo{
        width:54px;
        height:54px;
    }


    .simpanse-sidebar-name{
        font-size:18px;
    }


    .simpanse-header-branch{
        display:none !important;
    }


    /* profile selalu kanan */

    .navbar-nav.my-lg-0{
        margin-left:auto !important;
    }

}

/* =========================================================
   SIMPANSE SIDEBAR FINAL
========================================================= */

:root{
    --simpanse-topbar-height:64px;
    --simpanse-sidebar-width:240px;
}


/* SIDEBAR */

.left-sidebar{
    top:var(--simpanse-topbar-height) !important;
    bottom:0 !important;

    width:var(--simpanse-sidebar-width) !important;

    height:
        calc(
            100vh - var(--simpanse-topbar-height)
        ) !important;

    padding:0 !important;

    background:#ffffff !important;

    border-right:1px solid #dfe9eb;

    box-shadow:
        3px 0 15px rgba(16,70,80,.06);

    overflow:hidden;
}


.left-sidebar .scroll-sidebar{
    height:100% !important;

    padding:
        12px 8px 30px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    background:#ffffff !important;
}


/* hilangkan brand sidebar lama */

.simpanse-sidebar-brand{
    display:none !important;
}


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

.sidebar-nav{
    padding:0 !important;
}


.sidebar-nav > ul{
    margin:0;
    padding:0;
}


.sidebar-nav > ul > li{
    margin:
        0 0 5px;
}


.sidebar-nav > ul > li > a{

    min-height:47px;

    display:flex !important;

    align-items:center;

    padding:
        9px 13px !important;

    border-radius:11px;

    color:#39535a !important;

    background:transparent !important;

    font-size:13px !important;

    font-weight:700 !important;

    transition:.2s ease;
}


.sidebar-nav > ul > li > a i{

    width:27px;

    margin-right:7px;

    color:#147f91 !important;

    font-size:16px !important;

    text-align:center;
}


.sidebar-nav > ul > li > a:hover{

    color:#0b6170 !important;

    background:#edf8fa !important;
}


/* opened / active main */

.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li > a.active{

    color:#fff !important;

    background:
        linear-gradient(
            135deg,
            #1ba1b4,
            #147f91
        ) !important;

    box-shadow:
        0 6px 14px rgba(20,127,145,.18);
}


.sidebar-nav > ul > li.active > a i,
.sidebar-nav > ul > li > a.active i{

    color:#fff !important;
}


/* =========================================================
   ARROW
========================================================= */

.sidebar-nav .has-arrow::after{

    border-color:#789197 !important;

}


.sidebar-nav li.active > .has-arrow::after{

    border-color:#fff !important;

}


/* =========================================================
   SUBMENU
========================================================= */

.sidebar-nav ul li ul{

    margin:
        4px 0 7px;

    padding:
        4px 0 4px 12px !important;

    background:#f7fafb !important;

    border-radius:10px;
}


.sidebar-nav ul li ul li{

    margin:0 !important;

}


.sidebar-nav ul li ul li a{

    min-height:36px;

    display:flex !important;

    align-items:center;

    padding:
        7px 10px !important;

    border-radius:7px;

    color:#566d73 !important;

    background:transparent !important;

    font-size:12px !important;

    font-weight:500 !important;

    line-height:1.25;

    opacity:1 !important;
}


.sidebar-nav ul li ul li a span{

    color:inherit !important;

}


.sidebar-nav ul li ul li a i{

    width:20px;

    margin-right:8px;

    color:#56b5c2 !important;

    font-size:12px !important;

    text-align:center;
}


.sidebar-nav ul li ul li a:hover{

    color:#0b6170 !important;

    background:#e6f5f7 !important;

    padding-left:13px !important;
}


.sidebar-nav ul li ul li a.active{

    color:#0b6170 !important;

    background:#dff3f5 !important;

    font-weight:700 !important;
}


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

@media(min-width:768px){

    body.mini-sidebar .left-sidebar{

        width:70px !important;

    }


    body.mini-sidebar .page-wrapper{

        margin-left:70px !important;

    }


    body.mini-sidebar
    .sidebar-nav > ul > li > a{

        justify-content:center;

        padding:
            10px 5px !important;

    }


    body.mini-sidebar
    .sidebar-nav > ul > li > a i{

        width:auto;

        margin:0;

        font-size:18px !important;

    }

}


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

@media(max-width:767px){

    :root{
        --simpanse-topbar-height:58px;
    }


    .left-sidebar{

        top:var(--simpanse-topbar-height) !important;

        height:
            calc(
                100vh - var(--simpanse-topbar-height)
            ) !important;

        width:250px !important;

    }


    .left-sidebar .scroll-sidebar{

        padding:
            10px 8px 30px !important;

    }

}

/* =========================================================
   DATATABLE GLOBAL SIMPANSE
========================================================= */

.dataTables_wrapper{
    width:100%;
}


.dataTables_wrapper .row{
    align-items:center;
}


.dataTables_wrapper .dataTables_length{
    margin-bottom:14px;
}


.dataTables_wrapper .dataTables_filter{
    margin-bottom:14px;

    text-align:right;
}


.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{

    margin:0;

    color:#64787e;

    font-size:12px;

    font-weight:500;
}


.dataTables_wrapper
.dataTables_length select{

    height:36px;

    margin:
        0 5px;

    padding:
        4px 27px 4px 8px;

    border:
        1px solid #d7e4e7;

    border-radius:8px;

    background:#fff;

    color:#415b61;

    outline:none;
}


.dataTables_wrapper
.dataTables_filter input{

    width:220px;

    height:36px;

    margin-left:0;

    padding:
        6px 11px;

    border:
        1px solid #d7e4e7;

    border-radius:8px;

    background:#fff;

    color:#344e54;

    outline:none;
}


.dataTables_wrapper
.dataTables_filter input:focus{

    border-color:#22a1b4;

    box-shadow:
        0 0 0 3px rgba(20,127,145,.08);
}


.dataTables_wrapper
.dataTables_info{

    padding-top:14px !important;

    color:#7b8e93;

    font-size:11px;
}


.dataTables_wrapper
.dataTables_paginate{

    padding-top:10px !important;
}


.dataTables_wrapper
.dataTables_paginate
.paginate_button{

    min-width:34px;

    margin-left:4px !important;

    padding:
        6px 9px !important;

    border:
        1px solid #dbe6e8 !important;

    border-radius:7px !important;

    background:#fff !important;

    color:#587078 !important;
}


.dataTables_wrapper
.dataTables_paginate
.paginate_button.current{

    border-color:#147f91 !important;

    background:#147f91 !important;

    color:#fff !important;
}


@media(max-width:767px){

    .dataTables_wrapper
    .dataTables_filter{

        margin-top:7px;

        text-align:left;

    }


    .dataTables_wrapper
    .dataTables_filter label{

        width:100%;

    }


    .dataTables_wrapper
    .dataTables_filter input{

        width:100%;

    }

}

/* =========================================================
   NAVBAR LOGO FIX
========================================================= */

.navbar-header .navbar-brand b{

    width:42px;
    height:42px;

    flex:0 0 42px;

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

    margin-right:10px;

    overflow:hidden;

    border-radius:50%;

    background:#ffffff;

    border:
        2px solid rgba(255,255,255,.18);

    box-shadow:
        0 4px 12px rgba(0,0,0,.14);

    position:relative;
}


.navbar-header .navbar-brand b img{

    display:block;

    width:38px !important;
    height:38px !important;

    object-fit:contain;

    object-position:center;

    margin:auto;

    transform:
        scale(1.12)
        translateY(1px);

    transform-origin:center;
}
/* =========================================================
   SIMPANSE PROFILE PAGE
========================================================= */

.simpanse-profile-page{
    padding-top:18px;
    padding-bottom:25px;
}

.simpanse-page-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
}

.simpanse-page-heading h2{
    margin:0;
    color:#18363d;
    font-size:25px;
    font-weight:800;
    letter-spacing:-.5px;
}

.simpanse-page-heading p{
    margin:5px 0 0;
    color:#7b8e94;
    font-size:12px;
}

.simpanse-profile-card{
    border:0 !important;
    border-radius:16px !important;
    overflow:hidden;
    background:#fff;
    box-shadow:0 7px 24px rgba(18,68,78,.08);
}

.simpanse-profile-card .card-body{
    padding:24px;
}


/* LEFT PROFILE */

.simpanse-profile-summary{
    text-align:center;
}

.simpanse-profile-photo-wrap{
    position:relative;
    width:150px;
    height:150px;
    margin:0 auto 16px;
}

.simpanse-profile-photo-large{
    width:150px;
    height:150px;
    display:block;
    object-fit:cover;
    border-radius:50%;
    border:5px solid #fff;
    box-shadow:
        0 0 0 3px #d9eef1,
        0 12px 30px rgba(20,127,145,.18);
}

.simpanse-profile-name-large{
    margin:0;
    color:#203b41;
    font-size:20px;
    font-weight:800;
}

.simpanse-profile-position{
    margin-top:5px;
    color:#7c9095;
    font-size:12px;
}

.simpanse-profile-branch{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:12px;
    padding:6px 11px;
    border-radius:20px;
    color:#0b6170;
    background:#eaf7f9;
    font-size:11px;
    font-weight:700;
}


/* UPLOAD */

.simpanse-upload-area{
    margin-top:23px;
    padding-top:19px;
    border-top:1px solid #edf2f3;
}

.simpanse-file-label{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 12px;
    margin:0 0 10px;
    border:1px dashed #aacfd5;
    border-radius:10px;
    color:#47646b;
    background:#f6fbfc;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.simpanse-file-label:hover{
    color:#0b6170;
    border-color:#147f91;
    background:#eef9fa;
}

.simpanse-file-label input{
    display:none;
}

.simpanse-uploaded-name{
    display:block;
    margin-top:7px;
    color:#84969a;
    font-size:10px;
    font-weight:400;
    word-break:break-all;
}

.simpanse-photo-note{
    margin:10px 0 0;
    color:#8a9a9e;
    font-size:10px;
    line-height:1.5;
}


/* FORM HEADER */

.simpanse-profile-form-header{
    margin-bottom:22px;
    padding-bottom:15px;
    border-bottom:1px solid #edf2f3;
}

.simpanse-profile-form-header h4{
    margin:0;
    color:#203b41;
    font-size:18px;
    font-weight:800;
}

.simpanse-profile-form-header p{
    margin:5px 0 0;
    color:#84959a;
    font-size:11px;
}


/* FORM */

.simpanse-profile-form .form-group{
    margin-bottom:17px;
}

.simpanse-profile-form label{
    margin-bottom:7px;
    color:#405b62;
    font-size:11px;
    font-weight:700;
}

.simpanse-profile-form .form-control{
    width:100%;
    min-height:44px;
    padding:9px 12px;
    border:1px solid #dbe7e9;
    border-radius:9px;
    background:#fff;
    color:#263f45;
    font-size:12px;
    box-shadow:none;
    transition:.2s;
}

.simpanse-profile-form .form-control:focus{
    border-color:#22a1b4;
    box-shadow:0 0 0 3px rgba(20,127,145,.08);
}

.simpanse-profile-form .form-control[readonly]{
    color:#71878c;
    background:#f5f8f9;
}

.simpanse-input-password{
    position:relative;
}

.simpanse-input-password .form-control{
    padding-right:46px;
}

.simpanse-password-eye{
    position:absolute;
    top:50%;
    right:6px;
    width:36px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%);
    border:0;
    border-radius:7px;
    background:transparent;
    color:#879a9f;
    cursor:pointer;
}

.simpanse-password-eye:hover{
    color:#147f91;
    background:#edf8fa;
}


/* BUTTONS */

.simpanse-btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:8px 17px;
    border:0;
    border-radius:9px;
    color:#fff !important;
    background:linear-gradient(135deg,#0b6170,#147f91,#21a0b2);
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 7px 16px rgba(20,127,145,.20);
}

.simpanse-btn-primary:hover{
    color:#fff !important;
    transform:translateY(-1px);
}

.simpanse-btn-block{
    width:100%;
}


/* MOBILE */

@media(max-width:767px){

    .simpanse-profile-page{
        padding-top:12px;
    }

    .simpanse-page-heading h2{
        font-size:22px;
    }

    .simpanse-profile-card{
        margin-bottom:14px;
        border-radius:13px !important;
    }

    .simpanse-profile-card .card-body{
        padding:18px;
    }

    .simpanse-profile-photo-wrap,
    .simpanse-profile-photo-large{
        width:125px;
        height:125px;
    }

    .simpanse-profile-name-large{
        font-size:18px;
    }
}

/* =========================================================
   APP PAGE SCROLL FIX
========================================================= */

body.fix-header,
body.fix-sidebar{
    overflow-x:hidden !important;
    overflow-y:auto !important;
}


#main-wrapper{
    min-height:100vh;
    overflow:visible !important;
}


.page-wrapper{
    min-height:
        calc(
            100vh - var(--simpanse-topbar-height)
        );

    overflow:visible !important;
}


.page-wrapper .container-fluid{
    overflow:visible !important;
}


/* Sidebar tetap scroll sendiri */

.left-sidebar{
    overflow:hidden !important;
}


.left-sidebar .scroll-sidebar{
    height:100% !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
}


/* Profile page */

.simpanse-profile-page{
    overflow:visible !important;
}
/* =========================================================
   SIMPANSE DASHBOARD
========================================================= */

.simpanse-dashboard{
    padding-top:18px;
    padding-bottom:25px;
}

/* =========================================================
   HERO
========================================================= */

.simpanse-dashboard-hero{
    position:relative;
    overflow:hidden;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;

    margin-bottom:18px;
    padding:22px 25px;

    border-radius:17px;

    background:
        linear-gradient(
            135deg,
            #074653 0%,
            #0b6170 48%,
            #188b9d 100%
        );

    color:#fff;

    box-shadow:
        0 10px 30px rgba(7,70,83,.18);
}

.simpanse-dashboard-hero::before{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-100px;
    top:-130px;

    border-radius:50%;

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

.simpanse-dashboard-hero::after{
    content:"";

    position:absolute;

    width:170px;
    height:170px;

    right:120px;
    bottom:-120px;

    border-radius:50%;

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

.simpanse-dashboard-hero-content,
.simpanse-dashboard-hero-side{
    position:relative;
    z-index:2;
}

.simpanse-dashboard-eyebrow{
    margin-bottom:5px;

    color:
        rgba(255,255,255,.66);

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

    text-transform:uppercase;
    letter-spacing:1.2px;
}

.simpanse-dashboard-hero h1{
    margin:0;

    color:#fff;

    font-size:27px;
    font-weight:800;

    letter-spacing:-.7px;
}

.simpanse-dashboard-hero p{
    margin:
        7px 0 0;

    max-width:620px;

    color:
        rgba(255,255,255,.76);

    font-size:12px;
    line-height:1.6;
}

.simpanse-dashboard-branch{
    min-width:180px;

    padding:12px 15px;

    display:flex;
    align-items:center;

    gap:11px;

    border-radius:12px;

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

    border:
        1px solid rgba(255,255,255,.10);
}

.simpanse-dashboard-branch-icon{
    width:39px;
    height:39px;

    flex:0 0 39px;

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

    border-radius:10px;

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

    font-size:16px;
}

.simpanse-dashboard-branch small{
    display:block;

    color:
        rgba(255,255,255,.60);

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

    text-transform:uppercase;
    letter-spacing:.7px;
}

.simpanse-dashboard-branch strong{
    display:block;

    margin-top:2px;

    color:#fff;

    font-size:13px;
}


/* =========================================================
   KPI
========================================================= */

.simpanse-kpi-card{
    position:relative;

    min-height:120px;

    margin-bottom:18px;

    padding:18px;

    overflow:hidden;

    border:0;
    border-radius:14px;

    background:#fff;

    box-shadow:
        0 6px 20px rgba(18,68,78,.075);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.simpanse-kpi-card:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 10px 27px rgba(18,68,78,.11);
}

.simpanse-kpi-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:12px;
}

.simpanse-kpi-label{
    color:#7a8d92;

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

    text-transform:uppercase;
    letter-spacing:.6px;
}

.simpanse-kpi-number{
    margin-top:8px;

    color:#1c373e;

    font-size:25px;
    font-weight:800;

    line-height:1;
}

.simpanse-kpi-note{
    margin-top:8px;

    color:#97a5a9;

    font-size:9px;
}

.simpanse-kpi-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

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

    border-radius:11px;

    font-size:17px;
}

.simpanse-kpi-icon.teal{
    color:#0c7888;
    background:#e7f7f9;
}

.simpanse-kpi-icon.blue{
    color:#4169c9;
    background:#eef3ff;
}

.simpanse-kpi-icon.orange{
    color:#d88627;
    background:#fff5e8;
}

.simpanse-kpi-icon.purple{
    color:#7b58c7;
    background:#f2edff;
}

.simpanse-kpi-icon.red{
    color:#d45665;
    background:#fff0f2;
}

.simpanse-kpi-icon.green{
    color:#31845d;
    background:#eaf8f1;
}


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

.simpanse-dashboard-card{
    margin-bottom:18px;

    border:0 !important;
    border-radius:15px !important;

    background:#fff;

    box-shadow:
        0 6px 22px rgba(18,68,78,.075);
}

.simpanse-dashboard-card .card-body{
    padding:20px;
}

.simpanse-dashboard-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:12px;

    margin-bottom:18px;
}

.simpanse-dashboard-card-title{
    margin:0;

    color:#203b42;

    font-size:16px;
    font-weight:800;
}

.simpanse-dashboard-card-subtitle{
    margin:
        4px 0 0;

    color:#899a9e;

    font-size:10px;
}


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

.simpanse-chart{
    width:100%;
    min-height:285px;
}

.simpanse-chart .c3-axis path,
.simpanse-chart .c3-axis line{
    stroke:#e1e9eb;
}

.simpanse-chart .c3-axis text{
    fill:#809298;

    font-size:10px;
}

.simpanse-chart .c3-grid line{
    stroke:#edf2f3;
}

.simpanse-chart .c3-line{
    stroke-width:3px;
}

.simpanse-chart .c3-circle{
    stroke-width:2px;
}


/* =========================================================
   ACTIVITY
========================================================= */

.simpanse-activity-list{
    margin:0;
    padding:0;

    list-style:none;
}

.simpanse-activity-item{
    position:relative;

    display:flex;

    gap:12px;

    padding:
        12px 0;

    border-bottom:
        1px solid #edf2f3;
}

.simpanse-activity-item:last-child{
    border-bottom:0;
}

.simpanse-activity-icon{
    width:36px;
    height:36px;

    flex:0 0 36px;

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

    border-radius:10px;

    font-size:13px;
}

.simpanse-activity-icon.incoming{
    color:#27825e;
    background:#eaf8f1;
}

.simpanse-activity-icon.outgoing{
    color:#3975c8;
    background:#edf4ff;
}

.simpanse-activity-icon.warning{
    color:#d45865;
    background:#fff0f2;
}

.simpanse-activity-icon.default{
    color:#6f7e83;
    background:#f1f5f6;
}

.simpanse-activity-content{
    flex:1;
    min-width:0;
}

.simpanse-activity-title{
    margin:0;

    color:#304b52;

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

.simpanse-activity-product{
    margin-top:3px;

    color:#6f8388;

    font-size:10px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.simpanse-activity-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:10px;

    margin-top:5px;

    color:#9aa7ab;

    font-size:9px;
}

.simpanse-activity-qty{
    color:#147f91;
    font-weight:700;
}


/* =========================================================
   STOCK WARNING
========================================================= */

.simpanse-stock-warning{
    width:100%;

    margin:0;
}

.simpanse-stock-warning-item{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:12px;

    padding:
        11px 0;

    border-bottom:
        1px solid #edf2f3;
}

.simpanse-stock-warning-item:last-child{
    border-bottom:0;
}

.simpanse-stock-warning-name{
    min-width:0;
}

.simpanse-stock-warning-category{
    margin-bottom:3px;

    color:#9aa7ab;

    font-size:8px;

    text-transform:uppercase;
    letter-spacing:.5px;
}

.simpanse-stock-warning-name strong{
    display:block;

    color:#344e54;

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

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.simpanse-stock-warning-value{
    flex:0 0 auto;

    padding:
        5px 9px;

    border-radius:20px;

    color:#c94d5c;

    background:#fff0f2;

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


/* =========================================================
   EMPTY
========================================================= */

.simpanse-dashboard-empty{
    padding:
        35px 15px;

    text-align:center;

    color:#91a0a4;

    font-size:11px;
}

.simpanse-dashboard-empty i{
    display:block;

    margin-bottom:8px;

    color:#bad1d5;

    font-size:27px;
}


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

@media(max-width:767px){

    .simpanse-dashboard{
        padding-top:12px;
    }

    .simpanse-dashboard-hero{
        display:block;

        padding:18px;

        border-radius:14px;
    }

    .simpanse-dashboard-hero h1{
        font-size:23px;
    }

    .simpanse-dashboard-hero p{
        font-size:11px;
    }

    .simpanse-dashboard-hero-side{
        margin-top:14px;
    }

    .simpanse-dashboard-branch{
        width:100%;

        min-width:0;
    }

    .simpanse-kpi-card{
        min-height:105px;

        margin-bottom:12px;

        padding:15px;
    }

    .simpanse-kpi-number{
        font-size:22px;
    }

    .simpanse-dashboard-card{
        margin-bottom:14px;
    }

    .simpanse-dashboard-card .card-body{
        padding:16px;
    }

    .simpanse-chart{
        min-height:240px;
    }
}

/* =========================================================
   SIMPANSE EXECUTIVE DASHBOARD
========================================================= */

.simpanse-exec-dashboard{
    padding-top:18px;
    padding-bottom:28px;
}

/* HERO */
.sd-hero{
    position:relative;
    overflow:hidden;
    margin-bottom:18px;
    padding:22px 25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-radius:17px;
    background:linear-gradient(135deg,#074653 0%,#0b6170 48%,#188b9d 100%);
    color:#fff;
    box-shadow:0 10px 30px rgba(7,70,83,.18);
}

.sd-hero:before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    right:-120px;
    top:-160px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
}

.sd-hero-content,
.sd-hero-branch{
    position:relative;
    z-index:2;
}

.sd-eyebrow{
    margin-bottom:5px;
    color:rgba(255,255,255,.65);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.sd-hero h1{
    margin:0;
    color:#fff;
    font-size:27px;
    font-weight:800;
    letter-spacing:-.7px;
}

.sd-hero p{
    max-width:650px;
    margin:7px 0 0;
    color:rgba(255,255,255,.76);
    font-size:12px;
    line-height:1.6;
}

.sd-branch-box{
    min-width:190px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.10);
}

.sd-branch-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,.12);
    font-size:16px;
}

.sd-branch-box small{
    display:block;
    color:rgba(255,255,255,.6);
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.sd-branch-box strong{
    display:block;
    margin-top:2px;
    color:#fff;
    font-size:13px;
}

/* KPI */
.sd-kpi{
    position:relative;
    min-height:118px;
    margin-bottom:17px;
    padding:17px;
    overflow:hidden;
    border:0;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 20px rgba(18,68,78,.075);
    transition:.2s;
}

.sd-kpi:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 27px rgba(18,68,78,.11);
}

.sd-kpi-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.sd-kpi-label{
    color:#7c8f94;
    font-size:9px;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
}

.sd-kpi-value{
    margin-top:8px;
    color:#1d373e;
    font-size:23px;
    line-height:1;
    font-weight:800;
}

.sd-kpi-value.money{
    font-size:19px;
}

.sd-kpi-note{
    margin-top:8px;
    color:#96a5a9;
    font-size:9px;
}

.sd-kpi-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    font-size:16px;
}

.sd-kpi-icon.teal{background:#e7f7f9;color:#0d7888;}
.sd-kpi-icon.green{background:#eaf8f1;color:#31845d;}
.sd-kpi-icon.blue{background:#edf4ff;color:#4270c7;}
.sd-kpi-icon.orange{background:#fff4e6;color:#d68324;}
.sd-kpi-icon.red{background:#fff0f2;color:#d25564;}
.sd-kpi-icon.purple{background:#f2edff;color:#7554c2;}

/* FINANCE */
.sd-finance-card{
    position:relative;
    margin-bottom:18px;
    padding:20px;
    overflow:hidden;
    border-radius:15px;
    background:linear-gradient(145deg,#103b44,#125969);
    color:#fff;
    box-shadow:0 8px 25px rgba(11,71,82,.15);
}

.sd-finance-title{
    margin:0;
    color:#fff;
    font-size:16px;
    font-weight:800;
}

.sd-finance-subtitle{
    margin-top:4px;
    color:rgba(255,255,255,.58);
    font-size:10px;
}

.sd-finance-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:18px;
}

.sd-finance-item{
    padding:13px;
    border-radius:11px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.08);
}

.sd-finance-item small{
    display:block;
    color:rgba(255,255,255,.55);
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
}

.sd-finance-item strong{
    display:block;
    margin-top:7px;
    color:#fff;
    font-size:16px;
}

.sd-finance-item.profit strong{
    color:#9ef0c7;
}

.sd-finance-item.loss strong{
    color:#ffb3bb;
}

/* CARD */
.sd-card{
    margin-bottom:18px;
    border:0 !important;
    border-radius:15px !important;
    background:#fff;
    box-shadow:0 6px 22px rgba(18,68,78,.075);
}

.sd-card .card-body{
    padding:20px;
}

.sd-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:17px;
}

.sd-card-title{
    margin:0;
    color:#203b42;
    font-size:16px;
    font-weight:800;
}

.sd-card-subtitle{
    margin:4px 0 0;
    color:#8a9b9f;
    font-size:10px;
}

/* CHART */
.sd-chart{
    width:100%;
    min-height:290px;
}

.sd-chart .c3-axis path,
.sd-chart .c3-axis line{
    stroke:#e1e9eb;
}

.sd-chart .c3-axis text{
    fill:#809298;
    font-size:10px;
}

.sd-chart .c3-grid line{
    stroke:#edf2f3;
}

/* TOP LIST */
.sd-ranking{
    margin:0;
    padding:0;
    list-style:none;
}

.sd-ranking li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #edf2f3;
}

.sd-ranking li:last-child{
    border-bottom:0;
}

.sd-rank-no{
    width:30px;
    height:30px;
    flex:0 0 30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:#147f91;
    background:#eaf7f9;
    font-size:10px;
    font-weight:800;
}

.sd-rank-content{
    flex:1;
    min-width:0;
}

.sd-rank-content strong{
    display:block;
    overflow:hidden;
    color:#344e54;
    font-size:11px;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sd-rank-content small{
    display:block;
    margin-top:3px;
    color:#91a0a4;
    font-size:9px;
}

.sd-rank-value{
    flex:0 0 auto;
    text-align:right;
}

.sd-rank-value strong{
    display:block;
    color:#147f91;
    font-size:10px;
}

.sd-rank-value small{
    color:#95a4a8;
    font-size:8px;
}

/* STOCK WARNING */
.sd-warning-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #edf2f3;
}

.sd-warning-row:last-child{
    border-bottom:0;
}

.sd-warning-name{
    min-width:0;
}

.sd-warning-name small{
    display:block;
    color:#9aa7ab;
    font-size:8px;
    text-transform:uppercase;
}

.sd-warning-name strong{
    display:block;
    max-width:290px;
    overflow:hidden;
    margin-top:3px;
    color:#344e54;
    font-size:10px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.sd-warning-stock{
    flex:0 0 auto;
    padding:5px 9px;
    border-radius:20px;
    background:#fff0f2;
    color:#c84c5b;
    font-size:9px;
    font-weight:700;
}

/* ACTIVITY */
.sd-activity{
    margin:0;
    padding:0;
    list-style:none;
}

.sd-activity li{
    display:flex;
    gap:11px;
    padding:10px 0;
    border-bottom:1px solid #edf2f3;
}

.sd-activity li:last-child{
    border-bottom:0;
}

.sd-activity-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#edf8fa;
    color:#147f91;
    font-size:12px;
}

.sd-activity-content{
    flex:1;
    min-width:0;
}

.sd-activity-content strong{
    display:block;
    color:#344e54;
    font-size:10px;
}

.sd-activity-content span{
    display:block;
    margin-top:3px;
    overflow:hidden;
    color:#7f9297;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sd-activity-content small{
    display:block;
    margin-top:4px;
    color:#a0abad;
    font-size:8px;
}

/* EMPTY */
.sd-empty{
    padding:32px 15px;
    text-align:center;
    color:#94a4a8;
    font-size:10px;
}

.sd-empty i{
    display:block;
    margin-bottom:8px;
    color:#bed2d6;
    font-size:25px;
}

@media(max-width:991px){
    .sd-finance-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:767px){

    .simpanse-exec-dashboard{
        padding-top:12px;
    }

    .sd-hero{
        display:block;
        padding:18px;
        border-radius:14px;
    }

    .sd-hero h1{
        font-size:23px;
    }

    .sd-hero-branch{
        margin-top:14px;
    }

    .sd-branch-box{
        width:100%;
        min-width:0;
    }

    .sd-kpi{
        min-height:105px;
        margin-bottom:12px;
        padding:14px;
    }

    .sd-kpi-value{
        font-size:21px;
    }

    .sd-kpi-value.money{
        font-size:16px;
    }

    .sd-finance-grid{
        grid-template-columns:1fr 1fr;
    }

    .sd-finance-item strong{
        font-size:13px;
    }

    .sd-card{
        margin-bottom:14px;
    }

    .sd-card .card-body{
        padding:15px;
    }

    .sd-chart{
        min-height:240px;
    }
}

@media(max-width:420px){
    .sd-finance-grid{
        grid-template-columns:1fr;
    }
}

/* =========================================================
   SIMPANSE - GLOBAL MODAL THEME
   Berlaku untuk semua Bootstrap Modal
========================================================= */

/* Modal box */
.modal-content {
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.20) !important;
    background: #ffffff !important;
}


/* =========================================================
   MODAL HEADER
========================================================= */

.modal-header {
    background: linear-gradient(
        135deg,
        #0d6f73 0%,
        #15958c 55%,
        #42b883 100%
    ) !important;

    border-bottom: 0 !important;
    padding: 17px 20px !important;

    display: flex !important;
    align-items: center !important;
}


/* Judul modal */
.modal-header .modal-title,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}


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

.modal-header .close {
    color: #ffffff !important;
    opacity: 1 !important;

    text-shadow: none !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;
    margin: -4px -4px -4px auto !important;

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 25px !important;
    font-weight: 400 !important;

    background: rgba(255, 255, 255, 0.14) !important;

    transition: all .2s ease !important;
}


.modal-header .close:hover,
.modal-header .close:focus {
    color: #ffffff !important;
    opacity: 1 !important;

    background: rgba(255, 255, 255, 0.25) !important;

    outline: none !important;
    transform: rotate(90deg);
}


/* =========================================================
   MODAL BODY
========================================================= */

.modal-body {
    padding: 22px !important;
    background: #ffffff !important;
    color: #263238 !important;
}


/* Label */
.modal-body label {
    color: #263238 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 7px !important;
}


/* Form */
.modal-body .form-control {
    min-height: 44px;

    border: 1px solid #dce5e7 !important;
    border-radius: 9px !important;

    padding: 9px 12px !important;

    color: #263238 !important;
    background: #ffffff !important;

    box-shadow: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease !important;
}


.modal-body .form-control:focus {
    border-color: #15958c !important;

    box-shadow:
        0 0 0 3px rgba(21, 149, 140, 0.12) !important;
}


/* =========================================================
   READONLY INPUT
========================================================= */

.modal-body .form-control[readonly],
.modal-body .form-control:disabled {
    background: #f4f7f7 !important;
    color: #455a64 !important;

    border-color: #e1e8e8 !important;

    cursor: default;
}


/* =========================================================
   FORM GROUP
========================================================= */

.modal-body .form-group {
    margin-bottom: 17px !important;
}


/* =========================================================
   MODAL FOOTER
========================================================= */

.modal-footer {
    background: #f8fafb !important;

    border-top: 1px solid #edf1f2 !important;

    padding: 14px 20px !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;

    gap: 8px;
}


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

.modal-footer .btn {
    min-height: 38px;

    border-radius: 8px !important;

    padding: 8px 15px !important;

    font-weight: 600 !important;

    border: 0 !important;

    box-shadow: none !important;

    transition: all .2s ease !important;
}


.modal-footer .btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.12) !important;
}


/* DELETE */
.modal-footer .btn-danger {
    background: #dc3545 !important;
    color: #ffffff !important;
}


.modal-footer .btn-danger:hover {
    background: #c82333 !important;
}


/* PRIMARY */
.modal-footer .btn-primary {
    background: #147f91 !important;
    color: #ffffff !important;
}


/* SUCCESS */
.modal-footer .btn-success {
    background: #15958c !important;
    color: #ffffff !important;
}


/* CANCEL / DARK */
.modal-footer .btn-dark,
.modal-footer .btn-secondary {
    background: #455a64 !important;
    color: #ffffff !important;
}


/* =========================================================
   MODAL POSITION
========================================================= */

.modal-dialog {
    margin-top: 70px !important;
    margin-bottom: 30px !important;
}


/* =========================================================
   MODAL BACKDROP
========================================================= */

.modal-backdrop.show {
    opacity: .45 !important;
}


/* =========================================================
   MODAL SCROLL
   Penting untuk modal panjang
========================================================= */

.modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}


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

@media (max-width: 767px) {

    .modal-dialog {
        margin: 70px 12px 20px 12px !important;
        max-width: none !important;
    }

    .modal-content {
        border-radius: 13px !important;
    }

    .modal-header {
        padding: 15px 16px !important;
    }

    .modal-header .modal-title {
        font-size: 17px !important;
    }

    .modal-body {
        padding: 17px !important;
    }

    .modal-footer {
        padding: 12px 16px !important;

        flex-wrap: wrap !important;
    }

    .modal-footer .btn {
        min-height: 40px;
    }

}

/* =========================================================
   SIMPANSE SIDEBAR TYPOGRAPHY
   Global override agar menu lebih jelas dan tidak buram
========================================================= */


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

.left-sidebar,
.scroll-sidebar,
.sidebar-nav{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}


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

.sidebar-nav > ul > li > a,
#sidebarnav > li > a{
    min-height:46px;

    display:flex;
    align-items:center;

    padding-top:10px !important;
    padding-bottom:10px !important;

    color:#294a46 !important;

    font-size:14px !important;
    font-weight:700 !important;

    line-height:1.35 !important;

    letter-spacing:.1px;
}


/* MAIN MENU ICON */

.sidebar-nav > ul > li > a i,
#sidebarnav > li > a i{
    min-width:25px;

    color:#38665f !important;

    font-size:16px !important;

    opacity:1 !important;
}


/* MAIN MENU TEXT */

.sidebar-nav > ul > li > a .hide-menu,
#sidebarnav > li > a .hide-menu{
    color:#294a46 !important;

    font-size:14px !important;
    font-weight:700 !important;

    opacity:1 !important;
}


/* =========================================================
   MAIN MENU HOVER
========================================================= */

.sidebar-nav > ul > li > a:hover,
#sidebarnav > li > a:hover{
    background:#edf8f6 !important;

    color:#126f61 !important;
}


.sidebar-nav > ul > li > a:hover i,
.sidebar-nav > ul > li > a:hover .hide-menu,
#sidebarnav > li > a:hover i,
#sidebarnav > li > a:hover .hide-menu{
    color:#126f61 !important;
}


/* =========================================================
   ACTIVE MAIN MENU
========================================================= */

.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li > a.active,
#sidebarnav > li.active > a,
#sidebarnav > li > a.active{
    background:#e3f5f1 !important;

    color:#0e6c5e !important;

    font-weight:800 !important;
}


.sidebar-nav > ul > li.active > a i,
.sidebar-nav > ul > li.active > a .hide-menu,
.sidebar-nav > ul > li > a.active i,
.sidebar-nav > ul > li > a.active .hide-menu{
    color:#0e6c5e !important;

    font-weight:800 !important;
}


/* =========================================================
   SUBMENU
========================================================= */

.sidebar-nav ul li ul,
#sidebarnav li ul{
    padding-top:4px !important;
    padding-bottom:7px !important;
}


/* SUBMENU LINK */

.sidebar-nav ul li ul li a,
#sidebarnav li ul li a{
    min-height:38px;

    display:flex;
    align-items:center;

    padding-top:8px !important;
    padding-bottom:8px !important;

    color:#405c58 !important;

    font-size:13px !important;
    font-weight:600 !important;

    line-height:1.35 !important;

    opacity:1 !important;
}


/* =========================================================
   SUBMENU ICON
========================================================= */

.sidebar-nav ul li ul li a i,
#sidebarnav li ul li a i{
    min-width:21px;

    color:#5a756f !important;

    font-size:11px !important;

    opacity:1 !important;
}


/* =========================================================
   SUBMENU HOVER
========================================================= */

.sidebar-nav ul li ul li a:hover,
#sidebarnav li ul li a:hover{
    background:#f1f9f7 !important;

    color:#137967 !important;

    font-weight:700 !important;
}


.sidebar-nav ul li ul li a:hover i,
#sidebarnav li ul li a:hover i{
    color:#137967 !important;
}


/* =========================================================
   ACTIVE SUBMENU
========================================================= */

.sidebar-nav ul li ul li.active > a,
.sidebar-nav ul li ul li a.active,
#sidebarnav li ul li.active > a,
#sidebarnav li ul li a.active{
    background:#e7f6f3 !important;

    color:#0f7464 !important;

    font-weight:800 !important;
}


.sidebar-nav ul li ul li.active > a i,
.sidebar-nav ul li ul li a.active i{
    color:#0f7464 !important;
}


/* =========================================================
   ARROW / CHEVRON
========================================================= */

.sidebar-nav .has-arrow::after,
#sidebarnav .has-arrow::after{
    border-color:#56726c !important;

    opacity:1 !important;
}


/* =========================================================
   SECTION / GROUP LABEL
   jika sidebar punya heading/group
========================================================= */

.sidebar-nav .nav-small-cap,
#sidebarnav .nav-small-cap{
    color:#647d78 !important;

    font-size:10px !important;
    font-weight:800 !important;

    letter-spacing:.8px;

    text-transform:uppercase;
}


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

@media(max-width:767px){

    .sidebar-nav > ul > li > a,
    #sidebarnav > li > a{
        min-height:50px;

        font-size:15px !important;

        font-weight:700 !important;
    }


    .sidebar-nav > ul > li > a .hide-menu,
    #sidebarnav > li > a .hide-menu{
        font-size:15px !important;
    }


    .sidebar-nav > ul > li > a i,
    #sidebarnav > li > a i{
        font-size:17px !important;
    }


    .sidebar-nav ul li ul li a,
    #sidebarnav li ul li a{
        min-height:42px;

        font-size:14px !important;

        font-weight:600 !important;
    }


    .sidebar-nav ul li ul li a i,
    #sidebarnav li ul li a i{
        font-size:12px !important;
    }

}


/* =========================================================
   DESKTOP COLLAPSED SIDEBAR
   icon tetap jelas ketika sidebar di-hide
========================================================= */

@media(min-width:768px){

    body.mini-sidebar
    .sidebar-nav > ul > li > a i,

    body.mini-sidebar
    #sidebarnav > li > a i{

        color:#315d55 !important;

        font-size:17px !important;

        opacity:1 !important;
    }

}

/* =========================================================
   SIDEBAR INDENT / MENJOROK KE DALAM
========================================================= */


/* MAIN MENU */

.sidebar-nav > ul > li > a,
#sidebarnav > li > a{
    padding-left:18px !important;
    padding-right:14px !important;
}


/* MAIN MENU ICON */

.sidebar-nav > ul > li > a i,
#sidebarnav > li > a i{
    margin-right:8px !important;
}


/* =========================================================
   SUBMENU LEVEL 1
========================================================= */

.sidebar-nav ul li ul li a,
#sidebarnav li ul li a{
    padding-left:38px !important;
    padding-right:12px !important;
}


/* SUBMENU ICON */

.sidebar-nav ul li ul li a i,
#sidebarnav li ul li a i{
    margin-right:7px !important;
}


/* =========================================================
   SUBMENU LEVEL 2
   kalau nanti ada nested submenu
========================================================= */

.sidebar-nav ul li ul li ul li a,
#sidebarnav li ul li ul li a{
    padding-left:54px !important;
}


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

@media(max-width:767px){

    .sidebar-nav > ul > li > a,
    #sidebarnav > li > a{
        padding-left:20px !important;
        padding-right:14px !important;
    }


    .sidebar-nav ul li ul li a,
    #sidebarnav li ul li a{
        padding-left:42px !important;
        padding-right:12px !important;
    }


    .sidebar-nav ul li ul li ul li a,
    #sidebarnav li ul li ul li a{
        padding-left:58px !important;
    }

}
/* =========================================================
   SIMPANSE GLOBAL UI ENHANCEMENT
   Bigger typography + stronger cards + mobile header
========================================================= */


/* =========================================================
   GLOBAL FONT RENDERING
========================================================= */

html,
body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}


/* =========================================================
   MAIN PAGE CONTENT
========================================================= */

.page-wrapper{
    color:#2d4642;
}


.container-fluid{
    font-size:14px;
}


/* PAGE TITLE */

.page-wrapper h1,
.page-wrapper h2,
.page-wrapper h3,
.page-wrapper h4,
.page-wrapper h5,
.page-wrapper h6{
    color:#213f3a;
    font-weight:700;
}


.page-wrapper h3{
    font-size:22px;
}


.page-wrapper h4{
    font-size:17px;
}


.page-wrapper h5{
    font-size:15px;
}


/* NORMAL TEXT */

.page-wrapper p,
.page-wrapper label,
.page-wrapper td,
.page-wrapper input,
.page-wrapper select,
.page-wrapper textarea,
.page-wrapper button{
    font-size:13px;
}


/* FORM LABEL */

.page-wrapper .form-group label{
    color:#344f4a;
    font-size:12px;
    font-weight:700;
}


/* INPUT */

.page-wrapper .form-control,
.page-wrapper .custom-select{
    color:#263f3b !important;

    font-size:13px !important;
    font-weight:500;

    border-color:#ccdcd8 !important;
}


/* =========================================================
   GLOBAL CARD
========================================================= */

.page-wrapper .card{
    border:
        1px solid
        #dce8e5 !important;

    border-radius:
        13px !important;

    background:#ffffff;

    box-shadow:
        0 5px 18px
        rgba(25,68,61,.08);
}


.page-wrapper .card-body{
    color:#304b46;
}


/* CARD TITLE */

.page-wrapper .card-title{
    color:#213f3a !important;

    font-size:16px !important;
    font-weight:800 !important;
}


/* CARD SUBTITLE */

.page-wrapper .card-subtitle{
    color:#687f7a !important;

    font-size:11px !important;
    font-weight:500 !important;
}


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

.page-wrapper table{
    color:#304944 !important;
}


.page-wrapper table thead th{
    font-size:12px !important;
    font-weight:700 !important;
}


.page-wrapper table tbody td{
    color:#304944 !important;

    font-size:12px !important;
    font-weight:500;
}


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

.sidebar-nav > ul > li > a,
#sidebarnav > li > a{
    min-height:48px;

    display:flex;
    align-items:center;

    padding:
        10px
        14px
        10px
        20px !important;

    color:#254840 !important;

    font-size:14px !important;
    font-weight:700 !important;

    line-height:1.35 !important;

    opacity:1 !important;
}


/* MAIN ICON */

.sidebar-nav > ul > li > a i,
#sidebarnav > li > a i{
    min-width:25px;

    margin-right:8px !important;

    color:#37665d !important;

    font-size:16px !important;

    opacity:1 !important;
}


/* MAIN TEXT */

.sidebar-nav > ul > li > a .hide-menu,
#sidebarnav > li > a .hide-menu{
    color:#254840 !important;

    font-size:14px !important;
    font-weight:700 !important;

    opacity:1 !important;
}


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

.sidebar-nav ul li ul li a,
#sidebarnav li ul li a{
    min-height:40px;

    display:flex;
    align-items:center;

    /*
     * Dibuat lebih menjorok.
     */
    padding:
        8px
        12px
        8px
        44px !important;

    color:#3a5852 !important;

    font-size:13px !important;
    font-weight:600 !important;

    line-height:1.4 !important;

    opacity:1 !important;
}


/* SUB MENU ICON */

.sidebar-nav ul li ul li a i,
#sidebarnav li ul li a i{
    min-width:20px;

    margin-right:7px !important;

    color:#58746e !important;

    font-size:12px !important;

    opacity:1 !important;
}


/* =========================================================
   NESTED SUBMENU
========================================================= */

.sidebar-nav ul li ul li ul li a,
#sidebarnav li ul li ul li a{
    padding-left:62px !important;
}


/* =========================================================
   HOVER
========================================================= */

.sidebar-nav > ul > li > a:hover,
#sidebarnav > li > a:hover{
    background:#eaf6f3 !important;

    color:#0d7462 !important;
}


.sidebar-nav > ul > li > a:hover i,
.sidebar-nav > ul > li > a:hover .hide-menu{
    color:#0d7462 !important;
}


.sidebar-nav ul li ul li a:hover,
#sidebarnav li ul li a:hover{
    background:#edf8f5 !important;

    color:#0e7563 !important;

    font-weight:700 !important;
}


/* =========================================================
   ACTIVE
========================================================= */

.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li > a.active,
#sidebarnav > li.active > a,
#sidebarnav > li > a.active{
    background:#dff2ed !important;

    color:#0b6c5a !important;

    font-weight:800 !important;
}


.sidebar-nav ul li ul li.active > a,
.sidebar-nav ul li ul li a.active,
#sidebarnav li ul li.active > a,
#sidebarnav li ul li a.active{
    background:#e5f5f1 !important;

    color:#0b6e5c !important;

    font-weight:800 !important;
}


/* =========================================================
   MOBILE HEADER
========================================================= */

.simpanse-mobile-header{
    height:60px;

    display:flex !important;
    align-items:center !important;

    gap:9px;

    padding:
        0
        8px !important;
}


/* DRAWER ICON */

.simpanse-mobile-drawer-icon{
    width:28px;

    flex:0 0 28px;

    color:#ffffff !important;

    font-size:21px !important;

    text-align:center;

    opacity:1 !important;
}


/* MOBILE LOGO */

.simpanse-mobile-logo{
    width:34px !important;
    height:34px !important;

    flex:0 0 34px;

    object-fit:contain;

    border-radius:7px;
}


/* MOBILE SIMPANSE TEXT */

.simpanse-mobile-header-name{
    display:inline-flex;
    align-items:center;

    white-space:nowrap;

    font-size:17px !important;
    font-weight:800 !important;

    line-height:1;
}


.simpanse-mobile-header-name .sim{
    color:#ffffff !important;
}


.simpanse-mobile-header-name .pan{
    color:#8ce8ed !important;
}


.simpanse-mobile-header-name .se{
    color:#f4c0d1 !important;
}


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

@media(max-width:767px){


    /* ================================================
       MAIN CONTENT FONT
    ================================================= */

    .page-wrapper{
        font-size:14px;
    }


    .page-wrapper .container-fluid{
        font-size:14px;
    }


    .page-wrapper h3{
        font-size:21px !important;
    }


    .page-wrapper h4{
        font-size:17px !important;
    }


    .page-wrapper .card-title{
        font-size:16px !important;
    }


    .page-wrapper .card-subtitle{
        font-size:11px !important;
    }


    .page-wrapper p{
        font-size:13px;
        line-height:1.55;
    }


    .page-wrapper label{
        font-size:13px !important;
    }


    .page-wrapper .form-control,
    .page-wrapper .custom-select{
        min-height:41px;

        font-size:14px !important;

        color:#263f3b !important;

        font-weight:500;
    }


    /* ================================================
       CARDS MORE SOLID
    ================================================= */

    .page-wrapper .card{
        border:
            1px solid
            #d3e2de !important;

        box-shadow:
            0 5px 16px
            rgba(23,62,55,.09);
    }


    .page-wrapper .card-body{
        padding:
            15px !important;
    }


    /* ================================================
       TABLE / MOBILE CARD TEXT
    ================================================= */

    .page-wrapper table tbody td{
        color:#2d4742 !important;

        font-size:13px !important;

        font-weight:500 !important;
    }


    /* ================================================
       SIDEBAR MAIN MENU MOBILE
    ================================================= */

    .sidebar-nav > ul > li > a,
    #sidebarnav > li > a{
        min-height:52px;

        padding:
            11px
            14px
            11px
            22px !important;

        font-size:15px !important;

        font-weight:700 !important;
    }


    .sidebar-nav > ul > li > a .hide-menu,
    #sidebarnav > li > a .hide-menu{
        font-size:15px !important;

        font-weight:700 !important;
    }


    .sidebar-nav > ul > li > a i,
    #sidebarnav > li > a i{
        min-width:27px;

        margin-right:9px !important;

        font-size:17px !important;
    }


    /* ================================================
       SUBMENU MOBILE
    ================================================= */

    .sidebar-nav ul li ul li a,
    #sidebarnav li ul li a{
        min-height:45px;

        /*
         * Lebih menjorok daripada desktop.
         */
        padding:
            9px
            12px
            9px
            48px !important;

        color:#35544d !important;

        font-size:14px !important;

        font-weight:600 !important;
    }


    .sidebar-nav ul li ul li a i,
    #sidebarnav li ul li a i{
        min-width:21px;

        margin-right:8px !important;

        color:#53726a !important;

        font-size:13px !important;
    }


    /* NESTED */

    .sidebar-nav ul li ul li ul li a,
    #sidebarnav li ul li ul li a{
        padding-left:66px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .simpanse-mobile-header{
        gap:7px;
    }


    .simpanse-mobile-logo{
        width:31px !important;
        height:31px !important;

        flex-basis:31px;
    }


    .simpanse-mobile-header-name{
        font-size:16px !important;
    }


    .simpanse-mobile-drawer-icon{
        font-size:20px !important;
    }

}
/* =========================================================
   MOBILE HEADER VISIBILITY
========================================================= */

/* DESKTOP: SEMBUNYIKAN */
@media(min-width:768px){

    .simpanse-mobile-header{
        display:none !important;
    }

}


/* MOBILE: TAMPILKAN */
@media(max-width:767px){

    .simpanse-mobile-header{
        display:flex !important;
        align-items:center !important;
    }

}



table td .badge {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
}
.badge {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    line-height: 1.2 !important;
}
/* =========================================================
   SIDEBAR - COMPACT SPACING
========================================================= */

/* MENU UTAMA */
#sidebarnav > li > a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: auto !important;
}

/* Jarak antar menu utama */
#sidebarnav > li {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}


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

#sidebarnav ul.collapse > li > a,
#sidebarnav ul.in > li > a {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    min-height: auto !important;
}

/* Hilangkan gap tambahan antar submenu */
#sidebarnav ul.collapse > li,
#sidebarnav ul.in > li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   ICON
========================================================= */

/* Icon menu utama */
#sidebarnav > li > a > i {
    width: 24px !important;
    text-align: center;
    margin-right: 6px !important;
    font-size: 17px !important;
}

/* Icon submenu */
#sidebarnav ul li a i {
    width: 20px !important;
    text-align: center;
    margin-right: 5px !important;
    font-size: 14px !important;
}


/* =========================================================
   TEXT
========================================================= */

#sidebarnav > li > a .hide-menu {
    line-height: 20px !important;
}

#sidebarnav ul li a span {
    line-height: 18px !important;
}

/* =========================================================
   SUBMENU - COMPACT & CONSISTENT
========================================================= */

.left-sidebar #sidebarnav ul.collapse,
.left-sidebar #sidebarnav ul.in {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 3px !important;
}

.left-sidebar #sidebarnav ul.collapse > li,
.left-sidebar #sidebarnav ul.in > li {
    margin: 0 !important;
    padding: 0 !important;
}

.left-sidebar #sidebarnav ul.collapse > li > a,
.left-sidebar #sidebarnav ul.in > li > a {
    min-height: auto !important;

    padding-top: 6px !important;
    padding-bottom: 6px !important;

    padding-left: 34px !important;

    margin: 0 !important;

    line-height: 19px !important;
}

.left-sidebar #sidebarnav ul li a i {
    width: 20px !important;
    min-width: 20px !important;

    margin-right: 5px !important;

    text-align: center !important;

    font-size: 14px !important;
}

.left-sidebar #sidebarnav ul li a span {
    line-height: 19px !important;
}
/* =========================================================
   SIDEBAR SUBMENU - FIX SHIFT / SLIDE
========================================================= */

.left-sidebar #sidebarnav ul.collapse,
.left-sidebar #sidebarnav ul.collapsing,
.left-sidebar #sidebarnav ul.in,
.left-sidebar #sidebarnav ul.show {
    margin: 0 !important;
    padding: 0 0 3px 0 !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;
}


/* Hilangkan animasi bootstrap collapse khusus sidebar */
.left-sidebar .collapse,
.left-sidebar .collapsing {
    transition: none !important;
    -webkit-transition: none !important;
}


/* Posisi submenu selalu sama */
.left-sidebar #sidebarnav ul.collapse > li > a,
.left-sidebar #sidebarnav ul.collapsing > li > a,
.left-sidebar #sidebarnav ul.in > li > a,
.left-sidebar #sidebarnav ul.show > li > a {
    margin: 0 !important;

    padding-top: 6px !important;
    padding-right: 12px !important;
    padding-bottom: 6px !important;
    padding-left: 34px !important;

    transform: none !important;
    transition: none !important;

    left: 0 !important;

    line-height: 19px !important;
}


/* Jangan biarkan LI ikut bergeser */
.left-sidebar #sidebarnav ul > li {
    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    transition: none !important;
}


/* Icon submenu */
.left-sidebar #sidebarnav ul li a i {
    display: inline-block !important;

    width: 20px !important;
    min-width: 20px !important;

    margin-right: 5px !important;

    text-align: center !important;

    font-size: 14px !important;

    transform: none !important;
}


/* Text submenu */
.left-sidebar #sidebarnav ul li a span {
    display: inline-block !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 19px !important;

    transform: none !important;
}


/* Matikan efek slide pada semua child sidebar */
.left-sidebar #sidebarnav,
.left-sidebar #sidebarnav *,
.left-sidebar .sidebar-nav,
.left-sidebar .sidebar-nav * {
    transition-property:
        background-color,
        color,
        border-color !important;
}
/* =========================================================
   SIDEBAR SUBMENU - FIX VERTICAL JUMP
========================================================= */

/* Semua state submenu harus punya spacing sama */
.left-sidebar #sidebarnav ul.collapse,
.left-sidebar #sidebarnav ul.collapsing,
.left-sidebar #sidebarnav ul.in,
.left-sidebar #sidebarnav ul.show {
    margin: 0 !important;

    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 3px !important;
    padding-left: 0 !important;

    line-height: normal !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;
}


/* Bootstrap collapsing biasanya memberi height inline.
   Biarkan height bekerja, tetapi jangan beri padding tambahan. */
.left-sidebar #sidebarnav ul.collapsing {
    padding-top: 0 !important;
    padding-bottom: 3px !important;

    overflow: hidden !important;
}


/* LI submenu */
.left-sidebar #sidebarnav ul.collapse > li,
.left-sidebar #sidebarnav ul.collapsing > li,
.left-sidebar #sidebarnav ul.in > li,
.left-sidebar #sidebarnav ul.show > li {
    margin: 0 !important;
    padding: 0 !important;

    min-height: 0 !important;
}


/* LINK submenu - SELALU ukuran sama */
.left-sidebar #sidebarnav ul.collapse > li > a,
.left-sidebar #sidebarnav ul.collapsing > li > a,
.left-sidebar #sidebarnav ul.in > li > a,
.left-sidebar #sidebarnav ul.show > li > a {
    display: flex !important;
    align-items: center !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding-top: 6px !important;
    padding-right: 12px !important;
    padding-bottom: 6px !important;
    padding-left: 34px !important;

    min-height: 31px !important;
    height: auto !important;

    line-height: 19px !important;

    transform: none !important;
    transition: none !important;
}


/* Icon submenu */
.left-sidebar #sidebarnav ul li a i {
    flex: 0 0 20px !important;

    width: 20px !important;
    min-width: 20px !important;

    margin: 0 5px 0 0 !important;
    padding: 0 !important;

    line-height: 19px !important;

    text-align: center !important;
    vertical-align: middle !important;
}


/* Text submenu */
.left-sidebar #sidebarnav ul li a span {
    margin: 0 !important;
    padding: 0 !important;

    line-height: 19px !important;

    vertical-align: middle !important;
}


/* Matikan transition Bootstrap hanya untuk sidebar */
.left-sidebar .collapse,
.left-sidebar .collapsing {
    -webkit-transition: none !important;
    transition: none !important;
}
/* =========================================================
   SIDEBAR SUBMENU - FULL STATIC / NO ANIMATION
========================================================= */

.left-sidebar #sidebarnav ul.collapse,
.left-sidebar #sidebarnav ul.collapsing,
.left-sidebar #sidebarnav ul.in,
.left-sidebar #sidebarnav ul.show {

    margin: 0 !important;
    padding: 0 0 3px 0 !important;

    transition: none !important;
    animation: none !important;

    transform: none !important;
}


/* CLOSED */
.left-sidebar #sidebarnav ul.collapse:not(.in):not(.show).static-open {
    display: block !important;
}


/* STATIC CLOSED */
.left-sidebar #sidebarnav ul.static-closed {
    display: none !important;
    height: auto !important;
}


/* STATIC OPEN */
.left-sidebar #sidebarnav ul.static-open {
    display: block !important;

    height: auto !important;
    max-height: none !important;

    overflow: visible !important;

    opacity: 1 !important;

    padding-top: 0 !important;
    padding-bottom: 3px !important;

    transition: none !important;
    animation: none !important;

    transform: none !important;
}


/* Jangan izinkan state collapsing mengubah ukuran */
.left-sidebar #sidebarnav ul.collapsing {
    height: auto !important;

    transition: none !important;
    animation: none !important;
}


/* SUBMENU ITEM */
.left-sidebar #sidebarnav ul > li {
    margin: 0 !important;
    padding: 0 !important;

    height: auto !important;

    transition: none !important;
}


/* SUBMENU LINK */
.left-sidebar #sidebarnav ul > li > a {

    display: flex !important;
    align-items: center !important;

    margin: 0 !important;

    padding:
        6px
        12px
        6px
        34px !important;

    min-height: 31px !important;

    line-height: 19px !important;

    transition: none !important;
    animation: none !important;

    transform: none !important;
}


/* ICON */
.left-sidebar #sidebarnav ul > li > a > i {

    flex: 0 0 20px !important;

    width: 20px !important;

    margin-right: 5px !important;

    line-height: 19px !important;

    text-align: center !important;
}


/* TEXT */
.left-sidebar #sidebarnav ul > li > a > span {

    margin: 0 !important;
    padding: 0 !important;

    line-height: 19px !important;
}

.stock-history-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    min-height:30px;
    padding:5px 9px;

    border:0;
    border-radius:7px;

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

    white-space:nowrap;
}

@media(max-width:767px){

    .stock-history-btn{
        width:100%;
        min-height:34px;
        font-size:9px;
    }

}

/* =========================================================
   STOCK LEDGER / REKENING KORAN
========================================================= */

.sh-ledger-table{
    width:100%;
    border-collapse:collapse;
}

/* IN */
.sh-ledger-table .sh-ledger-in{
    color:#16806e !important;
    font-weight:800 !important;
    text-align:right !important;
    white-space:nowrap;
}

/* OUT */
.sh-ledger-table .sh-ledger-out{
    color:#c64550 !important;
    font-weight:800 !important;
    text-align:right !important;
    white-space:nowrap;
}

/* SALDO */
.sh-ledger-table .sh-ledger-saldo{
    background:#f4faf8 !important;
    color:#214942 !important;
    font-weight:900 !important;
    text-align:right !important;
    white-space:nowrap;
}

/* SALDO MINUS */
.sh-ledger-table .sh-ledger-saldo.is-negative{
    background:#fff0f0 !important;
    color:#c64550 !important;
}

/* =========================================================
   GRAND TOTAL
========================================================= */

.sh-ledger-table tfoot th{
    background:#eef5f3 !important;
    color:#244f47 !important;
    font-size:10px !important;
    font-weight:900 !important;
    vertical-align:middle !important;
    border-color:#d9e7e4 !important;
    padding:9px 8px !important;
}

/* TOTAL IN */
.sh-ledger-table tfoot .sh-total-in{
    color:#16806e !important;
    text-align:right !important;
}

/* TOTAL OUT */
.sh-ledger-table tfoot .sh-total-out{
    color:#c64550 !important;
    text-align:right !important;
}

/* TOTAL SALDO */
.sh-ledger-table tfoot .sh-total-saldo{
    background:#dff3ed !important;
    color:#214942 !important;
    text-align:right !important;
}

/* TOTAL SALDO MINUS */
.sh-ledger-table tfoot .sh-total-saldo.is-negative{
    background:#fde8e8 !important;
    color:#c64550 !important;
}

/* Angka pada kolom IN / OUT / SALDO dibuat seragam */
.sh-ledger-table tbody td.sh-ledger-in,
.sh-ledger-table tbody td.sh-ledger-out,
.sh-ledger-table tbody td.sh-ledger-saldo{
    font-size:10px !important;
    padding:7px 8px !important;
}
.stock-master-missing{
    display:inline-flex;
    align-items:center;
    gap:4px;

    margin-top:4px;
    padding:3px 6px;

    border-radius:5px;

    background:#fff3df;
    color:#a66e16;

    font-size:7px;
    font-weight:800;
}

/* Dashboard Hero */
.simpanse-exec-dashboard .sd-hero h1 {
    color: #ffffff !important;
}

.simpanse-exec-dashboard .sd-hero p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.simpanse-exec-dashboard .sd-hero .sd-eyebrow {
    color: rgba(255, 255, 255, 0.82) !important;
}