.sidebar-area{
    display: none;
    position: relative;
    z-index: 999;
}
.sidebar{
    position: fixed;
    height: 100%;
    width:17rem;
    left:-17rem;
    background: #fff;
    transition: all .6s;
    overflow-y: scroll;
    top:0;
    border-radius: 0 1rem 1rem 0;
    box-shadow: var(--box-shadow);
}
.sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar {
    background-color:transparent;
    box-shadow: none;
    width: 0;
}
.sidebar header{
    border-radius: 0 1rem 0 0;
    position: fixed;
    width: 17rem;
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: 600;
    background:#fff;
    padding:1rem 1.25rem;
    font-size: 1.5rem;
    text-align: left;
    z-index: 5;
    border-bottom: 3px solid rgba(0, 99, 153, 0.07);
    color: #000;
    height: 55px;
}
.sidebar-menu{
    top:65px;
    position: relative;
}
.sidebar ul{
    line-height: 3.3rem;
}
.sidebar ul li{
    list-style-type: none;
    transition: all .2s;
}
.sidebar ul li a,
.sidebar ul li label{
    font-size: var(--small-font-size);
    color:var(--text-color);
    border-radius: 5px;
    padding-left: .9rem;
    margin-left: .5rem;
    transition: all .1s ease;
    width: 95%;
    display: inline-block;
    cursor: pointer;
    background: transparent;
}
.sidebar ul li a i,
.sidebar ul li label i{
    margin: .5rem .5rem 0 0;
    color:var(--blue-color);
}
.sidebar ul li .active,
.sidebar ul li:hover > a,
.sidebar ul li:hover > label{
    background: rgba(0, 99, 153, 0.07);
    color: var(--blue-color);
    text-decoration: none;
}
.sidebar input {
    display: none;
}
.sidebar .dropdown-list{
    display: none;
}
.sidebar .dropdown-list > li{
    list-style-type: none;
    font-size: var(--small-font-size);
    margin-left: 1.5rem;
    margin-top: .2rem;
}
.sidebar .dropdown-list > li > a,
.sidebar .dropdown-list > li > span{
    color: var(--text-color);
    line-height: 1.8rem;
    padding: .7rem .5rem;
}
.sidebar .dropdown-list > li > a:before,
.sidebar .dropdown-list > li > span:before{
    content: "\f178";
    font-family: FontAwesome;
    padding-right: .3rem;
    color: var(--blue-color);
}
.sidebar input:checked ~ label{
    color: var(--blue-color);
    background: rgba(0, 99, 153, 0.07);
}
.sidebar ul li label{
    margin-bottom: -2px;
}
.sidebar label #label-icon{
    position: relative;
    float: right;
    right: 2rem;
    top:.75rem;
    transition: all .3s;
}
.sidebar input:checked ~ label #label-icon{
    transform: rotate(540deg);
}
.sidebar input:checked ~ .dropdown-list{
    display: block;
}
#check{
    display: none;
}
.menu-icons #menu , .menu-icons #close {
    padding: 5px 10px;
    cursor: pointer;
    transition: all .6s;
}
.menu-icons #menu {
    position: absolute;
    font-size: 27px;
    padding: 10px;
    margin: -.6rem 0 0 1.5rem;
    color: #161616;
    transition: all .6s ease;
}
.menu-icons  #close {
    position: fixed;
    font-size: 1.2rem;
    color: #000;
    padding: 10px;
    margin: -15px;
    transition: all .6s ease;
    top: 1.5rem; left:-14.5rem;
    z-index: 111;
}
.menu-icons #menu:hover{
    color: var(--blue-color);
}
.menu-icons #close:hover{
    transform: rotate(360deg);
}

#check:checked ~ .sidebar{ left:0px; }
#check:checked ~ .menu-icons  #close { left:14.5rem; }

@media screen and (max-width: 991px){
    .sidebar-area{
        display: block;
    }
}