.kfw-alert {
    border-radius: var(--global-radius);
    padding: 16px;
    font-size: 1rem;
    box-shadow: none;
    gap: 12px;
    border: 1px solid transparent;
}

.kfw-alert-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 50%;
}

.kfw-alert-icon i {
    font-size: 20px;
}

.kfw-alert.small .kfw-alert-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

.kfw-alert.small .kfw-alert-icon i {
    font-size: 16px;
}

.kfw-alert.primary {
    border-color: #b6d4fe;
    background: #cfe2ff;
    color: #084298;
}

.kfw-alert.success {
    border-color: #a3cfbb;
    background: #d1e7dd;
    color: #0f5132;
}

.kfw-alert.warning {
    border-color: #ffe69c;
    background: #fff3cd;
    color: #664d03;
}

.kfw-alert.danger {
    border-color: #f5c2c7;
    background: #f8d7da;
    color: #842029;
}

html.dark .kfw-alert.primary,
html.dark .kfw-alert.success,
html.dark .kfw-alert.warning,
html.dark .kfw-alert.danger {
    background: #2b3035;
    border-color: #495057;
    color: var(--font-color);
}

.kfw-alert.primary .kfw-alert-icon {
    background: rgba(13, 110, 253, 0.15);
    color: #084298;
}

.kfw-alert.success .kfw-alert-icon {
    background: rgba(25, 135, 84, 0.15);
    color: #0f5132;
}

.kfw-alert.warning .kfw-alert-icon {
    background: rgba(255, 193, 7, 0.2);
    color: #664d03;
}

.kfw-alert.danger .kfw-alert-icon {
    background: rgba(220, 53, 69, 0.15);
    color: #842029;
}

.kfw-alert-title {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    margin-top: 0;
    margin-bottom: 4px;
}

.kfw-modal {
    background: rgba(0, 0, 0, 0.5);
}

.kfw-modal form > .card,
.kfw-modal > .card {
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: var(--global-border);
}

.popup {
    border-radius: var(--global-radius);
    border: var(--global-border);
    box-shadow: var(--container-shadow);
    background: #212529;
    color: #ffffff;
    font-size: 0.875rem;
}

.kfw-notifications-panel {
    border-left: var(--global-border);
    background: var(--background-color);
    box-shadow: var(--container-shadow);
}

.kfw-notifications-panel-headbar {
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 400;
    border-bottom: var(--global-border);
}

.kfw-notification {
    padding: 12px 16px;
    border-bottom: var(--global-border);
}

.kfw-notification.unseen {
    border-left: 3px solid var(--primary-color);
    background: rgba(13, 110, 253, 0.06);
}

.kfw-notification-date {
    font-size: 0.75rem;
    color: var(--font-color-light);
    opacity: 1;
}

.swal2-popup {
    border-radius: 0.5rem;
    border: var(--global-border);
}