#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 0px; /* Rounded borders */
    padding: 12px; /* Padding */
    position: absolute; /* Sit on top of the screen */
    z-index: 100; /* Add a z-index if needed */
    width: 100%;
    margin: 0 auto;
    top: 0px;
    left: 0px;
    right: 0px;
    font-family: Avenir-Light;
}

#snackbar.welcome {
   visibility: hidden;
   min-width: 50px;
   background-color: #66318c;
   color: #fff;
   text-align: center;
   border-radius: 0px 0px 10px 10px;
   padding: 12px;
   position: fixed;
   z-index: 100;
   width: 100%;
   margin: 0 auto;
   top: 0px;
   left: 0px;
   right: 0px;
   max-width: 300px !important;
   position: absolute;
   font-family: Avenir-Medium;
   /*font-size: 15px;*/
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #snackbar.show {
        visibility: visible; /* 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.3s, fadeout 0.3s 2.7s;
        animation: fadein 0.3s, fadeout 0.3s 2.7s;
    }

body.dimmed #snackbar {
    top: 0px !important;
    left: 0px;
    right: 0px;
    width: 100%;
    margin: 0 auto;
    z-index: 9; /* Add a z-index if needed */
}

    body.dimmed #snackbar.show {
        visibility: visible;
        -webkit-animation: fadeindimmed 0.3s, fadeoutdimmed 0.3s 2.7s !important;
        animation: fadeindimmed 0.3s, fadeoutdimmed 0.3s 2.7s !important;
    }
    
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        top: -48px;
        opacity: 1;
    }

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

@keyframes fadein {
    from {
        top: -48px;
        opacity: 1;
    }

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

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

    to {
        top: -48px;
        opacity: 10;
    }
}

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

    to {
        top: -48px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeindimmed {
    from {
        top: 0px;
        opacity: 1;
    }

    to {
        top: -48px;
        opacity: 1;
    }
}

@keyframes fadeindimmed {
    from {
        top: 0px;
        opacity: 1;
    }

    to {
        top: -48px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeoutdimmed {
    from {
        top: 0px;
        opacity: 1;
    }

    to {
        top: -48px;
        opacity: 1;
    }
}

@keyframes fadeoutdimmed {
    from {
        top: 0px;
        opacity: 1;
    }

    to {
        top: -48px;
        opacity: 1;
    }
}