#toast-container {
  margin-top: 56px;
  margin-right: 14px;
}

#toast-container > .md-toast {
  --accent: #3b82f6;
  --tint: rgba(59, 130, 246, 0.14);
  --frost: rgba(255, 255, 255, 0.72);
  --text: rgba(15, 23, 42, 0.96);
  --icon: "\f0f3";

  position: relative;
  overflow: hidden;

  border-radius: 14px !important;
  padding: 12px 14px 12px 58px !important;

  background:
    linear-gradient(0deg, var(--tint), var(--tint)),
    var(--frost) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: 100% 100% !important;

  color: var(--text) !important;

  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#toast-container > .md-toast::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}

#toast-container > .md-toast::after {
  content: var(--icon);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  top: 50%;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  border-radius: 999px;

  display: grid;
  place-items: center;

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}

#toast-container > .md-toast .toast-message,
#toast-container > .md-toast .md-toast-message,
#toast-container > .md-toast .toast-title,
#toast-container > .md-toast .md-toast-title,
#toast-container > .md-toast .md-toast-icon {
  background: transparent !important;
}

#toast-container > .md-toast.md-info,
#toast-container > .md-toast.toast-info,
#toast-container > .md-toast.md-toast-info {
  --accent: #39c0ed;
  --tint: rgba(57, 192, 237, 0.14);
  --icon: "\f129";
}

#toast-container > .md-toast.md-success,
#toast-container > .md-toast.toast-success,
#toast-container > .md-toast.md-toast-success {
  --accent: #00b74a;
  --tint: rgba(0, 183, 74, 0.14);
  --icon: "\f00c";
}

#toast-container > .md-toast.md-warning,
#toast-container > .md-toast.toast-warning,
#toast-container > .md-toast.md-toast-warning {
  --accent: #ffa900;
  --tint: rgba(255, 169, 0, 0.16);
  --icon: "\f12a";
}

#toast-container > .md-toast.md-error,
#toast-container > .md-toast.toast-error,
#toast-container > .md-toast.md-toast-error {
  --accent: #f93154;
  --tint: rgba(249, 49, 84, 0.14);
  --icon: "\f00d";
}

#toast-container > .md-toast .toast-title,
#toast-container > .md-toast .md-toast-title {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin-bottom: 2px !important;
  letter-spacing: 0.1px;
}

#toast-container > .md-toast .toast-message,
#toast-container > .md-toast .md-toast-message {
  font-size: 0.93rem !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
}

#toast-container > .md-toast .toast-close-button,
#toast-container > .md-toast .md-toast-close-button {
  color: var(--text) !important;
  opacity: 0.7 !important;
  text-shadow: none !important;
}

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

#toast-container > .md-toast .toast-progress,
#toast-container > .md-toast .md-toast-progress {
  background: var(--accent) !important;
  height: 3px !important;
  opacity: 0.6 !important;
  border-radius: 999px !important;
}

@media (prefers-color-scheme: dark) {
  #toast-container > .md-toast {
    --frost: rgba(17, 24, 39, 0.72);
    --text: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
  }

  #toast-container > .md-toast::after {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  }
}