.erp-notifications-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    width: 390px;
    max-width: calc(100vw - 24px);
    max-height: min(520px, calc(100vh - 80px));
    overflow-y: auto;
    padding: 0 !important;
    border: 0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    /* SweetAlert debe quedar por encima del panel de notificaciones. */
    z-index: 1040 !important;
}

#erpNotificationsContainer {
    position: relative !important;
    z-index: 1040 !important;
}

#erpNotificationsContainer.is-open > .erp-notifications-menu {
    display: block !important;
}

#erpNotificationsMenu > li.erp-notifications-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 14px;
    width: 100% !important;
    min-height: 52px;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #e8edf2;
    color: #34495e;
}

.erp-notifications-head-copy {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 12px;
    min-width: 0;
}

.erp-notifications-head-copy strong {
    flex: 0 0 auto;
    color: #263746;
    font-size: 13px;
    white-space: nowrap;
}

.erp-notifications-head .btn {
    flex: 0 1 auto;
    margin: 0 !important;
    padding: 4px 0 !important;
    color: #1f7bb6;
    font-size: 12px;
    line-height: 1.25;
    white-space: nowrap;
}

.erp-notifications-head .btn:hover {
    color: #14577f;
    text-decoration: underline;
}

.erp-notifications-delete-all,
.erp-notification-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #263746;
    cursor: pointer;
}

.erp-notifications-delete-all {
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 0;
    font-size: 15px;
}

.erp-notifications-delete-all:hover,
.erp-notification-delete:hover {
    color: #c0392b;
}

.erp-notifications-delete-all:disabled,
.erp-notification-delete:disabled {
    cursor: wait;
    opacity: .55;
}

#erpNotificationsMenu > li.erp-notifications-items {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
}

.erp-notification-item {
    display: flex !important;
    align-items: flex-start;
    gap: 6px;
    height: auto !important;
    min-height: 68px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 12px 13px 14px !important;
    color: #34495e !important;
    line-height: 1.25;
    text-align: left !important;
    border-bottom: 1px solid #edf0f2;
    text-decoration: none;
    white-space: normal;
}

.erp-notification-item:hover,
.erp-notification-item.is-unread {
    background: #f2f8fc;
}

.erp-notification-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    text-align: left !important;
    text-decoration: none;
}

.erp-notification-delete {
    width: 28px;
    min-height: 28px;
    padding: 4px;
    margin-top: 2px;
    font-size: 14px;
}

.erp-notification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: 50%;
    color: #287fb7;
    background: #e9f4fb;
}

.erp-notification-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    text-align: left !important;
}

.erp-notification-copy strong {
    display: block;
    color: #263746;
    font-size: 13px;
    text-align: left !important;
}

.erp-notification-copy span {
    display: block;
    overflow-wrap: anywhere;
    color: #52616d;
    font-size: 12px;
    text-align: left !important;
}

.erp-notification-copy small {
    display: block;
    color: #8a969e;
    font-size: 10px;
    text-align: left !important;
}

.erp-notifications-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    color: #89959d;
    font-size: 13px;
}

@media (max-width: 576px) {
    .erp-notifications-menu {
        position: fixed !important;
        top: 58px !important;
        right: 10px !important;
        left: auto !important;
    }
}