:root {
    --hue-color: 200;

    --body-color: #fff;
    --color-biru-muda: #e8f0fe;
    --color-navmobile: #1f3548;
    --section-color: #f5f9fc;
    --box-active-color: #f5f9fc;
    --color-penulis: hsl(228, 15%, 50%);
    --color-penulis-hover: hsl(228, 30%, 40%);
    --nav-color: #fff;
    --border-color: #eee;
    --border-color-sidebar: #e7e7ec;
    --color-title-text: hsl(228, 57%, 28%);
    --border-color-center: hsl(228, 57%, 28%);
    --top-bar-color: #eee;
    --navbar-active-color: #428bca;
    --navbar-active-color-bottom: #006597;
    --navbar-dark-search-color: #428bca;
    --navbar-dark-search-color-hover: #8ab3d6;
    --side-nav: #010718;
    --text-color: #333;
    --text-color-galeri-bsr: #eee;
    --text-color-galeri-bsr-desc: #ccc;
    --text-color-description: hsl(228, 15%, 50%);
    --text-color-description-2: #333;
    --text-color-sider: #ffffff;
    --search-bar: #fff;
    --search-text: #010718;
    --color-acordion: hsl(228, 57%, 28%);
    --color-acordion-2: #ecf0f3;
    --title-color: hsl(228, 57%, 28%);
    --hovera-box: hsl(228, 57%, 28%);
    --suscribe-color: hsl(228, 57%, 28%);
    --suscribe-color-btn: #fff;
    --color-box: hsl(228, 57%, 28%);
    --color-box-galeri: #f5f9fc;
    --color-box-galeribsr: rgba(6, 8, 34, 0.9);
    --color-cshadow-galeri: rgba(214, 215, 216, 0.6);
    --color-btn: hsl(228, 57%, 28%);
    --color-btn-hover: hsl(228, 57%, 20%);
    --color-hover-pengu: #f5f9fc;
    --button-hover: hsl(228, 57%, 28%);
    --button-hover-galeri: rgba(255, 255, 255, 0.2);
    --color-box-layanan: rgb(250, 250, 250);
    --color-border-btn: hsl(228, 57%, 28%);
    --color-swiper-layanan: #e1edf7;
    --color-swiperhover-layanan: #d2dde6;
    --color-bx-shadow-layanan: rgba(214, 215, 216, 0.6);
    --color-sidebar: #f9fafd;
    --color-dokumen-type: #ecf0f3;
    --color-dokumen-type-hover: #e5e9ec;
    --color-bx-shadow-program: rgba(68, 88, 144, 0.12);
    --color-h2-before: #cfb600;
    --color-hoverkuning-program: #cfb600;
    --color-hoverbiru-program: hsl(228, 57%, 38%);
    --title-color-second: hsl(228, 57%, 38%);
    --second-color: hsl(25, 83%, 53%);
    --color-fokus: hsl(228, 57%, 38%);
    --color-chevron: brightness(0) invert(0);
    --footer-atas: #0c182b;
    --footer-bawah: #0a1424;
    --scroll-bar-color: hsl(var(--hue-color), 12%, 90%);
    --scroll-thumb-color: hsl(var(--hue-color), 12%, 75%);

    --loader-background-color: #EEEEEE;
    --loader-highlight-color: #DEDEDE;
}

.loader-skeleton {
    width: 100%;
    margin: 0 10px;
    background: linear-gradient(90deg, var(--loader-background-color) 25%, var(--loader-highlight-color) 50%, var(--loader-background-color) 75%);
    background-size: 200% 100%;
    animation: loading 2s infinite ease-in-out;
    border-radius: 8px;
    margin-bottom: 20px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

li:has(.text-primary-hover) {
    color: var(--color-title-text);
}

li:has(.text-primary-hover):hover {
    color: var(--top-bar-color);
}