.toast-container {
  position: fixed;
  /**POSITION**/
  top: 20px;
  right: 20px;
  /************/
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  /**THEME**/
  /*  background e color serão adicionados através da classe escolhida colocando a respectiva toast-light ou toast-dark no javascript */
  background-color: #fff;
  color: #333;
  /************/
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
}

.toast.show {
  opacity: 1;
}

.close-icon {
  margin-left: 10px;
  cursor: pointer;
}

.progress-bar {
  height: 5px;
  width: 100%;
  /**TYPE**/
  /*  background será adicionado através da classe escolhida colocando a respectiva progress bar no javascript */
  /* background: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55); */
  /************/
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width 0.1s linear;
}

/* THEME */
.toast-light {
  background-color: #fff;
  color: #333;
}
.toast-dark {
  background-color: #333;
  color: #fff;
}

/* TYPE */
.progress-bar-success {
  background-color: #4caf50;
}
.progress-bar-info {
  background-color: #2196f3;
}
.progress-bar-error {
  background-color: #f44336;
}
.progress-bar-warning {
  background-color: #ff9800;
}
.progress-bar-default {
  background: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
}

/* POSITION */
.toast-container-top-left {
  top: 20px;
  left: 20px;
}
.toast-container-top-right {
  top: 20px;
  right: 20px;
}
.toast-container-bottom-left {
  bottom: 20px;
  left: 20px;
}
.toast-container-bottom-right {
  bottom: 20px;
  right: 20px;  
}

/* ANIMATION */
/* BOUNCE */
/* @keyframes bounce-in {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.toast.bounce {
  animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
} */

@keyframes bounce-all {
  from,
  60%,
  75%,
  90%,
  to {
  }
  from {
    opacity: 0;
    transform: translate3d(500px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

.toast.bounce {
  animation: bounce-all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* SLIDE */
@keyframes slide-in {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast.slide {
  animation: slide-in 0.2s ease-out;
}

/* ZOOM */
@keyframes zoom-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.toast.zoom {
  animation: zoom-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* FLIP */
@keyframes flip-in {
  0% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0);
    opacity: 1;
  }
}

.toast.flip {
  animation: flip-in 0.5s ease-in-out;
}