/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden;          /* Hidden by default. Visible on click */
  min-width: 560px;            /* Set a default minimum width */
  max-width: fit-content;      /* Content should fit */
  margin-inline: auto;         /* Margin */
  background-color: #004990; /* Blue background color */
  color: #fff;               /* White text color */
  text-align: center;          /* Centered text */
  border-radius: 4px;          /* Rounded borders */
  padding: 16px;               /* Padding */
  position: fixed;             /* Sit on top of the screen */
  z-index: 9999;               /* Add a z-index if needed */
  left: calc(50% - 280px);     /* Center the snackbar */
  top: 66%;                    /* 65% from the top */
}


/* 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 the snackbar. */
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

/* Animations to fade the snackbar in */
@-webkit-keyframes fadein {
  from { top: 0; opacity: 0; }
  to { top: 66%; opacity: 1; }
}

@keyframes fadein {
  from { top: 0; opacity: 0; }
  to { top: 66%; opacity: 1; }
}