*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,sans-serif;
}

body{
background:#f5f7fb;
overflow-x:hidden;
}

/*====================
Sidebar
====================*/

.sidebar{

position:fixed;
left:0;
top:0;
width:260px;
height:100vh;
background:#0d47a1;
color:#fff;
transition:.35s;
z-index:1000;
overflow-y:auto;

}

.logo{

height:70px;
display:flex;
align-items:center;
justify-content:center;
font-size:23px;
font-weight:bold;
border-bottom:1px solid rgba(255,255,255,.1);

}

.menu{

padding:15px 0;

}

.menu a{

display:flex;
align-items:center;
gap:15px;
padding:15px 25px;
color:#fff;
text-decoration:none;
transition:.3s;

}

.menu a:hover,
.menu a.active{

background:#1565c0;
border-left:5px solid #fff;

}

.menu i{

width:20px;

}

/*====================
Content
====================*/

.content{

margin-left:260px;
transition:.35s;

}

/*====================
Topbar
====================*/

.topbar{

height:70px;
background:#fff;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 25px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
position:sticky;
top:0;
z-index:500;

}

.toggle{

font-size:24px;
cursor:pointer;
color:#0d47a1;

}

.right{

display:flex;
align-items:center;
gap:20px;

}

.avatar{

width:45px;
height:45px;
border-radius:50%;
background:#0d47a1;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-weight:bold;

}

/*====================
Cards
====================*/

.wrapper{

padding:25px;

}

.cards{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;

}

.card{

background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0 5px 15px rgba(0,0,0,.06);
border: none!important;

}

.card h4{

color:#666;
margin-bottom:10px;

}

.card h2{

color:#0d47a1;

}

.card i{

font-size:32px;
float:right;
color:#1565c0;

}

/*====================
Grid
====================*/

.grid{

display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
margin-top:25px;

}

.box{

background:#fff;
border-radius:15px;
padding:25px;
box-shadow:0 5px 15px rgba(0,0,0,.06);

}

.chart{

height:320px;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
color:#888;
border:2px dashed #ddd;

}

.activity{

list-style:none;

}

.activity li{

padding:15px 0;
border-bottom:1px solid #eee;

}

/*====================
Overlay
====================*/

.overlay{

position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.45);
display:none;
z-index:999;

}

.overlay.show{

display:block;

}

/*====================
Responsive
====================*/

@media(max-width:992px){

.grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.sidebar{

left:-260px;

}

.sidebar.show{

left:0;

}

.content{

margin-left:0;

}

}