/* Flash message animations */
@keyframes fade-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(10px);
  }
}

.fade-out {
  animation: fade-out 0.5s ease-out forwards;
}

/* Fade in animation for new flash messages */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#flash > div {
  animation: fade-in 0.3s ease-out;
}