.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field--required,
.footer__form input.field--required,
.footer__form2 input.field--required,
.footer__form textarea.field--required,
input.field--required,
textarea.field--required {
  border-color: rgba(61, 184, 196, 0.72);
  box-shadow: inset 0 0 0 1px rgba(61, 184, 196, 0.18);
}

.field--required:focus,
.footer__form input.field--required:focus,
.footer__form2 input.field--required:focus {
  border-color: var(--accent, #3db8c4);
  box-shadow: 0 0 0 3px rgba(61, 184, 196, 0.25);
}

.is-invalid,
.footer__form input.is-invalid,
.footer__form2 input.is-invalid,
.footer__form textarea.is-invalid {
  border-color: #e5484d !important;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.22) !important;
}

.is-valid,
.footer__form input.is-valid,
.footer__form2 input.is-valid {
  border-color: #3db8c4 !important;
}

.field::placeholder,
textarea.field::placeholder,
.footer__form input::placeholder,
.footer__form textarea::placeholder,
.footer__form2 input::placeholder,
.footer__form2 textarea::placeholder {
  color: var(--muted-fg, #8b95a1);
  opacity: 1;
  font-size: inherit;
  font-weight: 400;
}

textarea.field,
.field--textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
  font-size: inherit;
}

.form-required-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted-fg, #8b95a1);
}

.form-required-note .req-mark {
  color: var(--accent, #3db8c4);
  font-weight: 700;
}