.flash-messages {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  max-width: 400px;
  padding: 0 20px;
}

.flash {
  animation: appear-then-fade 3s 300ms both;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 0.9rem;
}

.flash-notice,
.flash-success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.flash-alert,
.flash-error {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.flash-warning {
  background-color: #fff3cd;
  border-color: #ffeaa7;
  color: #856404;
}

.flash-info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}