/*=====================================================
    VESTIFY NOTIFICATION SIDEBAR
======================================================*/

.notification-offcanvas{

    width:420px !important;

    background:#0b0b0b;

    color:#fff;

    border-left:1px solid rgba(255,193,7,.15);

    box-shadow:-15px 0 40px rgba(0,0,0,.45);

    backdrop-filter:blur(20px);

    overflow:hidden;

}

/*=====================================================
    HEADER
======================================================*/

.notification-offcanvas .offcanvas-header{

    background:#111;

    padding:25px;

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

}

.notification-offcanvas h4{

    margin:0;

    font-weight:700;

}

.notification-offcanvas small{

    color:#9ca3af;

}

.btn-close{

    filter:invert(1);

    opacity:.8;

}

.btn-close:hover{

    opacity:1;

}

/*=====================================================
    BODY
======================================================*/

.notification-offcanvas .offcanvas-body{

    padding:25px;

    overflow-y:auto;

}

.notification-offcanvas .offcanvas-body::-webkit-scrollbar{

    width:6px;

}

.notification-offcanvas .offcanvas-body::-webkit-scrollbar-thumb{

    background:#ffc107;

    border-radius:10px;

}

.notification-offcanvas .offcanvas-body::-webkit-scrollbar-track{

    background:#1b1b1b;

}

/*=====================================================
    SECTION TITLES
======================================================*/

.notification-offcanvas h6{

    font-size:15px;

    letter-spacing:.5px;

    text-transform:uppercase;

}

/*=====================================================
    ACCORDION
======================================================*/

.notification-item{

    background:#161616;

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

    border-radius:15px;

    margin-bottom:15px;

    overflow:hidden;

    transition:.3s;

}

.notification-item:hover{

    border-color:rgba(255,193,7,.35);

    transform:translateY(-2px);

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

}

/*=====================================================
    UNREAD
======================================================*/

.notification-item.unread{

    border-left:5px solid #ffc107;

    background:linear-gradient(
        90deg,
        rgba(255,193,7,.10),
        #161616 20%
    );

}

.notification-item.unread strong{

    color:#ffc107;

}

/*=====================================================
    ACCORDION BUTTON
======================================================*/

.notification-item .accordion-button{

    background:transparent;

    color:#fff;

    box-shadow:none;

    padding:18px;

}

.notification-item .accordion-button:not(.collapsed){

    background:#1c1c1c;

    color:#fff;

}

.notification-item .accordion-button:focus{

    box-shadow:none;

    border:none;

}

/* Remove Bootstrap blue arrow */

.notification-item .accordion-button::after{

    filter:invert(1);

}

/*=====================================================
    TITLE
======================================================*/

.notification-item strong{

    font-size:15px;

    font-weight:700;

}

.notification-item small{

    font-size:12px;

    color:#9ca3af !important;

}

/*=====================================================
    BODY
======================================================*/

.notification-item .accordion-body{

    background:#111;

    color:#d8d8d8;

    line-height:1.7;

    font-size:14px;

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

}

/*=====================================================
    BADGES
======================================================*/

.notification-offcanvas .badge{

    font-size:11px;

    font-weight:600;

    padding:6px 10px;

    letter-spacing:.5px;

}

.notification-offcanvas .bg-danger{

    background:#dc3545 !important;

}

.notification-offcanvas .bg-warning{

    background:#ffc107 !important;

    color:#000 !important;

}

/*=====================================================
    FOOTER
======================================================*/

.offcanvas-footer{

    background:#111;

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

    padding:20px;

}

.offcanvas-footer .btn{

    border-radius:12px;

    font-weight:600;

    padding:12px;

    transition:.3s;

}

.offcanvas-footer .btn-warning{

    box-shadow:0 8px 20px rgba(255,193,7,.25);

}

.offcanvas-footer .btn-warning:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(255,193,7,.35);

}

.offcanvas-footer .btn-outline-light{

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

}

.offcanvas-footer .btn-outline-light:hover{

    background:#fff;

    color:#000;

}

/*=====================================================
    EMPTY STATE
======================================================*/

.notification-offcanvas .display-5{

    opacity:.4;

}

.notification-offcanvas .text-center h6{

    margin-top:15px;

    color:#9ca3af;

}

/*=====================================================
    ACCORDION ANIMATION
======================================================*/

.accordion-collapse{

    transition:all .35s ease;

}

.notification-item{

    animation:notificationFade .35s ease;

}

@keyframes notificationFade{

    from{

        opacity:0;

        transform:translateX(20px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=====================================================
    MOBILE
======================================================*/

@media (max-width:768px){

    .notification-offcanvas{

        width:100% !important;

    }

    .notification-offcanvas .offcanvas-header{

        padding:20px;

    }

    .notification-offcanvas .offcanvas-body{

        padding:18px;

    }

    .notification-item .accordion-button{

        padding:15px;

    }

    .offcanvas-footer{

        padding:15px;

    }

}

/*=====================================================
    DARK BACKDROP
======================================================*/

.offcanvas-backdrop.show{

    opacity:.65;

}