body{

background:#efefef;

margin:0;

font-family:Segoe UI;

}

.page-title{

padding:25px;

text-align:center;

background:#fff;

}

.top-bar{

height:55px;

background:#3b67b6;

}




.dashboard{
    display:grid;
    grid-template-columns:15% 25% 60%;
    width:100%;
    min-height:calc(100vh - 120px);
}

/***************
Navigation
****************/

.left-panel{

background:#fff;

padding:20px;

}

.date-link{

display:block;

padding:10px;

text-decoration:none;

color:#222;

border-radius:6px;

margin-bottom:4px;

}

.date-link:hover{

background:#f3f3f3;

}

/***************
Timeline
****************/

.timeline{

background:#ffe3a2;

}

.timeline-scroll{

height:100%;

overflow-y:auto;

padding:20px;

}

.timeline-item{

padding:12px;

margin-bottom:10px;

background:#fff;

border-radius:10px;

text-align:center;

}

/***************
Cards
****************/

.cards{

padding:30px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:25px;

}

.feed-card{

height:220px;

background:#fff;

border-radius:25px;

border:1px solid #22427f;

display:flex;

justify-content:center;

align-items:center;

font-size:24px;

transition:.3s;

}

.feed-card:hover{

transform:translateY(-5px);

box-shadow:0 10px 20px rgba(0,0,0,.15);

}




@media (max-width:991px){

.dashboard{

grid-template-columns:220px 180px 1fr;

}

.feed-card{

height:180px;

}

}




@media (max-width:768px){

.dashboard{

grid-template-columns:1fr;

}

.left-panel{

order:1;

}

.timeline{

order:2;

height:250px;

}

.cards{

order:3;

grid-template-columns:1fr;

padding:20px;

}

.feed-card{

height:170px;

}

}