#sidebar {
    text-align: center;
    text-justify: center;
    justify-items: center;
    align-items: center;
    /* padding: 2rem 2rem; */
    background-color: var(--font-color);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5rem;
    text-align: left;
    color: white;
    z-index:2;
}

#sidebar h2 {
    text-align: left;
    margin-bottom: 0;
}

/* add the three horizontal bars icon for the toggle */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    margin-bottom: 4rem;
}
  
#sidebar-toggle {
    display: inline-block;
    position: relative;
    top: 0;
    transition: top 0.3s ease-in-out;
    margin-bottom: 4rem;
    width: 5rem;
}

#sidebar a {
    width: 5rem;
}

#sidebar a:hover:not(.active) {
    background-color: transparent;
    color: var(--font-suportingcolor);
}

#sidebar .active {
    background-color: transparent;
    color: var(--primary-color);
    /* color: var(--palette1-color); */
  }

#sidebar a:not(.active) {
/* background-color: #ffffff !important; */
color: white;
}