.left{

 width: 270px;
height: 94vh;
position: fixed;
top: 54px;
left: 0;
scrollbar-color: #000;
user-select: none;
}

.left:hover{
overflow: scroll;
}

.left::-webkit-scrollbar{

    width: 10px;
}
.left::-webkit-scrollbar-track{

background: rgb(228, 226, 226);


}
.left::-webkit-scrollbar-thumb{

background: rgb(145, 143, 143);
border-radius: 20px;
}



.left .left-content{
padding: 0 15px ;
user-select: none;
text-transform: capitalize;
}

.left-content .see-user,
.left-content .left-options .option,
.left-content .shortcuts .my-group{
    display: flex;
    margin: 7px 0;
    padding: 5px 2px;
    border-radius: 7px;
    align-items: center;
    cursor: pointer;
    }
    .left-content .see-user:hover,
    .left-content .see-less-options:hover,
    .left-content .see-less-groups:hover,
    .left-content .shortcuts .my-group:hover,
    .left-content .left-options .option:hover{
    
    background: rgb(209, 214, 214);
    
    }
    .left-content .see-user h4,
    .left-content .see-less-options h4,
    .left-content .see-less-groups h4,
    .left-content .shortcuts .my-group h5,
    .left-content .left-options .option h4{
    font-size: 12px;
    margin-left: 6px;
    
    }


.left-content .see-user .img,
.left-content .shortcuts .my-group .img{
width: 40px;
height: 40px;
border-radius: 50%;

}
.left-content .see-user .img img,
.left-content .shortcuts .my-group .img img{
    width:100%;
    height:100%;
border-radius: 50%;
object-fit: cover;
}


/*  */

.left-content hr{
    width: 100%;
    margin-left: 0;
    margin-top: 0;
}



.left-content .see-less-options,
.left-content .see-less-groups{
    display: flex;
    margin: 7px 0;
    padding: 5px 2px;
    border-radius: 7px;
    align-items: center;
    cursor: pointer;
}







.left-content .see-less-options .svg-see-less,
.left-content .see-less-groups .svg-see-less{
background: rgb(222, 226, 218);
border-radius: 50%;
padding: 3px 4px;
}


.left-content .see-less-options,
.left-content .see-less-groups{
    padding: 2px;
}


/*  */
.left-content .left-options{
    height: 200px;
    overflow: hidden;
}
.left-content .shortcuts{
    height: 280px;
    overflow: hidden;
}

.left-content .left-options.active{
    height: 100%;
    overflow: hidden;
}
.left-content .shortcuts.active{
    height: 100%;

    overflow: hidden;
}







.left img{
   width: 30px; 
}