/*----------------------- Toast message -----------------------*/
#toast-message-container {
    visibility: hidden;
    position: fixed;
    width: 300px;
    margin: 0 auto; /* Only centers horizontally not vertically! */
    left: 0;
    right: 0;
    z-index: 0;
    top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

#message-container {
    width: 100%;
    text-align: center;
    border-radius: 5px;
    padding: 16px;
}

    #message-container.success {
        background-color: #2ecc71;
        color: #fff;
    }

    #message-container.error {
        background-color: #e14d45;
        color: #fff;
    }

    #message-container.warning {
        background-color: #ed991d;
        color: #fff;
    }

    #message-container.information {
        background-color: #333;
        color: #fff;
    }

#toast-message-container.show {
    visibility: visible;
    -webkit-animation: toastFadein 0.5s, toastFadeout 0.5s 4.5s;
    animation: toastFadein 0.5s, toastFadeout 0.5s 4.5s;
}

@-webkit-keyframes toastFadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        top: 80px;
        opacity: 1;
    }
}

@keyframes toastFadein {
    from {
        top: 0;
        opacity: 0;
    }

    to {
        top: 80px;
        opacity: 1;
    }
}

@-webkit-keyframes toastFadeout {
    from {
        top: 80px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}

@keyframes toastFadeout {
    from {
        top: 80px;
        opacity: 1;
    }

    to {
        top: 0;
        opacity: 0;
    }
}