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

  width: 100%;
  
  box-sizing: border-box;
  
  margin-top: 4px;
  margin-bottom: 4px;
}

.alert.alert-danger  { background: var(--col-alert-danger-background);  border: 1px solid var(--col-alert-danger-border);  font-weight: bold; color: var(--col-alert-danger-foreground);  }
.alert.alert-warn    { background: var(--col-alert-warn-background);    border: 1px solid var(--col-alert-warn-border);    font-weight: bold; color: var(--col-alert-warn-foreground);    }
.alert.alert-success { background: var(--col-alert-success-background); border: 1px solid var(--col-alert-success-border); font-weight: bold; color: var(--col-alert-success-foreground); }
.alert.alert-default { background: var(--col-alert-default-background); border: 1px solid var(--col-alert-default-border); font-weight: bold; color: var(--col-alert-default-foreground); }

.alert.alert-danger.animate  { animation: 1s ease-in-out 0s infinite alternate ani_alert_danger;  }
.alert.alert-warn.animate    { animation: 1s ease-in-out 0s infinite alternate ani_alert_warn;    }
.alert.alert-success.animate { animation: 1s ease-in-out 0s infinite alternate ani_alert_success; }
.alert.alert-default.animate { animation: 1s ease-in-out 0s infinite alternate ani_alert_default; }

@keyframes ani_alert_danger  { 0% { background: var(--col-alert-danger-background);  } 100% { background: var(--col-alert-danger-animate);  } }
@keyframes ani_alert_warn    { 0% { background: var(--col-alert-warn-background);    } 100% { background: var(--col-alert-warn-animate);    } }
@keyframes ani_alert_success { 0% { background: var(--col-alert-success-background); } 100% { background: var(--col-alert-success-animate); } }
@keyframes ani_alert_default { 0% { background: var(--col-alert-default-background); } 100% { background: var(--col-alert-default-animate); } }