.sidenav {
    height          : 100%;
    width           : 260px;
    position        : fixed;
    z-index         : 98;
    top             : 0;
    left            : 0;
    background-color: #FFFFFF;
    transition      : 0.5s;
    padding-top     : 100px;
    overflow        : auto;
}

.sidenav ul {
    list-style  : none;
    padding-left: 0px !important;
}

.sidenav ul li {
    padding        : 8px 20px 8px 20px;
    text-decoration: none;
    display        : block;
    transition     : 0.3s;
}

.sidenav ul li i {
    padding-right: 5px;
}

.sub-menu.active,.sub-menu:hover {
    color     : #FFFFFF;
    background: #1667B2;
    cursor    : pointer;
}

.fas.fa-chevron-up {
    transform: rotate(0deg);
    transition: transform 0.5s linear;
}
  
.fas.fa-chevron-up.open {
    transform: rotate(180deg);
    transition: transform 0.5s linear;
}

@media screen and (max-width: 992px) {
    .sidenav {
        height          : 100%;
        width           : 0px;
        position        : fixed;
        z-index         : 98;
        top             : 0;
        left            : 0;
        background-color: #FFFFFF;
        transition      : 0.5s;
        padding-top     : 62px;
        overflow        : auto;
    }
}
@media screen and (min-width: 992px) {
    .sidenav {
        height          : 100%;
        width           : 260px;
        position        : fixed;
        z-index         : 98;
        top             : 0;
        left            : 0;
        background-color: #FFFFFF;
        transition      : 0.5s;
        padding-top     : 100px;
        overflow        : auto;
    }
}
#mySidenav::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #ffffff;
}

#mySidenav::-webkit-scrollbar
{
    width: 5px;
    background-color: #ffffff;
}

#mySidenav::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #ffffff;
}