.offcanvas-end {
    top: 50px !important;
}

.offcanvas {
    visibility: visible !important;
    transition: transform .3s ease-in-out;
}

.offcanvas-header{
    background-color: #707070 !important;
    color: #fff !important;
    border-radius: unset !important;
    padding: 0.5rem !important;
}

.offcanvas-header .title {
    font-size: 20px !important;
    margin-bottom: 0px !important;
}

.offcanvas-body {
    padding: 0 !important;
}

.offcanvas-body::-webkit-scrollbar {
    width: 2px !important;
}

.offcanvas-body .body-content .group-items-notify .text-title {
    font-size: 15px;
}

.offcanvas-body .body-content .group-items-notify .text-date {
    font-size: 12px;
}

.offcanvas-body .body-content .group-items-notify {
    border-bottom: 1px solid #707070;
}

.offcanvas-body .body-content .unread {
    background: #e3e3e3;
}

.delete-notify:hover {
    transform: scale(1.2);
}

.group-items-notify .item-noty {
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.group-items-notify .item-noty:hover {
    font-weight: 900
}

.group-items-notify .item-noty.hidden {
    opacity: 0;
    transform: translateX(-100%);
}