.custom-invalid {
		border: 2px solid #e74c3c !important;
		background: #fff6f6;
	}
	.custom-valid {
		border: 2px solid #2ecc40 !important;
		background: #f6fff6;
	}
	.custom-error-message {
		color: #e74c3c;
		font-size: 1em;
		margin-top: 0.25em;
    margin-bottom: 0.25em;
		display: none;
	}

	input[type="checkbox"] + label.custom-error-message {
		color: #e74c3c;
	}
	.custom-invalid + .custom-error-message  {
		display: none;
	}

	h4.alert-success {
		margin-top: 1em;
		font-size: 1.5em;
	}

	/* Checkmark list styles */
ul.checkmark {
  /* 1. Force remove bullets and any images */
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  
  /* 2. Reset padding/margin so the checkmark has room */
  margin-left: 0;
  padding-left: 1.5em; 
}

ul.checkmark li {
  position: relative;
  margin-bottom: 0.8em;
  /* 3. Ensure no background images are acting as bullets */
  background: none !important; 
}

ul.checkmark li::before {
  content: "\2713"; 
  position: absolute;
  left: -1.2em;
  color: #27ae60;
  font-weight: bold;
}

/* The magic class for checkmark rows */
.check-item {
    position: relative;
    padding-left: 25px; /* Space for the checkmark */
    display: block;
}

.check-item::before {
    content: "\2713"; /* Unicode Checkmark */
    position: absolute;
    left: 0;
    color: #27ae60; /* Green */
    font-weight: bold;
}

/* Blinking warning text */
/* 1. Define the animation */
@keyframes slowRedBlink {
  0% { color: inherit; }    /* Start with the normal text color */
  50% { color: red; }       /* Fade to red at the midpoint */
  100% { color: inherit; }  /* Return to normal */
}

@keyframes slowGreenBlink {
  0% { color: inherit; }    /* Start with the normal text color */
  50% { color: green; }       /* Fade to green at the midpoint */
  100% { color: inherit; }  /* Return to normal */
}


p.warning-blink,
h2.warning-blink {
  animation: slowRedBlink 2s infinite; /* 2 seconds per blink, repeats forever */
}

p.gentle-blink,
span.gentle-blink {
  animation: slowGreenBlink 2s infinite; /* 2 seconds per blink, repeats forever */
}

.width-50 {
    width: 50%;
}

.bottom-vertical {
  display: flex;
  align-items: flex-end;
  height: 5em; /* or any height you need */
}

.cta {
  font-size: 1em !important;
}