input,
label {
  font-family: var(--font-family-interface);
}

label {
  color: var(--color-black);
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-bold);
  line-height: 180%;
}

input,
textarea {
  max-width: 100%;
  padding: 6px 15px;
  border: 1px solid var(--color-border);
  font-size: var(--font-size-body-small);
}

input[type=text],
input[type=password],
input[type=date],
input[type=email],
input[type=number] {
  border-color: var(--color-border);
  color: var(--color-slate);
  font-family: var(--font-family-serif);
  -webkit-font-feature-settings: "pnum" on, "lnum" on;
          font-feature-settings: "pnum" on, "lnum" on;
  font-size: var(--font-size-body);
  line-height: 180%;
  height: auto;
  min-height: 45px;
}

input[type=file] {
  height: inherit;
}

input[type=checkbox] {
  height: auto;
}

input[type=submit],
input[type=submit].button {
  margin: 0;
  text-transform: uppercase;
}

input[type=checkbox] + label,
input[type=radio] + label {
  display: inline;
  grid-column: 1;
  left: auto;
  margin: calc((1em - var(--option-input-size)) / var(--option-line-height)) 0 0;
  position: static;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #fff;
  background-image: url("/themes/custom/oef/images/teal_arrow_down.svg");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-color: var(--color-border);
  border-radius: 0;
  border-style: solid;
  color: var(--color-slate);
  font-family: var(--font-family-serif);
  -webkit-font-feature-settings: "pnum" on, "lnum" on;
          font-feature-settings: "pnum" on, "lnum" on;
  font-size: var(--font-size-body);
  line-height: 180%;
  font-size: var(--font-size-body-small);
  min-height: 45px;
  padding: 6px 42px 6px 15px;
  text-indent: 0.01px;
  text-overflow: "";
}

/* Remove default IE arrow */

select::-ms-expand {
  display: none;
}

/*
*
* Form Styles
*
* Classes to support form elements
*
*/

/* Form Item Wrapper */

.form-item {
  margin-top: 1em;
}

form > * + * {
  margin-top: 0;
}

.form-item > * + * {
  margin-top: 0;
}

.form-item + .form-item {
  margin-top: 0;
}