:root {
  :-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--field-placeholde, var(--primary-accent4));
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    opacity:  1;
    color: var(--field-placeholde, var(--primary-accent4));
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    opacity:  1;
    color: var(--field-placeholde, var(--primary-accent4));
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--field-placeholde, var(--primary-accent4));
  }
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--field-placeholde, var(--primary-accent4));
  }
  ::placeholder { /* Most modern browsers support this now. */
    color: var(--field-placeholde, var(--primary-accent4));
  }
}

.form-group {
  margin: 0;
}
.form-group[data-form-group-inline="Y"] {
  display: flex;
  column-gap: 24px;
  align-items: start;
}

.form-field {
  width: 100%;
}

.form-field .field__control:is(:focus):-webkit-input-placeholder {
  opacity: 0;
}
.form-field .field__control:is(:focus):-moz-placeholder {
  opacity: 0;
}
.form-field .field__control:is(:focus)::-moz-placeholder {
  opacity: 0;
}
.form-field .field__control:is(:focus):-ms-input-placeholder {
  opacity: 0;
}
.form-field .field__control:is(:focus)::-ms-input-placeholder {
  opacity: 0;
}
.form-field .field__control:is(:focus)::placeholder {
  opacity: 0;
}
.form-field .field__control:invalid:not(:placeholder-shown) {
  border-color: var(--field-error, var(--primary-accent2));
}
.form-field .field__control:valid:not(:placeholder-shown) {
  border-color: var(--field-error, var(--primary-accent6));
}

.form-field.field--label-inside {
  position: relative;
  z-index: 0;
}
.form-field.field--label-inside .field__label {
  z-index: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: top .3s ease, transform .3s ease;
}
.form-field.field--label-inside .field__control:is(:focus, :not(:placeholder-shown)) ~ .field__label {
  opacity: 0;
}