div.message-ribbon {
    color: #ffffff;
    background-color: #5871ad;
    background: linear-gradient(to right, #5871ad, #82A8FF);
}

#alerts {
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ALERT START */
#alerts {
  z-index: 98;
}

.alert {
  opacity: .85;
  display: grid;
  grid-template-columns: 1fr 50px;
  grid-gap: 10px;
}

.alert-message {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.alert .close {
  text-align: right;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 15px;
}

.alert-danger, .alert-error {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-info, .alert-notice {
    color: #0c5460;
    background-color: #98b6fa;
    border-color: #bee5eb;
}

.alert-success {
    color: #155724;
    background-color: #a3c765;
    border-color: #c3e6cb;
}

/* ALERT END */