/* =========================================================
   MIKHMON MIKHMON
   MEDIUM PREMIUM
   VERSION 2.0

   THEME:
   Dark Navy + Orange

   FEATURES:
   - Premium but lightweight
   - No animation
   - No transition
   - No blur
   - No moving effects
   - Responsive Desktop / Tablet / Mobile
   - Highcharts optimized
========================================================= */


/* =========================================================
   01. RESET
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

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

html{
    scroll-behavior:auto;
}

body{
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size:14px;
    line-height:1.5;

    color:#dce6f0;

    background:#07111f;

    overflow-x:hidden;
}

a{
    color:#56a8ff;
    text-decoration:none;
}

a:hover{
    color:#ff8a00;
}

img{
    max-width:100%;
    height:auto;
}

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


/* =========================================================
   02. PERFORMANCE
========================================================= */

/* Matikan semua animasi / transisi */
*,
*::before,
*::after{
    animation:none !important;
    transition:none !important;
}

/* Hapus pseudo-element dekoratif lama */
body::before,
body::after,
.navbar::before,
.navbar::after,
.sidenav::before,
.sidenav::after,
.card::before,
.card::after,
.box::before,
.box::after{
    content:none !important;
    display:none !important;
}


/* =========================================================
   03. BODY
========================================================= */

body{
    background:
        linear-gradient(
            180deg,
            #071321 0%,
            #081625 48%,
            #06101c 100%
        );
}


/* =========================================================
   04. NAVBAR
========================================================= */

.navbar{
    position:fixed;

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

    width:100%;
    height:56px;

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

    padding:0 14px;

    background:#0a1728;

    border-bottom:1px solid #243f60;

    box-shadow:
        0 3px 14px rgba(0,0,0,.38);

    z-index:1000;
}

.navbar-left,
.navbar-right{
    display:flex;
    align-items:center;

    height:100%;
}

.navbar a{
    display:flex;
    align-items:center;

    height:42px;

    margin:7px 2px;
    padding:0 12px;

    border-radius:6px;

    color:#dce6f0;

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

.navbar a:hover{
    background:#122844;
    color:#ff8500;
}

#brand{
    padding-left:6px;

    color:#ffffff;

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

    letter-spacing:.2px;
}

#brand span{
    color:#ff7900;
}


/* =========================================================
   05. SIDEBAR
========================================================= */

.sidenav{
    position:fixed;

    top:56px;
    left:0;
    bottom:0;

    width:220px;

    padding:8px 0;

    background:#081625;

    border-right:1px solid #203a5a;

    box-shadow:
        3px 0 15px rgba(0,0,0,.30);

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

    z-index:900;
}


/* SIDEBAR LINK */

.sidenav a,
.dropdown-btn{
    position:relative;

    display:block;

    width:calc(100% - 14px);

    margin:4px 7px;

    padding:10px 12px;

    border:0;
    border-radius:7px;

    background:transparent;

    color:#cbd7e4;

    font-size:14px;
    font-weight:500;

    text-align:left;

    cursor:pointer;
}

.sidenav a:hover,
.dropdown-btn:hover{
    background:#112842;
    color:#ffffff;
}

.sidenav a i,
.dropdown-btn i{
    display:inline-block;

    width:23px;

    margin-right:6px;

    color:#8da4ba;

    text-align:center;
}

.sidenav a:hover i,
.dropdown-btn:hover i{
    color:#ff8500;
}


/* ACTIVE MENU */

.sidenav .active,
.sidenav a.active,
.dropdown-btn.active{
    background:
        linear-gradient(
            90deg,
            #173958,
            #112b47
        );

    color:#ffffff;

    border-left:3px solid #ff7900;

    padding-left:9px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025);
}

.sidenav .active i,
.sidenav a.active i,
.dropdown-btn.active i{
    color:#ff8500;
}


/* DROPDOWN */

.dropdown-container{
    display:none;

    padding:3px 0 5px 9px;

    background:#06111e;
}

.dropdown-container a{
    margin:3px 6px;

    padding:8px 10px;

    font-size:13px;
}


/* =========================================================
   06. MAIN
========================================================= */

#main{
    min-height:100vh;

    margin-left:220px;

    padding-top:56px;

    background:transparent;
}

.main-container{
    width:100%;
    max-width:1650px;

    margin:0 auto;

    padding:15px;
}


/* =========================================================
   07. CARD
========================================================= */

.card{
    position:relative;

    width:100%;

    margin:0 0 15px;

    background:#0b192c;

    border:1px solid #203d5e;

    border-radius:9px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.27);

    overflow:hidden;
}


/* ACCENT ATAS */

.card-header{
    position:relative;

    padding:11px 14px;

    background:
        linear-gradient(
            180deg,
            #112945 0%,
            #0e223a 100%
        );

    border-bottom:1px solid #254866;

    color:#ffffff;

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

.card-header::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:48px;
    height:2px;

    background:#ff7900;
}

.card-body{
    padding:14px;
}


/* =========================================================
   08. DASHBOARD BOX
========================================================= */

.box{
    position:relative;

    min-height:112px;

    margin:0 0 14px;

    padding:15px;

    background:
        linear-gradient(
            145deg,
            #0d1c30,
            #0a1728
        );

    border:1px solid #203d5e;

    border-radius:9px;

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

    overflow:hidden;
}


/* ORANGE ACCENT */

.box::after{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:4px;
    height:100%;

    background:#ff7900;
}


/* TEXT */

.box h1{
    margin:0;

    color:#ffffff;

    font-size:30px;
    line-height:1.2;
    font-weight:750;
}

.box h2{
    margin:4px 0;

    color:#ffffff;

    font-size:20px;
    font-weight:650;
}

.box h3{
    margin:5px 0 0;

    color:#aebdcd;

    font-size:13px;
    font-weight:500;
}

.box p{
    margin:4px 0;
}


/* =========================================================
   09. DASHBOARD ICON
========================================================= */

.box-group-icon{
    width:62px;
    height:62px;

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

    float:left;

    margin-right:13px;

    background:
        linear-gradient(
            145deg,
            #173d68,
            #102b4b
        );

    border:1px solid #2b587f;

    border-radius:11px;

    color:#ffffff;

    font-size:28px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 3px 8px rgba(0,0,0,.25);
}


/* =========================================================
   10. BUTTON
========================================================= */

.btn,
button,
.btn-login{
    display:inline-flex;

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

    min-height:36px;

    padding:7px 14px;

    border:1px solid transparent;

    border-radius:6px;

    background:#ff7900;

    color:#ffffff;

    font-size:13px;
    font-weight:650;

    cursor:pointer;

    box-shadow:
        0 2px 6px rgba(0,0,0,.25);
}

.btn:hover,
button:hover,
.btn-login:hover{
    background:#ff8c1f;

    color:#ffffff;

    border-color:#ffa34d;
}

.btn:active,
button:active{
    box-shadow:
        0 1px 3px rgba(0,0,0,.3);
}

.btn:disabled,
button:disabled{
    opacity:.55;

    cursor:not-allowed;
}


/* =========================================================
   11. BUTTON COLORS
========================================================= */

.btn-primary,
.bg-primary{
    background:#0879d1;
    color:#fff;
}

.btn-primary:hover{
    background:#168ce5;
}

.btn-success{
    background:#159447;
    color:#fff;
}

.btn-success:hover{
    background:#1aaa54;
}

.btn-danger{
    background:#d83b3b;
    color:#fff;
}

.btn-danger:hover{
    background:#ec4b4b;
}

.btn-warning{
    background:#d98600;
    color:#fff;
}

.btn-info{
    background:#1688b8;
    color:#fff;
}

.btn-secondary{
    background:#526477;
    color:#fff;
}


/* =========================================================
   12. INPUT
========================================================= */

input,
select,
textarea,
.form-control,
.group-item{
    width:100%;

    min-height:37px;

    padding:7px 10px;

    background:#0d1d32;

    border:1px solid #294866;

    border-radius:6px;

    color:#ffffff;

    font-size:13px;

    outline:none;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.15);
}

input::placeholder,
textarea::placeholder{
    color:#718399;
}

input:hover,
select:hover,
textarea:hover,
.form-control:hover,
.group-item:hover{
    border-color:#365a7d;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.group-item:focus{
    background:#10243d;

    border-color:#3d91dc;

    box-shadow:
        0 0 0 2px rgba(61,145,220,.10);

    outline:none;
}


/* =========================================================
   13. FORM
========================================================= */

label{
    display:block;

    margin-bottom:5px;

    color:#cdd8e4;

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

.form-group{
    margin-bottom:13px;
}

.form-row{
    display:flex;
    flex-wrap:wrap;

    margin-left:-6px;
    margin-right:-6px;
}

.form-row > *{
    padding-left:6px;
    padding-right:6px;
}


/* =========================================================
   14. TABLE
========================================================= */

.table{
    width:100%;

    border-collapse:collapse;
    border-spacing:0;

    background:#091727;

    color:#dce5ef;

    font-size:13px;
}


/* HEADER */

.table th{
    padding:10px 8px;

    background:
        linear-gradient(
            180deg,
            #14385c,
            #102e4d
        );

    border:1px solid #294c6d;

    color:#ffffff;

    font-weight:700;

    white-space:nowrap;

    text-align:left;
}


/* BODY */

.table td{
    padding:8px;

    border:1px solid #1d3955;

    color:#d5e0eb;

    vertical-align:middle;
}

.table tbody tr:nth-child(even){
    background:#0c1c30;
}

.table tbody tr:hover{
    background:#122a44;
}


/* FIRST COLUMN */

.table th:first-child,
.table td:first-child{
    font-weight:600;
}


/* =========================================================
   15. TABLE RESPONSIVE
========================================================= */

.table-responsive,
.overflow{
    width:100%;

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

    -webkit-overflow-scrolling:touch;
}

.table-responsive::-webkit-scrollbar,
.overflow::-webkit-scrollbar{
    width:7px;
    height:7px;
}

.table-responsive::-webkit-scrollbar-track,
.overflow::-webkit-scrollbar-track{
    background:#071321;
}

.table-responsive::-webkit-scrollbar-thumb,
.overflow::-webkit-scrollbar-thumb{
    background:#2b4d6d;

    border-radius:5px;
}


/* =========================================================
   16. BADGE
========================================================= */

.label,
.badge{
    display:inline-block;

    padding:3px 8px;

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

    border-radius:5px;

    background:#304a66;

    color:#ffffff;

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

.label-primary,
.badge-primary{
    background:#0879d1;
}

.label-success,
.badge-success{
    background:#159447;
}

.label-danger,
.badge-danger{
    background:#d83b3b;
}

.label-warning,
.badge-warning{
    background:#d98600;
}


/* =========================================================
   17. ALERT
========================================================= */

.alert{
    position:relative;

    margin-bottom:13px;

    padding:10px 13px;

    border:1px solid transparent;

    border-radius:7px;

    background:#17273b;

    color:#e5edf5;
}

.alert-success{
    background:#0d3324;
    border-color:#1d6945;
}

.alert-danger{
    background:#38191d;
    border-color:#743238;
}

.alert-warning{
    background:#392b13;
    border-color:#795c1d;
}

.alert-info{
    background:#102c42;
    border-color:#205878;
}


/* =========================================================
   18. NOTIFICATION
========================================================= */

#notify{
    position:fixed;

    right:16px;
    bottom:16px;

    max-width:360px;

    padding:12px 15px;

    background:#0b192c;

    border:1px solid #ff7900;

    border-radius:7px;

    color:#ffffff;

    box-shadow:
        0 5px 18px rgba(0,0,0,.40);

    z-index:9999;
}


/* =========================================================
   19. MODAL
========================================================= */

.modal-window{
    position:fixed;

    inset:0;

    display:none;

    width:100%;
    height:100%;

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

    z-index:5000;

    overflow:auto;
}

.modal-window > div{
    width:90%;
    max-width:680px;

    margin:7% auto;

    padding:0;

    background:#0b192c;

    border:1px solid #2b4e70;

    border-radius:9px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.55);

    overflow:hidden;
}


/* =========================================================
   20. MODAL
========================================================= */

.modal-header{
    padding:11px 14px;

    background:
        linear-gradient(
            180deg,
            #122b47,
            #102640
        );

    border-bottom:1px solid #294866;

    color:#ffffff;

    font-weight:700;
}

.modal-body{
    padding:14px;
}

.modal-footer{
    padding:10px 14px;

    background:#091625;

    border-top:1px solid #203b59;

    text-align:right;
}


/* =========================================================
   21. PROGRESS
========================================================= */

.progress{
    width:100%;
    height:9px;

    margin:5px 0;

    background:#07111f;

    border:1px solid #1a3048;

    border-radius:10px;

    overflow:hidden;
}

.progress-bar{
    height:100%;

    background:#e5e9ee;
}

.progress-bar-blue{
    height:100%;

    background:#0879d1;
}

.progress-bar-red{
    height:100%;

    background:#e33b3b;
}


/* =========================================================
   22. LOADING
========================================================= */

.lds-dual-ring{
    display:inline-block;

    width:40px;
    height:40px;
}

.lds-dual-ring:after{
    content:"";

    display:block;

    width:28px;
    height:28px;

    margin:5px;

    border:4px solid #ff7900;

    border-right-color:transparent;

    border-radius:50%;
}


/* =========================================================
   23. HIGHCHARTS
========================================================= */

.highcharts-container{
    width:100% !important;

    max-width:100%;
}

.highcharts-background{
    fill:transparent;
}

.highcharts-plot-background{
    fill:rgba(8,18,32,.22);
}

.highcharts-grid-line{
    stroke:#253b52;
    stroke-width:1;
}

.highcharts-axis-line{
    stroke:#3b5872;
}

.highcharts-tick{
    stroke:#3b5872;
}

.highcharts-axis-labels text{
    fill:#c5d1dd !important;

    font-size:11px;
}

.highcharts-title{
    fill:#ffffff !important;

    font-size:20px !important;

    font-weight:700 !important;
}

.highcharts-subtitle{
    fill:#aebdcd !important;
}

.highcharts-legend-item text{
    fill:#dce5ef !important;

    font-size:12px !important;
}

.highcharts-tooltip-box{
    fill:#0b192c;

    stroke:#355675;

    stroke-width:1;
}

.highcharts-tooltip text{
    fill:#ffffff !important;
}

.highcharts-data-label text{
    fill:#ffffff !important;
}

.highcharts-button{
    fill:#102641;

    stroke:#315171;
}

.highcharts-button text{
    fill:#ffffff !important;
}


/* =========================================================
   24. RESUME CHART
========================================================= */

#resumeChart{
    width:100%;

    min-height:380px;

    margin:0 auto;

    padding:2px;
}


/* =========================================================
   25. CLEAR
========================================================= */

.clear{
    clear:both;
}



/* =========================================================
   30. PRINT
========================================================= */

@media print{

    .navbar,
    .sidenav,
    .btn,
    button{
        display:none !important;
    }

    #main{
        margin:0 !important;
        padding:0 !important;
    }

    body{
        background:#ffffff;

        color:#000000;
    }

    .card,
    .box{
        border:1px solid #cccccc;

        box-shadow:none;

        background:#ffffff;

        color:#000000;
    }

}

/* =========================================================
   MIKHMON - HOT ORANGE x ELECTRIC BLUE
   PREMIUM GLOW OVERRIDE v3.0

   Tempel PALING BAWAH file CSS
========================================================= */

:root{
    --f157-bg: #050d17;
    --f157-bg-2: #071321;
    --f157-panel: #09192b;
    --f157-panel-2: #0c2036;

    --f157-orange: #ff6a00;
    --f157-orange-hot: #ff8500;
    --f157-orange-light: #ff9d32;

    --f157-blue: #008cff;
    --f157-blue-hot: #00a8ff;
    --f157-blue-light: #45c2ff;

    --f157-text: #edf7ff;
    --f157-muted: #94abc0;

    --f157-line: #17466c;
}


/* =========================================================
   01. BACKGROUND
========================================================= */

html,
body{
    background:#050d17 !important;
}

body{
    color:var(--f157-text);

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(0,140,255,.07) 0%,
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(255,106,0,.045) 0%,
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #071321 0%,
            #050e19 52%,
            #040b13 100%
        ) !important;
}


/* =========================================================
   02. NAVBAR
========================================================= */

.navbar{
    background:
        linear-gradient(
            90deg,
            #071321 0%,
            #0a192b 50%,
            #071321 100%
        ) !important;

    border-bottom:1px solid #007fd4 !important;

    box-shadow:
        0 1px 0 rgba(0,168,255,.45),
        0 0 12px rgba(0,140,255,.18),
        0 4px 18px rgba(0,0,0,.55) !important;
}


/* NAVBAR LINK */

.navbar a{
    color:#eaf6ff !important;
}

.navbar a:hover{
    color:var(--f157-orange-hot) !important;

    background:
        linear-gradient(
            180deg,
            rgba(255,106,0,.12),
            rgba(0,140,255,.08)
        ) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,106,0,.25),
        0 0 9px rgba(255,106,0,.10) !important;
}


/* BRAND */

#brand{
    color:#ffffff !important;

    text-shadow:
        0 0 5px rgba(255,255,255,.12);
}

#brand span{
    color:var(--f157-orange-hot) !important;

    text-shadow:
        0 0 5px rgba(255,106,0,.60),
        0 0 10px rgba(255,106,0,.25);
}


/* =========================================================
   03. SIDEBAR
========================================================= */

.sidenav{
    background:
        linear-gradient(
            180deg,
            #071626 0%,
            #06111e 55%,
            #050d17 100%
        ) !important;

    border-right:1px solid #087ec2 !important;

    box-shadow:
        1px 0 0 rgba(0,168,255,.20),
        4px 0 16px rgba(0,140,255,.10),
        5px 0 20px rgba(0,0,0,.40) !important;
}


/* SIDEBAR MENU */

.sidenav a,
.dropdown-btn{
    color:#d5e7f5 !important;
}

.sidenav a:hover,
.dropdown-btn:hover{
    color:#ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,140,255,.18),
            rgba(255,106,0,.07)
        ) !important;

    box-shadow:
        inset 2px 0 0 var(--f157-blue-hot),
        inset 0 0 0 1px rgba(0,168,255,.13),
        0 0 8px rgba(0,140,255,.08) !important;
}


/* SIDEBAR ICON */

.sidenav a i,
.dropdown-btn i{
    color:#72b9e8 !important;
}

.sidenav a:hover i,
.dropdown-btn:hover i{
    color:var(--f157-orange-hot) !important;

    text-shadow:
        0 0 6px rgba(255,106,0,.65);
}


/* =========================================================
   04. ACTIVE MENU
========================================================= */

.sidenav .active,
.sidenav a.active,
.dropdown-btn.active{
    color:#ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,106,0,.18) 0%,
            rgba(0,140,255,.22) 45%,
            rgba(0,140,255,.09) 100%
        ) !important;

    border-left:3px solid var(--f157-orange-hot) !important;

    box-shadow:
        -1px 0 7px rgba(255,106,0,.65),
        inset 0 0 0 1px rgba(0,168,255,.20),
        inset 5px 0 14px rgba(255,106,0,.08),
        0 0 10px rgba(0,140,255,.08) !important;
}

.sidenav .active i,
.sidenav a.active i,
.dropdown-btn.active i{
    color:var(--f157-orange-hot) !important;

    text-shadow:
        0 0 5px rgba(255,106,0,.80),
        0 0 10px rgba(255,106,0,.30);
}


/* =========================================================
   05. DROPDOWN
========================================================= */

.dropdown-container{
    background:#040e19 !important;

    border-left:1px solid rgba(0,140,255,.30);
}

.dropdown-container a:hover{
    border-left-color:var(--f157-orange) !important;
}


/* =========================================================
   06. MAIN AREA
========================================================= */

#main{
    background:
        linear-gradient(
            135deg,
            rgba(0,140,255,.018),
            transparent 35%,
            rgba(255,106,0,.012)
        ) !important;
}


/* =========================================================
   07. CARD
========================================================= */

.card{
    background:
        linear-gradient(
            145deg,
            #0a1a2d 0%,
            #071524 100%
        ) !important;

    border:1px solid #15517d !important;

    box-shadow:
        0 0 0 1px rgba(0,168,255,.025),
        0 0 9px rgba(0,140,255,.07),
        0 7px 18px rgba(0,0,0,.30) !important;
}


/* =========================================================
   08. CARD HEADER
========================================================= */

.card-header{
    color:#ffffff !important;

    background:
        linear-gradient(
            90deg,
            #102e4d 0%,
            #0c243d 55%,
            #101d2c 100%
        ) !important;

    border-bottom:1px solid #087fc5 !important;

    box-shadow:
        0 2px 7px rgba(0,140,255,.08) !important;
}


/* ORANGE UNDERLINE */

.card-header::after{
    content:"" !important;
    display:block !important;

    position:absolute;

    left:0;
    bottom:-1px;

    width:68px;
    height:2px;

    background:
        linear-gradient(
            90deg,
            #ff4d00,
            #ff8500,
            #ffb000
        ) !important;

    box-shadow:
        0 0 4px rgba(255,106,0,.95),
        0 0 9px rgba(255,106,0,.50) !important;
}


/* =========================================================
   09. DASHBOARD BOX
========================================================= */

.box{
    position:relative !important;

    background:
        linear-gradient(
            135deg,
            #0b1d31 0%,
            #081726 55%,
            #071321 100%
        ) !important;

    border:1px solid #16527e !important;

    box-shadow:
        0 0 0 1px rgba(0,168,255,.02),
        0 0 8px rgba(0,140,255,.065),
        0 6px 16px rgba(0,0,0,.28) !important;
}


/* ORANGE LEFT GLOW */

.box::after{
    content:"" !important;
    display:block !important;

    position:absolute;

    top:12px;
    bottom:12px;
    left:0;

    width:3px;
    height:auto;

    border-radius:0 4px 4px 0;

    background:
        linear-gradient(
            180deg,
            #ff9d00,
            #ff6500,
            #ff3d00
        ) !important;

    box-shadow:
        0 0 4px rgba(255,106,0,.95),
        0 0 9px rgba(255,106,0,.45) !important;
}


/* BOX TEXT */

.box h1,
.box h2{
    color:#ffffff !important;
}

.box h3{
    color:#a9c3d8 !important;
}


/* =========================================================
   10. DASHBOARD ICON
========================================================= */

.box-group-icon{
    color:#ffffff !important;

    background:
        linear-gradient(
            145deg,
            #124b7a 0%,
            #0b3155 55%,
            #092641 100%
        ) !important;

    border:1px solid #078fe0 !important;

    box-shadow:
        inset 0 0 12px rgba(0,168,255,.12),
        0 0 5px rgba(0,168,255,.30),
        0 0 11px rgba(0,140,255,.12),
        0 5px 12px rgba(0,0,0,.30) !important;
}

.box-group-icon i{
    color:#ffffff !important;

    text-shadow:
        0 0 5px rgba(0,168,255,.55);
}


/* =========================================================
   11. BUTTON
========================================================= */

.btn,
button,
.btn-login{
    color:#ffffff !important;

    background:
        linear-gradient(
            180deg,
            #ff8500,
            #f45b00
        ) !important;

    border:1px solid #ff9a25 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 5px rgba(255,106,0,.40),
        0 3px 8px rgba(0,0,0,.28) !important;
}

.btn:hover,
button:hover,
.btn-login:hover{
    background:
        linear-gradient(
            180deg,
            #ff9c24,
            #ff6a00
        ) !important;

    border-color:#ffc166 !important;

    box-shadow:
        0 0 6px rgba(255,106,0,.65),
        0 0 12px rgba(255,106,0,.20),
        0 3px 8px rgba(0,0,0,.30) !important;
}


/* BLUE BUTTON */

.btn-primary,
.bg-primary{
    background:
        linear-gradient(
            180deg,
            #009dff,
            #006fce
        ) !important;

    border-color:#29b4ff !important;

    box-shadow:
        0 0 5px rgba(0,168,255,.42),
        0 3px 8px rgba(0,0,0,.25) !important;
}


/* =========================================================
   12. INPUT + SELECT
========================================================= */

input,
select,
textarea,
.form-control,
.group-item{
    color:#ffffff !important;

    background:#081827 !important;

    border:1px solid #19527a !important;

    box-shadow:
        inset 0 1px 4px rgba(0,0,0,.25) !important;
}

input:hover,
select:hover,
textarea:hover,
.form-control:hover,
.group-item:hover{
    border-color:#008fe5 !important;

    box-shadow:
        0 0 5px rgba(0,140,255,.15) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.group-item:focus{
    background:#0a2036 !important;

    border-color:var(--f157-orange-hot) !important;

    box-shadow:
        0 0 0 1px rgba(255,106,0,.30),
        0 0 7px rgba(255,106,0,.25) !important;
}


/* =========================================================
   13. TABLE
========================================================= */

.table{
    background:#071522 !important;

    color:#e7f2fa !important;
}

.table th{
    color:#ffffff !important;

    background:
        linear-gradient(
            180deg,
            #104a76,
            #0a3154
        ) !important;

    border-color:#087dc0 !important;

    box-shadow:
        inset 0 -1px 0 rgba(0,168,255,.25) !important;
}

.table td{
    color:#dbe9f3 !important;

    border-color:#174363 !important;
}

.table tbody tr:nth-child(even){
    background:#091b2d !important;
}

.table tbody tr:hover{
    background:
        linear-gradient(
            90deg,
            rgba(255,106,0,.09),
            rgba(0,140,255,.12)
        ) !important;
}


/* =========================================================
   14. SCROLLBAR
========================================================= */

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-track{
    background:#040c15;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #008cff,
            #ff6a00
        );

    border-radius:8px;

    border:2px solid #071321;
}

::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #00b4ff,
            #ff8a00
        );
}


/* =========================================================
   15. BADGE
========================================================= */

.label,
.badge{
    border:1px solid rgba(0,168,255,.30) !important;

    background:#163b5a !important;

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

.label-primary,
.badge-primary{
    background:#007dd8 !important;
}

.label-warning,
.badge-warning{
    background:#f56b00 !important;

    box-shadow:
        0 0 5px rgba(255,106,0,.30) !important;
}


/* =========================================================
   16. NOTIFICATION
========================================================= */

#notify{
    background:#071727 !important;

    border:1px solid var(--f157-orange-hot) !important;

    box-shadow:
        0 0 6px rgba(255,106,0,.55),
        0 0 14px rgba(255,106,0,.16),
        0 8px 25px rgba(0,0,0,.50) !important;
}


/* =========================================================
   17. MODAL
========================================================= */

.modal-window > div{
    background:#081827 !important;

    border:1px solid #0788d4 !important;

    box-shadow:
        0 0 9px rgba(0,140,255,.20),
        0 15px 40px rgba(0,0,0,.60) !important;
}

.modal-header{
    background:
        linear-gradient(
            90deg,
            #103d65,
            #0a223b
        ) !important;

    border-bottom:1px solid var(--f157-orange-hot) !important;

    box-shadow:
        0 2px 6px rgba(255,106,0,.18) !important;
}


/* =========================================================
   18. PROGRESS
========================================================= */

.progress{
    background:#030b13 !important;

    border:1px solid #164a70 !important;

    box-shadow:
        inset 0 0 6px rgba(0,0,0,.40) !important;
}

.progress-bar{
    background:
        linear-gradient(
            90deg,
            #008cff,
            #00b4ff
        ) !important;

    box-shadow:
        0 0 6px rgba(0,168,255,.45) !important;
}

.progress-bar-blue{
    background:
        linear-gradient(
            90deg,
            #0077e6,
            #00b4ff
        ) !important;

    box-shadow:
        0 0 6px rgba(0,168,255,.45) !important;
}


/* =========================================================
   19. HIGHCHARTS
========================================================= */

.highcharts-grid-line{
    stroke:#16405f !important;
}

.highcharts-axis-line,
.highcharts-tick{
    stroke:#087fc2 !important;
}

.highcharts-axis-labels text{
    fill:#a9c8dd !important;
}

.highcharts-title{
    fill:#ffffff !important;
}

.highcharts-subtitle{
    fill:#7eb6d9 !important;
}

.highcharts-legend-item text{
    fill:#dcebf5 !important;
}

.highcharts-tooltip-box{
    fill:#071727 !important;

    stroke:#ff7900 !important;

    stroke-width:1 !important;
}

.highcharts-button{
    fill:#0b2b48 !important;

    stroke:#008ee5 !important;
}


/* =========================================================
   20. LINKS
========================================================= */

a{
    color:#4bbcff;
}

a:hover{
    color:#ff8500;
}


/* =========================================================
   21. TEXT SELECTION
========================================================= */

::selection{
    color:#ffffff;

    background:#e95d00;
}


/* =========================================================
   22. MIKHMON HOT ORANGE ACCENTS
========================================================= */

/* judul/sidebar tertentu */
.sidenav strong,
.sidenav b{
    color:#ffffff;
}

/* icon umum */
.fa-wifi,
.fa-ticket,
.fa-dashboard,
.fa-tachometer{
    text-shadow:
        0 0 5px rgba(0,168,255,.30);
}


/* =========================================================
   23. MOBILE OPTIMIZATION
========================================================= */

/* =========================================================
   SYSTEM CARDS
========================================================= */

.f157-system-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:14px;

    width:100%;

    margin-bottom:16px;
}


.f157-system-card{
    min-width:0;
    min-height:128px;

    margin:0 !important;

    padding:17px !important;

    display:flex;
    align-items:center;

    border-radius:12px !important;
}


.f157-system-card .box-group{
    width:100%;

    display:flex;
    align-items:center;
}


.f157-system-card .box-group-icon{
    flex:0 0 66px;

    float:none !important;

    width:66px;
    height:66px;

    margin:0 16px 0 3px;

    border-radius:14px;
}


.f157-system-card .box-group-area{
    flex:1;

    min-width:0;
}


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

.f157-card-label{
    margin-bottom:4px;

    color:#ffffff;

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


.f157-card-value{
    color:#dceeff;

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


.f157-card-sub{
    margin-top:3px;

    color:#91b7d3;

    font-size:13px;
}


.f157-card-sub i{
    margin-right:4px;

    color:#ff7900;
}


/* =========================================================
   ROUTER INFO
========================================================= */

.f157-router-info{
    display:grid;

    gap:2px;
}


.f157-router-info > div{
    display:flex;

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

    gap:12px;
}


.f157-router-info span{
    color:#8eacc3;

    font-size:12px;
}


.f157-router-info strong{
    color:#ffffff;

    font-size:13px;
    font-weight:650;

    text-align:right;
}


/* =========================================================
   RESOURCE
========================================================= */

.f157-resource{
    display:grid;

    gap:3px;
}


.f157-resource-item{
    display:flex;

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

    gap:12px;
}


.f157-resource-item span{
    color:#8eacc3;

    font-size:12px;
}


.f157-resource-item strong{
    color:#ffffff;

    font-size:13px;

    white-space:nowrap;
}


/* CPU HOT ORANGE */
.f157-resource-item:first-child strong{
    color:#ff8a00;

    text-shadow:
        0 0 5px rgba(255,106,0,.35);
}


/* =========================================================
   HOTSPOT + PPP GRID
========================================================= */

.f157-service-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap:14px;

    width:100%;

    margin-bottom:16px;
}


.f157-service-card{
    min-width:0;

    margin:0 !important;

    border-radius:12px !important;
}


.f157-service-card .card-header{
    min-height:56px;

    display:flex;
    align-items:center;

    padding:13px 17px;
}


.f157-service-card .card-header h3{
    margin:0;

    font-size:17px;
}


.f157-service-card .card-header h3 i{
    margin-right:6px;

    color:#ffffff;

    text-shadow:
        0 0 6px rgba(0,168,255,.50);
}


/* =========================================================
   STAT GRID
========================================================= */

.f157-stat-grid{
    display:grid;

    gap:10px;

    width:100%;
}


.f157-stat-grid-4{
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}


.f157-stat-grid-3{
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}


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

.f157-stat-card{
    min-width:0;
    min-height:105px !important;

    margin:0 !important;

    padding:0 !important;

    overflow:hidden;

    border-radius:10px !important;
}


.f157-stat-card a{
    width:100%;
    height:100%;

    min-height:105px;

    display:flex;
    flex-direction:column;

    justify-content:center;

    padding:13px;

    color:#ffffff !important;
}


.f157-stat-top{
    display:flex;

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

    gap:8px;
}


.f157-stat-top > i{
    color:#68c8ff;

    font-size:22px;

    text-shadow:
        0 0 7px rgba(0,168,255,.45);
}


.f157-stat-card h1{
    margin:0 !important;

    color:#ffffff !important;

    font-size:27px !important;

    line-height:1.1;

    text-align:right;
}


.f157-stat-card h1 span{
    color:#a9c4d8;

    font-size:11px !important;

    font-weight:500;
}


.f157-stat-name{
    margin-top:9px;

    padding-top:7px;

    border-top:
        1px solid rgba(0,168,255,.17);

    color:#bfd6e7;

    font-size:12px;
}


/* HOT ORANGE ACCENT */
.f157-stat-card::after{
    top:10px !important;
    bottom:10px !important;

    width:3px !important;
}


/* =========================================================
   TRAFFIC
========================================================= */

.f157-traffic-card{
    width:100%;

    margin-bottom:16px !important;

    border-radius:12px !important;
}


.f157-traffic-card .card-header h3{
    margin:0;
}


#trafficMonitor{
    width:100%;

    min-height:360px;
}


/* =========================================================
   INCOME
========================================================= */

.f157-income-card{
    min-height:100px;

    margin-bottom:16px !important;

    padding:16px !important;

    border-radius:12px !important;
}


.f157-income-card .box-group{
    display:flex;

    align-items:center;
}


.f157-income-card .box-group-icon{
    float:none !important;

    flex:0 0 60px;

    width:60px;
    height:60px;

    margin-right:15px;
}


/* =========================================================
   LOG
========================================================= */

.f157-log-card{
    margin-bottom:16px !important;

    border-radius:12px !important;
}


.f157-log-card .card-header h3{
    margin:0;
}


.f157-log-card .card-header a{
    color:#ffffff !important;
}


.f157-log-container{
    width:100%;

    padding:4px;
}


/* =========================================================
   DESKTOP WIDE
========================================================= */

@media screen and (min-width:1400px){

    .f157-system-grid{
        gap:16px;
    }


    .f157-service-grid{
        gap:16px;
    }


    .f157-system-card{
        min-height:135px;
    }


    #trafficMonitor{
        min-height:390px;
    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media screen and (min-width:1001px)
and (max-width:1399px){

    .f157-system-grid{
        gap:11px;
    }


    .f157-system-card{
        min-height:120px;

        padding:13px !important;
    }


    .f157-system-card .box-group-icon{
        flex-basis:55px;

        width:55px;
        height:55px;

        margin-right:11px;

        font-size:24px;
    }


    .f157-service-grid{
        gap:11px;
    }


    .f157-stat-card,
    .f157-stat-card a{
        min-height:96px !important;
    }


    .f157-stat-card h1{
        font-size:23px !important;
    }

}


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

@media screen and (min-width:751px)
and (max-width:1000px){

    .f157-system-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }


    .f157-system-card:last-child{
        grid-column:1 / -1;
    }


    .f157-service-grid{
        grid-template-columns:1fr;

        gap:10px;
    }


    .f157-stat-grid-4{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }


    .f157-system-card{
        min-height:110px;
    }


    #trafficMonitor{
        min-height:330px;
    }

}


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

@media screen and (max-width:750px){

    .f157-system-grid{
        grid-template-columns:1fr;

        gap:8px;

        margin-bottom:10px;
    }


    .f157-system-card,
    .f157-system-card:last-child{
        grid-column:auto;

        min-height:88px;

        padding:10px !important;

        border-radius:9px !important;
    }


    .f157-system-card .box-group-icon{
        flex:0 0 50px;

        width:50px;
        height:50px;

        margin-right:11px;

        border-radius:10px;

        font-size:22px;
    }


    .f157-card-label{
        font-size:13px;
    }


    .f157-card-value{
        font-size:12px;
    }


    .f157-card-sub{
        font-size:11px;
    }


    /* SERVICE */

    .f157-service-grid{
        grid-template-columns:1fr;

        gap:9px;

        margin-bottom:10px;
    }


    .f157-service-card .card-header{
        min-height:48px;

        padding:10px 12px;
    }


    .f157-service-card .card-header h3{
        font-size:15px;
    }


    /* 2 COLUMN STAT */

    .f157-stat-grid-4,
    .f157-stat-grid-3{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:7px;
    }


    .f157-stat-card,
    .f157-stat-card a{
        min-height:90px !important;
    }


    .f157-stat-card a{
        padding:10px;
    }


    .f157-stat-card h1{
        font-size:21px !important;
    }


    .f157-stat-top > i{
        font-size:19px;
    }


    .f157-stat-name{
        margin-top:6px;

        padding-top:5px;

        font-size:11px;
    }


    /* TRAFFIC */

    .f157-traffic-card{
        margin-bottom:9px !important;
    }


    #trafficMonitor{
        min-height:290px;
    }


    /* INCOME */

    .f157-income-card{
        min-height:85px;

        padding:10px !important;

        margin-bottom:9px !important;
    }


    .f157-income-card .box-group-icon{
        flex-basis:48px;

        width:48px;
        height:48px;

        margin-right:10px;

        font-size:21px;
    }


    /* LOG */

    .f157-log-card{
        margin-bottom:9px !important;
    }

}


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

@media screen and (max-width:480px){

    .f157-stat-grid-4,
    .f157-stat-grid-3{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .f157-router-info > div,
    .f157-resource-item{
        gap:6px;
    }


    .f157-router-info span,
    .f157-resource-item span{
        font-size:11px;
    }


    .f157-router-info strong,
    .f157-resource-item strong{
        font-size:11px;
    }


    #trafficMonitor{
        min-height:260px;
    }

}


/* =========================================================
   MIKHMON V6 CLEAN RESPONSIVE SYSTEM
   Single authoritative responsive layer
   Desktop / Laptop / Tablet / Mobile
========================================================= */

/* ---------- GLOBAL SAFETY ---------- */
html,
body{
    width:100%;
    max-width:100%;
    min-width:0;
}

body{
    overflow-x:clip;
    overscroll-behavior-x:contain;
}

img,
svg,
video,
canvas,
iframe{
    max-width:100%;
}

button,
input,
select,
textarea,
.form-control,
.group-item{
    box-sizing:border-box;
    max-width:100%;
}

.card,
.box,
.main-container,
.f157-system-grid,
.f157-service-grid,
.f157-stat-grid,
.f157-system-card,
.f157-service-card,
.f157-stat-card,
.f157-income-card,
.f157-log-card,
.f157-traffic-card,
.card-body,
.form-row{
    min-width:0;
    max-width:100%;
}

/* ---------- NAVBAR ---------- */
.navbar{
    width:100%;
    max-width:100%;
    min-width:0;
}

.navbar-left,
.navbar-right{
    min-width:0;
}

.navbar-left{
    flex:1 1 auto;
}

.navbar-right{
    flex:0 1 auto;
    overflow:hidden;
}

.navbar a{
    white-space:nowrap;
    flex:0 0 auto;
}

#brand{
    min-width:0;
    max-width:45vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ---------- HAMBURGER ---------- */
#openNav,
#closeNav{
    display:none;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:42px;
    height:42px;
    margin:7px 2px;
    padding:0;
    border:0;
    border-radius:7px;
    background:transparent !important;
    color:#eaf6ff !important;
    box-shadow:none !important;
    cursor:pointer;
    line-height:1;
    position:relative;
    z-index:1101;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

#openNav i,
#closeNav i{
    display:block;
    margin:0;
    padding:0;
    font-size:20px;
    line-height:1;
    color:inherit;
}

#openNav:hover,
#closeNav:hover{
    background:rgba(0,140,255,.12) !important;
    color:#ff8500 !important;
}

#closeNav[style*="display: block"],
#closeNav[style*="display:block"],
#closeNav[style*="display: flex"],
#closeNav[style*="display:flex"]{
    display:flex;
}

/* ---------- SIDEBAR + MAIN ---------- */
#main{
    width:auto;
    min-width:0;
    max-width:100%;
}

.main-container{
    width:100%;
    max-width:1650px;
    margin-left:auto;
    margin-right:auto;
}

/* ---------- TABLE SCROLL RULE ---------- */
.table-responsive,
.overflow{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
}

.table-responsive > .table,
.overflow > .table{
    width:100%;
    min-width:550px;
}

/* Login is an intentional exception: never force horizontal table width. */
.login-box .table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
}

/* ---------- CHART SAFETY ---------- */
.highcharts-container,
.highcharts-root,
#resumeChart,
#trafficMonitor{
    width:100%;
    max-width:100% !important;
}

/* ---------- FORM SAFETY ---------- */
.form-row{
    width:100%;
}

.form-row > *{
    min-width:0;
}

/* ---------- LOGIN BASE ---------- */
.login-box{
    width:100%;
    max-width:650px;
    margin-left:auto;
    margin-right:auto;
    padding:35px 15px 20px;
    box-sizing:border-box;
}

.login-box .card,
.login-box .card-body,
.login-box form,
.login-box .table,
.login-box .table tbody,
.login-box .table tr,
.login-box .table td{
    box-sizing:border-box !important;
    max-width:100% !important;
}

.login-box .card{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.login-box form{
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.login-box .table{
    margin-left:auto !important;
    margin-right:auto !important;
}

.login-box .table td{
    width:100% !important;
    min-width:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

.login-box img{
    display:block;
    width:auto;
    max-width:270px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

.login-box input,
.login-box input[type="text"],
.login-box input[type="password"],
.login-box select,
.login-box .form-control{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}

.login-box .btn-login,
.login-box button,
.login-box input[type="submit"]{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* ---------- DESKTOP >=1201 ---------- */
@media screen and (min-width:1201px){
    .navbar{height:56px;}
    .sidenav{width:220px;}
    #main{margin-left:220px;padding-top:56px;}
    .main-container{padding:16px;}
}

/* ---------- LAPTOP 1001-1200 ---------- */
@media screen and (min-width:1001px) and (max-width:1200px){
    .navbar{height:54px;}
    .sidenav{width:205px;}
    #main{margin-left:205px;padding-top:54px;}
    .main-container{padding:12px;}

    .f157-system-grid,
    .f157-service-grid{gap:11px;}

    .f157-system-card{
        min-height:115px;
        padding:13px !important;
    }

    .f157-system-card .box-group-icon{
        flex-basis:55px;
        width:55px;
        height:55px;
        margin-right:11px;
    }

    .f157-stat-card,
    .f157-stat-card a{min-height:96px !important;}
    .f157-stat-card h1{font-size:23px !important;}
}

/* ---------- TABLET 751-1000 ---------- */
@media screen and (min-width:751px) and (max-width:1000px){
    .navbar{height:54px;}
    .sidenav{width:190px;}
    #main{margin-left:190px;padding-top:54px;}
    .main-container{padding:10px;}

    .f157-system-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .f157-system-card:last-child{grid-column:1 / -1;}

    .f157-service-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .f157-stat-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
    .f157-system-card{min-height:105px;}
    #trafficMonitor{min-height:320px;}
}

/* ---------- MOBILE <=750 ---------- */
@media screen and (max-width:750px){
    html,
    body{
        width:100%;
        max-width:100%;
    }

    body{overflow-x:clip;}

    .navbar{
        height:51px;
        padding:0 6px;
    }

    .navbar-left,
    .navbar-right{height:51px;}

    .navbar-left{min-width:0;}
    .navbar-right{max-width:58%;}

    #brand{
        display:block;
        max-width:42vw;
        font-size:15px;
        padding-left:4px;
    }

    .navbar a{
        height:40px;
        margin:5px 1px;
        padding:0 7px;
        font-size:12px;
    }

    #openNav{display:flex;}

    .sidenav{
        top:51px;
        left:0;
        bottom:0;
        width:0;
        max-width:min(84vw,310px);
        padding:8px 0;
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        z-index:900;
    }

    .sidenav a,
    .dropdown-btn{
        width:calc(100% - 14px);
        margin:4px 7px;
        padding:10px 12px;
        font-size:14px;
    }

    #main{
        width:100%;
        max-width:100%;
        min-width:0;
        margin-left:0;
        padding-top:51px;
        overflow-x:visible;
    }

    .main-container{
        width:100%;
        max-width:100%;
        margin:0;
        padding:8px;
    }

    .card-body{min-width:0;}

    .f157-system-grid{
        grid-template-columns:1fr;
        gap:8px;
        margin-bottom:10px;
    }

    .f157-system-card,
    .f157-system-card:last-child{
        grid-column:auto;
        min-height:88px;
        padding:10px !important;
        border-radius:9px !important;
    }

    .f157-system-card .box-group-icon{
        flex:0 0 50px;
        width:50px;
        height:50px;
        margin-right:11px;
        border-radius:10px;
        font-size:22px;
    }

    .f157-card-label{font-size:13px;}
    .f157-card-value{font-size:12px;}
    .f157-card-sub{font-size:11px;}

    .f157-service-grid{
        grid-template-columns:1fr;
        gap:9px;
        margin-bottom:10px;
    }

    .f157-service-card .card-header{
        min-height:48px;
        padding:10px 12px;
    }

    .f157-service-card .card-header h3{font-size:15px;}

    .f157-stat-grid-4,
    .f157-stat-grid-3{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .f157-stat-card,
    .f157-stat-card a{min-height:90px !important;}

    .f157-stat-card a{padding:10px;}
    .f157-stat-card h1{font-size:21px !important;}
    .f157-stat-top > i{font-size:19px;}
    .f157-stat-name{margin-top:6px;padding-top:5px;font-size:11px;}

    .f157-traffic-card,
    .f157-income-card,
    .f157-log-card{margin-bottom:9px !important;}

    #trafficMonitor{min-height:290px;}

    .f157-income-card{
        min-height:85px;
        padding:10px !important;
    }

    .f157-income-card .box-group-icon{
        flex-basis:48px;
        width:48px;
        height:48px;
        margin-right:10px;
        font-size:21px;
    }

    .table-responsive,
    .overflow{
        width:100%;
        max-width:100%;
        overflow-x:auto;
    }

    .table-responsive > .table,
    .overflow > .table{
        min-width:550px;
    }

    .login-box{
        width:100%;
        max-width:100%;
        min-height:calc(100vh - 51px);
        padding:18px 8px 16px;
        display:flex;
        align-items:flex-start;
        justify-content:center;
    }

    .login-box .card{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        border-radius:10px;
    }

    .login-box .card-body{padding:14px !important;}

    .login-box .table,
    .login-box .table tbody,
    .login-box .table tr,
    .login-box .table td{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        display:block;
    }

    .login-box .table{table-layout:auto !important;}

    .login-box .table td{padding-top:5px !important;padding-bottom:5px !important;}

    .login-box img{max-width:min(230px,80vw);}

    .login-box input,
    .login-box select,
    .login-box .form-control{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        min-height:42px;
        font-size:14px;
    }

    .login-box .btn-login,
    .login-box button,
    .login-box input[type="submit"]{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        min-height:42px;
    }
}

/* ---------- SMALL PHONE <=480 ---------- */
@media screen and (max-width:480px){
    .navbar{padding:0 4px;}
    .navbar-right{max-width:54%;}

    #brand{max-width:38vw;font-size:14px;}

    #openNav,
    #closeNav{
        width:40px;
        height:40px;
        margin-left:1px;
        margin-right:1px;
    }

    .main-container{padding:7px;}

    .card-header{padding:10px 11px;font-size:14px;}
    .card-body{padding:11px;}

    .box{padding:12px;}
    .box h1{font-size:26px;}

    .f157-stat-card h1{font-size:19px !important;}
    .f157-stat-top > i{font-size:17px;}

    .f157-router-info span,
    .f157-resource-item span,
    .f157-router-info strong,
    .f157-resource-item strong{font-size:11px;}

    #trafficMonitor{min-height:260px;}

    .login-box{
        padding:12px 6px 12px;
    }

    .login-box .card-body{padding:12px !important;}
    .login-box img{max-width:210px;}
}

/* ---------- VERY SMALL PHONE <=360 ---------- */
@media screen and (max-width:360px){
    #openNav,
    #closeNav{
        width:38px;
        height:38px;
    }

    #openNav i,
    #closeNav i{font-size:19px;}

    #brand{max-width:32vw;font-size:13px;}
    .navbar-right{max-width:52%;}

    .main-container{padding:6px;}

    .f157-stat-grid-4,
    .f157-stat-grid-3{gap:6px;}

    .f157-stat-card a{padding:8px;}
    .f157-stat-card h1{font-size:18px !important;}

    .login-box{padding-left:4px;padding-right:4px;}
    .login-box .card-body{padding:10px !important;}
    .login-box img{max-width:190px;}
}

/* ---------- PHONE LANDSCAPE ---------- */
@media screen and (max-width:750px) and (orientation:landscape){
    .navbar{height:48px;}
    .navbar-left,
    .navbar-right{height:48px;}
    .sidenav{top:48px;}
    #main{padding-top:48px;}

    .login-box{
        min-height:calc(100vh - 48px);
        padding-top:10px;
        padding-bottom:10px;
    }
}

/* ---------- TOUCH DEVICES ---------- */
@media (hover:none) and (pointer:coarse){
    .navbar a,
    .sidenav a,
    .dropdown-btn,
    .btn,
    button,
    .btn-login{
        min-height:40px;
    }

    input,
    select,
    textarea,
    .form-control,
    .group-item{
        min-height:40px;
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto !important;}
    *,*::before,*::after{
        animation:none !important;
        transition:none !important;
    }
}

/* ---------- PRINT ---------- */
@media print{
    .navbar,
    .sidenav,
    .btn,
    button,
    #openNav,
    #closeNav{
        display:none !important;
    }

    #main{
        margin:0 !important;
        padding:0 !important;
    }

    body{
        background:#fff !important;
        color:#000 !important;
        overflow:visible !important;
    }

    .card,
    .box{
        border:1px solid #ccc !important;
        box-shadow:none !important;
        background:#fff !important;
        color:#000 !important;
    }
}

/* =========================================================
   END MIKHMON MIKHMON V6 CLEAN
========================================================= */

/* =========================================================
/* =========================================================
   MIKHMON V6.4 - FINAL CLEAN OVERRIDES
   - Consolidated V6.1 / V6.2 / V6.3
   - Static MIKHMON brand
   - Single hamburger
   - Safe mobile navbar
   - Large Hotspot / PPP icons
   - No duplicate override stack
========================================================= */

/* ---------- GENERAL SAFETY ---------- */
html{
    -webkit-text-size-adjust:100%;
    color-scheme:dark;
}

.navbar{
    overflow:hidden;
}

.navbar-left,
.navbar-right{
    display:flex;
    align-items:center;
    min-width:0;
}

.navbar-left{
    flex:1 1 auto;
    overflow:hidden;
}

.navbar-right{
    flex:0 0 auto;
    max-width:none;
    overflow:hidden;
}

.navbar-left > *,
.navbar-right > *{
    min-width:0;
    flex:0 1 auto;
}

.navbar a{
    min-width:0;
    flex:0 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.navbar select{
    width:auto !important;
    max-width:150px;
    min-width:90px;
    flex:0 1 auto;
    margin:0 2px;
    padding-left:9px;
    padding-right:9px;
    white-space:nowrap;
}

/* ---------- STATIC BRAND ---------- */
#brand,
#brand:link,
#brand:visited,
#brand:hover,
#brand:active,
#brand:focus{
    pointer-events:none !important;
    cursor:default !important;
    text-decoration:none !important;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    color:#ffffff !important;
}

#brand:hover{
    background:transparent !important;
    box-shadow:none !important;
}

/* ---------- SINGLE HAMBURGER ---------- */
#openNav,
#closeNav{
    flex:0 0 46px;
    width:46px;
    min-width:46px;
    height:46px;
    margin:2px 2px;
    padding:0;

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

    border:1px solid transparent;
    border-radius:10px;

    background:transparent !important;
    color:#edf7ff !important;
    box-shadow:none !important;

    cursor:pointer;
    pointer-events:auto;
    touch-action:manipulation;

    position:relative;
    z-index:1102;

    -webkit-tap-highlight-color:transparent;
}

#openNav{
    display:none;
}

#closeNav{
    display:none;
}

/* Mikhmon JS may set inline display when the sidebar is open. */
#closeNav[style*="display: block"],
#closeNav[style*="display:block"],
#closeNav[style*="display: flex"],
#closeNav[style*="display:flex"]{
    display:flex;
}

#openNav i,
#closeNav i{
    display:flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;
    margin:0;
    padding:0;

    font-size:26px;
    line-height:1;
    color:inherit;
}

#openNav:hover,
#closeNav:hover{
    color:#ff8500 !important;
    background:rgba(0,140,255,.10) !important;
    border-color:rgba(0,168,255,.28);
}

#openNav:active,
#closeNav:active{
    transform:scale(.94);
    color:#ff9d32 !important;
    background:rgba(255,106,0,.12) !important;
    border-color:rgba(255,133,0,.35);
}

#openNav:focus-visible,
#closeNav:focus-visible{
    outline:2px solid rgba(0,168,255,.65);
    outline-offset:1px;
}

/* ---------- TABLET ---------- */
@media screen and (min-width:751px) and (max-width:1000px){
    .navbar-right{
        max-width:48%;
    }

    .navbar select{
        min-width:82px;
        max-width:125px;
    }
}

/* ---------- MOBILE NAVBAR ---------- */
@media screen and (max-width:750px){

    .navbar{
        min-height:51px;
        height:51px;
        padding-left:4px;
        padding-right:4px;
        gap:1px;
    }

    .navbar-left,
    .navbar-right{
        height:51px;
    }

    .navbar-left{
        flex:1 1 auto;
        overflow:hidden;
    }

    .navbar-right{
        flex:0 0 auto;
        max-width:58%;
        overflow:hidden;
    }

    #brand{
        display:flex !important;
        align-items:center;
        flex:0 1 auto;
        width:auto;
        max-width:25vw;
        min-width:0;
        margin:0 2px;
        padding:0 2px;
        font-size:14px;
        line-height:1;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    #openNav{
        display:flex;
    }

    #closeNav{
        display:none;
    }

    #openNav,
    #closeNav{
        flex-basis:44px;
        width:44px;
        min-width:44px;
        height:44px;
        margin:3px 1px;
        border-radius:9px;
    }

    #openNav i,
    #closeNav i{
        width:31px;
        height:31px;
        font-size:25px;
    }

    .navbar-left > a:not(#brand){
        height:40px;
        margin:5px 0;
        padding-left:3px;
        padding-right:3px;
        font-size:11px;
        line-height:1;
    }

    .navbar-right select{
        flex:0 1 78px;
        width:78px !important;
        min-width:0;
        max-width:78px;
        height:40px;
        margin:5px 1px;
        padding-left:7px;
        padding-right:7px;
        font-size:11px;
        text-overflow:ellipsis;
    }

    /* Clock on mobile: don't let it crush the controls. */
    .navbar-right > :last-child:not(select){
        display:none !important;
    }

    .sidenav{
        top:51px;
        width:0;
        max-width:min(84vw,310px);
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        touch-action:pan-y;
    }

    .sidenav a,
    .dropdown-btn{
        min-height:44px;
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }
}

/* ---------- SMALL PHONE ---------- */
@media screen and (max-width:480px){

    #brand{
        max-width:22vw;
        font-size:13px;
    }

    #openNav,
    #closeNav{
        flex-basis:42px;
        width:42px;
        min-width:42px;
        height:42px;
        margin:4px 1px;
    }

    #openNav i,
    #closeNav i{
        width:30px;
        height:30px;
        font-size:24px;
    }

    .navbar-left > a:not(#brand){
        font-size:10px;
        padding-left:2px;
        padding-right:2px;
    }

    .navbar-right select{
        flex-basis:74px;
        width:74px !important;
        max-width:74px;
        height:38px;
        font-size:10px;
        padding-left:5px;
        padding-right:5px;
    }
}

/* ---------- VERY SMALL PHONE ---------- */
@media screen and (max-width:360px){

    #brand{
        max-width:20vw;
        font-size:12px;
    }

    #openNav,
    #closeNav{
        flex-basis:40px;
        width:40px;
        min-width:40px;
        height:40px;
        margin:5px 1px;
    }

    #openNav i,
    #closeNav i{
        width:29px;
        height:29px;
        font-size:23px;
    }

    .navbar-left > a:not(#brand){
        font-size:9px;
        padding-left:1px;
        padding-right:1px;
    }

    .navbar-right select{
        flex-basis:68px;
        width:68px !important;
        max-width:68px;
        height:36px;
        font-size:9px;
    }
}

/* ---------- PHONE LANDSCAPE ---------- */
@media screen and (max-width:750px) and (orientation:landscape){

    .navbar,
    .navbar-left,
    .navbar-right{
        height:48px;
    }

    .navbar{
        min-height:48px;
    }

    .sidenav{
        top:48px;
    }

    #main{
        padding-top:48px;
    }

    #openNav,
    #closeNav{
        height:42px;
        flex-basis:42px;
        width:42px;
    }
}

/* ---------- HOTSPOT / PPP ICON SCALE ---------- */
@media screen and (max-width:750px){

    .f157-stat-top > i{
        flex:0 0 auto;
        width:34px;
        min-width:34px;
        height:34px;

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

        font-size:30px !important;
        line-height:1;
        color:#68c8ff;

        text-shadow:
            0 0 8px rgba(0,168,255,.48);
    }

    .f157-service-card .card-header h3 i{
        display:inline-flex;
        align-items:center;
        justify-content:center;

        width:34px;
        min-width:34px;
        height:34px;
        margin-right:9px;

        font-size:29px !important;
        line-height:1;
        color:#ffffff;
    }

    .f157-stat-card h1{
        font-size:27px !important;
        line-height:1.05;
    }
}

@media screen and (max-width:480px){

    .f157-stat-top > i{
        width:32px;
        min-width:32px;
        height:32px;
        font-size:28px !important;
    }

    .f157-service-card .card-header h3 i{
        width:32px;
        min-width:32px;
        height:32px;
        margin-right:8px;
        font-size:27px !important;
    }

    .f157-stat-card h1{
        font-size:25px !important;
    }
}

@media screen and (max-width:360px){

    .f157-stat-top > i{
        width:30px;
        min-width:30px;
        height:30px;
        font-size:26px !important;
    }

    .f157-service-card .card-header h3 i{
        width:30px;
        min-width:30px;
        height:30px;
        margin-right:7px;
        font-size:25px !important;
    }
}

/* ---------- TOUCH ---------- */
@media (hover:none) and (pointer:coarse){
    .navbar a,
    .sidenav a,
    .dropdown-btn,
    .btn,
    button,
    .btn-login{
        min-height:40px;
    }

    input,
    select,
    textarea,
    .form-control,
    .group-item{
        min-height:40px;
    }
}

/* ---------- PRINT ---------- */
@media print{
    #openNav,
    #closeNav{
        display:none !important;
    }
}

/* =========================================================
   END MIKHMON MIKHMON V6.4
========================================================= */