#app-sidebar {
    display: flex;
    flex-direction: column;
}

#nav-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--sidebar-padding);
}

/* Sidebar header & navlinks */
#sidebar-header, #nav-container {
    background-color: var(--sidebar-background-color);
    background: var(--sidebar-background-color);
    color: var(--on-sidebar-background);
    padding: var(--sidebar-padding);
}
#app-header {
    background-color: var(--sidebar-background-color);
    background: var(--sidebar-background-color);
    color: var(--on-sidebar-background);
}

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

/* Sidebar footer background */
#sidebar-footer {
    background-color: var(--sidebar-footer-background-color);
    background: var(--sidebar-footer-background-color);
    color: var(--on-sidebar-footer-background);
    padding: var(--sidebar-padding);
}
/* Change color of the footer buttons so it is configurable */
.sidebar-footer-button{
    border-radius: 0.5rem;
    background-color: var(--sidebar-footer-button-color) !important;
    color: var(--on-sidebar-footer-button) !important;
    margin-inline-end:0 !important;
    padding: 0.45rem !important;
}
.sidebar-footer-button .mantine-NavLink-section{
    margin-inline-end: 0 !important;
}
.sidebar-footer-button:hover {
    background-color: var(--sidebar-footer-button-color-hover) !important;
}


/*  To change the base color of Mantine nav item */
/* Inactive */
.nav-link {
    border-radius: 0.5rem;
    background-color: var(--sidebar-inactive) !important;
    color: var(--on-sidebar-inactive) !important;
    margin-top: 0.5rem;
    padding: 0.45rem 0.45rem;
}
.nav-link:hover {
    background-color: var(--sidebar-inactive-hover) !important;
}

/* Active */
.nav-link:where([data-active="true"]) {
    border-radius: 0.5rem;
    background-color: var(--sidebar-active) !important;
    color: var(--on-sidebar-active) !important;
}

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

.sidebar-accordion-item .mantine-Accordion-control{
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    padding: 7.2px 0.45rem;

}
.sidebar-accordion-item{
border-bottom: none;
}
.sidebar-accordion-item .mantine-Accordion-chevron,.sidebar-accordion-item .mantine-Accordion-label,.sidebar-accordion-item .mantine-Accordion-icon {
    color:var(--on-sidebar-background);
    padding: 0px;
}
.sidebar-accordion-item .mantine-Accordion-control:hover {
    background-color: var(--sidebar-active-hover) !important;
}
.sidebar-accordion-item .nav-link{
margin-left:8px
}