:root {
    --primary: #3b82f6;
    --bg-body: #e0e5f1;
    --bg-card: #ffffff;
    --text-main: #1f2937;
    --sidebar-bg: #021645;
    --sidebar-text: #cbd5e1;
    --sidebar-hover-bg: #5d6029;
    --sidebar-hover-text: #ffffff;
    --sidebar-width-expanded: 200px;
    --sidebar-width-collapsed: 63px;
    --header-height: 40px;
    --header-bg: #d30909;
    --header-text: #ffffff;
    --logo-height: 58px;
    --logo-bg: #fff700;
    --icon-size: 23px;
    --nav-text-size: 15px;
    --nav-item-padding-left: 9px;
}

.sidebar-transition {
    transition: width 0.3s ease-in-out;
}

.hide-text .nav-text {
    display: none;
}

.logo-collapsed {
    display: none;
}

.hide-text .logo-expanded {
    display: none;
}

.hide-text .logo-collapsed {
    display: block;
}

.hide-text {
    width: var(--sidebar-width-collapsed) !important;
}

@media (max-width: 768px) {
    .sidebar-mobile-hidden {
        transform: translateX(-100%);
    }

    .sidebar-mobile-visible {
        transform: translateX(0);
    }
}

.theme-scroll::-webkit-scrollbar {
    width: 6px;
}

.theme-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.theme-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--sidebar-text) 30%, transparent);
    border-radius: 3px;
}

    .sidebar-scroll::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--sidebar-text) 50%, transparent);
    }

.hero-callout {
    background-color: #fff;
    padding: 1.5em;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, .3);
    border-radius: 7px;
}