.mailbox-container{

display:flex;

height:calc(100vh - 170px);

background:#fff;

border-radius:12px;

overflow:hidden;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.mail-sidebar{

width:260px;

background:#f8f9fa;

padding:20px;

border-right:1px solid #ddd;

}

.compose-btn{

display:block;

background:#0d6efd;

color:#fff;

padding:14px;

text-align:center;

border-radius:30px;

font-weight:600;

text-decoration:none;

margin-bottom:25px;

transition:.3s;

}

.compose-btn:hover{

background:#0956c8;

}

.mail-menu{

list-style:none;

padding:0;

margin:0;

}

.mail-menu li{

margin-bottom:8px;

}

.mail-menu a{

display:block;

padding:12px 18px;

text-decoration:none;

color:#333;

border-radius:25px;

transition:.25s;

font-weight:500;

}

.mail-menu a:hover{

background:#e8f0fe;

}

.mail-menu .active{

background:#d2e3fc;

color:#0d47a1;

font-weight:bold;

}

.mail-content{

flex:1;

display:flex;

flex-direction:column;

overflow:hidden;

}

.mail-top{

padding:18px 25px;

border-bottom:1px solid #ddd;

display:flex;

justify-content:space-between;

align-items:center;

}

.mail-search{

width:350px;

padding:12px 18px;

border:none;

background:#f1f3f4;

border-radius:30px;

outline:none;

}

.mail-list{

flex:1;

overflow-y:auto;

}

.mail-row{

display:flex;

padding:16px 25px;

border-bottom:1px solid #eee;

cursor:pointer;

transition:.2s;

}

.mail-row:hover{

background:#f8f9fa;

}

.mail-from{

width:200px;

font-weight:600;

}

.mail-subject{

flex:1;

}

.mail-date{

width:120px;

text-align:right;

color:#777;

}