/*
 * The one success and error message design, loaded on every page (bootstrap/client_reporting.php).
 * Markup: <div class="alert alert-success" role="status">…</div> or class="alert alert-danger" with role="alert".
 * Selectors start with html and use both classes, so they win over Bootstrap, night-mode.css and page styles whatever the load order.
 * Alertify pop-ups are separate and not affected.
 */
html .alert.alert-success,
html .alert.alert-danger {
    position: relative;
    max-width: none;
    margin: 0 0 16px;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--shows-alert-border);
    border-radius: 12px;
    background: var(--shows-alert-bg);
    color: var(--shows-alert-text);
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    overflow-wrap: anywhere;
    box-shadow: none;
}

html .alert.alert-success {
    --shows-alert-bg: #ecfdf3;
    --shows-alert-border: #abefc6;
    --shows-alert-text: #05603a;
    --shows-alert-icon: #079455;
    --shows-alert-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.7 7.7-5.5 5.5a1 1 0 0 1-1.4 0l-2.5-2.5a1 1 0 1 1 1.4-1.4l1.8 1.8 4.8-4.8a1 1 0 0 1 1.4 1.4Z'/%3E%3C/svg%3E");
}

html .alert.alert-danger {
    --shows-alert-bg: #fef3f2;
    --shows-alert-border: #fecdca;
    --shows-alert-text: #912018;
    --shows-alert-icon: #d92d20;
    --shows-alert-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1Zm0 8.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z'/%3E%3C/svg%3E");
}

html.night-mode .alert.alert-success {
    --shows-alert-bg: #10291d;
    --shows-alert-border: #1d4a33;
    --shows-alert-text: #a6efc8;
    --shows-alert-icon: #47cd89;
}

html.night-mode .alert.alert-danger {
    --shows-alert-bg: #2d1513;
    --shows-alert-border: #5a2723;
    --shows-alert-text: #ffb4ab;
    --shows-alert-icon: #f97066;
}

html .alert.alert-success::before,
html .alert.alert-danger::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 16px;
    width: 18px;
    height: 18px;
    background-color: var(--shows-alert-icon);
    -webkit-mask: var(--shows-alert-mask) no-repeat center / contain;
    mask: var(--shows-alert-mask) no-repeat center / contain;
}

html .alert.alert-success.alert-dismissible,
html .alert.alert-danger.alert-dismissible {
    padding-right: 48px;
}

html .alert.alert-success a:not(.btn),
html .alert.alert-danger a:not(.btn) {
    color: inherit;
    font-weight: 500;
    text-decoration: underline;
}

html .alert.alert-success > :last-child,
html .alert.alert-danger > :last-child {
    margin-bottom: 0;
}

html .alert.alert-success ul,
html .alert.alert-danger ul {
    margin: 4px 0 0;
    padding-left: 18px;
}