/* =====================================================
   VARIABEL WARNA
===================================================== */

:root {

    /* Warna utama */
    --main-bg-color: #1c1c1c;

    /* Warna teks utama */
    --main-text-color: #1c1c1c;

    /* Teks sidebar */
    --second-text-color: #ffffff;

    /* Background sekunder */
    --second-bg-color: #f2f2f2;

    /* Background foto sidebar */
    --sidebar-bg-image: url('/assets/img/sidebar-bg.png');

    /* Lapisan hitam doff */
    --sidebar-overlay: rgba(28, 28, 28, 0.82);
}


/* =====================================================
   WARNA TEKS
===================================================== */

.primary-text {
    color: var(--main-text-color);
}

.second-text {
    color: #ffffff !important;
}


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

.primary-bg {
    background-color: var(--main-bg-color);
}

.secondary-bg {
    background-color: var(--second-bg-color);
}


/* =====================================================
   ROUNDED
===================================================== */

.rounded-full {
    border-radius: 100%;
}


/* =====================================================
   HTML & BODY
===================================================== */

html,
body {

    margin: 0;

    padding: 0;

    background-color: #ffffff !important;

}


/* =====================================================
   WRAPPER UTAMA
===================================================== */

#wrapper {

    overflow-x: hidden;

    min-height: 100vh;

    background-color: #ffffff !important;

    background-image: none !important;

}


/* =====================================================
   SIDEBAR
   FOTO + HITAM DOFF
===================================================== */

#sidebar-wrapper {

    min-height: 100vh;

    width: 220px;
    
    margin-left: -220px;

    background-color: #1c1c1c !important;

    background-image:
        linear-gradient(
            var(--sidebar-overlay),
            var(--sidebar-overlay)
        ),
        var(--sidebar-bg-image) !important;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    transition: margin 0.25s ease-out;

}


/* =====================================================
   SIDEBAR SAAT CLASS BG-WHITE
   TETAP FOTO + HITAM DOFF
===================================================== */

#sidebar-wrapper.bg-white {

    background-color: #1c1c1c !important;

    background-image:
        linear-gradient(
            var(--sidebar-overlay),
            var(--sidebar-overlay)
        ),
        var(--sidebar-bg-image) !important;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

}


/* =====================================================
   BAGIAN DALAM SIDEBAR
===================================================== */

#sidebar-wrapper .bg-white {

    background-color: transparent !important;

}


#sidebar-wrapper .sidebar-heading {

    background-color: transparent !important;

}


#sidebar-wrapper .list-group {

    background-color: transparent !important;

}


#sidebar-wrapper .list-group-flush {

    background-color: transparent !important;

}


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

#sidebar-wrapper .sidebar-heading {

    padding: 0.875rem 1.25rem;

    font-size: 1.2rem;

    color: #ffffff !important;

    background-color: transparent !important;

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

}


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

#sidebar-wrapper .sidebar-heading img {

    display: inline-block;

    max-width: 70px;

}


/* =====================================================
   NAMA BWS
===================================================== */

#sidebar-wrapper
.sidebar-heading
{

    margin-top: 6px;

    color: #ffffff !important;

    font-size: 12px !important;

    line-height: 1.2;

}


/* =====================================================
   TEKS BWS
===================================================== */

#sidebar-wrapper
.sidebar-heading
small {

    color: #ffffff !important;

}


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

#sidebar-wrapper .list-group {

     width: 220px;

    background-color: transparent !important;

}


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

#sidebar-wrapper .list-group-item {

    border: none !important;

    padding: 20px 30px;

    background-color: transparent !important;

    color: #ffffff !important;

}


/* =====================================================
   ITEM MENU BG-TRANSPARENT
===================================================== */

#sidebar-wrapper
.list-group-item.bg-transparent {

    background-color: transparent !important;

    color: #ffffff !important;

}


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

#sidebar-wrapper
.list-group-item
i {

    color: #ffffff !important;

}


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

#sidebar-wrapper
.list-group-item
a {

    color: #ffffff !important;

}


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

#sidebar-wrapper
.list-group-item:hover {

    background-color:
        rgba(255, 255, 255, 0.15) !important;

    color: #ffffff !important;

}


/* =====================================================
   HOVER BG-TRANSPARENT
===================================================== */

#sidebar-wrapper
.list-group-item.bg-transparent:hover {

    background-color:
        rgba(255, 255, 255, 0.15) !important;

    color: #ffffff !important;

}


/* =====================================================
   ICON SAAT HOVER
===================================================== */

#sidebar-wrapper
.list-group-item:hover
i {

    color: #ffffff !important;

}


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

#sidebar-wrapper
.list-group-item.active {

    background-color:
        rgba(255, 255, 255, 0.20) !important;

    color: #ffffff !important;

    font-weight: bold;

    border: none !important;

}


/* =====================================================
   ICON MENU AKTIF
===================================================== */

#sidebar-wrapper
.list-group-item.active
i {

    color: #ffffff !important;

}


/* =====================================================
   PEMBATAS ADMIN / AKUN
===================================================== */

#sidebar-wrapper
.px-3.py-2 {

    background-color:
        rgba(255, 255, 255, 0.10) !important;

}


/* =====================================================
   TEKS PEMBATAS
===================================================== */

#sidebar-wrapper
.text-muted {

    color: #ffffff !important;

}


/* =====================================================
   AREA KONTEN UTAMA
===================================================== */

#page-content-wrapper {

    min-width: 100vw;

    width: 100%;

    background-color: #ffffff !important;

    background-image: none !important;

}


/* =====================================================
   CONTAINER HALAMAN
===================================================== */

#page-content-wrapper
.container-fluid {

    background-color: #ffffff !important;

    background-image: none !important;

}


/* =====================================================
   NAVBAR
===================================================== */

#page-content-wrapper
.navbar {

    background-color: #ffffff !important;

    background-image: none !important;

}


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

#menu-toggle {

    cursor: pointer;

}


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

@media (min-width: 768px) {

    #sidebar-wrapper {

        margin-left: 0;

         width: 220px;

        background-color: #1c1c1c !important;

        background-image:
            linear-gradient(
                var(--sidebar-overlay),
                var(--sidebar-overlay)
            ),
            var(--sidebar-bg-image) !important;

        background-size: cover !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

    }


    #page-content-wrapper {

        min-width: 0;

        width: 100%;

        background-color: #ffffff !important;

    }


    #wrapper.toggled
    #sidebar-wrapper {

        margin-left: -220px;

    }


    #sidebar-wrapper
    .sidebar-heading
    .fw-bold {

        margin-top: 6px;

        color: #ffffff !important;

        font-size: 16px !important;

        line-height: 1.2;

    }

}


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

.card {

    background-color: #ffffff;

}


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

.table-responsive {

    overflow-x: auto;

}


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

@media (max-width: 767.98px) {

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

    #sidebar-wrapper {

         width: 220px;

        min-height: 100vh;

        margin-left: -15rem;

        background-color: #1c1c1c !important;

        background-image:
            linear-gradient(
                var(--sidebar-overlay),
                var(--sidebar-overlay)
            ),
            var(--sidebar-bg-image) !important;

        background-size: cover !important;

        background-position: center center !important;

        background-repeat: no-repeat !important;

        transition: margin-left 0.25s ease-out;

    }


    /* -----------------------------------------------
       SIDEBAR DIBUKA
    ------------------------------------------------ */

    #wrapper.toggled
    #sidebar-wrapper {

        margin-left: 0 !important;

    }


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

    #page-content-wrapper {

        min-width: 100vw;

        width: 100%;

        background-color: #ffffff !important;

    }


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

    #sidebar-wrapper .list-group {

         width: 220px;

    }


    #sidebar-wrapper .list-group-item {

        background-color: transparent !important;

        color: #ffffff !important;

    }

}


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

.sidebar-menu-link {

    display: flex;

    align-items: center;

    width: 100%;

    padding: 18px 38px;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 21px;

    font-weight: 400;

    transition: all 0.2s ease;

}


/* =====================================================
   IKON
===================================================== */

.sidebar-menu-link i {

    width: 24px;

    min-width: 24px;

    text-align: center;

    font-size: 16px;

}


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

.sidebar-menu-link:hover {

    background-color:
        rgba(255, 255, 255, 0.15);

    color: #ffffff !important;

    text-decoration: none !important;

}


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

.sidebar-menu-link.active {

    background-color:
        rgba(255, 255, 255, 0.20);

    color: #ffffff !important;

    font-weight: 700;

}


/* =====================================================
   LOGOUT
===================================================== */

.sidebar-menu-link.logout {

    color: #ffffff !important;

}


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

.sidebar-menu-link.logout:hover {

    background-color:
        rgba(255, 255, 255, 0.15);

    color: #ffffff !important;

}

/* =====================================================
   UKURAN FONT SIDEBAR
===================================================== */

/* Nama aplikasi LIMAU */
#sidebar-wrapper .sidebar-heading .fw-bold {
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Nama BWS */
#sidebar-wrapper .sidebar-heading small {
    color: #ffffff !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
}

/* Semua teks menu sidebar */
#sidebar-wrapper .list-group-item,
#sidebar-wrapper .nav-link,
#sidebar-wrapper a {
    font-size: 13px !important;
}

/* Judul bagian ADMINISTRASI */
#sidebar-wrapper .fw-bold {
    font-size: 12px !important;
}

/* Ikon menu */
#sidebar-wrapper .fas,
#sidebar-wrapper .far,
#sidebar-wrapper .fab,
#sidebar-wrapper i {
    font-size: 15px !important;
}

/* Logout */
#sidebar-wrapper .nav-item a {
    font-size: 13px !important;
}

/* Badge / label hak akses */
#sidebar-wrapper .badge {
    font-size: 10px !important;
}


/* =====================================================
   KHUSUS TAMPILAN HP
===================================================== */

@media (max-width: 767.98px) {

    #sidebar-wrapper .sidebar-heading .fw-bold {
        font-size: 14px !important;
    }

    #sidebar-wrapper .sidebar-heading small {
        font-size: 8px !important;
    }

    #sidebar-wrapper .list-group-item,
    #sidebar-wrapper .nav-link,
    #sidebar-wrapper a {
        font-size: 13px !important;
    }

    #sidebar-wrapper .fas,
    #sidebar-wrapper .far,
    #sidebar-wrapper .fab,
    #sidebar-wrapper i {
        font-size: 15px !important;
    }
}