/* Basic styles for the toast container and toast elements */
    .toast-container {      
      position: fixed;
      top: 10px;
      right: 10px;
      display: flex;
      flex-direction: column;
      z-index: 9999; /* Ensure toast appears above other content */
    }

    .toast {
      background-color: #ddd;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 10px;
      opacity: 0.9; 
      transition: opacity 0.3s ease-in-out; /* Smooth fade in/out animations */
    }

    .toast.success {
      background-color: lightgreen;
    }

    .toast.error {
      background-color: lightcoral;
    }

.toast:not(.show) {
    display: block !important;
}