:root {
        /* background: #2192bf;
            background: linear-gradient(90deg, rgba(33, 146, 191, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%); */
        --primary-color: linear-gradient(90deg, hsl(187, 48%, 44%) 0%, hsl(187, 52%, 66%) 50%);
        --secondary-color: #DCBC3D;
        --text-color-light: #fff;
    }

    .sidebar {
        background: var(--primary-color) !important;
        color: var(--text-color-light) !important;
    }

    .sidebar span {
        color: var(--text-color-light) !important;
    }

    .navbar-header {
        background: var(--primary-color) !important;
        color: var(--text-color-light) !important;
    }

    /* .topbar-user {
        background: var(--primary-color) !important;
    } */

    .btn-primary,
    .dt-button,
    .btn-secondary,
    .bg-primary,
    .active>.page-link,
    .form-check-input:checked {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
    }

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

    .btn-warning,
    .btn-danger {
        background: var(--secondary-color) !important;
        border-color: var(--secondary-color) !important;
    }

    .ff-secondary {
        color: var(--text-color-light) !important;
    }


    .navbar-menu .navbar-nav .nav-link {
        color: var(--text-color-light) !important;
    }



    .navbar-menu .navbar-nav .nav-link.active {
        background: rgba(255, 255, 255, 0.18) !important;
        color: #ffffff !important;
        font-weight: 600;
        border-radius: 8px;
        padding-left: 18px;
        transition: all .3s ease-in-out;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
    }

    /* Active Icon Color */
    .navbar-menu .navbar-nav .nav-link.active i {
        color: #fff !important;
    }

    /* Hover Effect */
    .navbar-menu .navbar-nav .nav-link:hover {
        background: rgba(255, 255, 255, 0.12) !important;
        border-radius: 8px;
        padding-left: 18px;
    }

    a {
        color: var(--primary-color) !important
    }

    :is([data-layout=vertical], [data-layout=semibox])[data-sidebar-size=sm] .navbar-brand-box {
        background: var(--primary-color) !important;
    }

    .hamburger-icon span {
        color: var(--text-color-light) !important;
    }