#snackbar {
  visibility: hidden;
  max-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 99999;
  right: 10px;
  top: 10px;
  font-size: 16px;
  font-family: inherit;
}

.snackbar-success {
  background-color: #4caf50 !important;
}
.snackbar-error {
  background-color: #f44336 !important;
}
.snackbar-warning {
  background-color: #f6b93b !important;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@keyframes fadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 10px;
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    top: 10px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}