#app-navbar {
    display: flex;
    flex-direction: column;
    padding: var(--sidebar-padding);

}

#nav-container {
    flex-grow: 1;
    overflow-y: auto;
}


#app-navbar,
#app-header {
    background-color: var(--sidebar-background-color);
    background: var(--sidebar-background-color);
    color: var(--on-sidebar-background);
}

#burger-button {
    --burger-color: var(--on-sidebar-background);
}

/*  To change the base color of Mantine nav item */
.nav-link {
    color: var(--on-sidebar-background) !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* border-radius: 0.375rem; */
    border-radius: 0.5rem;
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
    margin-top: 4px;
}

.nav-link:where([data-active="true"]) {
    background-color: var(--sidebar-active) !important;
    color: var(--on-sidebar-active) !important;
}

.nav-link:hover {
    background-color: var(--sidebar-background-hover);
    color: var(--on-sidebar-background) !important;
}

#sidebar-logos {
    margin-top: var(--sidebar-logos-margin-top);
}

#sidebar-title {
    font-family: var(--font-title) !important;
    color: var(--on-sidebar-background);
    font-weight: 600;
    font-size: 26px;
    margin-top: 24px;
}

#header-title {
    font-family: var(--font-title) !important;
    color: var(--on-sidebar-background);
    font-weight: 600;
    font-size: 18px;
}

#app-language-dropdown .Select .Select-control .Select-arrow-zone {
    display: flex;
    justify-content: center;
    align-items: center;
}