.ul-user-alerts {
  margin-bottom: 20px;
}

.ul-user-alert-wrapper {
  position: relative;
  padding: 15px 40px 15px 15px;
  margin-bottom: 10px;
  /* Removed full border, added LHS border */
  border-left: 5px solid transparent;
  background-color: #fff; /* Fallback */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: none; /* Hide by default to prevent FOUC */
  margin-top:20px;
}

.ul-user-alert-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  border: none;
  font-size: 20px;
  width: 30px;
  height: 30px;
  line-height: 1; /* Reset line-height to center properly if needed, or use flex */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.9;
  transition: background-color 0.2s;
}

.ul-user-alert-close:hover,
.ul-user-alert-close:focus {
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* Severities */
/* Use background colors and set border-color to a darker shade */

.ul-user-alert-severity--status {
  color: #155724;
  background-color: #d4edda;
  border-left-color: #155724; /* Darker green */
}

.ul-user-alert-severity--warning {
  color: #856404;
  background-color: #fff3cd;
  border-left-color: #856404; /* Darker yellow/brown */
}

.ul-user-alert-severity--error {
  color: #721c24;
  background-color: #f8d7da;
  border-left-color: #721c24; /* Darker red */
}

.ul-user-alert-severity--update {
  color: #0c5460;
  background-color: #d1ecf1;
  border-left-color: #0c5460; /* Darker teal */
}

.ul-user-alert-severity--funny {
  color: #c2185b;
  background-color: #f8bbd0;
  border-left-color: #c2185b; /* Darker pink */
  font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
}