.page-system-notifications {
    display: none;
    clear: both;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
}

.page-system-notifications.page-system-notifications--active {
    display: block;
    margin: 0 0 14px;
}

.page-system-notifications--active ~ #panel_second_menu {
    margin-top: 0;
}

.page-notifications-channel {
    display: flex;
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
    flex-direction: column;
    gap: 8px;
}

/*
 * Общий вид системного уведомления. Модули добавляют только содержимое
 * и модификатор важности, не привязываясь к собственным таблицам стилей.
 */
.page-notification {
    --page-notification-border: #8ca0b3;
    --page-notification-background: #f4f7fa;
    --page-notification-color: #33495c;
    --page-notification-accent: #607d96;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    box-sizing: border-box;
    border: 1px solid var(--page-notification-border);
    border-radius: 8px;
    background: var(--page-notification-background);
    color: var(--page-notification-color);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--page-notification-accent) 14%, transparent);
    font-size: 13px;
    line-height: 1.4;
}

.page-notification--critical {
    --page-notification-border: #e36a63;
    --page-notification-background: #fff0ef;
    --page-notification-color: #8f201b;
    --page-notification-accent: #d63b32;
}

.page-notification--warning {
    --page-notification-border: #e4a13b;
    --page-notification-background: #fff8e8;
    --page-notification-color: #805510;
    --page-notification-accent: #d88900;
}

.page-notification--success {
    --page-notification-border: #55ad7b;
    --page-notification-background: #edf9f2;
    --page-notification-color: #246a43;
    --page-notification-accent: #28a745;
}

.page-notification__icon {
    flex: 0 0 auto;
    color: var(--page-notification-accent);
    font-size: 22px;
}

.page-notification__content {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.page-notification__link {
    flex: 0 0 auto;
    color: var(--page-notification-color) !important;
    font-weight: 700;
}

.page-notification__action {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .page-notification {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}