:root {
    /* Base colors */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Primary brand colors, taken from the logo */
    --color-primary-dark: #1578d1;
    --color-primary: #1687f8;
    --color-primary-light: #81d7ff;
    --color-navy: #091832;
}

.app-sidebar .app-sidebar-logo {
    border-bottom: 1px dashed var(--color-white) !important;
}

#kt_app_sidebar,
.auth-aside {
    background-color: var(--color-primary-dark);
}

/* Sidebar links: white on the brand blue, with a darker blue behind the hovered link */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: var(--color-white);
    font-weight: 500;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: var(--color-white);
}

/* The Clear cache item is a button, so its default background is removed */
.app-sidebar form.menu-item > .menu-link {
    background-color: transparent;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link:hover:not(.active) {
    background-color: rgba(9, 24, 50, .28);
}

/* The page that is open: the navy of the logo, with bold white text */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: var(--color-navy);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title {
    color: var(--color-white);
    font-weight: 600;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: var(--color-white);
}