@import url('https://fonts.googleapis.com/css?family=poppins:wght@100;200;300;400;500;600;700;800;900@display=swap');
*{
 margin: 0;  
 padding : 0;
 box-sizing : border-box;
 font-family : 'Poppins', sans-serif ;
    
    
}

body {
 width : 100%;
 background : #E5E7EB;
 position : relative;
   
    
}
/*#txx{
 width : 100%; 
 height : 50px;
 position : absolute;
 background-color : red;
  outline : 1px solid red;  
}*/

#menu{
 background : #111827;  
 width : 300px;
height : 100vh; /* 100% did not work so i research */
}

#menu .logo{
    display : flex;
    align-items : center;  
    color : #fff;
    padding : 30px 0px 0px 30px;
    
}

#menu .logo img{
    width : 40px;
    margin-right : 15px;
}

#menu #menu_items{
    margin-top : 40px;
    
}
#menu #menu_items li{
    list-style : none;
    padding : 15px 0;
    transition :0.3 ease;
}
#menu #menu_items li{
    border-bottom : 0.5px solid #fff;
}

#menu #menu_items li i{
    color : rgb(134,141, 151);
    width : 30px;
    height : 30px;
    line-height : 30px;
    text-align : center;
    font-size : 14px;
    margin : 0 10px 0 25px;
}

#menu #menu_items li:hover i, #menu #menu_items li:hover a{
   color : #F3F4F6; 
}


 #menu #menu_items li a{
     text-decoration : none;
     color : rgb(134, 141,151);
     font-weight : 300;
     transition :0.3 ease;
 }
 
 #sub-item{
     
     display : none;
     
 }
 
  #sub-item li{
     border-bottom : 0 ; 
  }
 
 #sub-item li  {
 margin-left : 40px;  
     
 }
 
#menu ul#sub-ul li{
  
     border-bottom : none;
     padding: 0;
 }
 
#menu ul#sub-ul li:last-child{
  
     border : none;
 }
 
 #menu ul#sub-ul li:first-child{
  
     /*border-top : 0.5px solid #fff;*/
 }