@keyframes alert-appear {
    0% {
        margin-top: -100px;
        opacity: 0.5;
    }
    100% {
    }
}
@keyframes message-hide {
    0% {
    }
    100% {
        margin-top: -80px;
        opacity: 0;
    }
}
html, body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
.close {
    font-size: 32px;
    text-decoration: none;
    font-weight: 700;
    color: #000000;
}
.close-info { color: #0DB6D8; }
.close-success { color: #198754; }
.close-warning { color: #E5A606; }
.close-error { color: #DC3545; }

.close-info:hover { color: #00A2C8; }
.close-success:hover { color: #005F2C; }
.close-warning:hover { color: #CC9306; }
.close-error:hover { color: #B40D1D; }

#message {
    z-index: 4000;
}
#message dl {
    flex-direction: column;
    width: 80%;
}

.messages {
    animation: alert-appear 1s;
    margin-top: 20px;
}
.alert {
    outline: 3px solid #000000;
    background-color: #FFFFFF;
    color: #000000;
}
.alert-info {
    background-color: #D1ECF1;
    outline-color: #0DCAF0;
    color: #0DB6D8;
}
.alert-success {
    background-color: #D4EDDA;
    outline-color: #198754;
    color: #005F2C;
}
.alert-warning {
    background-color: #FFF3CD;
    outline-color: #FFC107;
    color: #CC9306;
}
.alert-error {
    background-color: #F8D7DA;
    outline-color: #DC3545;
    color: #B40D1D;
}