#alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 300px;
}

.alert-msg {
    position: relative;
    padding: 12px 16px 12px 12px;
    border-radius: 6px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    animation-duration: 0.4s;
}

.success-msg {
    background: #d4edda;
    color: #155724;
    border-left: 5px solid #28a745;
}

.error-msg {
    background: #f8d7da;
    color: #721c24;
    border-left: 5px solid #dc3545;
}

.warning-msg {
    background: #fff3cd;
    color: #856404;
    border-left: 5px solid #ffc107;
}

.info-msg {
    background: #d1ecf1;
    color: #0c5460;
    border-left: 5px solid #17a2b8;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.animate-in {
    animation: slideIn 0.4s ease-out forwards;
}

.animate-out {
    animation: slideOut 0.4s ease-in forwards;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.close-btn:hover {
  opacity: 1;
}

.success-msg .close-btn {
  color: #155724;
}

.error-msg .close-btn {
  color: #721c24;
}

.warning-msg .close-btn {
  color: #856404;
}

.info-msg .close-btn {
  color: #0c5460;
}


.alert-timer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  transition: width linear;
  animation-name: shrink;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes shrink {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.success-bar {
  background-color: #28a745;
}

.error-bar {
  background-color: #dc3545;
}

.warning-bar {
  background-color: #ffc107;
}

.info-bar {
  background-color: #17a2b8;
}