/* The alert message box */
#alert {
    flex-grow: 1;
    padding: 10px 20px;
    color: white;
    border-radius: 8px;

    background-color: var(--info-color);

    &.success {
        background-color: var(--success-color);
    }
    &.danger {
        background-color: var(--danger-color);
    }
    &.warning {
        background-color: var(--warning-color);
    }

    opacity: 1;
    transition: opacity 0.6s;

    /* The close button */
    .close {
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
        &:hover {
            color: black;
        }
    }
}