/* Toast Container (fixed position for popups) */
  .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      gap: 10px;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
  }

  /* Basic Toast Styles */
  .toast {
      display: none;
      position: relative;
      min-height: 1em;
      background: #f8f8f9;
      padding: 1em 1.5em;
      line-height: 1.4285em;
      color: rgba(0, 0, 0, .87);
      transition: opacity .1s ease, color .1s ease, background .1s ease, box-shadow .1s ease;
      border-radius: .28571429rem;
  }

  /* Error Toast Style */
  .toast.error {
      background-color: #fff6f6;
      color: #9f3a38;
      box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent;
      box-shadow: 0 2px 4px 0 rgba(34, 36, 38, .12), 0 2px 10px 0 rgba(34, 36, 38, .15);
      border: 1px solid rgba(34, 36, 38, .12);
  }

  /* Success Toast Style */
  .toast.success {
      background-color: #fcfff5 !important;
      color: #2c662d !important;
      box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 transparent !important;
      border: 1px solid rgba(34, 36, 38, .12);
      box-shadow: 0 2px 4px 0 rgba(34, 36, 38, .12), 0 2px 10px 0 rgba(34, 36, 38, .15) !important;
  }

  /* Show the Toast (visible) */
  .toast.visible {
      display: block;
      opacity: 1;
      transform: translateY(0);
  }

  /* Fade Out Toast */
  .toast.hide {
      opacity: 0;
      transform: translateY(10px);
      display: none;
  }

  .toast-container .toast.visible {
      animation: slide-in 0.5s ease-out forwards;
  }

  @keyframes slide-in {
      0% {
          opacity: 0;
          transform: translateY(-30px);
      }

      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }