body.mui-scroll-lock {overflow:hidden; touch-action: none; }

/* ScrolBar  */
.main-menu .scrollbar
{

height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}

.main-menu .scrollbar:hover
{

height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}

/* Scrollbar Style */ 



#style-1::-webkit-scrollbar-track
{
border-radius: 2px;
}

#style-1::-webkit-scrollbar
{
width: 0px;
background-color: #000;
}

#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #171d25;
}
/* Scrollbar End */ 





.main-menu .fa-lg {
font-size: 1em;
  
}
.main-menu .fa, .main-menu .fa-solid {
position: relative;
display: table-cell;
width: 55px;
height: 36px;
text-align: center;
top:0px; 
font-size:20px;
vertical-align:middle;

}



.main-menu:hover, nav.main-menu.expanded {
width:190px;
overflow:hidden;
opacity:1;

}

.main-menu {
background:#212121;
position:fixed;
top:81px;
bottom:0;
height:auto;
left:0;
width:55px;
overflow:hidden;
-webkit-transition:width .2s linear;
transition:width .2s linear;
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
opacity:1;
z-index:9999;
padding-top:5px;
}

.main-menu>ul {
margin:7px 0;

}

.main-menu li {
position:relative;
display:block;
width:250px;
  


}

.main-menu li a {
position:relative;
width:255px;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#8a8a8a;
font-size: 13px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .14s linear;
transition:all .14s linear;  
}

.side_ban {display:none; margin:30px 0 0; text-align:center; -webkit-transition:width .2s linear; transition:slide .2s linear;-webkit-transform:translateZ(0) scale(1,1);}
.side_ban a{display:block; margin:5px 0;}
.side_ban img {width:100%;}

.main-menu:hover .side_ban {display:block;}

.main-menu .nav-icon {
  
position:relative;
display:table-cell;
width:55px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;

}

.main-menu .nav-text  {
   
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
}


.no-touch .scrollable.hover {
overflow-y:hidden;

}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
  
}



nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
  
}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
text-transform: uppercase;
}



.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#CD2D2D;
text-shadow: 0px 0px 0px; 
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}

/* Darker element side menu Start*/


.darkerli
{
background-color:#22262d;
text-transform:capitalize;  
}

.darkerlishadow
{
background-color:#212121;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
}


.darkerlishadowdown
{
background-color:#22262d;
text-transform:capitalize;  
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow:    inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
box-shadow:         inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
}

/* Darker element side menu End*/

@media (max-width:720px){
    .main-menu {top:69px; z-index:99999; left:-250px; width:250px}
    .main-menu.active {
      transform: translate(250px);
    }
    
    .side_ban {display:block;}
}