/* ===============================
   NOTIFICATION DROPDOWN
================================ */

.notification-menu{

    position:relative;
    display:inline-block;

}


.notification-dropdown{

    display:none;

    position:absolute;

    top:35px;

    right:0;

    width:360px;

    background:#101c3a;

    border:1px solid rgba(255,255,255,.1);

    border-radius:12px;

    overflow:hidden;

    z-index:99999;

    box-shadow:0 10px 30px rgba(0,0,0,.5);

}


/* SHOW DROPDOWN */

.notification-menu:hover .notification-dropdown{

    display:block;

}



.notification-item{

    display:flex;

    gap:12px;

    padding:12px;

    text-decoration:none;

    color:white;

    border-bottom:1px solid rgba(255,255,255,.08);

}



.notification-item:hover{

    background:#16254b;

}



.notification-item.unread{

    border-left:4px solid #00ffd5;

}



.notification-header,
.notification-footer{

    padding:12px;

    display:flex;

    justify-content:space-between;

    border-bottom:1px solid rgba(255,255,255,.1);

}



.notification-footer{

    border-top:1px solid rgba(255,255,255,.1);

}


.notification-text p{

    margin:4px 0;

    font-size:13px;

    color:#ccc;

}