/* Alert Styles */
.alert {
  padding: 15px;
  border: 2px solid transparent; /* Border color changes based on alert type */
  border-radius: 4px;
  position: fixed;
  top: 100px;
  right: 50px;
  background-color: #ffffff; /* White background */
  color: #000000; /* Text color */
  font-size: 16px;
  width: 80%;
  max-width: 400px;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

@keyframes slide-in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.alert {
  animation: slide-in 0.5s ease-out;
}

.alert .close {
  animation: slide-in 0.5s ease-out; /* Close button animation on alert show */
}

.alert .close.clicked {
  animation: slide-out 0.5s ease-out forwards; /* Close button animation when clicked */
}






/* Close Button */
.alert .close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  color: inherit;
  cursor: pointer;
}

.alert .close:hover {
  color: #000;
}

/* Alert Types with respective border colors */
.alert-primary {
  border-color: #1D62F0; /* Blue border */
  color: #1D62F0; /* Blue text color */
}

.alert-info {
  border-color: #23CCEF; /* Light blue border */
  color: #23CCEF; /* Light blue text color */
}

.alert-success {
  border-color: #59d05d; /* Green border */
  color: #59d05d; /* Green text color */
}

.alert-warning {
  border-color: #fbad4c; /* Orange border */
  color: #fbad4c; /* Orange text color */
}

.alert-danger {
  border-color: #ff646d; /* Red border */
  color: #ff646d; /* Red text color */
}