#snackbar1, #snackbar2, #snackbar3 {
    visibility: hidden; /* Hidden by default. Visible on 'show' */
    min-width: 250px;
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #e5e5e5; /* Black background color */
    color: black; /* White text color */
    text-align: center;
    padding: 16px;
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    top: 40px;
    border: #2389F7 solid 1px;
    border-radius: 6px;
    background-color: #e5e5e5;
    box-shadow: 0 0 2px #2389F7;
}

#snackbar1.show, #snackbar2.show, #snackbar3.show {
    visibility: visible;
    -webkit-animation: fadein 0.7s, fadeout 0.3s 2.2s;
    animation: fadein 0.7s, fadeout 0.3s 2.2s;
}

#snackbar1.hide, #snackbar2.hide, #snackbar3.hide {
    visibility: hidden;
}

@-webkit-keyframes fadein {
    from {top: 0; opacity: 0;} 
    to {top: 40px; opacity: 1;}
}

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

@-webkit-keyframes fadeout {
    from {top: 40px; opacity: 1;} 
    to {top: 0; opacity: 0;}
}

@keyframes fadeout {
    from {top: 40px; opacity: 1;}
    to {top: 0; opacity: 0;}
}