#html-body {
  input {
    height: 55px;
    padding: 12px 16px;
    border-radius: 4px;
    border: 2px solid var(--earth-dark);
    font-family: var(--georgia);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    color: var(--earth-dark);
    opacity: 1;
  }

  input:active,
  input:focus {
    outline: none;
    box-shadow: none;
  }

  input::placeholder {
    font-family: var(--georgia);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    color: var(--earth-light);
    opacity: 0.8;
  }

    /* remove html default quantity stepper arrows */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }

  textarea {
    height: 100px;
    padding: 12px 16px;
    border-radius: 4px;
    border: 2px solid var(--earth-dark);
    font-family: var(--georgia);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    color: var(--earth-dark);
    opacity: 1;
  }

  textarea:active,
  textarea:focus {
    outline: none;
    box-shadow: none;
  }

  textarea::placeholder {
    font-family: var(--georgia);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    color: var(--earth-light);
    opacity: 0.8;
  }

    /* remove html default quantity stepper arrows */
  textarea::-webkit-outer-spin-button,
  textarea::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  select {
    height: 55px;
    padding: 12px 16px;
    border-radius: 4px;
    border: 2px solid var(--earth-dark);
    font-family: var(--georgia);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    color: var(--earth-dark);
    opacity: 1;
  }

  select:active,
  select:focus {
    outline: none;
    box-shadow: none;
  }

  label::before,
  label::after {
    color: var(--earth-dark);
  }

  input[type="checkbox"] + label::before {
    background: var(--white);
    border: 2px solid var(--green-light)
  }

  input[type="checkbox"]:checked + label:before {
    background: var(--green-light);
  }

  #checkout.checkout-container input[type="checkbox"] + label:before {
    background-color: var(--white);
  }

  #checkout.checkout-container input[type="checkbox"]:checked + label:before {
    background-image: url(../images/checkmark-white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--green-light);
  }
}