.toastify {
  overflow: hidden;
}

.warning-toast,
.success-toast,
.danger-toast,
.info-toast {
  background: #fff;
  color: #000;
  font-weight: 500;
  font-size: 15px;
  line-height: 29px;
  max-width: 343px;
  padding: 14px;
  border-radius: 0.3rem;
  font-family: system-ui, auto;
  display: flex;
  flex-direction: row;
}

/* .info-toast::after,
.warning-toast::after,
.success-toast::after,
.danger-toast::after {
  content: "";
  display: block;
  position: absolute;
  height: 114%;
  right: 12px;
  width: 6px;
  top: -5px;

  background: red;
  margin-right: -12px;
  margin-top: -3px; */
  /* animation: animFw 8s linear; */
  /* animation-name: animFw;
  animation-duration: var(--toat-duration);
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
} */

/* .info-toast::after,
.warning-toast::after{
  background: grey;
}

.success-toast::after {
  background: green;
} */

.toast-time-left-manifest {
  position: absolute;
  width: 0.3rem;
  height: 100%;
  background: linear-gradient(180deg,#D1F8EF,#A1E3F9,#578FCA,#3674B5);
  right: 0;
  top: 0;

  /* animation-name: animFw; */
  /* animation: animFw var(--toat-duration) linear; */
  /* animation-duration: var(--toat-duration);
  animation-timing-function: linear; */
  /* animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards; */
}

.info-toast .toast-time-left-manifest,
.warning-toast .toast-time-left-manifest{
  background: grey;
}

.success-toast .toast-time-left-manifest {
  background: linear-gradient(180deg, #B0DB9C, #CAE8BD, #DDF6D2, #ECFAE5);
}

.danger-toast .toast-time-left-manifest {
  background: red;
}

.warning-toast .toast-time-left-manifest {
  background: linear-gradient(180deg, #FEF3E2,#FEF3E2,#FFB22C,#FA812F);
}


@keyframes animFw {
  0% {
    height: 100%;
  }
  100% {
    height: 0%;
  }
}