body.notification-modal {
    overflow: auto;
    overflow-x: hidden;
    padding-right: 0 !important;
}

.notification-modal .header {
    padding-inline-end: 0 !important;
}

body.notification-modal .header-container {
    padding-right: 0 !important;
}

body.notification-modal .modal-backdrop {
    pointer-events: none;
}

#notification-box {
    pointer-events: none;
    padding: 0 !important;
}

#notification-box .modal-content {
    padding: 20px;
    border-radius: 24px !important;
}

#notification-box .action .btn {
    padding: 12px 32px;
}

#notification-box.z-index-3 {
    z-index: 3 !important;
}

#notification-box.z-index-1000 {
    z-index: 1000 !important;
}

#notification-box .close {
    background-color: #F6F7F8;
    width: 32px;
    height: 32px;
    left: unset;
    right: 0;
    top: -4px;
    border: 0;
    border-radius: 24px;
}

#notification-box .benefits-list {
    margin-bottom: 0;
    padding-inline-start: 0;
    padding-top: 12px;
    padding-bottom: 16px;
}

#notification-box .benefits-list li:before {
    content: '';
    background-image: url("/images/check-blue.svg");
    width: 20px;
    height: 20px;
    margin-inline-end: 8px;
}

#notification-box .modal-dialog {
    margin: 0;
    transform: translateY(110%);
    bottom: 24px;
    right: 12px;
    transition: 0.5s;
    min-width: 384px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    border-radius: 32px;
}

#notification-box .modal-dialog.animate {
    transform: unset;
}

#notification-box .btn-dark {
    background-color: #171D35;
    border-radius: 22px;
}

.rtl #notification-box .modal-dialog {
    right: unset;
    left: 12px;
}

.rtl #notification-box .close {
    left: 0;
    right: unset;
}

@media (max-width: 767px) {
    .rtl #notification-box .modal-dialog {
        right: 16px;
        left: 16px;
    }

    #notification-box .modal-dialog {
        min-width: 328px;
        left: 16px;
        right: 16px;
    }
}