:root {
    --bg-sidebar-nav: #35415f;
    --color-sidebar-anchor: var(--bs-gray-100);
    --color-sidebar-icon: #ffe69c;
    --bg-sidebar-green: #36776b;
    --bg-nav-pointer: #ff63b1;
    --bg-sidebar-anchor-active: #394f4b;
}

/* .header {
    background: #877676;
} */

.sidebar-nav-wrapper {
    background-color: var(--bg-sidebar-nav);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a.collapsed,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children > a,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item a {
    color: var(--color-sidebar-anchor);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a {
    color: var(--color-sidebar-anchor);
    background-color: var(--bg-sidebar-anchor-active);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a {
    color: var(--bs-gray-400);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon {
    color: var(--color-sidebar-icon);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover {
    --bg-anchor-hover: rgb(221 215 101 / 66%);
    --color-anchor-hover: #2f364d;
    --border-anchor-hover: #c7c6c6;
    color: var(--color-anchor-hover);
    background: var(--bg-anchor-hover);
    border-color: var(--border-anchor-hover);
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li.active a {
    --bg-anchor-active: #27305b;
    --color-anchor-active: rgb(229 255 197 / 64%);
    color: var(--bg-anchor-active);
    background: var(--color-anchor-active);
}


.sidebar-nav-wrapper .sidebar-nav ul .nav-item a::before {
    background-color: var(--bg-nav-pointer);
}

/* .sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon {
    color: #f3f3f3;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item {
    border: none;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a, .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a.collapsed, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a.collapsed {
    color: #c1cff1;
}

.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li.active a, .sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul li a:hover {
    color: #e1ff98;
}

.header .header-right button,
.header .header-right .profile-box .profile-info .info .image {
    background-color: var(--bs-gray-100);
} */