.toast {
  position: fixed;
  bottom: var(--space-7);
  left: 50%;
  transform: translateX(-50%) translateY(var(--space-20));
  width: 21.1rem;
  height: auto;
  background: white;
  border-radius: var(--space-4);
  box-shadow: 0px var(--space-1) var(--space-5) 0px rgba(61, 72, 84, 0.25), 0px var(--space-10) var(--space-11) 0px rgba(153, 171, 202, 0.55);
  display: flex;
  align-items: center;
  padding-left: var(--space-4);
  padding-bottom: var(--space-2);
  opacity: 0;
  pointer-events: none;
  animation: none;
  z-index: 9999;
  overflow: hidden;
}

.toast.show {
  opacity: 1;
  pointer-events: auto;
  animation: slideUp 0.5s ease-out forwards, fadeOut 0.5s ease-in 7s forwards;
}

.toast-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 2.3rem;
  min-height: 2.3rem;
  background-color: var(--color-dark-gray);
  border-radius: var(--space-2);
  margin-right: var(--space-5);
}

.toast-icon-img {
  width: 0.9rem;
  height: 0.9rem;
}

.toast-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.toast-title {
  font-weight: 700;
  font-size: var(--fs-base);
  margin-bottom: 0.1rem;
  color: var(--color-dark-gray);
}

.toast-text {
  font-size: var(--fs-xs);
  color: var(--color-light-gray)
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.3rem;
  background-color: var(--color-blue);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  animation: none;
}

.toast-progress-error {
  background-color: var(--color-red);
}

.toast-icon-error {
  background-color: var(--color-red) !important;
}


@media(min-width: 1325px) {
  .toast {
    left: auto;
    right: calc((100vw - 82.8rem) / 2 + var(--space-7)) !important;
    /*display notification in 'container'*/
    top: var(--space-18);
    bottom: auto;
    transform: none !important;
    margin: 0;
  }
}

@media(min-width: 768px) {
  .toast {
    width: 26.3rem;
    height: 5.9rem;
    border-radius: var(--space-7);
    left: auto;
    right: var(--space-3);
    top: var(--space-18);
    bottom: auto;
    transform: none !important;
    margin: 0;
    padding: var(--space-5);
  }

  .toast-icon {
    min-width: 3.8rem;
    min-height: 3.8rem;
    background-color: var(--color-dark-gray);
    border-radius: var(--space-5);
    margin-right: var(--space-5);
  }

  .toast-icon-img {
    width: 1.5rem;
    height: 1.5rem;
  }

  .toast-title {
    font-weight: 500;
    font-size: var(--fs-2xl);
  }

  .toast-text {
    font-size: var(--fs-base);
  }
}

@keyframes slideUp {
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--space-20));
  }
}

@keyframes progressBar {
  to {
    transform: scaleX(1);
  }
}

@keyframes fadeInDesktop {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOutDesktop {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}