/**
=====================================
Start Drawable
*/
#drawable{
	position:fixed;
    width:100%;
	height:100%;
	background-color:rgba(255,255,255,.9);
	top:0px;
	left:-100%;
	transition:.5s;
	z-index:5002;
	overflow-y: auto;
	overflow-x: hidden;
	backdrop-filter: blur(10px);
	padding-bottom: 2rem;
}
#drawable h1.heading{
	font-size: 17px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: #808080;
	padding-left: 20px;
}
#drawable .drawable-header{
	width:100%;
	height: 50px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	display:none;
}
@media(max-width:900px){
    #drawable .drawable-header{
        display:flex;
    }
}
#drawable .drawable-header a{
	margin: 20px;
}
#drawable .drawable-header a i{
	font-size: 20px;
}
#drawable .drawable-header a:hover{
    color: #4481eb;
}




/* --------------------------------------- */
#drawable .drawable-body-wrapper{
	width:100%;
	margin-top: 60px;
}
#drawable .drawable-body-wrapper .drawable-list{
	display: flex;
	align-items: center;
	gap:10px;
	padding: 10px;
	font-size: 16px;
}
#drawable .drawable-body-wrapper .drawable-list .icon{
	width:30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}


#drawable .drawable-body-wrapper .user-menu-wrapper{
	padding: 10px 10px;
}


#drawable .drawable-body-wrapper .user-menu-wrapper .box-1 .profile-picture-wrapper{
	margin: auto;
}
#drawable .drawable-body-wrapper .user-menu-wrapper .box-1 h1.name{
	font-size: 18px;
	text-align: center;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding-left:10px;
}













/* .drawer-head-bar{
	color:gray;
	font-weight:bold;
	text-align:center;
	min-height:140px;
	font-size:20px;
	font-weight:bold;
	padding:0px 0 0px 0;
	border-bottom:solid 1px #eee;
	overflow:hidden;
	position:relative;
	cursor:pointer;
}
.drawer-head-bar .drawer-profile{
    width:80px;
     margin:auto;
     margin-top:10px;
     background-color:#fff;
      border-radius:50px;
}
.drawer-head-bar p{
     padding:10px 0 10px 0;
}

.drawable-list-container{
	position:relative;
	padding-left:45px;
	height:45px;
	line-height:45px;
	cursor:pointer;
	/*border-bottom:solid 2px #eee;*
	
}
.drawable-list-container p{
     font-size:15px;
}

.drawable-list-container img{
	position:absolute;
	left:10px;
	height:30px;
	width:30px;
	top:7.5px;
}

.drawable-list-container:hover{
	background-color:hsla(240,100%,0%,.1);
}

#layer{
	position:fixed;
	height:100%;
	width:100%;
	top:0px;
	background:hsla(240,100%,10%,.2);
	z-index:5001;
	display:none;
}
.img-handler{
    max-width: 100%;
    height: 100%;
    object-fit:contain;
}




@media only screen and (max-width:500px){
    #drawable_menu_bar{
		overflow:scroll;
	}
} */



/**
End Drawable
=====================================
*/