/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden;
    min-width: 277px;
    margin-left: -125px;
    background-color: #25d366;
    color: #fcfcfc;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 25%;
    bottom: 120px;
    /* border: 1px solid black; */
    left: 57%;
    font-size: 18px;
    width: 0px;
    border-radius: 11px;
}


#snackbarError {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: orange;
    color: black;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 120px;
    border: 1px solid black;
    left: 57%;
    font-size: 18px;
}


/* Show the snackbar when clicking on a button (class added with JavaScript) */
.show {
    visibility: visible !important;
    /* Show the snackbar */

    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.6s, fadeout 0.6s 4.5s;
    animation: fadein 0.6s, fadeout 0.6s 4.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 120px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 120px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 120px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 120px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}