Untitled

// Disable autofill styles
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset;
}
// Helper hide class
.always-hidden {
  display: none;
}

.jotform-container {
  max-width: calc(780px - 30px);
}

.form-section li {
  margin-bottom: 25px;
}

// List item
.form-line,
.form-line-split-col {
  position: relative;
  gap: 20px;

  .form-line-split-col {
    display: flex;
    gap: 10px;
    width: 48%;

    span {
      display: inline-block;
      flex: 1;
      &:nth-child(3) {
        flex: 2;
      }
    }
  }

  select {
    height: 50px;
  }
  div > span,
  span,
  div {
    position: relative;
    flex: 1;
  }
  .form-line-input {
    position: relative;
    min-width: 100%;
    max-width: 100%;
    padding: 15.25px;
    line-height: 1;
    border: 1px #797868 solid;
    border-radius: 4px;

    @media (min-width: 768px) {
      padding: 12px 11px 12px 11px;
    }

    &::placeholder {
      font-size: 12px;
      @media (min-width: 768px) {
        font-size: 15px;
      }
      @media (min-width: 980px) {
        font-size: 16px;
      }
    }
  }

  label {
    position: absolute;
    left: 15.25px;
    top: -7px;
    font-size: 10px;
    background: #fff;
    padding: 0 4px;
    white-space: nowrap;
    @media (min-width: 768px) {
      font-size: 8px;
      left: 8px;
      top: -6px;
    }
    @media (min-width: 980px) {
      font-size: 10px;
      left: 8px;
    }
  }
}

// Error message container
.form-error-message {
  @media (min-width: 768px) {
    display: none;
  }

  & span {
    font-size: 10px;
    white-space: nowrap;
  }
}