#toast-container {
  z-index: 10080 !important;
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  display: grid !important;
  gap: 10px !important;
  pointer-events: none;
}

#toast-container > .toast {
  position: relative !important;
  width: min(340px, calc(100vw - 32px)) !important;
  min-height: 0 !important;
  padding: 12px 14px 12px 44px !important;
  border-radius: 8px !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: 14px 50% !important;
  background-size: 18px 18px !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22) !important;
  color: #ffffff !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
  line-height: 1.35 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: auto;
  animation: cp-toast-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

#toast-container > .toast::before {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

#toast-container > .toast-success {
  background-color: var(--layout-primary, #015C4B) !important;
  border: 1px solid rgba(4, 228, 123, 0.28) !important;
}

#toast-container > .toast-success::before {
  content: "\2713";
}

#toast-container > .toast-error {
  background-color: var(--layout-danger, #b91c1c) !important;
  border: 1px solid rgba(254, 202, 202, 0.3) !important;
}

#toast-container > .toast-error::before {
  content: "!";
}

#toast-container > .toast-warning {
  background-color: var(--layout-warning, #b45309) !important;
  border: 1px solid rgba(253, 230, 138, 0.36) !important;
}

#toast-container > .toast-warning::before {
  content: "!";
}

#toast-container > .toast-info {
  background-color: var(--layout-primary, #015C4B) !important;
  border: 1px solid rgba(4, 228, 123, 0.22) !important;
}

#toast-container > .toast-info::before {
  content: "i";
}

#toast-container > .toast:hover {
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.26) !important;
}

#toast-container > .toast.toast--closing {
  animation: cp-toast-out 0.16s ease-in both !important;
}

#toast-container > .toast .toast-title {
  margin-bottom: 2px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#toast-container > .toast .toast-message {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

#toast-container > .toast .toast-close-button {
  color: #ffffff !important;
  opacity: 0.75 !important;
  text-shadow: none !important;
}

#toast-container > .toast .toast-close-button:hover {
  opacity: 1 !important;
}

#toast-container > .toast .toast-progress,
#toast-container > .toast-progress {
  height: 3px !important;
  background: rgba(255, 255, 255, 0.52) !important;
  opacity: 1 !important;
}

@keyframes cp-toast-in {
  from {
    opacity: 0;
    transform: translateX(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes cp-toast-out {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(14px) scale(0.98);
  }
}

@media (max-width: 640px) {
  #toast-container {
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
  }

  #toast-container > .toast {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #toast-container > .toast,
  #toast-container > .toast.toast--closing {
    animation: none !important;
  }
}