.secondary {
    display: inline-block;
    font-size: 10px;
    font-style: italic;
    font-weight: 300;
    opacity: 0.7;
    margin-left: 5px
}

#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin: 0 auto;
  background-color: rgb(0, 0, 0); /* The Fallback */
  background-color: rgba(0, 0, 0, 0.7); /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 5px; /* Rounded borders */
  font-weight: 700;
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 0;
  right: 0;
  top: 100px; /* 100px from the top */
}

#snackbar.show {
visibility: visible;
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    -moz-animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

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

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

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

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