[data-bs-theme=light] {
    --bs-app-header-base-bg-color: #fbf100;
    --bs-app-header-sticky-bg-color: #fbf100;
    --bs-text-primary: #814d19;
    --bs-primary: #814d19;
    /*--bs-app-toolbar-base-bg-color: #002e5b;*/
}

.app-toolbar {
    background: url(../../assets/media/illustrations/bg4.jpg) rgba(0, 46, 91, 0.3); /*#002e5b;*/
    background-size: cover;
    background-position: left bottom;
    background-blend-mode: multiply;
}
.app-toolbar .page-desc {
    color: #fbf100;
}
.app-toolbar .btn-custom {
    background-color: rgb(255 255 255 / 20%);
}

.app-header {
    backdrop-filter: blur(10px);
    background-color: rgb(255 255 255 / 70%);
    border-bottom: none;
}

.app-header.z-index-2 {
    z-index: 20 !important; /* make above pivot table */
}

@media (max-width: 991.98px) {
    [data-kt-app-header-sticky=on] .app-header {
        background-color: none !important;
    }
}

@media (min-width: 992px) {

    .app-header-menu .menu>.menu-item>.menu-link {
        font-size: 1.1rem !important;
    }    

    [data-kt-app-header-sticky=on] {
        --bs-app-header-height: 80px;
        --bs-app-header-height-actual: 90px;
    }
    .app-header-menu .menu>.menu-item>.menu-link .menu-title {
        color: #002e5b;
        white-space: nowrap;
    }
    .app-header-menu .menu>.menu-item.show>.menu-link .menu-title {
        color: #958f14;
    }    
    .app-header-menu .menu>.menu-item.show>.menu-link {
        color: #958f14;
    }
    .app-header {
        backdrop-filter: blur(10px);
        background-color: rgb(255 255 255 / 70%);
        _background-color: rgba(0 0 0 / 50%);
        border-bottom: none;
    }
    [data-kt-app-header-sticky=on] .app-header {
        backdrop-filter: blur(10px);
        background-color: rgb(255 255 255 / 70%);
        border-bottom: none;
    }

    .app-header-menu .menu>.menu-item>.menu-link.active .menu-title {
        color: #ffffff;
        /* border: 1px solid #ffffff; */
        padding: 10px 20px;
        background-color: #196bcd;
        border-radius: 10px;
    }
    .app-header-menu .menu>.menu-item.here>.menu-link:after, .app-header-menu .menu>.menu-item>.menu-link.active:after {
        background: none !important;
    }
}


.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-title, 
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title
{
    color: #958f14;
}

.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon, 
.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, 
.menu-state-primary .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here) .menu-icon i, 
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon, 
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon, 
.menu-state-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i {
    color: #958f14;
}

.bg-card-graph {
    background-color: #f9f9f9;
    border: 1px solid #dbdfe9;
}




/* PORTAL STYLE */
.card.Hidrologi.Terpadu,
.card.Modul.Perizinan,
.card.Modul.Kolaborasi.Data,
.card.Portal.Pemantauan {
    background-size: contain !important;
}
.card.Hidrologi.Terpadu {
    background: #ffffff url("../../public/media/svg/shapes/abstract-2.svg") no-repeat right top;
}
.card.Modul.Perizinan {
    background: #ffffff url("../../public/media/svg/shapes/abstract-2.svg") no-repeat right top;
}
.card.Modul.Kolaborasi.Data {
    background: #ffffff url("../../public/media/svg/shapes/abstract-2.svg") no-repeat right top;
}
.card.Portal.Pemantauan {
    background: #ffffff url("../../public/media/svg/shapes/abstract-2.svg") no-repeat right top;
}
.card.Modul.Denda {
    background: #ffffff url("../../public/media/svg/shapes/abstract-2.svg") no-repeat right top;
}





/* BG Public */
.default.bg {
    background: transparent url("../../public/media/illustrations/bg2.jpg") no-repeat center top;
    background-size: 100% !important;
}

.bg.Hidrologi.Terpadu,
.bg.FAQ,
.bg.Organisasi {
    background: transparent url("../../public/media/illustrations/bg2.jpg") no-repeat center top;
    background-size: 100% !important;
}

.bg.Berita,
.bg.Publikasi {
    background: transparent url("../../public/media/illustrations/bg2.jpg") no-repeat center top;
    background-size: 100% !important;
}

.bg.Pelaporan.Layanan {
    background: transparent url("../../public/media/illustrations/bg2.jpg") no-repeat center top;
    background-size: 100% !important;
}

.bg.Katalog.Data,
.bg.Peta.Tematik {
    background: transparent url("../../public/media/illustrations/bg2.jpg") no-repeat center top;
    background-size: 100% !important;
}

.bg.Analisis,
.bg.Query {
    background: transparent url("../../public/media/illustrations/bg2.jpg") no-repeat center top;
    background-size: 100% !important;
}

.bg.Pengumuman {
    background: transparent url("../../public/media/illustrations/bg2.jpg") no-repeat center top;
    background-size: 100% !important;
}


/* .bg-breadcrumb {
    backdrop-filter: blur(10px);
    background-color: rgb(255 255 255 / 20%);
} */





/* 360 pivot */
@media (min-width: 992px) {
    div, main, ol, pre, span, ul {
        scrollbar-width: thin;
        scrollbar-color: #3c8c97 transparent !important;
    }
}

td.pvtUiCell {
    _border: none !important;
}

.hover-scroll, .hover-scroll-overlay, .scroll {
    overflow: auto !important;
    position: relative;
    border: 1px solid #cde5f5;
}

.form-select-sm {
    padding-top: .2rem !important;
    padding-bottom: .2rem !important;
    padding-left: .2rem !important;
    font-size: .95rem !important;
    border-radius: .55rem !important;
}
.pvtAttrDropdown {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    padding-left: 0.2rem !important;
    font-size: .925rem !important;
    border-radius: .55rem !important;
}

.pvtAttr.fs-6 {
font-size: 1rem !important;
}

i.ki-duotone.ki-right-square {
    font-size: 150% !important;
}

/* infografis */
.tmb-infografis img{
    border: 10px solid #ffffff;
}



.test1 {
    border: 1px solid red; 
}

.test2 {
    border: 5px solid yellow; 
}

.test3 {
    border: 5px solid pink; 
}