@font-face { font-family: 'Vazir'; src: url('../fonts/Vazir-FD.eot') format('eot'), url('../fonts/Vazir-FD.ttf') format('truetype'), url('../fonts/Vazir-FD.woff') format('woff'); }
*{margin:0;padding:0;box-sizing:border-box;font-family:'Vazir',Tahoma,Geneva,Verdana,sans-serif}
body{display:flex;height:100vh;overflow:hidden}
.my-topbar{position:fixed;top:0;right:0;left:0;height:60px;background:#3498db;color:#fff;display:flex;align-items:center;padding:0 20px;z-index:100;transition:.3s}
.my-topbar.my-sidebar-active{right:250px}
.my-menu-btn{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;margin-left: 10px}
.my-sidebar{width:250px;background:#2c3e50;color:#fff;position:fixed;top:0;right:-250px;bottom:0;transition:.3s;z-index:99;display:flex;flex-direction:column}
.my-sidebar.active{right:0}
.logo-section{padding:15px;background:#1a252f;border-bottom:1px solid rgba(255,255,255,0.1);text-align:center;height:60px;display:flex;align-items:center;justify-my-content:center}
.logo{font-weight:bold;font-size:18px}
.my-sidebar-my-content{flex:1;overflow-y:auto;padding:20px}
.my-profile-section{padding:15px;background:#1a252f;border-top:1px solid rgba(255,255,255,0.1);display:flex;align-items:center}
.my-avatar{width:40px;height:40px;border-radius:50%;background:#3498db;display:flex;align-items:center;justify-my-content:center;margin-left:10px}
.my-profile-info{flex:1}
.my-profile-name{font-weight:bold;font-size:14px}
.my-profile-role{font-size:12px;opacity:.8}
.my-content{flex:1;padding:80px 20px 20px;background:#ecf0f1;overflow-y:auto;margin-right:0;transition:.3s}
.my-content.my-sidebar-active{margin-right:250px}
@media(min-width:768px){.my-sidebar{right:0}.my-content{margin-right:250px;padding:30px 20px 20px}.my-topbar,.my-menu-btn{display:none}}