#sidebar{
    width: 60%;
    position: fixed;
    left: 40%;
    top: 80px;
    z-index: 20;
    /* height: calc(100% - 115px); */
    background-color: var(--theme-color-second);
    overflow-y: scroll;
    overflow-x: hidden;
    height: -webkit-max-content;
    max-height: 100vh;
}

/* #sidebar::-webkit-scrollbar{
    width: 4px;
    color: lightgrey;
} */

.sidebar-hide{
    display: none;
}

.show-sidebar{
    display: block;
}

.section-list{
    transition: 0.2s;
    padding: 10px;
    font-size: 18px;
    width: 100%;
    border-bottom: 0.4px solid #fff;
    cursor: pointer;
    color: #fff;
}

.section-list:hover{
    background-color: #fff;
    color: #001733;
    border-color: #001733;
}

.hovered{
    background-color: #fff;
    color: #001733;
    border-color: #001733;
}

.section-list-active{
  background-color: #001733;
  color:white;
  padding-left: 16px;
}

.department-list{
  display: none;
  list-style: none;
  font-size: 16px;
  padding: 5px;
  padding-left: 10px;
  border: 1px solid #aaa;
  background-color: #f2f2f2;
}

.department{
  border-bottom: 1px solid #aaa;
  padding: 10px;
}

.department:hover{
  cursor: pointer;
  color:#dc3545;
}

@media screen and (min-width: 576px){
    #sidebar{
        height: calc(100% - 80px);
        width: 50%;
        left: 50%;
    }
}

@media screen and (min-width: 768px){

    #sidebar{
        display: block;
        padding-left:0px;
        left: 0px;
        width: 220px
    }
}

@media screen and (min-width: 992px){
    #sidebar{
        left: 0px;
    }
}
