#sidebar-ui {visibility:hidden; position:fixed; width:100%; top:0; bottom:0; left:0; z-index:500;}
#sidebar-ui .overlay {width:100%; height:100%; background-color:rgba(0,0,0,0.75); opacity:0; transition:opacity 0.3s;}
#sidebar-ui .holder {position:absolute; top:0; bottom:0; right:0; transform:translateX(100%); transition:transform 0.3s;}
#sidebar-ui.active {visibility:visible;}
#sidebar-ui.active .overlay {opacity:1; cursor:pointer;}
#sidebar-ui.active .holder {transform:translateX(0); cursor:default;}


#sidebar-ui .profile-info {width:23rem; height:100%; overflow-x:hidden; overflow-y:auto; background-color:#f3f3f3; box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.24), 0 0 1rem 0 rgba(0, 0, 0, 0.18);}
#sidebar-ui .profile-info .topbar {padding:0.5rem 2rem; background-color:#3E455B; color:#ffffff;}
#sidebar-ui .profile-info .topbar .username {font-size:1.125rem; font-weight:500;}
#sidebar-ui .profile-info .topbar .username a {color:#ffffff;}
#sidebar-ui .profile-info .topbar .close {float:right; width:1.5rem; height:1.5rem; line-height:1.5rem; text-align:center; font-size:1.125rem; font-weight:600; color:#ffffff;}
#sidebar-ui .profile-info .topbar .close:before {font-family:"Font Awesome 5 Pro"; content:"\f00d"; vertical-align:middle;}
#sidebar-ui .profile-info .mainbar {padding:2rem 1rem;}
#sidebar-ui .profile-info .mainbar .card {padding:1rem; margin:0 0 2rem; background-color:#ffffff; border:none; border-radius:0.25rem; text-align:center;}
#sidebar-ui .profile-info .mainbar .card .avatar {width:5rem; margin:0 auto 1rem; border-radius:0.5rem; overflow:hidden;}
#sidebar-ui .profile-info .mainbar .card .avatar img {display:block; width:100%;}
#sidebar-ui .profile-info .mainbar .card .name {font-size:1.125rem; font-weight:500;}
#sidebar-ui .profile-info .mainbar .buttons {}
#sidebar-ui .profile-info .mainbar .buttons .btn {width:100%; margin:0 0 1rem; background-color:#3E455B; color:#ffffff;}



@media all and (max-width: 600px) {
	#sidebar-ui .holder {width:100%;}
	#sidebar-ui .profile-info {width:100%;}
}