@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

.ct-alert-message {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.alert-message {
  width: 400px;
  display: flex;
  gap: 10px;  
  align-items: center;
  justify-content: left;
  font-size: 1em;
  font-weight: bold;
  text-align: left;
  font-family: 'Quicksand', sans-serif;
  padding: 15px;  
  background-color: #fff;
  color: #000;      
  border-left: 7px solid transparent;  
  transform: translateX(100%); 
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* overflow: hidden;              */
  /* text-overflow: ellipsis;      
  white-space: nowrap;     */
}

.alert-message.slide-in {
  transform: translateX(0);
}

.alert-message.slide-out {
  transform: translateX(100%); 
  opacity: 0; 
}

.alert-message i {
  font-size: 1.5em;
}

.message-success {
  background-color: #d4edda;
  color: #155724;
  border-color: #28a745;
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.message-warning {
  background-color: #fff3cd;
  color: #856404;
  border-color:  #ffc107;
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.message-error {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #dc3545;
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.message-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border-color: #17a2b8;
  box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
}