/* this is needed to make the content scrollable on larger screens */
@media (min-width: 576px) {
    .h-sm-100 {
        height: 100%;
    }
}

.sidebar-item{
    color: white;
    font-size: 13px;
}
.sidebar-item:hover{
    color: rgb(238, 235, 10);
}
#sidenav-1 a{
    transition: 0.3s;
}


@media (min-width: 576px){
    .sidenav-flex{
        display: flex; 
        align-items: flex-start; 
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    #sidenav-1{
        height: inherit;   /* For adjusting height on mobile screen     */
    }
}
@media (max-width: 576px){
    #sidenav-1{
        height: unset;
    }
}
