.toast-container {
      display: flex;
      flex-direction: column;
      /* Stack toasts bottom to top */
      align-items: center;
      position: fixed;
      left: 50%;
      bottom: 0;
      margin-bottom: 30px;
      transform: translateX(-50%);
      z-index: 1000;
  }

  .toast {
      visibility: hidden;
      min-width: 500px;
      margin-top: 5px;
      text-align: center;
      border-radius: 6px;
      padding: 2px;
      position: relative;
      z-index: 1;
  }

  .toast-message {
      margin: 5px;
      color: #fff;
      font-family: Arial, sans-serif;
      font-size: 16px; /* Adjust font size */
  }

  .toast-close-button {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 14px; /* Adjust font size for the button */
    padding: 2px 2px 2px 2px; /* Adjust padding to reduce button size */
    cursor: pointer; /* Makes it clear that the button is clickable */
    background: transparent; /* Adjust button background if needed */
    border: none; /* Remove default button border */
    color: #fff; /* Adjust color if needed */
  }

  /* .toast.show {
      visibility: visible;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
      animation: fadein 0.5s, fadeout 0.5s 3.5s;
  } */

  .toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
  }

  /* Success message */
  .toast.success {
      background-color: #4CAF50;
      /* Green */
  }

  /* Warning message */
  .toast.warning {
      background-color: #ff9800;
      /* Orange */
  }

  /* Error message */
  .toast.error {
      background-color: #f44336;
      /* Red */
  }

  /* Notice message */
  .toast.notice {
      background-color: #2196F3;
      /* Blue */
  }

    /* Notice message */
    .toast.event {
        background-color: #8711ba;
        /* Blue */
    }

  @-webkit-keyframes fadein {
      from {
          bottom: 0;
          opacity: 0;
      }

      to {
          bottom: 30px;
          opacity: 1;
      }
  }

  @keyframes fadein {
      from {
          bottom: 0;
          opacity: 0;
      }

      to {
          bottom: 30px;
          opacity: 1;
      }
  }

  @-webkit-keyframes fadeout {
      from {
          bottom: 30px;
          opacity: 1;
      }

      to {
          bottom: 0;
          opacity: 0;
      }
  }

  @keyframes fadeout {
      from {
          bottom: 30px;
          opacity: 1;
      }

      to {
          bottom: 0;
          opacity: 0;
      }
  }