/* Notification container styling */
#notification-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 300;
}

/* Individual notification styling */
.notification {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s, transform 0.3s;
}

.notification.show {
  opacity: 1;
  transform: translateY(0);
}

.notification .btn-close {
  margin-left: auto; /* Always position the button to the far right */
  flex-shrink: 0; /* Prevent it from shrinking */
}

.notification.success {
  background-color: rgba(212, 237, 218, 0.5); /* 50% faded green */
  color: #155724; /* Dark green for text */
  border: none; /* Remove any border */
}

.notification.error {
  background-color: rgba(248, 215, 218, 0.5); /* 50% faded red */
  color: #721c24; /* Dark red for text */
  border: none; /* Remove any border */
}

.notification.info {
  background-color: rgba(209, 236, 241, 0.5); /* 50% faded blue */
  color: #0c5460; /* Dark blue for text */
  border: none; /* Remove any border */
}

.notification.warning {
  background-color: rgba(255, 243, 205, 0.5); /* 50% faded yellow */
  color: #856404; /* Dark yellow-brown for text */
  border: none; /* Remove any border */
}