Sample Question Stream HTML

<!-- ONLY RENDERED IF THERE IS AN ERROR AFTER SUBMITTING -->
<div id="fairing__error-notice" class="notice notice--error fairing__error-notice" role="alert">
  Invalid answer
</div>

<form action="https://app.fairing.co/api/customer_questions?k=YOURKEY" class="content-box__row fairing__survey" method="post">

  <h2 class="os-step__title fairing-survey__title" id="fairing-question-prompt">
    Single response question prompt
  </h2>

  <p class="os-step__description fairing__question-description">
    Question description
  </p>

  <div class="os-step__description fairing__responses">
    <div aria-labelledby="fairing-question-prompt" role="radiogroup">
      <input id="customer_question_available_responses_9" name="customer_question[available_responses][]" type="hidden" value="Option 1">
      <input id="customer_question_response_positions_9" name="customer_question[response_positions][9]" type="hidden" value="0">
      <div class="fairing__response">
        <input class="input-radio fairing__radio-control fairing__control" data-enquire-response="Option 1" id="customer_question_responses_9" name="customer_question[responses][]" type="radio" value="9">
        <label class="fairing__response-label" for="customer_question_responses_9">Option 1</label>
      </div>

      <input id="customer_question_available_responses_13" name="customer_question[available_responses][]" type="hidden" value="Option 2">
      <input id="customer_question_response_positions_13" name="customer_question[response_positions][13]" type="hidden" value="1">
      <div class="fairing__response">
        <input class="input-radio fairing__radio-control fairing__control" data-enquire-response="Option 2" id="customer_question_responses_13" name="customer_question[responses][]" type="radio" value="13">
        <label class="fairing__response-label" for="customer_question_responses_13">Option 2</label>
      </div>

      <input id="customer_question_available_responses_15" name="customer_question[available_responses][]" type="hidden" value="Option 3">
      <input id="customer_question_response_positions_15" name="customer_question[response_positions][15]" type="hidden" value="2">
      <div class="fairing__response">
        <input class="input-radio fairing__radio-control fairing__control" data-enquire-response="Option 3" id="customer_question_responses_15" name="customer_question[responses][]" type="radio" value="15">
        <label class="fairing__response-label" for="customer_question_responses_15">Option 3</label>
      </div>

      <div class="">
        <div class="fairing__response">
          <input aria-label="Enter Other" class="input-radio fairing__radio-control fairing__control" data-enquire-response-other-control="" id="customer_question_response_other" name="customer_question[responses][]" type="radio" value="other">

          <div class="fairing__other-response-wrapper">
            <input class="field__input fairing__other-response has-placeholder" data-enquire-response-other-text="" id="customer_question_other_text" name="customer_question[other_text]" placeholder="Other" type="text" value="">
            <label class="fairing__other-response__label" for="customer_question_other_text">Other</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="os-step__description fairing__survey-actions">
    <button class="btn btn--subdued btn--size-small fairing__action fairing__action--submit" type="submit">
      <span class="btn__content fairing__action-content">
        Submit
      </span>
    </button>
  </div>
</form>

<!-- MULTI RESPONSE QUESTION -->

<!-- ONLY RENDERED IF THERE IS AN ERROR AFTER SUBMITTING -->
<div id="fairing__error-notice" class="notice notice--error fairing__error-notice" role="alert">
  Invalid answer
</div>

<form class="content-box__row enquire__survey fairing__survey" method="post">
  <h2 class="os-step__title enquire-survey__title fairing-survey__title" id="fairing-question-prompt">
    Multi Response question prompt
  </h2>

  <p class="os-step__description fairing__question-description">
    Multi response question description
  </p>

  <div class="os-step__description fairing__responses">
    <div aria-labelledby="fairing-question-prompt" role="group">
      <input id="customer_question_available_responses_58037" name="customer_question[available_responses][]" type="hidden" value="Watermelon">
      <input id="customer_question_response_positions_58037" name="customer_question[response_positions][58037]" type="hidden" value="0">
      <div class="enquire__response fairing__response">
        <input name="customer_question[responses][]" type="hidden" value=""><input class="input-checkbox enquire__checkbox-control fairing__checkbox-control fairing__control" data-enquire-response="Watermelon" id="customer_question_responses_58037" name="customer_question[responses][]" type="checkbox" value="58037">
        <label class="enquire__response-label fairing__response-label" for="customer_question_responses_58037">Watermelon</label>
      </div>

      <input id="customer_question_available_responses_58035" name="customer_question[available_responses][]" type="hidden" value="Banana">
      <input id="customer_question_response_positions_58035" name="customer_question[response_positions][58035]" type="hidden" value="1">
      <div class="enquire__response fairing__response">
        <input name="customer_question[responses][]" type="hidden" value=""><input class="input-checkbox enquire__checkbox-control fairing__checkbox-control fairing__control" data-enquire-response="Banana" id="customer_question_responses_58035" name="customer_question[responses][]" type="checkbox" value="58035">
        <label class="enquire__response-label fairing__response-label" for="customer_question_responses_58035">Banana</label>
      </div>

      <input id="customer_question_available_responses_58036" name="customer_question[available_responses][]" type="hidden" value="Apple">
      <input id="customer_question_response_positions_58036" name="customer_question[response_positions][58036]" type="hidden" value="2">
      <div class="enquire__response fairing__response">
        <input name="customer_question[responses][]" type="hidden" value=""><input class="input-checkbox enquire__checkbox-control fairing__checkbox-control fairing__control" data-enquire-response="Apple" id="customer_question_responses_58036" name="customer_question[responses][]" type="checkbox" value="58036">
        <label class="enquire__response-label fairing__response-label" for="customer_question_responses_58036">Apple</label>
      </div>

      <div class="">
        <div class="fairing__response">
          <input name="customer_question[responses][]" type="hidden" value=""><input aria-label="Enter Other" class="input-checkbox enquire__checkbox-control fairing__checkbox-control fairing__control" data-enquire-response-other-control="" id="customer_question_response_other" name="customer_question[responses][]" type="checkbox" value="other">

          <div class="fairing__other-response-wrapper">
            <input class="field__input enquire__other-response fairing__other-response has-placeholder" data-enquire-response-other-text="" id="customer_question_other_text" name="customer_question[other_text]" placeholder="Other" type="text" value="">
            <label class="enquire__other-response__label fairing__other-response__label" for="customer_question_other_text">Other</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="os-step__description enquire__survey-actions fairing__survey-actions">
    <button class="btn btn--subdued btn--size-small enquire__action enquire__action--submit fairing__action fairing__action--submit" type="submit">
      <span class="btn__content enquire__action-content fairing__action-content">
        Submit
      </span>
    </button>
  </div>
</form>

<!-- END MULTI RESPONSE QUESTION -->

<!-- OPEN ENDED QUESTION -->

<!-- ONLY RENDERED IF THERE IS AN ERROR AFTER SUBMITTING -->
<div id="fairing__error-notice" class="notice notice--error fairing__error-notice" role="alert">
  Invalid answer
</div>

<form class="content-box__row enquire__survey fairing__survey" method="post">
  <h2 class="os-step__title enquire-survey__title fairing-survey__title" id="fairing-question-prompt">
    Open ended question prompt
  </h2>

  <p class="os-step__description fairing__question-description">
    Open ended question description
  </p>

  <div class="os-step__description fairing__responses">
    <input checked="" data-enquire-response-other-control="" id="customer_question_response_other" name="customer_question[responses]" type="hidden" value="6037">
    <textarea aria-labelledby="fairing-question-prompt" class="field__input enquire__open-ended-response fairing__open-ended-response" data-enquire-response-other-text="" id="customer_question_responses" name="customer_question[responses][]" rows="3"></textarea>
  </div>

  <div class="os-step__description enquire__survey-actions fairing__survey-actions">
    <button class="btn btn--subdued btn--size-small enquire__action enquire__action--submit fairing__action fairing__action--submit" type="submit">
      <span class="btn__content enquire__action-content fairing__action-content">
        Submit
      </span>
    </button>
  </div>
</form>

<!-- END OPEN ENDED QUESTION -->

<!-- DATE QUESTION -->

<form action="https://app.fairing.co/api/customer_questions?k=YOURKEY" class="content-box__row enquire__survey fairing__survey" method="post">
  <h2 class="os-step__title enquire-survey__title fairing-survey__title" id="fairing-question-prompt">
    Date question prompt
  </h2>

  <div aria-labelledby="fairing-question-prompt" class="os-step__description fairing__date-response" role="group">
    <select aria-label="Month" class="field__input fairing__date-response__input" data-fairing-date-select-month="" id="customer_question_month" required="" style="order: 0;">
      <option disabled="" selected="" value="">---</option><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option>
    </select>
    <select aria-label="Day" class="field__input fairing__date-response__input" data-fairing-date-select-day="" id="customer_question_day" required="" style="order: 1;">
      <option value="" disabled="">---</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
    </select>

    <input aria-label="Year" class="field__input fairing__date-response__input" data-fairing-date-select-year="" id="customer_question_year" inputmode="numeric" min="0" pattern="[0-9]{4,4}" placeholder="2024" required="" title="Please enter a four digit year" type="text" style="order: 2;">

    <input checked="" data-enquire-response-other-control="" id="customer_question_responses" name="customer_question[responses]" type="hidden">
    <input data-enquire-response-other-text="" id="customer_question_date_response" name="customer_question[responses][]" type="hidden">
  </div>

  <div class="os-step__description enquire__survey-actions fairing__survey-actions">
    <button class="btn btn--subdued btn--size-small enquire__action enquire__action--submit fairing__action fairing__action--submit" type="submit">
      <span class="btn__content enquire__action-content fairing__action-content">
        Submit
      </span>
    </button>
  </div>
</form>

<!-- END DATE QUESTION -->

<!-- AUTOSUGGEST QUESTION -->

<!-- ONLY RENDERED IF THERE IS AN ERROR AFTER SUBMITTING -->
<div id="fairing__error-notice" class="notice notice--error fairing__error-notice" role="alert">
  Invalid answer
</div>

<form class="content-box__row enquire__survey fairing__survey" method="post">
  <h2 class="os-step__title enquire-survey__title fairing-survey__title" id="fairing-question-prompt">
    Auto suggest question prompt
  </h2>

  <p class="os-step__description fairing__question-description">
    Auto suggest question description
  </p>

  <div aria-labelledby="fairing-question-prompt" class="os-step__description fairing__responses">
    <div class="fairing__autosuggest" data-testid="fairing__autosuggest">
      <input class="field__input fairing__autosuggest__input" data-fg-component="fg-autosuggest" data-allow-other="true" data-fuzzy-match="false" id="autosuggest-list-input" list="" placeholder="Type your answer here" type="text" aria-autocomplete="list" aria-expanded="false" aria-owns="autosuggest-list--list" autocomplete="off" data-testid="fairing__autosuggest__input" role="combobox">
      <ul class="fairing__autosuggest__list content-box" id="autosuggest-list--list" aria-role="listbox" data-testid="fairing__autosuggest__list">
        <li class="fairing__autosuggest__option" aria-posinset="1" aria-selected="false" aria-setsize="5" data-option-id="6035" data-option-value="red" role="option" tabindex="-1">
          <span class="fairing__autosuggest__highlight"></span>r<span class="fairing__autosuggest__highlight"></span>e<span class="fairing__autosuggest__highlight"></span>d<span class="fairing__autosuggest__highlight"></span>
        </li>
        <li class="fairing__autosuggest__option" aria-posinset="2" aria-selected="false" aria-setsize="5" data-option-id="6036" data-option-value="blue" role="option" tabindex="-1">
          <span class="fairing__autosuggest__highlight"></span>b<span class="fairing__autosuggest__highlight"></span>l<span class="fairing__autosuggest__highlight"></span>u<span class="fairing__autosuggest__highlight"></span>e<span class="fairing__autosuggest__highlight"></span>
        </li>
        <li class="fairing__autosuggest__option" aria-posinset="3" aria-selected="false" aria-setsize="5" data-option-id="6037" data-option-value="yellow" role="option" tabindex="-1">
          <span class="fairing__autosuggest__highlight"></span>y<span class="fairing__autosuggest__highlight"></span>e<span class="fairing__autosuggest__highlight"></span>l<span class="fairing__autosuggest__highlight"></span>l<span class="fairing__autosuggest__highlight"></span>o<span class="fairing__autosuggest__highlight"></span>w<span class="fairing__autosuggest__highlight"></span>
        </li>
        <li class="fairing__autosuggest__option" aria-posinset="4" aria-selected="false" aria-setsize="5" data-option-id="6038" data-option-value="blueish" role="option" tabindex="-1">
          <span class="fairing__autosuggest__highlight"></span>b<span class="fairing__autosuggest__highlight"></span>l<span class="fairing__autosuggest__highlight"></span>u<span class="fairing__autosuggest__highlight"></span>e<span class="fairing__autosuggest__highlight"></span>i<span class="fairing__autosuggest__highlight"></span>s<span class="fairing__autosuggest__highlight"></span>h<span class="fairing__autosuggest__highlight"></span>
        </li>
        <li>
          <span class="fairing__autosuggest__highlight"></span>g<span class="fairing__autosuggest__highlight"></span>r<span class="fairing__autosuggest__highlight"></span>e<span class="fairing__autosuggest__highlight"></span>e<span class="fairing__autosuggest__highlight"></span>n<span class="fairing__autosuggest__highlight"></span>
        </li>
      </ul>
    </div>

    <datalist data-fg-datalist="autosuggest-list" id="autosuggest-list">
      <option value="red" data-response-id="6035" data-response-count="0"></option>
      <option value="blue" data-response-id="6036" data-response-count="0"></option>
      <option value="yellow" data-response-id="6037" data-response-count="0"></option>
      <option value="blueish" data-response-id="6038" data-response-count="0"></option>
      <option value="green" data-response-id="6039" data-response-count="0"></option>
    </datalist>

    <div style="display: none;">
      <input id="customer_question_available_responses_6035" name="customer_question[available_responses][]" type="hidden" value="red">
      <input id="customer_question_response_positions_6035" name="customer_question[response_positions][6035]" type="hidden" value="0">
      <input class="input-radio enquire__radio-control fairing__radio-control fairing__control" data-enquire-response="red" id="customer_question_responses_6035" name="customer_question[responses][]" type="radio" value="6035">
      <label class="enquire__response-label fairing__response-label" for="customer_question_responses_6035" style="font-weight: normal">red</label>

      <input id="customer_question_available_responses_6036" name="customer_question[available_responses][]" type="hidden" value="blue">
      <input id="customer_question_response_positions_6036" name="customer_question[response_positions][6036]" type="hidden" value="1">
      <input class="input-radio enquire__radio-control fairing__radio-control fairing__control" data-enquire-response="blue" id="customer_question_responses_6036" name="customer_question[responses][]" type="radio" value="6036">
      <label class="enquire__response-label fairing__response-label" for="customer_question_responses_6036" style="font-weight: normal">blue</label>

      <input id="customer_question_available_responses_6037" name="customer_question[available_responses][]" type="hidden" value="yellow">
      <input id="customer_question_response_positions_6037" name="customer_question[response_positions][6037]" type="hidden" value="2">
      <input class="input-radio enquire__radio-control fairing__radio-control fairing__control" data-enquire-response="yellow" id="customer_question_responses_6037" name="customer_question[responses][]" type="radio" value="6037">
      <label class="enquire__response-label fairing__response-label" for="customer_question_responses_6037" style="font-weight: normal">yellow</label>

      <input id="customer_question_available_responses_6038" name="customer_question[available_responses][]" type="hidden" value="blueish">
      <input id="customer_question_response_positions_6038" name="customer_question[response_positions][6038]" type="hidden" value="3">
      <input class="input-radio enquire__radio-control fairing__radio-control fairing__control" data-enquire-response="blueish" id="customer_question_responses_6038" name="customer_question[responses][]" type="radio" value="6038">
      <label class="enquire__response-label fairing__response-label" for="customer_question_responses_6038" style="font-weight: normal">blueish</label>

      <input id="customer_question_available_responses_6039" name="customer_question[available_responses][]" type="hidden" value="green">
      <input id="customer_question_response_positions_6039" name="customer_question[response_positions][6039]" type="hidden" value="4">
      <input class="input-radio enquire__radio-control fairing__radio-control fairing__control" data-enquire-response="green" id="customer_question_responses_6039" name="customer_question[responses][]" type="radio" value="6039">
      <label class="enquire__response-label fairing__response-label" for="customer_question_responses_6039" style="font-weight: normal">green</label>

      <div class="">
        <div class="fairing__response">
          <input name="customer_question[responses][]" type="hidden" value="">
          <input aria-label="Enter " class="input-checkbox enquire__checkbox-control fairing__checkbox-control fairing__control" data-enquire-response-other-control="" id="customer_question_response_other" name="customer_question[responses][]" type="checkbox" value="other">

          <div class="fairing__other-response-wrapper">
            <input class="field__input enquire__other-response fairing__other-response " data-enquire-response-other-text="" id="customer_question_other_text" name="customer_question[other_text]" type="text" value="">
            <label class="enquire__other-response__label fairing__other-response__label" for="customer_question_other_text"></label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="os-step__description enquire__survey-actions fairing__survey-actions">
    <button class="btn btn--subdued btn--size-small enquire__action enquire__action--submit fairing__action fairing__action--submit" type="submit">
      <span class="btn__content enquire__action-content fairing__action-content">
        Submit
      </span>
    </button>
  </div>
</form>

<!-- END AUTOSUGGEST QUESTION -->

<!-- NPS question -->

<!-- ONLY RENDERED IF THERE IS AN ERROR AFTER SUBMITTING -->
<div id="fairing__error-notice" class="notice notice--error fairing__error-notice" role="alert">
  Invalid answer
</div>

<form class="content-box__row enquire__survey fairing__survey" method="post">
  <h2 class="os-step__title enquire-survey__title fairing-survey__title" id="fairing-question-prompt">
    How likely is it; for you to recommend us?
  </h2>

  <p class="os-step__description fairing__question-description">
    Really, how likely?
  </p>

  <div class="os-step__description fairing__responses" data-fg-component="fg-nps">
    <div aria-labelledby="fairing-question-prompt" class="fairing__nps-controls" aria-label="0 being Not Likely and 10 being Very Likely" role="radiogroup">
      <input id="customer_question_available_responses_4483" name="customer_question[available_responses][]" type="hidden" value="0">
      <input data-enquire-response="0" id="customer_question_responses_4483" name="customer_question[responses][]" style="display: none" type="radio" value="4483">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4483" role="radio" style="font-weight: normal" tabindex="0">0</label>

      <input id="customer_question_available_responses_4484" name="customer_question[available_responses][]" type="hidden" value="1">
      <input data-enquire-response="1" id="customer_question_responses_4484" name="customer_question[responses][]" style="display: none" type="radio" value="4484">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4484" role="radio" style="font-weight: normal" tabindex="0">1</label>

      <input id="customer_question_available_responses_4485" name="customer_question[available_responses][]" type="hidden" value="2">
      <input data-enquire-response="2" id="customer_question_responses_4485" name="customer_question[responses][]" style="display: none" type="radio" value="4485">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4485" role="radio" style="font-weight: normal" tabindex="0">2</label>

      <input id="customer_question_available_responses_4486" name="customer_question[available_responses][]" type="hidden" value="3">
      <input data-enquire-response="3" id="customer_question_responses_4486" name="customer_question[responses][]" style="display: none" type="radio" value="4486">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4486" role="radio" style="font-weight: normal" tabindex="0">3</label>

      <input id="customer_question_available_responses_4487" name="customer_question[available_responses][]" type="hidden" value="4">
      <input data-enquire-response="4" id="customer_question_responses_4487" name="customer_question[responses][]" style="display: none" type="radio" value="4487">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4487" role="radio" style="font-weight: normal" tabindex="0">4</label>

      <input id="customer_question_available_responses_4488" name="customer_question[available_responses][]" type="hidden" value="5">
      <input data-enquire-response="5" id="customer_question_responses_4488" name="customer_question[responses][]" style="display: none" type="radio" value="4488">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4488" role="radio" style="font-weight: normal" tabindex="0">5</label>

      <input id="customer_question_available_responses_4489" name="customer_question[available_responses][]" type="hidden" value="6">
      <input data-enquire-response="6" id="customer_question_responses_4489" name="customer_question[responses][]" style="display: none" type="radio" value="4489">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4489" role="radio" style="font-weight: normal" tabindex="0">6</label>

      <input id="customer_question_available_responses_4490" name="customer_question[available_responses][]" type="hidden" value="7">
      <input data-enquire-response="7" id="customer_question_responses_4490" name="customer_question[responses][]" style="display: none" type="radio" value="4490">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4490" role="radio" style="font-weight: normal" tabindex="0">7</label>

      <input id="customer_question_available_responses_4491" name="customer_question[available_responses][]" type="hidden" value="8">
      <input data-enquire-response="8" id="customer_question_responses_4491" name="customer_question[responses][]" style="display: none" type="radio" value="4491">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4491" role="radio" style="font-weight: normal" tabindex="0">8</label>

      <input id="customer_question_available_responses_4492" name="customer_question[available_responses][]" type="hidden" value="9">
      <input data-enquire-response="9" id="customer_question_responses_4492" name="customer_question[responses][]" style="display: none" type="radio" value="4492">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4492" role="radio" style="font-weight: normal" tabindex="0">9</label>

      <input id="customer_question_available_responses_4493" name="customer_question[available_responses][]" type="hidden" value="10">
      <input data-enquire-response="10" id="customer_question_responses_4493" name="customer_question[responses][]" style="display: none" type="radio" value="4493">
      <label aria-checked="false" class="fairing__nps-control" data-fg-control="nps-control" for="customer_question_responses_4493" role="radio" style="font-weight: normal" tabindex="0">10</label>
    </div>
    <div class="fairing__nps-labels" aria-hidden="true">
      <span>Not Likely</span>
      <span>Very Likely</span>
    </div>
  </div>

  <div class="os-step__description enquire__survey-actions fairing__survey-actions">
    <button class="btn btn--subdued btn--size-small enquire__action enquire__action--submit fairing__action fairing__action--submit" type="submit">
      <span class="btn__content enquire__action-content fairing__action-content">
        Submit
      </span>
    </button>
  </div>
</form>

<!-- END NPS question -->

.fairing__question-description {
  line-height: 1.2;
  margin-top: 0.25rem;
  opacity: 0.75;
}

.fairing__question-prompt {
  margin-bottom: 16px;
}

.fairing__other-response-wrapper {
  position: relative;
  flex: 1 1 0;
}

.fairing__other-response {
  padding-bottom: 0.75em;
  padding-top: 0.75em;
}

.fairing__other-response__label {
  display: none;
}

.fairing__other-response.has-placeholder:not(:placeholder-shown) + .fairing__other-response__label {
  display: block;
  position: absolute;
  top: 0.2em;
  left: 12px;
  color: #999;
  font-size: 12px;
}

.fairing__other-response.has-placeholder:not(:placeholder-shown) {
  padding-bottom: 0.3em;
  padding-top: 1.2em;
}

.fairing__date-response {
  display: flex;
  gap: 8px;
  margin: 1.2rem 0;
}

.fairing__date-response__input {
  appearance: auto;
  flex: 1 1 0;
  padding-bottom: 0.75em;
  padding-top: 0.75em;
}

.fairing__responses {
  margin: 1.2rem 0;
}

.fairing__response {
  align-items: center;
  display: flex;
  padding: 8px 0;
}

.fairing__response-label {
  font-weight: normal;
}

.fairing__error-notice {
  display: block;
  margin: 10px 10px 0;
}

.fairing__error-message {
  margin: 0 0 12px 26px;
}

.fairing__option {
  margin-right: 8px;
  outline: 0;
}

.enquire__open-ended-response,
.fairing__open-ended-response {
  margin: 0.5714285714em 0;
}

.enquire__branding,
.fairing__branding {
  font-size: 13px;
  margin: 4px 0 0;
  text-align: right;
}

.enquire__branding-link,
.fairing__branding-link {
  font-weight: bold;
}

.enquire__radio-control,
.fairing__radio-control {
  flex-shrink: 0;
}

.fairing__control {
  margin-right: 8px;
  outline: 0;
}

.fairing__nps-controls {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
}

.fairing__nps-control {
  border: 1px solid hsla(0, 0%, 70%, 0.5);
  border-left-width: 0;
  padding: 6px 8px 6px 9px;
  text-align: center;
}

.fairing__nps-control:hover {
  background-color: hsla(204, 77%, 41%, 0.06);
  color: hsl(204, 77%, 34%);
  cursor: pointer;
}

.fairing__nps-control:first-of-type {
  border-bottom-left-radius: 3px;
  border-left-width: 1px;
  border-top-left-radius: 3px;
  padding: 6px 8px;
}

.fairing__nps-control:last-of-type {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

[data-enquire-response]:checked + .fairing__nps-control {
  background-color: hsla(204, 77%, 41%, 0.06);
  border: 1px solid hsla(204, 77%, 34%, 0.7);
  color: hsl(204, 77%, 34%);
  padding: 6px 8px;
}

[data-enquire-response]:checked + .fairing__nps-control:not(:last-child) {
  box-shadow: 1px 0 0 0 hsla(0, 0%, 70%, 0.5);
}

.fairing__nps-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.fairing__autosuggest {
  position: relative;
}

.fairing__autosuggest__list {
  -webkit-box-sizing: border-box;
  background-clip: padding-box;
  border-radius: 5px;
  box-sizing: border-box;
  display: none;
  left: 0;
  line-height: inherit;
  max-height: 30vh;
  min-height: 1.2em;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.5em 0.25em;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  word-break: normal;
  z-index: 100;
}

.fairing__autosuggest__list--visible {
  display: block;
}

.fairing__autosuggest__option {
  color: black;
  cursor: pointer;
  overflow: hidden;
  padding: 0.25em 0.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fairing__autosuggest__option:hover,
.fairing__autosuggest__option--selected {
  background-color: rgba(23, 115, 176, 0.06);
  color: #135e90;
}

.fairing__autosuggest__highlight {
  font-weight: 700;
}

.fairing__autosuggest__hint {
  color: gray;
  font-style: italic;
  overflow: hidden;
  padding: 0.25em 0.5em;
  text-overflow: ellipsis;
  white-space: nowrap;
}