/* ============================================================
   BBWS SUMATERA II MEDAN
   SUPER HERO PREMIUM UI
   BLUE PUPR EDITION
   AdminLTE 2.x
   ============================================================ */


/* ============================================================
   01. COLOR SYSTEM
   ============================================================ */

:root {
    --pupr-dark: #003b73;
    --pupr-navy: #052f57;
    --pupr-blue: #005baa;
    --pupr-blue2: #0072bc;
    --pupr-light: #eaf5fc;
    --pupr-cyan: #00a7df;

    --hero-text: #17324d;
    --hero-muted: #6b7d8f;

    --hero-bg: #f3f7fb;
    --hero-white: #ffffff;

    --hero-border: rgba(0, 76, 135, .10);

    --hero-radius: 16px;
    --hero-radius-sm: 10px;

    --hero-shadow:
        0 8px 28px rgba(5, 47, 87, .08);

    --hero-shadow-hover:
        0 18px 45px rgba(5, 47, 87, .16);
}


/* ============================================================
   02. GLOBAL
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(0, 114, 188, .07),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #f1f6fa 100%
        );

    color: var(--hero-text);

    font-family:
        "Source Sans Pro",
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ============================================================
   03. HEADER SUPER HERO
   ============================================================ */

.main-header {
    position: relative;
    z-index: 1000;

    border: 0 !important;

    box-shadow:
        0 5px 25px rgba(0, 45, 85, .16);
}


/* Navbar */
.main-header .navbar {
    background:
        linear-gradient(
            115deg,
            #003b73 0%,
            #005baa 48%,
            #007bc4 100%
        ) !important;

    border: 0 !important;
}


/* Garis cahaya bawah header */
.main-header .navbar:after {
    content: "";

    position: absolute;

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

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00a7df,
            #ffffff,
            #00a7df,
            transparent
        );

    opacity: .65;
}


/* ============================================================
   04. LOGO
   ============================================================ */

.main-header .logo {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #052f57,
            #004b8d
        ) !important;

    color: #fff !important;

    border: 0 !important;

    font-weight: 700;

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

.main-header .logo:hover {
    background:
        linear-gradient(
            135deg,
            #052f57,
            #005baa
        ) !important;
}


/* Logo text */
.main-header .logo-lg {
    letter-spacing: .3px;
}

.main-header .logo-lg b {
    font-weight: 700;
}


/* ============================================================
   05. NAVBAR MENU
   ============================================================ */

.main-header .navbar .nav > li > a {
    position: relative;

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

    font-weight: 600;

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


.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li.active > a,
.main-header .navbar .nav > li.open > a {
    background:
        rgba(255,255,255,.10) !important;

    color: #fff !important;
}


/* Active underline */
.main-header .navbar .nav > li > a:after {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 7px;

    height: 2px;

    border-radius: 20px;

    background: #fff;

    transform: scaleX(0);

    transition:
        transform .25s ease;
}

.main-header .navbar .nav > li > a:hover:after,
.main-header .navbar .nav > li.active > a:after {
    transform: scaleX(1);
}


/* ============================================================
   06. JUDUL BBWS
   Struktur:
   <div style="width:100%;text-align:center...>
   ============================================================ */

.main-header .navbar > div[style*="text-align:center"] {
    position: absolute;

    left: 50%;
    top: 0;

    transform: translateX(-50%);

    height: 50px;

    display: flex;

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

    width: auto !important;

    padding: 0 20px;

    white-space: nowrap;

    pointer-events: none;

    text-shadow:
        0 2px 8px rgba(0,0,0,.20);
}

.main-header .navbar > div[style*="text-align:center"] h4 {
    margin: 0;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .7px;
}

.main-header .navbar > div[style*="text-align:center"] img {
    width: 27px !important;
    height: auto !important;

    margin-right: 8px;

    vertical-align: middle;
}


/* ============================================================
   07. SIDEBAR
   ============================================================ */

.main-sidebar {
    background:
        linear-gradient(
            180deg,
            #062f55 0%,
            #073e70 45%,
            #052f57 100%
        ) !important;

    box-shadow:
        5px 0 25px rgba(0,45,85,.14);
}


/* Sidebar background */
.skin-red-light .main-sidebar,
.skin-red-light .left-side {
    background:
        linear-gradient(
            180deg,
            #062f55,
            #073e70,
            #052f57
        ) !important;
}


/* ============================================================
   08. USER PANEL
   ============================================================ */

.user-panel {
    padding: 18px 12px !important;

    border-bottom:
        1px solid rgba(255,255,255,.09) !important;
}

.user-panel > .image > img {
    width: 42px;
    height: 42px;

    object-fit: cover;

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

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

.user-panel > .info {
    padding-left: 12px;
}

.user-panel > .info p {
    color: #fff !important;

    font-weight: 600;

    margin-bottom: 5px;
}

.user-panel > .info a {
    color: #9edcff !important;

    font-size: 12px;
}

.user-panel > .info a .fa-circle {
    color: #31d17c !important;
}


/* ============================================================
   09. SIDEBAR MENU
   ============================================================ */

.sidebar-menu > li.header {
    color:
        rgba(255,255,255,.45) !important;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    padding: 13px 15px;
}


.sidebar-menu > li > a {
    margin: 3px 8px;

    border-radius: 9px;

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

    transition:
        background .2s ease,
        color .2s ease,
        padding-left .2s ease;
}


.sidebar-menu > li > a:hover {
    background:
        rgba(255,255,255,.09) !important;

    color: #fff !important;

    padding-left: 17px;
}


.sidebar-menu > li.active > a {
    background:
        linear-gradient(
            90deg,
            rgba(0,167,223,.28),
            rgba(255,255,255,.06)
        ) !important;

    color: #fff !important;

    border-left:
        3px solid #00a7df !important;

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


/* Icons */
.sidebar-menu > li > a > .fa {
    width: 22px;

    color: #8fdcff;

    font-size: 15px;
}

.sidebar-menu > li.active > a > .fa {
    color: #fff;
}


/* Tree menu */
.sidebar-menu .treeview-menu {
    background:
        rgba(0,0,0,.12) !important;

    padding: 5px 0;
}

.sidebar-menu .treeview-menu > li > a {
    color:
        rgba(255,255,255,.68) !important;

    border-radius: 7px;

    margin: 2px 12px;

    transition: all .2s ease;
}

.sidebar-menu .treeview-menu > li > a:hover {
    background:
        rgba(0,167,223,.14) !important;

    color: #fff !important;

    padding-left: 18px;
}


/* ============================================================
   10. CONTENT AREA
   ============================================================ */

.content-wrapper {
    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #f1f6fa 100%
        ) !important;
}


.content {
    padding-top: 22px;

    padding-bottom: 40px;
}


/* ============================================================
   11. PAGE HEADER
   ============================================================ */

.content-header {
    padding-top: 20px;
    padding-bottom: 10px;
}

.content-header > h1 {
    color: var(--pupr-navy);

    font-size: 25px;

    font-weight: 700;

    letter-spacing: -.3px;
}

.content-header > h1 small {
    color: var(--hero-muted);
}


/* Breadcrumb */
.breadcrumb {
    background:
        rgba(255,255,255,.70) !important;

    border-radius: 8px;

    box-shadow:
        0 3px 12px rgba(0,45,85,.04);
}


/* ============================================================
   12. PREMIUM CARD
   ============================================================ */

.box {
    position: relative;

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

    border:
        1px solid var(--hero-border) !important;

    border-radius:
        var(--hero-radius) !important;

    box-shadow:
        var(--hero-shadow);

    overflow: hidden;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


.box:hover {
    transform: translateY(-3px);

    box-shadow:
        var(--hero-shadow-hover);

    border-color:
        rgba(0,91,170,.18) !important;
}


/* Top hero line */
.box.box-primary {
    border-top: 0 !important;
}

.box.box-primary:before {
    content: "";

    position: absolute;

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

    height: 3px;

    background:
        linear-gradient(
            90deg,
            #003b73,
            #005baa,
            #0072bc,
            #00a7df
        );
}


/* Card header */
.box-header {
    padding: 16px 19px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafdff
        ) !important;

    border-bottom:
        1px solid rgba(0,76,135,.08) !important;
}

.box-title {
    color: #123b61;

    font-weight: 700;

    font-size: 16px;
}

.box-body {
    padding: 19px;
}

.box-footer {
    background:
        #fafcfe !important;

    border-top:
        1px solid rgba(0,76,135,.07) !important;
}


/* ============================================================
   13. KPI / INFO BOX SUPER HERO
   ============================================================ */

.info-box {
    position: relative;

    min-height: 96px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7fbfe
        ) !important;

    border:
        1px solid rgba(0,76,135,.09);

    border-radius:
        var(--hero-radius);

    box-shadow:
        var(--hero-shadow);

    overflow: hidden;

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


.info-box:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--hero-shadow-hover);
}


/* Decorative circle */
.info-box:after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -50px;
    bottom: -70px;

    border-radius: 50%;

    background:
        rgba(0,114,188,.07);

    pointer-events: none;
}


/* Icon */
.info-box-icon {
    width: 85px;

    background:
        linear-gradient(
            145deg,
            #003f78,
            #005baa,
            #0072bc
        ) !important;

    color: #fff !important;

    border-radius:
        0 !important;

    font-size: 28px;
}


/* KPI text */
.info-box-content {
    padding: 14px 16px;
}

.info-box-text {
    color: #718096;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;
}

.info-box-number {
    color: #123b61;

    font-size: 27px;

    font-weight: 700;

    line-height: 1.2;
}


/* ============================================================
   14. SMALL BOX
   ============================================================ */

.small-box {
    border-radius:
        var(--hero-radius);

    overflow: hidden;

    box-shadow:
        var(--hero-shadow);

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

.small-box:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--hero-shadow-hover);
}

.small-box .icon {
    opacity: .17;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.small-box:hover .icon {
    opacity: .25;

    transform:
        scale(1.12)
        rotate(-4deg);
}


/* ============================================================
   15. TABLE SUPER HERO
   ============================================================ */

.table-responsive {
    background: #fff;

    border:
        1px solid rgba(0,76,135,.08);

    border-radius: 12px;

    box-shadow:
        0 4px 18px rgba(5,47,87,.05);

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;
}


.table {
    background: #fff;

    border-collapse: separate;

    border-spacing: 0;

    margin-bottom: 0;
}


/* Table header */
.table > thead > tr > th {
    background:
        linear-gradient(
            135deg,
            #e7f2fa,
            #f4f9fd
        );

    color:
        #17466d;

    padding:
        12px 10px;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .35px;

    border-bottom:
        1px solid #d5e5f0 !important;

    white-space: nowrap;
}


/* Table body */
.table > tbody > tr > td {
    padding:
        10px;

    color:
        #40576c;

    border-top:
        1px solid #edf2f6;

    vertical-align:
        middle;
}


/* Hover */
.table-hover > tbody > tr {
    transition:
        background .18s ease;
}

.table-hover > tbody > tr:hover {
    background:
        linear-gradient(
            90deg,
            #eef7fc,
            #fbfdff
        );
}


/* ============================================================
   16. DATATABLES
   ============================================================ */

.dataTables_wrapper {
    color:
        #52687b;
}

.dataTables_wrapper .dataTables_filter input {
    border:
        1px solid #d7e4ed;

    border-radius:
        8px;

    padding:
        7px 10px;

    outline: none;

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

.dataTables_wrapper .dataTables_filter input:focus {
    border-color:
        #0072bc;

    box-shadow:
        0 0 0 3px rgba(0,114,188,.10);
}

.dataTables_wrapper .dataTables_length select {
    border:
        1px solid #d7e4ed;

    border-radius:
        7px;

    padding:
        5px;
}


/* ============================================================
   17. GALLERY SUPER HERO
   ============================================================ */

.gallery-item {
    position: relative;

    overflow: hidden;

    background: #fff;

    border:
        1px solid rgba(0,76,135,.10);

    border-radius:
        var(--hero-radius);

    box-shadow:
        var(--hero-shadow);

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


.gallery-item:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 18px 45px rgba(5,47,87,.17);
}


.gallery-item img {
    display: block;

    width: 100%;

    aspect-ratio:
        4 / 3;

    object-fit:
        cover;

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1);
}


.gallery-item:hover img {
    transform:
        scale(1.07);
}


/* Gallery overlay */
.gallery-item:after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,39,73,.40)
        );

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .35s ease;
}

.gallery-item:hover:after {
    opacity: 1;
}


/* ============================================================
   18. NEWS CARD
   ============================================================ */

.news-card {
    background: #fff;

    border:
        1px solid rgba(0,76,135,.09);

    border-radius:
        var(--hero-radius);

    overflow: hidden;

    box-shadow:
        var(--hero-shadow);

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

.news-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        var(--hero-shadow-hover);
}

.news-card img {
    width: 100%;

    height: 210px;

    object-fit: cover;

    transition:
        transform .5s ease;
}

.news-card:hover img {
    transform:
        scale(1.05);
}

.news-card-body {
    padding: 18px;
}

.news-card-title {
    color:
        #123b61;

    font-size:
        18px;

    font-weight:
        700;

    line-height:
        1.4;
}

.news-card-meta {
    color:
        #758799;

    font-size:
        11px;

    text-transform:
        uppercase;

    letter-spacing:
        .3px;
}


/* ============================================================
   19. SECTION TITLE
   ============================================================ */

.section-title {
    position: relative;

    color:
        #123b61;

    font-weight:
        700;

    padding-bottom:
        11px;
}

.section-title:after {
    content: "";

    display: block;

    width: 58px;

    height: 3px;

    margin-top: 9px;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #003b73,
            #005baa,
            #00a7df
        );
}


/* ============================================================
   20. BUTTON
   ============================================================ */

.btn {
    border-radius:
        8px !important;

    font-weight:
        600;

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

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


.btn-primary {
    background:
        linear-gradient(
            135deg,
            #005baa,
            #0072bc
        ) !important;

    border-color:
        transparent !important;

    box-shadow:
        0 5px 16px rgba(0,91,170,.20);
}

.btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #004b8d,
            #0068a9
        ) !important;

    box-shadow:
        0 8px 22px rgba(0,91,170,.28);
}


/* ============================================================
   21. FORM
   ============================================================ */

.form-control {
    border:
        1px solid #d7e4ed;

    border-radius:
        8px;

    box-shadow:
        none;

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

.form-control:focus {
    border-color:
        #0072bc;

    box-shadow:
        0 0 0 3px rgba(0,114,188,.10);
}


/* ============================================================
   22. LABEL / BADGE
   ============================================================ */

.label {
    border-radius:
        20px;

    padding:
        5px 10px;

    font-size:
        10px;

    font-weight:
        700;
}


/* ============================================================
   23. FOOTER
   ============================================================ */

.main-footer {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #052f57,
            #0a4777
        ) !important;

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

    border:
        0 !important;

    padding:
        24px 20px;

    box-shadow:
        0 -6px 22px rgba(0,45,85,.08);
}

.main-footer:before {
    content: "";

    position: absolute;

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

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00a7df,
            #fff,
            #00a7df,
            transparent
        );

    opacity: .6;
}

.main-footer a {
    color:
        #80d7f4;
}

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


/* ============================================================
   24. SCROLLBAR
   ============================================================ */

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

::-webkit-scrollbar-track {
    background:
        #edf3f8;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #72a8cc,
            #397aa7
        );

    border-radius:
        20px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        #005baa;
}


/* ============================================================
   25. MOBILE SUPER HERO
   ============================================================ */

@media (max-width: 767px) {

    /* Header */
    .main-header .logo {
        height: 50px;

        line-height: 50px;

        width: 100%;
    }


    .main-header .navbar {
        margin-left: 0 !important;
    }


    /* BBWS title */
    .main-header .navbar > div[style*="text-align:center"] {
        left: 50px;

        right: 45px;

        transform: none;

        width: auto !important;

        padding: 0 5px;
    }

    .main-header .navbar > div[style*="text-align:center"] h4 {
        font-size: 11px;

        letter-spacing: .25px;

        overflow: hidden;

        text-overflow: ellipsis;
    }

    .main-header .navbar > div[style*="text-align:center"] img {
        width: 22px !important;

        margin-right: 5px;
    }


    /* Content */
    .content {
        padding:
            10px;
    }

    .content-header {
        padding:
            14px 10px 7px;
    }

    .content-header > h1 {
        font-size:
            21px;
    }


    /* Cards */
    .box {
        border-radius:
            13px !important;

        margin-bottom:
            13px;
    }

    .box-header {
        padding:
            13px 14px;
    }

    .box-body {
        padding:
            14px;
    }


    /* KPI */
    .info-box {
        min-height:
            80px;

        border-radius:
            12px;
    }

    .info-box-icon {
        width:
            62px;

        font-size:
            22px;
    }

    .info-box-content {
        padding:
            11px 12px;
    }

    .info-box-text {
        font-size:
            9px;
    }

    .info-box-number {
        font-size:
            20px;
    }


    /* Table */
    .table-responsive {
        border-radius:
            10px;
    }

    .table {
        min-width:
            620px;

        font-size:
            12px;
    }

    .table > thead > tr > th {
        padding:
            10px 8px;
    }

    .table > tbody > tr > td {
        padding:
            9px 8px;
    }


    /* Gallery */
    .gallery-item {
        border-radius:
            10px;
    }

    .gallery-item:hover {
        transform:
            none;
    }

    .gallery-item:hover img {
        transform:
            none;
    }

    .gallery-item:after {
        display:
            none;
    }


    /* News */
    .news-card {
        border-radius:
            12px;
    }

    .news-card img {
        height:
            165px;
    }

    .news-card-body {
        padding:
            14px;
    }

    .news-card-title {
        font-size:
            16px;
    }


    /* Footer */
    .main-footer {
        padding:
            20px 12px;

        text-align:
            center;
    }
}


/* ============================================================
   26. SMALL PHONE
   ============================================================ */

@media (max-width: 380px) {

    .main-header .navbar > div[style*="text-align:center"] h4 {
        font-size:
            10px;
    }

    .content {
        padding:
            8px;
    }

    .box-body {
        padding:
            12px;
    }

    .info-box-icon {
        width:
            56px;
    }

    .info-box-number {
        font-size:
            18px;
    }

    .news-card img {
        height:
            145px;
    }
}


/* ============================================================
   27. REDUCE MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *:before,
    *:after {
        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;
    }
}

/* =========================================================
   SUPER HERO PUPR — FINAL OVERRIDE
   Mengunci warna AdminLTE agar tidak kembali merah
   ========================================================= */

/* BODY / BACKGROUND */
body.skin-red-light {
    background: #eef5fa !important;
}

body.skin-red-light .content-wrapper {
    background: linear-gradient(
        135deg,
        #f4f9fc 0%,
        #eef5fa 50%,
        #e7f2f9 100%
    ) !important;
}


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

body.skin-red-light .main-header .navbar {
    background: linear-gradient(
        135deg,
        #003b73 0%,
        #005baa 55%,
        #0072bc 100%
    ) !important;
}

body.skin-red-light .main-header .logo {
    background: #003b73 !important;
    color: #fff !important;
}

body.skin-red-light .main-header .logo:hover {
    background: #052f57 !important;
}

body.skin-red-light .main-header .navbar .sidebar-toggle {
    color: #fff !important;
}

body.skin-red-light .main-header .navbar .sidebar-toggle:hover {
    background: rgba(255,255,255,.12) !important;
}


/* =========================================================
   JUDUL BBWS SUMATERA II MEDAN
   ========================================================= */

body.skin-red-light .main-header .navbar > div[style*="text-align:center"] h4,
body.skin-red-light .main-header .navbar > div[style*="text-align:center"] H4 {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0,0,0,.25);
}


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

body.skin-red-light .main-sidebar,
body.skin-red-light .left-side {
    background: linear-gradient(
        180deg,
        #052f57 0%,
        #003b73 45%,
        #00294f 100%
    ) !important;
}

body.skin-red-light .sidebar-menu > li.header {
    background: rgba(0,0,0,.15) !important;
    color: #9fdcff !important;
}

body.skin-red-light .sidebar-menu > li > a {
    color: #e8f5ff !important;
    border-left: 3px solid transparent !important;
}

body.skin-red-light .sidebar-menu > li > a:hover {
    background: rgba(0,167,223,.14) !important;
    color: #fff !important;
    border-left-color: #00a7df !important;
}

body.skin-red-light .sidebar-menu > li.active > a,
body.skin-red-light .sidebar-menu > li.menu-open > a {
    background: linear-gradient(
        90deg,
        rgba(0,114,188,.95),
        rgba(0,91,170,.65)
    ) !important;

    color: #fff !important;
    border-left-color: #00a7df !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,.12);
}


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

body.skin-red-light .sidebar-menu > li > a > .fa,
body.skin-red-light .sidebar-menu > li > a > .glyphicon,
body.skin-red-light .sidebar-menu > li > a > .ion {
    color: #8edfff !important;
}

body.skin-red-light .sidebar-menu > li.active > a > .fa,
body.skin-red-light .sidebar-menu > li.active > a > .glyphicon,
body.skin-red-light .sidebar-menu > li.active > a > .ion {
    color: #fff !important;
}


/* =========================================================
   USER PANEL
   ========================================================= */

body.skin-red-light .user-panel {
    background: rgba(255,255,255,.06) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

body.skin-red-light .user-panel > .info,
body.skin-red-light .user-panel > .info > p {
    color: #fff !important;
}

body.skin-red-light .user-panel > .info > a {
    color: #9fdcff !important;
}

body.skin-red-light .user-panel > .info > a .fa {
    color: #39d98a !important;
}


/* =========================================================
   CONTENT HEADER
   ========================================================= */

body.skin-red-light .content-header > h1 {
    color: #003b73 !important;
    font-weight: 700;
}

body.skin-red-light .content-header > h1 small {
    color: #6d8295 !important;
}


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

body.skin-red-light .box {
    border-top: 3px solid #005baa !important;
    border-radius: 14px !important;
    box-shadow:
        0 8px 25px rgba(0,59,115,.08),
        0 2px 6px rgba(0,0,0,.04) !important;
}

body.skin-red-light .box-header {
    background: linear-gradient(
        90deg,
        #f7fbfe,
        #eef7fc
    ) !important;
}

body.skin-red-light .box-title {
    color: #003b73 !important;
    font-weight: 700 !important;
}


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

body.skin-red-light .info-box {
    border-radius: 14px !important;
    border: 1px solid #dcecf6 !important;
    box-shadow: 0 8px 22px rgba(0,59,115,.08) !important;
}

body.skin-red-light .info-box-icon {
    background: linear-gradient(
        135deg,
        #003b73,
        #0072bc
    ) !important;
    color: #fff !important;
}

body.skin-red-light .info-box-content {
    background: #fff !important;
}

body.skin-red-light .info-box-text {
    color: #60788b !important;
}

body.skin-red-light .info-box-number {
    color: #003b73 !important;
}


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

body.skin-red-light .btn-primary {
    background: linear-gradient(
        135deg,
        #003b73,
        #005baa
    ) !important;

    border-color: #005baa !important;
    color: #fff !important;
}

body.skin-red-light .btn-primary:hover,
body.skin-red-light .btn-primary:focus {
    background: linear-gradient(
        135deg,
        #005baa,
        #0072bc
    ) !important;
}


/* =========================================================
   LINK
   ========================================================= */

body.skin-red-light a {
    color: #005baa;
}

body.skin-red-light a:hover {
    color: #0072bc;
}


/* =========================================================
   PAGINATION
   ========================================================= */

body.skin-red-light .pagination > .active > a,
body.skin-red-light .pagination > .active > span {
    background: #005baa !important;
    border-color: #005baa !important;
}


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

body.skin-red-light .table thead th {
    background: linear-gradient(
        135deg,
        #003b73,
        #005baa
    ) !important;

    color: #fff !important;
    border-color: #005baa !important;
}

body.skin-red-light .table tbody tr:hover {
    background: #eef8fd !important;
}


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

body.skin-red-light .form-control:focus {
    border-color: #0072bc !important;
    box-shadow: 0 0 0 3px rgba(0,114,188,.12) !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

body.skin-red-light ::-webkit-scrollbar-thumb {
    background: #0072bc !important;
}

body.skin-red-light ::-webkit-scrollbar-thumb:hover {
    background: #003b73 !important;
}


/* =========================================================
   SUPER HERO — PREMIUM AWLR TABLE
   ========================================================= */

body.skin-red-light .box-body {
    background: #fff !important;
}

/* Judul tabel */
body.skin-red-light .box-body h2,
body.skin-red-light .box-body h3,
body.skin-red-light .box-body h4 {
    color: #003b73 !important;
    font-weight: 700 !important;
}

/* Tabel utama */
body.skin-red-light table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    background: #fff !important;
}

/* Header */
body.skin-red-light table thead th {
    background: linear-gradient(
        135deg,
        #003b73 0%,
        #005baa 60%,
        #0072bc 100%
    ) !important;

    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
    text-align: center !important;
    vertical-align: middle !important;

    padding: 14px 10px !important;
    border: 0 !important;

    box-shadow: inset 0 -2px 0 rgba(0,167,223,.55);
}

/* Sudut header */
body.skin-red-light table thead th:first-child {
    border-radius: 8px 0 0 0;
}

body.skin-red-light table thead th:last-child {
    border-radius: 0 8px 0 0;
}

/* Isi tabel */
body.skin-red-light table tbody td {
    padding: 13px 10px !important;
    color: #526b80 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #e8eef3 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

/* Zebra */
body.skin-red-light table tbody tr:nth-child(even) {
    background: #f8fbfd !important;
}

body.skin-red-light table tbody tr:nth-child(odd) {
    background: #fff !important;
}

/* Hover */
body.skin-red-light table tbody tr {
    transition: all .18s ease;
}

body.skin-red-light table tbody tr:hover {
    background: #eaf6fc !important;
    box-shadow: inset 4px 0 0 #00a7df;
}

/* Nomor */
body.skin-red-light table tbody td:first-child {
    color: #003b73 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Nama pos */
body.skin-red-light table tbody td:nth-child(2) {
    color: #31566f !important;
    font-weight: 600 !important;
}

/* Koordinat */
body.skin-red-light table tbody td:nth-child(3) {
    font-family: "Courier New", monospace;
    font-size: 13px !important;
    color: #527188 !important;
}

/* Voltage */
body.skin-red-light table tbody td:nth-child(4) {
    color: #005baa !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Update */
body.skin-red-light table tbody td:nth-child(5) {
    color: #5d7180 !important;
    text-align: center !important;
    white-space: nowrap;
}

/* Tinggi muka air */
body.skin-red-light table tbody td:nth-child(6) {
    color: #003b73 !important;
    font-weight: 700 !important;
    text-align: center !important;
}


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

body.skin-red-light .table-responsive {
    border: 0 !important;
    border-radius: 10px;
    overflow-x: auto;
    box-shadow: 0 4px 15px rgba(0,59,115,.05);
}


/* =========================================================
   DATATABLE
   ========================================================= */

body.skin-red-light .dataTables_wrapper {
    color: #526b80 !important;
}

body.skin-red-light .dataTables_wrapper .dataTables_filter input,
body.skin-red-light .dataTables_wrapper .dataTables_length select {
    border: 1px solid #d8e7f0 !important;
    border-radius: 7px !important;
    padding: 6px 10px !important;
    background: #fff !important;
}

body.skin-red-light .dataTables_wrapper .dataTables_filter input:focus {
    border-color: #0072bc !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,114,188,.10) !important;
}


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

@media (max-width: 767px) {

    body.skin-red-light table thead th {
        font-size: 11px !important;
        padding: 11px 8px !important;
    }

    body.skin-red-light table tbody td {
        font-size: 13px !important;
        padding: 11px 8px !important;
    }

    body.skin-red-light .table-responsive {
        margin-bottom: 10px;
    }
}


/* =========================================================
   SUPER HERO — DASHBOARD POLISH
   Tahap berikutnya
   ========================================================= */

/* ---------- MAIN BACKGROUND ---------- */

body.skin-red-light .content-wrapper {
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(0,114,188,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7fbfe 0%,
            #eef6fb 100%
        ) !important;
}


/* ---------- HEADER PREMIUM ---------- */

body.skin-red-light .main-header .navbar {
    height: 60px !important;
    min-height: 60px !important;

    background:
        linear-gradient(
            110deg,
            #003b73 0%,
            #005baa 48%,
            #0072bc 100%
        ) !important;

    box-shadow:
        0 4px 18px rgba(0,59,115,.22) !important;
}

body.skin-red-light .main-header .logo {
    height: 60px !important;
    line-height: 60px !important;

    background:
        linear-gradient(
            135deg,
            #002f5d,
            #003b73
        ) !important;

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

body.skin-red-light .main-header .logo-lg {
    font-size: 21px !important;
    letter-spacing: .3px;
}

body.skin-red-light .main-header .navbar .sidebar-toggle {
    height: 60px !important;
    line-height: 60px !important;
    font-size: 18px !important;
}


/* ---------- BBWS TITLE ---------- */

body.skin-red-light
.main-header .navbar > div[style*="text-align:center"] {
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.skin-red-light
.main-header .navbar > div[style*="text-align:center"] h4 {

    margin: 0 !important;

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

    letter-spacing: 1.2px;

    color: #fff !important;

    text-shadow:
        0 2px 5px rgba(0,0,0,.25);
}

body.skin-red-light
.main-header .navbar > div[style*="text-align:center"] img {

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

    vertical-align: middle;

    margin-right: 9px;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.25));
}


/* ---------- SIDEBAR DEPTH ---------- */

body.skin-red-light .main-sidebar {
    box-shadow:
        4px 0 20px rgba(0,30,70,.12) !important;
}

body.skin-red-light .sidebar {
    padding-top: 4px;
}


/* ---------- USER PANEL ---------- */

body.skin-red-light .user-panel {
    padding: 18px 15px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.025)
        ) !important;
}

body.skin-red-light .user-panel .image img {
    width: 48px !important;
    height: 48px !important;

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

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


/* ---------- MENU PREMIUM ---------- */

body.skin-red-light .sidebar-menu > li {
    margin: 3px 8px;
}

body.skin-red-light .sidebar-menu > li > a {
    border-radius: 9px !important;

    padding: 12px 14px !important;

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

body.skin-red-light .sidebar-menu > li > a:hover {
    transform: translateX(3px);

    background:
        linear-gradient(
            90deg,
            rgba(0,114,188,.75),
            rgba(0,167,223,.18)
        ) !important;

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

body.skin-red-light .sidebar-menu > li.active > a {
    background:
        linear-gradient(
            90deg,
            #0067ad,
            #007fc7
        ) !important;

    box-shadow:
        0 5px 15px rgba(0,114,188,.30) !important;

    border-left: 3px solid #45d7ff !important;
}


/* ---------- CONTENT ---------- */

body.skin-red-light .content {
    padding-top: 20px !important;
}


/* ---------- DASHBOARD TITLE ---------- */

body.skin-red-light .content-header {
    padding-bottom: 18px !important;
}

body.skin-red-light .content-header > h1 {
    font-size: 28px !important;
    font-weight: 800 !important;

    letter-spacing: -.4px;

    color: #003b73 !important;
}

body.skin-red-light .content-header > h1:after {
    content: "";
    display: block;

    width: 55px;
    height: 4px;

    margin-top: 8px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #005baa,
            #00a7df
        );
}


/* ---------- MAIN DASHBOARD CARD ---------- */

body.skin-red-light .box {
    overflow: hidden !important;

    border: 1px solid #dcecf6 !important;
    border-top: 4px solid #0072bc !important;

    border-radius: 16px !important;

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

    box-shadow:
        0 12px 35px rgba(0,59,115,.10),
        0 2px 8px rgba(0,0,0,.04) !important;
}


/* ---------- BOX HEADER ---------- */

body.skin-red-light .box-header {
    min-height: 58px;

    padding: 17px 20px !important;

    background:
        linear-gradient(
            90deg,
            #f4faff 0%,
            #edf7fc 100%
        ) !important;

    border-bottom: 1px solid #dcecf6 !important;
}

body.skin-red-light .box-title {
    font-size: 20px !important;
    font-weight: 800 !important;

    color: #003b73 !important;
}

body.skin-red-light .box-title:before {
    content: "";
    display: inline-block;

    width: 5px;
    height: 22px;

    margin-right: 10px;

    vertical-align: -4px;

    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            #005baa,
            #00a7df
        );
}


/* ---------- TABLE CONTAINER ---------- */

body.skin-red-light .box-body {
    padding: 20px !important;
}


/* ---------- TABLE ---------- */

body.skin-red-light .table {
    border-collapse: separate !important;
    border-spacing: 0 !important;

    border: 1px solid #dcecf6 !important;

    border-radius: 10px !important;
    overflow: hidden;
}

body.skin-red-light .table thead th {
    height: 48px;

    background:
        linear-gradient(
            135deg,
            #004b8d,
            #006bb2
        ) !important;

    color: #fff !important;

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

    letter-spacing: .4px;

    vertical-align: middle !important;

    border: 0 !important;
}

body.skin-red-light .table tbody td {
    height: 51px;

    color: #49657c !important;

    border-color: #e8f0f5 !important;

    vertical-align: middle !important;
}

body.skin-red-light .table tbody tr {
    transition:
        background .18s ease,
        transform .18s ease;
}

body.skin-red-light .table tbody tr:nth-child(even) {
    background: #f9fcfe !important;
}

body.skin-red-light .table tbody tr:hover {
    background: #eaf7fd !important;
}


/* ---------- FIRST COLUMN ---------- */

body.skin-red-light .table tbody td:first-child {
    font-weight: 700;
    color: #005baa !important;
}


/* ---------- DATA UPDATE ---------- */

body.skin-red-light .table tbody td {
    font-size: 14px;
}


/* ---------- SCROLLBAR ---------- */

body.skin-red-light ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

body.skin-red-light ::-webkit-scrollbar-track {
    background: #eaf2f7;
}

body.skin-red-light ::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #0072bc,
            #005baa
        );

    border-radius: 10px;
}


/* ---------- MOBILE ---------- */

@media (max-width: 767px) {

    body.skin-red-light .main-header .navbar {
        height: 54px !important;
        min-height: 54px !important;
    }

    body.skin-red-light .main-header .logo {
        height: 54px !important;
        line-height: 54px !important;
    }

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] {
        height: 54px !important;
    }

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 {
        font-size: 12px !important;
        letter-spacing: .5px;
    }

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] img {
        width: 27px !important;
        height: 27px !important;
    }

    body.skin-red-light .content {
        padding: 12px !important;
    }

    body.skin-red-light .box-body {
        padding: 10px !important;
    }

    body.skin-red-light .content-header > h1 {
        font-size: 23px !important;
    }
}

/* =========================================================
   SUPER HERO FINISHING
   Dashboard Data Logger
   ========================================================= */

/* PANEL UTAMA */
body.skin-red-light .box {
    position: relative;
    border-radius: 18px !important;
    overflow: hidden !important;
}

/* GARIS CAHAYA ATAS */
body.skin-red-light .box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #00a7df,
        #ffffff,
        #00a7df,
        transparent
    );

    opacity: .8;
    z-index: 2;
}


/* HEADER PANEL */
body.skin-red-light .box-header {
    padding: 18px 24px !important;

    background:
        linear-gradient(
            135deg,
            #f8fcff 0%,
            #edf7fc 100%
        ) !important;
}

body.skin-red-light .box-title {
    font-size: 21px !important;
    letter-spacing: .2px;
}


/* AREA TABEL */
body.skin-red-light .box-body {
    padding: 24px !important;
}


/* JUDUL POS DUGA AIR */
body.skin-red-light .box-body h1,
body.skin-red-light .box-body h2,
body.skin-red-light .box-body h3,
body.skin-red-light .box-body h4 {
    color: #003b73 !important;
    font-weight: 800 !important;
}


/* TABLE HEADER */
body.skin-red-light .table thead th {
    background:
        linear-gradient(
            135deg,
            #003f7a 0%,
            #0066aa 50%,
            #0077bb 100%
        ) !important;

    height: 54px !important;

    color: #fff !important;

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

    text-transform: uppercase;

    letter-spacing: .5px;

    border-right: 1px solid rgba(255,255,255,.12) !important;
}


/* BARIS TABEL */
body.skin-red-light .table tbody td {
    height: 56px !important;

    padding: 12px 15px !important;

    font-size: 14px !important;

    color: #294d68 !important;

    border-bottom: 1px solid #e4eef5 !important;

    transition: all .15s ease;
}


/* NOMOR */
body.skin-red-light .table tbody td:first-child {
    font-weight: 800 !important;
    color: #0068ad !important;
}


/* NILAI DATA */
body.skin-red-light .table tbody td strong,
body.skin-red-light .table tbody td b {
    color: #004b8d !important;
    font-weight: 800 !important;
}


/* HOVER ROW */
body.skin-red-light .table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            #edf8fd,
            #f8fcff
        ) !important;

    box-shadow:
        inset 4px 0 #00a7df;
}


/* BARIS GENAP */
body.skin-red-light .table tbody tr:nth-child(even) {
    background: #f9fcfe !important;
}


/* KEMBALIKAN HOVER DI ATAS STRIPE */
body.skin-red-light .table tbody tr:nth-child(even):hover,
body.skin-red-light .table tbody tr:nth-child(odd):hover {
    background: #edf8fd !important;
}


/* BORDER TABLE */
body.skin-red-light .table {
    border: 1px solid #d6e8f3 !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    box-shadow:
        0 3px 12px rgba(0,59,115,.04);
}


/* HEADER TABLE ROUNDED */
body.skin-red-light .table thead tr th:first-child {
    border-top-left-radius: 10px;
}

body.skin-red-light .table thead tr th:last-child {
    border-top-right-radius: 10px;
}


/* =========================================================
   EFFECT UNTUK DATA ANGKA
   ========================================================= */

body.skin-red-light .table tbody td:nth-child(4),
body.skin-red-light .table tbody td:nth-child(6) {
    font-weight: 700 !important;
    color: #005baa !important;
}


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

@media (max-width: 767px) {

    body.skin-red-light .box-body {
        padding: 14px !important;
    }

    body.skin-red-light .box-header {
        padding: 15px !important;
    }

    body.skin-red-light .box-title {
        font-size: 17px !important;
    }

    body.skin-red-light .table thead th {
        height: 48px !important;
        font-size: 10px !important;
        padding: 8px !important;
    }

    body.skin-red-light .table tbody td {
        height: 48px !important;
        padding: 9px !important;
        font-size: 12px !important;
    }
}

/* =========================================================
   PROFESSIONAL ENTERPRISE UI
   BBWS SUMATERA II MEDAN
   ========================================================= */


/* =========================================================
   1. GLOBAL
   ========================================================= */

body.skin-red-light {
    font-family: "Segoe UI", Arial, sans-serif !important;
    color: #29445a !important;
}

body.skin-red-light .content-wrapper {
    background: #f3f7fa !important;
}


/* =========================================================
   2. HEADER — CLEAN ENTERPRISE
   ========================================================= */

body.skin-red-light .main-header .navbar {
    height: 68px !important;
    min-height: 68px !important;

    background: linear-gradient(
        100deg,
        #003b73 0%,
        #005ca8 52%,
        #087fc1 100%
    ) !important;

    box-shadow:
        0 3px 14px rgba(0, 45, 90, .18) !important;
}

body.skin-red-light .main-header .logo {
    width: 270px !important;
    height: 68px !important;
    line-height: 68px !important;

    background: #003b73 !important;

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

    letter-spacing: .2px;

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

body.skin-red-light .main-header .logo-lg {
    font-weight: 700 !important;
}

body.skin-red-light .main-header .navbar .sidebar-toggle {
    height: 68px !important;
    line-height: 68px !important;

    font-size: 19px !important;
}


/* =========================================================
   3. BBWS BRAND
   ========================================================= */

body.skin-red-light
.main-header .navbar > div[style*="text-align:center"] {
    height: 68px !important;

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

body.skin-red-light
.main-header .navbar > div[style*="text-align:center"] h4 {

    margin: 0 !important;

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

    color: #fff !important;

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

    letter-spacing: 1.1px;

    text-shadow:
        0 1px 3px rgba(0,0,0,.25);
}

body.skin-red-light
.main-header .navbar > div[style*="text-align:center"] img {

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

    margin-right: 11px !important;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.25));
}


/* =========================================================
   4. SIDEBAR
   ========================================================= */

body.skin-red-light .main-sidebar {
    width: 270px !important;

    background:
        linear-gradient(
            180deg,
            #073e6b 0%,
            #05365f 42%,
            #032f54 100%
        ) !important;

    box-shadow:
        3px 0 15px rgba(0,35,70,.12) !important;
}

body.skin-red-light .content-wrapper,
body.skin-red-light .main-footer {
    margin-left: 270px !important;
}


/* =========================================================
   5. USER PANEL
   ========================================================= */

body.skin-red-light .user-panel {
    padding: 20px 18px !important;

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

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

body.skin-red-light .user-panel .image img {
    width: 50px !important;
    height: 50px !important;

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

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


/* =========================================================
   6. SIDEBAR MENU
   ========================================================= */

body.skin-red-light .sidebar-menu {
    padding: 8px 10px !important;
}

body.skin-red-light .sidebar-menu > li {
    margin-bottom: 4px !important;
}

body.skin-red-light .sidebar-menu > li > a {

    min-height: 45px;

    padding: 13px 15px !important;

    border-radius: 8px !important;

    color: #e9f5ff !important;

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

    border-left: 3px solid transparent !important;

    transition: all .18s ease;
}

body.skin-red-light .sidebar-menu > li > a:hover {

    background: rgba(0,155,220,.16) !important;

    color: #fff !important;

    border-left-color: #29c9ff !important;

    transform: translateX(2px);
}

body.skin-red-light .sidebar-menu > li.active > a {

    background:
        linear-gradient(
            90deg,
            #087fc1,
            #0066a8
        ) !important;

    color: #fff !important;

    border-left-color: #45d7ff !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.16) !important;
}


/* =========================================================
   7. NAVIGATION TITLE
   ========================================================= */

body.skin-red-light .sidebar-menu > li.header {

    margin: 5px 0 8px !important;

    padding: 12px 8px !important;

    background: transparent !important;

    color: #83c9ee !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: 1px !important;
}


/* =========================================================
   8. CONTENT
   ========================================================= */

body.skin-red-light .content {

    padding: 24px !important;
}


/* =========================================================
   9. PAGE TITLE
   ========================================================= */

body.skin-red-light .content-header {

    padding: 15px 24px 22px !important;
}

body.skin-red-light .content-header > h1 {

    margin: 0 !important;

    font-size: 30px !important;

    font-weight: 700 !important;

    color: #073e6b !important;
}

body.skin-red-light .content-header > h1:after {

    content: "";

    display: block;

    width: 48px;
    height: 4px;

    margin-top: 10px;

    border-radius: 10px;

    background: #008bc9;
}


/* =========================================================
   10. MAIN CARD
   ========================================================= */

body.skin-red-light .box {

    border: 1px solid #dbe7ef !important;

    border-top:
        4px solid #087fc1 !important;

    border-radius: 14px !important;

    background: #fff !important;

    box-shadow:
        0 8px 24px rgba(30,70,100,.08) !important;
}


/* =========================================================
   11. CARD HEADER
   ========================================================= */

body.skin-red-light .box-header {

    min-height: 64px !important;

    padding: 19px 24px !important;

    background: #f8fbfd !important;

    border-bottom:
        1px solid #e1edf3 !important;
}

body.skin-red-light .box-title {

    font-size: 20px !important;

    font-weight: 700 !important;

    color: #073e6b !important;
}

body.skin-red-light .box-title:before {

    content: "";

    display: inline-block;

    width: 4px;
    height: 22px;

    margin-right: 10px;

    vertical-align: -4px;

    border-radius: 5px;

    background: #008bc9;
}


/* =========================================================
   12. CARD BODY
   ========================================================= */

body.skin-red-light .box-body {

    padding: 28px !important;
}


/* =========================================================
   13. SECTION TITLE
   ========================================================= */

body.skin-red-light .box-body h1,
body.skin-red-light .box-body h2,
body.skin-red-light .box-body h3,
body.skin-red-light .box-body h4 {

    color: #073e6b !important;

    font-weight: 700 !important;

    letter-spacing: -.2px;
}


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

body.skin-red-light .table {

    width: 100% !important;

    border: 1px solid #dce8ef !important;

    border-radius: 10px !important;

    overflow: hidden !important;

    background: #fff !important;
}


/* HEADER */

body.skin-red-light .table thead th {

    height: 52px !important;

    padding: 12px 14px !important;

    background: #005c9f !important;

    color: #fff !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: .5px !important;

    text-transform: uppercase;

    border: 0 !important;

    vertical-align: middle !important;
}


/* BODY */

body.skin-red-light .table tbody td {

    height: 55px !important;

    padding: 12px 15px !important;

    color: #405d73 !important;

    font-size: 14px !important;

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

    vertical-align: middle !important;
}


/* STRIPES */

body.skin-red-light .table tbody tr:nth-child(even) {

    background: #f8fbfd !important;
}


/* HOVER */

body.skin-red-light .table tbody tr:hover {

    background: #edf8fd !important;

    box-shadow:
        inset 3px 0 #00a7df;
}


/* NOMOR */

body.skin-red-light .table tbody td:first-child {

    color: #0065a8 !important;

    font-weight: 700 !important;
}


/* ANGKA MONITORING */

body.skin-red-light .table tbody td:nth-child(4),
body.skin-red-light .table tbody td:nth-child(6) {

    color: #005ca8 !important;

    font-weight: 700 !important;
}


/* =========================================================
   15. FOOTER
   ========================================================= */

body.skin-red-light .main-footer {

    background: #fff !important;

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

    color: #6f8596 !important;

    padding: 18px 24px !important;
}


/* =========================================================
   16. RESPONSIVE
   ========================================================= */

@media (max-width: 767px) {

    body.skin-red-light .main-header .logo {

        width: 100% !important;

        height: 55px !important;
        line-height: 55px !important;
    }

    body.skin-red-light .main-header .navbar {

        height: 55px !important;
        min-height: 55px !important;
    }

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] {

        height: 55px !important;
    }

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 {

        font-size: 12px !important;
    }

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] img {

        width: 28px !important;
        height: 28px !important;
    }

    body.skin-red-light .main-sidebar {

        width: 230px !important;
    }

    body.skin-red-light .content-wrapper,
    body.skin-red-light .main-footer {

        margin-left: 0 !important;
    }

    body.skin-red-light .content {

        padding: 12px !important;
    }

    body.skin-red-light .box-body {

        padding: 14px !important;
    }

    body.skin-red-light .content-header {

        padding: 12px !important;
    }

    body.skin-red-light .content-header > h1 {

        font-size: 23px !important;
    }
}

/* =========================================================
   TAHAP 1B — FIX BRAND BBWS
   ---------------------------------------------------------
   HANYA memperbaiki posisi/visibility brand.
   TIDAK mengubah:
   - Header 73px
   - Sidebar 290px
   - Content 290px
   - PHP
   - JavaScript
   - DataTables
   ========================================================= */

@media (min-width: 992px) {

    /* Brand BBWS */
    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] {

        position: fixed !important;

        left: 28px !important;
        top: 0 !important;

        width: 385px !important;
        height: 93px !important;

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

        display: flex !important;

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

        /*
         * INI PERBAIKAN UTAMA
         * Membatalkan transform lama:
         * translateX(-50%)
         */
        transform: none !important;

        text-align: left !important;

        z-index: 1100 !important;

        visibility: visible !important;
        opacity: 1 !important;

        overflow: visible !important;

        pointer-events: none !important;
    }


    /* Logo BBWS */
    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] img {

        display: block !important;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        margin:
            0 11px 0 0 !important;

        object-fit: contain !important;

        visibility: visible !important;
        opacity: 1 !important;

        filter:
            drop-shadow(
                0 2px 3px rgba(0,0,0,.25)
            ) !important;
    }


    /* Teks BBWS SUMATERA II MEDAN */
    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 {

        display: flex !important;

        align-items: center !important;

        height: 73px !important;

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

        color: #fff !important;

        font-size: 18px !important;

        font-weight: 700 !important;

        line-height: 1 !important;

        letter-spacing: 1px !important;

        white-space: nowrap !important;

        text-align: left !important;

        visibility: visible !important;
        opacity: 1 !important;

        overflow: visible !important;

        text-shadow:
            0 1px 3px rgba(0,0,0,.25) !important;
    }


    /* Pastikan isi brand terlihat */
    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] * {

        visibility: visible !important;
    }


    /* Jangan biarkan navbar memotong brand */
    body.skin-red-light .main-header .navbar {

        overflow: visible !important;
    }
}


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

@media (min-width: 768px) and (max-width: 991px) {

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] {

        position: absolute !important;

        left: 18px !important;
        top: 0 !important;

        width: 270px !important;
        height: 65px !important;

        transform: none !important;

        display: flex !important;

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

        padding: 0 !important;
    }


    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] img {

        width: 35px !important;
        height: 35px !important;

        min-width: 35px !important;
        min-height: 35px !important;

        margin-right: 8px !important;
    }


    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 {

        height: 65px !important;

        font-size: 15px !important;

        letter-spacing: .6px !important;

        white-space: nowrap !important;
    }
}


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

@media (max-width: 767px) {

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] {

        position: absolute !important;

        left: 55px !important;
        right: 45px !important;

        width: auto !important;

        height: 55px !important;

        transform: none !important;

        display: flex !important;

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

        padding: 0 !important;
    }


    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] img {

        width: 28px !important;
        height: 28px !important;

        min-width: 28px !important;
        min-height: 28px !important;

        margin-right: 7px !important;
    }


    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 {

        height: 55px !important;

        font-size: 12px !important;

        letter-spacing: .5px !important;

        white-space: nowrap !important;
    }
}

/* =========================================================
   TAHAP 1C — POSISI HAMBURGER
   ---------------------------------------------------------
   Target desktop:
   Hamburger berada sekitar x = 450px

   TIDAK mengubah:
   - Header height
   - Logo / brand
   - Sidebar
   - Content
   - Tabel
   - DataTables
   - PHP
   - JavaScript
   ========================================================= */

@media (min-width: 992px) {

    body.skin-red-light
    .main-header .navbar .sidebar-toggle {

        position: fixed !important;

        left: 420px !important;
        top: 0 !important;

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

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

        line-height: 73px !important;

        display: block !important;

        float: none !important;

        color: #fff !important;

        background: transparent !important;

        border: 0 !important;

        font-size: 23px !important;

        text-align: center !important;

        z-index: 1200 !important;
    }


    /* Efek hover tetap sederhana */
    body.skin-red-light
    .main-header .navbar .sidebar-toggle:hover {

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

        color: #fff !important;
    }
}

/* =========================================================
   TAHAP 1D — HILANGKAN TEKS DUPLIKAT BRAND
   ---------------------------------------------------------
   HANYA menyembunyikan teks bawaan .logo-lg / .logo-mini.

   TIDAK mengubah:
   - Posisi hamburger
   - Posisi logo BBWS
   - Ukuran header
   - Sidebar
   - Content
   - Tabel
   - DataTables
   - PHP
   - JavaScript
   ========================================================= */

@media (min-width: 992px) {

    /* Sembunyikan teks bawaan AdminLTE */
    body.skin-red-light
    .main-header .logo .logo-lg,

    body.skin-red-light
    .main-header .logo .logo-mini {

        display: none !important;

        visibility: hidden !important;

        opacity: 0 !important;

        width: 0 !important;

        max-width: 0 !important;

        overflow: hidden !important;
    }


    /* Jika logo-lg berada langsung di elemen logo */
    body.skin-red-light
    .main-header > .logo > .logo-lg,

    body.skin-red-light
    .main-header > .logo > .logo-mini {

        display: none !important;

        visibility: hidden !important;

        opacity: 0 !important;

        width: 0 !important;

        max-width: 0 !important;

        overflow: hidden !important;
    }


    /* Pastikan elemen logo bawaan tidak menghasilkan
       ruang teks tambahan */
    body.skin-red-light
    .main-header .logo-lg b {

        display: none !important;
    }
}


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

@media (min-width: 768px) and (max-width: 991px) {

    body.skin-red-light
    .main-header .logo .logo-lg,

    body.skin-red-light
    .main-header .logo .logo-mini {

        display: none !important;

        visibility: hidden !important;

        opacity: 0 !important;
    }
}


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

@media (max-width: 767px) {

    body.skin-red-light
    .main-header .logo .logo-lg,

    body.skin-red-light
    .main-header .logo .logo-mini {

        display: none !important;

        visibility: hidden !important;

        opacity: 0 !important;
    }
}


/* =========================================================
   TAHAP 1E — FINAL BRAND BBWS
   ---------------------------------------------------------
   Berdasarkan HTML asli:

   <div style="width:100%;text-align:center;color:#fff;">
       <H4>
           <img ... width="25px">
           BBWS SUMATERA II MEDAN
       </H4>
   </div>

   HANYA mengatur:
   - logo BBWS
   - teks BBWS
   - jarak logo dan teks

   TIDAK menyentuh:
   - hamburger
   - header
   - sidebar
   - content
   - tabel
   - DataTables
   - PHP
   - JavaScript
   ========================================================= */


/* ---------------------------------------------------------
   CONTAINER BRAND
   --------------------------------------------------------- */

@media (min-width: 992px) {

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] {

        /* Pertahankan posisi dari Tahap sebelumnya */
        display: flex !important;

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

        text-align: left !important;

        white-space: nowrap !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       H4 BRAND
       ----------------------------------------------------- */

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 {

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

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

        height: 73px !important;

        color: #fff !important;

        font-size: 18px !important;

        font-weight: 700 !important;

        line-height: 1 !important;

        letter-spacing: 1px !important;

        white-space: nowrap !important;

        text-align: left !important;
    }


    /* -----------------------------------------------------
       LOGO — SESUAI HTML ASLI 25px
       ----------------------------------------------------- */

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 img {

        display: block !important;

        width: 25px !important;

        height: auto !important;

        min-width: 25px !important;

        max-width: 25px !important;

        flex: 0 0 25px !important;

        object-fit: contain !important;

        margin: 0 10px 0 0 !important;

        padding: 0 !important;

        visibility: visible !important;

        opacity: 1 !important;
    }
}


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

@media (min-width: 768px) and (max-width: 991px) {

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 {

        display: flex !important;

        align-items: center !important;

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

        white-space: nowrap !important;

        color: #fff !important;
    }


    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 img {

        width: 25px !important;

        height: auto !important;

        min-width: 25px !important;

        max-width: 25px !important;

        margin-right: 8px !important;
    }
}


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

@media (max-width: 767px) {

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 {

        display: flex !important;

        align-items: center !important;

        margin: 0 !important;

        white-space: nowrap !important;
    }


    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] h4 img {

        width: 25px !important;

        height: auto !important;

        min-width: 25px !important;

        max-width: 25px !important;

        margin-right: 7px !important;
    }
}


/* =========================================================
   FIX SCROLL — HEADER & SIDEBAR TETAP
   ---------------------------------------------------------
   HANYA memperbaiki perilaku scroll.

   TIDAK mengubah:
   - Brand
   - Hamburger
   - Sidebar width
   - Content width
   - Tabel
   - DataTables
   - PHP
   - JavaScript
   ========================================================= */


/* =========================================================
   1. BODY — SATU SCROLL UTAMA
   ========================================================= */

html,
body {
    height: 100% !important;

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


/* =========================================================
   2. WRAPPER
   ---------------------------------------------------------
   Jangan jadikan .wrapper sebagai scroll container kedua.
   ========================================================= */

body.skin-red-light .wrapper {

    min-height: 100vh !important;

    height: auto !important;

    overflow-x: hidden !important;

    overflow-y: visible !important;
}


/* =========================================================
   3. HEADER — TETAP DI ATAS SAAT SCROLL
   ========================================================= */

body.skin-red-light .main-header {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    height: 73px !important;

    z-index: 1030 !important;
}


/* Navbar tetap mengikuti header */

body.skin-red-light .main-header .navbar {

    height: 73px !important;

    min-height: 73px !important;
}


/* =========================================================
   4. SIDEBAR — TETAP MENGIKUTI HEADER
   ========================================================= */

body.skin-red-light .main-sidebar,
body.skin-red-light .left-side {

    position: fixed !important;

    top: 73px !important;

    bottom: 0 !important;

    height: auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    z-index: 1020 !important;
}


/* =========================================================
   5. CONTENT — BERADA DI BAWAH HEADER
   ========================================================= */

body.skin-red-light .content-wrapper {

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

    padding-top: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   6. CONTENT HEADER
   ========================================================= */

body.skin-red-light .content-header {

    box-sizing: border-box !important;
}


/* =========================================================
   7. FOOTER
   ========================================================= */

body.skin-red-light .main-footer {

    box-sizing: border-box !important;
}


/* =========================================================
   8. BRAND BBWS
   ---------------------------------------------------------
   Tetap menempel pada header.
   Tidak mengubah posisi horizontal.
   ========================================================= */

@media (min-width: 992px) {

    body.skin-red-light
    .main-header .navbar > div[style*="text-align:center"] {

        position: fixed !important;

        top: 0 !important;

        height: 73px !important;

        z-index: 1100 !important;
    }


    /* Hamburger tetap pada posisi Tahap 1C */

    body.skin-red-light
    .main-header .navbar .sidebar-toggle {

        position: fixed !important;

        top: 0 !important;

        height: 73px !important;

        z-index: 1200 !important;
    }
}


/* =========================================================
   9. MOBILE
   ========================================================= */

@media (max-width: 767px) {

    body.skin-red-light .main-header {

        height: 55px !important;
    }


    body.skin-red-light .main-header .navbar {

        height: 55px !important;

        min-height: 55px !important;
    }


    body.skin-red-light .main-sidebar,
    body.skin-red-light .left-side {

        top: 55px !important;
    }


    body.skin-red-light .content-wrapper {

        min-height: calc(100vh - 55px) !important;
    }
}

/* =========================================================
   TAHAP 1F — HEADER DASHBOARD / HERO AREA
   ---------------------------------------------------------
   Menyesuaikan area atas Dashboard dengan gambar referensi.

   TIDAK mengubah:
   - Header 73px
   - Brand BBWS
   - Hamburger
   - Sidebar
   - Content width
   - Tabel
   - DataTables
   - PHP
   - JavaScript
   ========================================================= */

@media (min-width: 992px) {

    /* =====================================================
       AREA HEADER DASHBOARD
       ===================================================== */

    body.skin-red-light .content-header {

        position: relative !important;

        min-height: 130px !important;

        padding:
            18px 24px 16px 24px !important;

        margin: 0 !important;

        background:
            linear-gradient(
                90deg,
                rgba(240,248,255,.98) 0%,
                rgba(239,247,253,.92) 45%,
                rgba(239,247,253,.55) 100%
            ) !important;

        overflow: hidden !important;
    }


    /* =====================================================
       JUDUL DASHBOARD
       ===================================================== */

    body.skin-red-light .content-header h1 {

        position: relative !important;

        z-index: 5 !important;

        margin:
            0 0 2px 0 !important;

        padding: 0 !important;

        color: #123b67 !important;

        font-size: 30px !important;

        font-weight: 800 !important;

        line-height: 1.15 !important;
    }


    /* =====================================================
       GARIS BIRU DI BAWAH DASHBOARD
       ===================================================== */

    body.skin-red-light .content-header h1::after {

        content: "" !important;

        display: block !important;

        width: 52px !important;

        height: 4px !important;

        margin-top: 7px !important;

        border-radius: 4px !important;

        background: #0795d3 !important;
    }


    /* =====================================================
       SUBTITLE
       ===================================================== */

    body.skin-red-light .content-header p {

        position: relative !important;

        z-index: 5 !important;

        margin:
            4px 0 0 0 !important;

        color: #52729a !important;

        font-size: 14px !important;

        line-height: 1.5 !important;
    }


    /* =====================================================
       BREADCRUMB
       ===================================================== */

    body.skin-red-light
    .content-header .breadcrumb {

        position: absolute !important;

        top: 18px !important;

        right: 24px !important;

        z-index: 10 !important;

        margin: 0 !important;

        padding:
            10px 16px !important;

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

        border-radius: 10px !important;

        box-shadow:
            0 5px 18px rgba(35,85,130,.08) !important;

        border: 1px solid #e3edf5 !important;

        font-size: 12px !important;
    }


    /* =====================================================
       DASHBOARD DATA LOGGER CARD
       ===================================================== */

    body.skin-red-light .content-header + .content {

        position: relative !important;

        z-index: 2 !important;
    }


    /* =====================================================
       BOX / INFO DASHBOARD DATA LOGGER
       ===================================================== */

    body.skin-red-light .info-box {

        min-height: 104px !important;

        margin-bottom: 20px !important;

        border-radius: 16px !important;

        border: 1px solid #e4eef6 !important;

        background:
            linear-gradient(
                100deg,
                #ffffff 0%,
                #f5fbff 100%
            ) !important;

        box-shadow:
            0 8px 28px rgba(30,85,130,.10) !important;

        overflow: hidden !important;
    }


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

    body.skin-red-light .info-box-icon {

        width: 72px !important;

        height: 72px !important;

        margin: 16px 0 16px 16px !important;

        border-radius: 14px !important;

        background:
            linear-gradient(
                145deg,
                #078ed2,
                #0875bd
            ) !important;

        color: #fff !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        font-size: 30px !important;
    }


    /* =====================================================
       TEKS DASHBOARD DATA LOGGER
       ===================================================== */

    body.skin-red-light .info-box-content {

        padding:
            18px 20px !important;
    }


    body.skin-red-light .info-box-text {

        color: #123b67 !important;

        font-size: 20px !important;

        font-weight: 800 !important;

        text-transform: none !important;
    }


    body.skin-red-light .info-box-number {

        color: #587594 !important;

        font-size: 14px !important;

        font-weight: 400 !important;
    }
}


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

@media (max-width: 767px) {

    body.skin-red-light .content-header {

        min-height: 105px !important;

        padding: 12px !important;
    }


    body.skin-red-light .content-header h1 {

        font-size: 23px !important;
    }


    body.skin-red-light
    .content-header .breadcrumb {

        position: static !important;

        margin-top: 10px !important;

        display: inline-block !important;
    }


    body.skin-red-light .info-box {

        min-height: 85px !important;

        border-radius: 12px !important;
    }


    body.skin-red-light .info-box-icon {

        width: 58px !important;

        height: 58px !important;

        margin: 13px 0 13px 13px !important;

        font-size: 24px !important;
    }


    body.skin-red-light .info-box-text {

        font-size: 16px !important;
    }


    body.skin-red-light .info-box-number {

        font-size: 12px !important;
    }
}

/* =========================================================
   DASHBOARD PREMIUM - TAHAP TAMBAHAN
   Tidak mengubah sidebar / hamburger / DataTables
   ========================================================= */

.dashboard-page {
    background: #f3f8fc;
    min-height: calc(100vh - 50px);
}


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

.dashboard-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(235, 246, 255, 0.94) 0%,
            rgba(235, 246, 255, 0.78) 35%,
            rgba(235, 246, 255, 0.35) 65%,
            rgba(5, 35, 65, 0.15) 100%
        ),
        url("../img/hidrologi.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


.dashboard-title-area h1 {
    margin: 0;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
}

.dashboard-title-area p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.90);
    font-size: 15px;
}

.dashboard-title-line {
    display: block;
    width: 55px;
    height: 4px;
    margin-top: 8px;
    border-radius: 5px;
    background: #1e9be9;
}

.dashboard-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 16px;
    background: rgba(255,255,255,.92);
    border-radius: 30px;

    color: #31506b;
    font-size: 13px;
}

.dashboard-slogan {
    position: absolute;
    right: 30px;
    bottom: 22px;

    color: #fff;
    text-align: right;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;

    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

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

.dashboard-title-area {
    padding-top: 0;
}

.dashboard-title-area h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
    color: #073f72;
    letter-spacing: -.5px;
}

.dashboard-title-line {
    display: block;
    width: 38px;
    height: 4px;
    margin-top: 8px;
    border-radius: 10px;
    background: #0798d1;
}

.dashboard-title-area p {
    margin: 8px 0 0;
    color: #55779c;
    font-size: 14px;
    font-weight: 500;
}


/* ================= BREADCRUMB ================= */

.dashboard-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 0;
    margin-right: 190px;

    padding: 10px 16px;

    background: rgba(255,255,255,.92);
    border-radius: 10px;

    box-shadow: 0 5px 18px rgba(20,80,120,.08);

    color: #527293;
    font-size: 12px;
}

.dashboard-breadcrumb i:first-child {
    color: #087fc4;
    font-size: 14px;
}

.dashboard-breadcrumb i {
    color: #a0b3c6;
}

.dashboard-breadcrumb strong {
    color: #365b7e;
    font-weight: 600;
}


/* ================= SLOGAN ================= */

.dashboard-slogan {
    position: absolute;
    right: 0;
    top: -8px;

    width: 155px;

    text-align: center;

    color: #073f72;

    font-family: "Segoe Script",
                 "Brush Script MT",
                 cursive;

    font-size: 19px;
    line-height: 1.05;
    font-weight: 600;

    transform: rotate(-3deg);
}

.dashboard-slogan span {
    display: block;
    width: 38px;
    height: 3px;
    margin: 8px auto 0;
    border-radius: 10px;
    background: #0798d1;
}


/* ================= INFO CARD ================= */

.dashboard-info-card {
    position: relative;

    margin: 0 20px 18px;

    min-height: 82px;

    padding: 14px 20px;

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

    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,.97),
            rgba(246,251,255,.96)
        );

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

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(17,73,110,.08);
}


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

.logger-title {
    display: flex;
    align-items: center;
    gap: 18px;
}

.logger-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 13px;

    background: linear-gradient(
        145deg,
        #079bd6,
        #0873bd
    );

    color: #fff;

    font-size: 23px;

    box-shadow:
        0 7px 16px rgba(0,125,190,.20);
}

.logger-text h2 {
    margin: 0;

    color: #083f73;

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

.logger-text p {
    margin: 4px 0 0;

    color: #6684a2;

    font-size: 13px;
}


/* ================= STATUS ================= */

.logger-status {
    display: flex;
    align-items: center;
    gap: 22px;

    color: #365c7d;

    font-size: 12px;
}

.logger-date,
.logger-time {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.logger-date i,
.logger-time i {
    color: #087fc4;
    font-size: 14px;
}

.logger-online {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 9px 14px;

    border-radius: 12px;

    background: #e4faed;
    border: 1px solid #b9efcf;

    color: #16894e;

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

    white-space: nowrap;
}

.logger-online i {
    font-size: 13px;
}


/* ================= MONITORING AREA ================= */

.dashboard-monitoring {
    padding-top: 0 !important;
    margin: 0 20px;
}

.dashboard-monitor-box {
    border: 0 !important;

    border-radius: 18px !important;

    background: #fff !important;

    box-shadow:
        0 8px 28px rgba(16,73,111,.08) !important;

    overflow: hidden;
}


/* ================= MONITOR HEADER ================= */

.dashboard-monitor-header {
    padding: 20px 22px !important;

    background: #fff !important;

    border-bottom: 1px solid #edf3f8 !important;
}

.dashboard-monitor-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dashboard-accent {
    display: block;

    width: 5px;
    height: 30px;

    border-radius: 10px;

    background: #0798d1;
}

.dashboard-monitor-title h3 {
    margin: 0 !important;

    color: #073f72 !important;

    font-size: 20px !important;

    font-weight: 800 !important;
}

.dashboard-monitor-title p {
    margin: 5px 0 0;

    color: #718ba4;

    font-size: 12px;
}


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

@media (max-width: 991px) {

    .dashboard-hero {
        padding: 18px 18px 12px;
    }

    .dashboard-breadcrumb {
        margin-right: 0;
    }

    .dashboard-slogan {
        display: none;
    }

    .dashboard-info-card {
        margin-left: 12px;
        margin-right: 12px;

        flex-direction: column;
        align-items: flex-start;

        gap: 14px;
    }

    .logger-status {
        width: 100%;
        flex-wrap: wrap;
    }

    .dashboard-monitoring {
        margin: 0 12px;
    }
}


@media (max-width: 600px) {

    .dashboard-title-area h1 {
        font-size: 27px;
    }

    .dashboard-title-area p {
        font-size: 12px;
    }

    .dashboard-breadcrumb {
        display: none;
    }

    .logger-title {
        gap: 12px;
    }

    .logger-icon {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }

    .logger-text h2 {
        font-size: 16px;
    }

    .logger-text p {
        font-size: 11px;
    }

    .logger-status {
        gap: 10px;
    }

    .dashboard-monitor-title h3 {
        font-size: 16px !important;
    }

}


/* =========================================================
   DASHBOARD HERO — PENYESUAIAN POSISI SESUAI REFERENSI
   HANYA AREA HERO
   ========================================================= */

@media (min-width: 992px) {

    .dashboard-hero {
        position: relative !important;

        height: 150px !important;
        min-height: 150px !important;

        margin: 0 !important;
        padding: 20px 28px !important;

        overflow: hidden !important;

        background-image:
            linear-gradient(
                90deg,
                rgba(235,246,255,.97) 0%,
                rgba(235,246,255,.82) 30%,
                rgba(235,246,255,.45) 58%,
                rgba(235,246,255,.15) 100%
            ),
            url("../img/hidrologi.png") !important;
			
			 

        background-size: cover !important;

        /* FOTO DITURUNKAN */
        background-position: center 72% !important;

        background-repeat: no-repeat !important;

        border-radius: 0 0 20px 20px !important;
    }

    .dashboard-hero-content {
        position: relative !important;
        z-index: 5 !important;

        height: 100% !important;
        min-height: 0 !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }

    .dashboard-title-area {
        position: relative !important;
        z-index: 10 !important;

        padding-top: 4px !important;
    }

    .dashboard-title-area h1 {
        color: #073f72 !important;
        font-size: 30px !important;
        font-weight: 800 !important;
        margin: 0 !important;
    }

    .dashboard-title-area p {
        color: #52729a !important;
        font-size: 14px !important;
        margin-top: 7px !important;
    }

    .dashboard-breadcrumb {
        position: absolute !important;

        top: 0 !important;
        right: 0 !important;

        z-index: 20 !important;
    }

    .dashboard-slogan {
        position: absolute !important;

        right: 15px !important;
        bottom: 12px !important;

        z-index: 10 !important;

        color: #ffffff !important;
        font-size: 24px !important;
        font-weight: 700 !important;

        text-shadow:
            0 2px 6px rgba(0,0,0,.45) !important;
    }
}

/* =========================================================
   TAHAP 1F — FIX POSISI JUDUL & SUBTITLE
   HANYA MENURUNKAN TEKS DASHBOARD
   ========================================================= */

@media (min-width: 992px) {

    .dashboard-title-area {
        padding-top: 18px !important;
    }

    .dashboard-title-area p {
        margin-top: 8px !important;
    }

}

/* =========================================================
   TAHAP 1G — TURUNKAN HEADER / HERO LAGI
   HANYA AREA DASHBOARD HERO
   ========================================================= */

@media (min-width: 992px) {

    .dashboard-hero {
        height: 185px !important;
        min-height: 175px !important;

        padding-top: 85px !important;

        background-position: center 72% !important;
    }

    .dashboard-title-area {
        padding-top: 22px !important;
    }

    .dashboard-title-area h1 {
        margin-top: 0 !important;
    }

    .dashboard-title-area p {
        margin-top: 8px !important;
    }

    .dashboard-breadcrumb {
        top: 15px !important;
    }

    .dashboard-slogan {
        bottom: 15px !important;
    }
}

/* =========================================================
   SIDEBAR MODERN BBWS — FINAL OVERRIDE
   Tidak mengubah HTML / PHP / JavaScript
   ========================================================= */

@media (min-width: 768px) {

    /* -----------------------------------------------------
       SIDEBAR UTAMA
       ----------------------------------------------------- */
body.skin-red-light .main-sidebar {
    background-image:
        linear-gradient(
            180deg,
            rgba(3, 62, 108, 0.90) 0%,
            rgba(3, 72, 120, 0.76) 40%,
            rgba(2, 55, 95, 0.58) 70%,
            rgba(2, 42, 75, 0.45) 100%
        ),
        url("../img/hidrologi.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

body.skin-red-light .main-sidebar:after {
    display: none !important;
}


    /* -----------------------------------------------------
       AREA USER / PROFILE
       ----------------------------------------------------- */

    body.skin-red-light .main-sidebar .sidebar {
        padding-top: 0 !important;
    }

    body.skin-red-light .main-sidebar .user-panel {
        height: 112px !important;

        margin: 0 !important;
        padding: 25px 22px !important;

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

        border-bottom: 1px solid rgba(255,255,255,.12) !important;

        background:
            linear-gradient(
                135deg,
                rgba(0, 107, 177, .35),
                rgba(0, 45, 82, .18)
            ) !important;
    }


    /* FOTO USER */

    body.skin-red-light .main-sidebar .user-panel .image {
        float: none !important;

        width: 65px !important;
        height: 65px !important;

        margin: 0 14px 0 0 !important;

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

    body.skin-red-light .main-sidebar .user-panel .image img {
        width: 62px !important;
        height: 62px !important;

        object-fit: cover !important;

        border: 2px solid rgba(255,255,255,.75) !important;

        box-shadow:
            0 4px 12px rgba(0,0,0,.30) !important;
    }


    /* INFO USER */

    body.skin-red-light .main-sidebar .user-panel .info {
        position: relative !important;

        left: auto !important;
        padding: 0 !important;

        flex: 1 !important;
    }

    body.skin-red-light .main-sidebar .user-panel .info p {
        width: auto !important;

        margin: 0 0 7px !important;

        color: #fff !important;

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

        letter-spacing: .2px !important;
    }

    body.skin-red-light .main-sidebar .user-panel .info a {
        color: #a9d9f7 !important;

        font-size: 13px !important;
    }

    body.skin-red-light .main-sidebar .user-panel .info a .text-success {
        color: #32df91 !important;

        margin-right: 4px !important;

        text-shadow:
            0 0 7px rgba(50,223,145,.45) !important;
    }


    /* -----------------------------------------------------
       MAIN NAVIGATION
       ----------------------------------------------------- */

    body.skin-red-light .sidebar-menu {
        padding: 17px 12px 30px !important;
    }

    body.skin-red-light .sidebar-menu > li.header {
        margin: 0 8px 14px !important;
        padding: 0 0 10px !important;

        height: auto !important;

        background: transparent !important;

        color: #8ed1f3 !important;

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

        letter-spacing: 1px !important;

        border-bottom: 1px solid rgba(255,255,255,.10) !important;
    }


    /* -----------------------------------------------------
       SEMUA MENU
       ----------------------------------------------------- */

    body.skin-red-light .sidebar-menu > li {
        margin-bottom: 6px !important;
    }

    body.skin-red-light .sidebar-menu > li > a {
        position: relative !important;

        height: 54px !important;

        margin: 0 5px !important;
        padding: 0 18px !important;

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

        border-radius: 10px !important;

        color: #e9f6ff !important;

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

        border-left: 3px solid transparent !important;

        background: transparent !important;

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


    /* ICON */

    body.skin-red-light .sidebar-menu > li > a > .fa {
        width: 27px !important;

        margin-right: 9px !important;

        color: #8bd8ff !important;

        font-size: 17px !important;

        text-align: center !important;
    }


    /* HOVER */

    body.skin-red-light .sidebar-menu > li > a:hover {
        color: #fff !important;

        background:
            rgba(0, 150, 220, .18) !important;

        border-left-color: #25c8ff !important;

        transform: translateX(2px) !important;

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

    body.skin-red-light .sidebar-menu > li > a:hover > .fa {
        color: #fff !important;
    }


    /* -----------------------------------------------------
       MENU AKTIF — BERANDA
       ----------------------------------------------------- */

    body.skin-red-light .sidebar-menu > li.active > a,
    body.skin-red-light .sidebar-menu > li.menu-open > a {
        color: #fff !important;

        background:
            linear-gradient(
                90deg,
                #0789d0 0%,
                #0877b9 100%
            ) !important;

        border-left-color: #55dcff !important;

        box-shadow:
            0 7px 18px rgba(0, 92, 153, .32) !important;
    }

    body.skin-red-light .sidebar-menu > li.active > a > .fa,
    body.skin-red-light .sidebar-menu > li.menu-open > a > .fa {
        color: #fff !important;
    }


    /* -----------------------------------------------------
       GRAFIK / TREEVIEW
       ----------------------------------------------------- */

    body.skin-red-light .sidebar-menu .treeview > a
    .pull-right-container {
        margin-left: auto !important;
    }

    body.skin-red-light .sidebar-menu .treeview > a
    .pull-right-container .fa {
        color: #9ddcff !important;
        font-size: 14px !important;
    }

    body.skin-red-light .sidebar-menu .treeview.menu-open > a
    .pull-right-container .fa-angle-left {
        transform: rotate(-90deg) !important;
    }


    /* -----------------------------------------------------
       SUBMENU
       ----------------------------------------------------- */

    body.skin-red-light .sidebar-menu .treeview-menu {
        margin: 5px 10px 7px 16px !important;

        padding: 5px 0 !important;

        background: rgba(0, 33, 61, .32) !important;

        border-radius: 8px !important;
    }

    body.skin-red-light .sidebar-menu .treeview-menu > li > a {
        padding: 9px 12px !important;

        color: #b9ddf2 !important;

        font-size: 13px !important;
    }

    body.skin-red-light .sidebar-menu .treeview-menu > li > a:hover {
        color: #fff !important;

        background: rgba(0, 155, 220, .20) !important;

        border-radius: 6px !important;
    }

    body.skin-red-light .sidebar-menu .treeview-menu > li > a .fa {
        color: #76c9ed !important;

        margin-right: 7px !important;
    }


    /* -----------------------------------------------------
       PEMISAH HALUS DI BAWAH MENU
       ----------------------------------------------------- */

    body.skin-red-light .sidebar-menu > li:last-child {
        margin-top: 5px !important;
    }

}

/* =========================================================
   SIDEBAR BBWS SUMATERA II — MODERN / PREMIUM
   Hanya mempercantik SIDEBAR
   Tidak mengubah HTML / PHP / JS
   ========================================================= */

@media (min-width: 768px) {

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

    body.skin-red-light .main-sidebar {
        background:
            linear-gradient(
                180deg,
                rgba(4, 61, 106, .98) 0%,
                rgba(3, 72, 120, .97) 42%,
                rgba(2, 45, 82, .98) 100%
            ),
            url("../img/hidrologi.png") center bottom / cover no-repeat !important;

        box-shadow: 4px 0 20px rgba(0, 35, 65, .16) !important;
    }


    /* =========================
       AREA USER
       ========================= */

    body.skin-red-light .main-sidebar .user-panel {
        height: 112px !important;

        margin: 0 !important;
        padding: 20px 22px !important;

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

        background:
            linear-gradient(
                135deg,
                rgba(0, 122, 190, .22),
                rgba(0, 42, 78, .08)
            ) !important;

        border-bottom: 1px solid rgba(255,255,255,.12) !important;
    }


    /* FOTO USER */

    body.skin-red-light .main-sidebar .user-panel .image {
        width: 62px !important;
        height: 62px !important;

        margin-right: 14px !important;

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

    body.skin-red-light .main-sidebar .user-panel .image img {
        width: 62px !important;
        height: 62px !important;

        object-fit: cover !important;

        border: 2px solid rgba(255,255,255,.8) !important;

        box-shadow:
            0 4px 14px rgba(0,0,0,.28) !important;
    }


    /* INFO USER */

    body.skin-red-light .main-sidebar .user-panel .info {
        position: relative !important;
        left: auto !important;

        padding: 0 !important;
    }

    body.skin-red-light .main-sidebar .user-panel .info p {
        margin: 0 0 6px !important;

        color: #fff !important;

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

    body.skin-red-light .main-sidebar .user-panel .info a {
        color: #a9d8f2 !important;

        font-size: 13px !important;
    }

    body.skin-red-light
    .main-sidebar
    .user-panel
    .info
    a
    .text-success {
        color: #35e39a !important;

        text-shadow:
            0 0 8px rgba(53,227,154,.5) !important;
    }


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

    body.skin-red-light .sidebar-menu {
        padding: 18px 14px 30px !important;
    }


    /* JUDUL MAIN NAVIGATION */

    body.skin-red-light .sidebar-menu > li.header {
        height: auto !important;

        margin: 0 9px 16px !important;
        padding: 0 0 12px !important;

        background: transparent !important;

        color: #8fd1ef !important;

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

        letter-spacing: 1px !important;

        border-bottom:
            1px solid rgba(255,255,255,.12) !important;
    }


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

    body.skin-red-light .sidebar-menu > li {
        margin-bottom: 6px !important;
    }

    body.skin-red-light .sidebar-menu > li > a {
        height: 56px !important;

        margin: 0 2px !important;
        padding: 0 18px !important;

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

        color: #e8f6ff !important;

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

        border-radius: 10px !important;

        border-left:
            3px solid transparent !important;

        background: transparent !important;

        transition:
            all .22s ease !important;
    }


    /* IKON */

    body.skin-red-light
    .sidebar-menu > li > a > .fa {
        width: 28px !important;

        margin-right: 10px !important;

        color: #8ed8fa !important;

        font-size: 17px !important;

        text-align: center !important;

        transition: all .22s ease !important;
    }


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

    body.skin-red-light
    .sidebar-menu > li > a:hover {

        color: #fff !important;

        background:
            rgba(0, 159, 224, .18) !important;

        border-left-color:
            #35d0ff !important;

        transform:
            translateX(2px) !important;

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

    body.skin-red-light
    .sidebar-menu > li > a:hover > .fa {
        color: #fff !important;
    }


    /* =========================
       BERANDA AKTIF
       ========================= */

    body.skin-red-light
    .sidebar-menu > li.active > a {

        color: #fff !important;

        background:
            linear-gradient(
                90deg,
                #078fd4 0%,
                #0879ba 100%
            ) !important;

        border-left-color:
            #5cddff !important;

        box-shadow:
            0 7px 18px rgba(0,92,153,.32) !important;
    }

    body.skin-red-light
    .sidebar-menu > li.active > a > .fa {
        color: #fff !important;
    }


    /* =========================
       GRAFIK / TREEVIEW
       ========================= */

    body.skin-red-light
    .sidebar-menu > li.menu-open > a {

        color: #fff !important;

        background:
            rgba(0,140,205,.18) !important;

        border-left-color:
            #35d0ff !important;
    }

    body.skin-red-light
    .sidebar-menu
    .treeview
    .pull-right-container {
        margin-left: auto !important;
    }

    body.skin-red-light
    .sidebar-menu
    .treeview
    .pull-right-container
    .fa {
        color: #9bdcf7 !important;
    }


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

    body.skin-red-light
    .sidebar-menu
    .treeview-menu {

        margin: 4px 10px 8px 18px !important;

        padding: 5px !important;

        background:
            rgba(0,28,53,.28) !important;

        border-radius: 8px !important;
    }

    body.skin-red-light
    .sidebar-menu
    .treeview-menu > li > a {

        padding: 9px 12px !important;

        color: #b9ddf0 !important;

        font-size: 13px !important;

        border-radius: 6px !important;
    }

    body.skin-red-light
    .sidebar-menu
    .treeview-menu > li > a:hover {

        color: #fff !important;

        background:
            rgba(0,155,220,.20) !important;
    }


    /* =========================
       BACKGROUND BENDUNGAN
       LEBIH HALUS
       ========================= */

body.skin-red-light .main-sidebar:after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 65%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(2,48,86,0) 0%,
            rgba(2,43,78,.10) 50%,
            rgba(1,35,64,.30) 100%
        );

    z-index: 0;
}

/* =========================================================
   FOTO BENDUNGAN SIDEBAR — LEBIH JELAS
   ========================================================= */

@media (min-width: 768px) {

    body.skin-red-light .main-sidebar {

        background-image:
            linear-gradient(
                180deg,
                rgba(3, 62, 108, 0.88) 0%,
                rgba(3, 72, 120, 0.72) 38%,
                rgba(2, 55, 95, 0.38) 65%,
                rgba(2, 42, 75, 0.18) 100%
            ),
            url("../img/hidrologi.png") !important;

        background-size: cover !important;

        /* foto sedikit digeser agar bendungan terlihat */
        background-position: center bottom !important;

        background-repeat: no-repeat !important;
    }


    /* MATIKAN LAPISAN GELAP TAMBAHAN */
    body.skin-red-light .main-sidebar:after {
        display: none !important;
        content: none !important;
    }

}

    body.skin-red-light .main-sidebar .sidebar {
        position: relative;

        z-index: 2;
    }

}