/* Validator message styles */
/* 	Let's not highlight in green. Lets say good fields dont need an indication of
	being "good" */
	/*
	input.parsley-success,
	select.parsley-success,
	textarea.parsley-success {
	  color: #468847 !important;
	  background-color: #DFF0D8 !important;
	  border: 1px solid #D6E9C6 !important;
	}
	*/

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48 !important;
  background-color: #F2DEDE !important;
  border: 1px solid #EED3D7 !important;
}

.parsley-errors-list {
  margin: 2px 0 10px;
  padding: 0;
  list-style-type: none;
  font-size: 13px;
  line-height: 0.9em;
  opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;

  /* limit the width of the error msgs */
  /* to preserve the alignment beside fields */
  max-width:125px;

  /* To make old aecdaily forms work as well as new ones */
  display:inline-block;

  /* ...and use the aecdaily font */
  font-family:'Archivo Narrow', sans-serif;
}

.parsley-errors-list.filled {
  opacity: 1;
}

/* a style for paragraph wrappers of
multiple inputs such as a set of radio buttons
p.parsley-error {
    color:#b94a4b;
    background-color:#f2dede;
    border:1px solid #f2dede;
} */
.error-container ul li {
    background-color: #F2DEDE !important;
    border: 1px solid #EED3D7 !important;
    padding: 8px;
}

/* left arrow for wider screens where
error message is to the right of the
field */
.parsley-errors-list li::before {
    content: " \f06a";
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
    font-size: 10px;
    color: #333;
}

p[id^="error-container-"] ul li {
    background-color: red;
    color: white;
    padding: 8px;
    width: 600px;
}