.alert {
    text-align: center;
    align-self: center;
    padding: 0 1rem;

    width: 30rem;
    box-sizing: border-box;
}

.alert.alert-leftalign {
    text-align: left;
}

.alert.alert-full-length {
    align-self: stretch;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    width: unset;
}

.cardcontent .alert {
    align-self: stretch;
    margin-left: unset;
    margin-right: unset;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    width: unset;
}

/** ----------------------------------- **/

.alert.alert-danger {
    background: var(--col-red-full);
    border: 1px solid #F00;
    font-weight: bold;
    color: #400;
}

.alert.alert-success {
    background:  var(--col-green2-full);
    border: 1px solid #0F0;
    font-weight: bold;
    color: #040;
}

.alert.alert-warn {
    background:  var(--col-orange-full);
    border: 1px solid #F44;
    font-weight: bold;
    color: #333;
}

.alert.alert-unknown {
    background:  var(--col-blue-full);
    border: 1px solid #00F;
    font-weight: bold;
    color: #000;
}