.card,
.modal {
    margin-bottom: var(--card-margin-bottom, var(--space-decent));
    border: 3px solid var(--card-body-background);
    border-radius: 3px;
}

.card-head,
.modal-head {
    padding: var(--card-padding);
    background: var(--card-head-background);
}

.card-body,
.modal-body {
    padding: var(--card-padding);
    background: var(--card-body-background);
}
.card-body:not(:first-child),
.modal-body:not(:first-child) {
    /*border-top : 1px solid var(--card-border-color);*/
}
.card-body:not(:last-child),
.modal-body:not(:last-child) {
    /*border-bottom : 1px solid var(--card-border-color);*/
}
.card-body + .card-body,
.modal-body + .card-body {
    border-top: 0;
}

.card-body-group > .card-body:first-child {
    border-top: 1px solid var(--card-border-color);
}

.card-footer,
.modal-footer {
    padding: var(--card-padding);
    background: var(--card-head-background);
}

.modal-footer-actions {
    display: flex;
}

.card.card-info {
    border-color: var(--alert-info-border-color);
}
.card.card-info .card-body, 
.card.card-info .card-head {
    color: var(--alert-info-color);
    background-color: var(--alert-info-background-color);
}
.card.card-info h4, .card.card-info h3, .card.card-info h2, .card.card-info h1 {
    color: var(--text-info-color);
}

.card.card-warning {
    border-color: var(--alert-border-color);
}
.card.card-warning .card-body, 
.card.card-warning .card-head {
    color: var(--alert-color);
    border-color: var(--alert-warning-border-color);
    background-color: var(--alert-warning-background-color);
}
.card.card-warning h4, .card.card-warning h3, .card.card-warning h2, .card.card-warning h1 {
    color: var(--text-warning-color);
}

.card.card-success {
    border-color: var(--alert-success-border-color);
}
.card.card-success .card-body, 
.card.card-success .card-head {
    color: var(--alert-success-color);
    border-color: var(--alert-success-border-color);
    background-color: var(--alert-success-background-color);
}
.card.card-success h4, .card.card-success h3, .card.card-success h2, .card.card-success h1 {
    color: var(--text-success-color);
}

.card.card-error {
    border-color: var(--alert-error-border-color);
}
.card.card-error .card-body, 
.card.card-error .card-head {
    color: var(--text-error-color);
    border-color: var(--alert-error-border-color);
    background-color: var(--alert-error-background-color);
}
.card.card-error h4, .card.card-error h3, .card.card-error h2, .card.card-error h1 {
    color: var(--text-error-color);
}

@media (max-width: 640px), (max-width: 834px) and (orientation: portrait) {
    .layout-root .modal-footer-actions {
        flex-direction: row-reverse;
    }
}