.toast-container{
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  display:flex;
  flex-direction:column;
  gap:10px;

  pointer-events:none;
}

.toast{
  min-width:200px;
  max-width:320px;

  padding:12px 16px;

  border-radius:8px;

  font-size:14px;
  font-weight:500;

  color:#fff;

  opacity:0;
  transform:translateY(10px);

  transition:all .25s ease;
}

.toast.show{
  opacity:1;
  transform:translateY(0);
}

/* types */

.toast-error{
  background:#e53935;
}

.toast-success{
  background:#2e7d32;
}

.toast-warning{
  background:#f57c00;
}