
ul.errorlist {color: rgb(207, 42, 42);}

ul.errorlist li {
  padding-left: 1em;
  text-indent: -.7em;
}

ul.errorlist li::before {
  content: "• ";
  color: rgb(207, 42, 42); /* or whatever color you prefer */
}

/* REFERENCE: https://www.sitepoint.com/html5-form-validation/   */
input:invalid,

input:out-of-range {
  border-color:hsl(0, 50%, 50%);
  background:hsl(0, 50%, 90%);
}

.signup-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 18px;
}

.signup-form-row {
  margin-bottom: 0;
}

.signup-form-row label {
  display: block;
  margin-bottom: 4px;
}

.signup-form-row .field-group,
.signup-form-row .field-group input,
.signup-form-row .field-group select,
.signup-form-row .field-group textarea {
  width: 100%;
  box-sizing: border-box;
}

.signup-form-submit-row {
  margin-top: 4px;
}

@media (min-width: 768px) {
  .signup-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signup-form-row-email,
  .signup-form-row-full,
  .signup-form-submit-row {
    grid-column: 1 / -1;
  }
}
