<style>
/* LAYOUT */
html, body {
    scroll-behavior: smooth;
}
.freeform-form-container {
    font-family: sans-serif;
}
.freeform-page {
    background: #212529;
    padding: 0;
    height: 100vh;
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.freeform-question {
    font: normal 25px sans-serif;
    color: #ffffff;
    background: transparent;
    padding: 0;
    width: 40vw;
    height: 40vh;
    display: flex;
    align-items: left;
    justify-content: center;
    flex-flow: column nowrap;
}
.freeform-question > div.freeform-fields > label:first-child {
    margin-bottom: 20px;
}
.freeform-fields {
    margin-bottom: 30px;
    display: flex;
    flex-flow: column nowrap;
}
.freeform-warning {
    font: normal 18px sans-serif;
    line-height: 1.5;
    color: #997404;
    background-color: transparent;
    border: 1px solid #997404;
    border-radius: 5px;
    width: 40vw;
    display: block;
    padding: 15px;
}
.freeform-warning code {
    font: monospace;
}
#freeform-success-error-banner,
.freeform-ajax-form-success,
.freeform-ajax-form-errors {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.freeform-form-success,
.freeform-ajax-form-success p,
.freeform-form-errors,
.freeform-ajax-form-errors p {
    font: normal 18px sans-serif;
    color: #ffffff;
    line-height: 1.5;
    text-align: center;
    border-radius: 5px;
    width: 40vw;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    position: relative;
    justify-content: center;
}
.freeform-form-success,
.freeform-ajax-form-success p {
    background-color: #198754;
    border: 1px solid #198754;
}
.freeform-form-errors,
.freeform-ajax-form-errors p {
    background-color: #dc3545;
    border: 1px solid #dc3545;
}

/* BUTTONS */
button,
.freeform-buttons a {
    font: 400 16px sans-serif;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    border: 1px solid #6c757d;
    border-radius: 5px;
    background-color: transparent;
    padding: 5px 15px;
    margin-right: 10px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.freeform-buttons {
    justify-content: center;
}
.freeform-buttons a, .submit-button {
    font: 400 22px sans-serif;
    border: 1px solid #0d6efd;
    background-color: #0d6efd;
    padding: 10px 25px;
}
.freeform-buttons a:hover, .submit-button:hover {
    color: #ffffff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}
.freeform-buttons .previous {
    font: 400 16px sans-serif;
    color: #6c757d;
    background-color: transparent;
    border-color: transparent;
}
.freeform-buttons .previous:hover {
    color: #ffffff;
    background-color: transparent;
    border-color: #6c757d;
}

/* BASIC FIELD STYLES */
label.freeform-required:after {
    color: #dc3545;
    content: "*";
    margin-left: 5px;
}
.freeform-instructions {
    font: 200 18px sans-serif;
    color: #6c757d;
    margin-bottom: 20px;
    margin-top: -15px;
    display: block;
}
.freeform-errors {
    padding: 0 25px;
    margin: 0;
}
.freeform-errors li {
    font: 200 16px sans-serif;
    color: #dc3545;
    margin-top: 15px;
}
input,
textarea,
select {
    font: normal 25px sans-serif;
    color: #ffffff;
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #767676;
    padding: 15px 0;
    width: 100%;
    display: block;
    resize: none;
}
input:focus,
textarea:focus,
select:focus {
    border-bottom: 2px solid #0b5ed7;
    outline: 0;
    transition: border-color .15s ease-in-out;
}
input::placeholder,
textarea::placeholder {
    font: italic 200 18px sans-serif;
    color: #6c757d;
}
input.freeform-has-errors,
textarea.freeform-has-errors,
select.freeform-has-errors {
    border-bottom: 2px solid #dc3545;
}

/* RADIO & CHECKBOX GROUP FIELDS */
input[type="radio"],
input[type="checkbox"] {
    display: none;
}
.freeform-fieldtype-radio_group label:not(:first-child),
.freeform-fieldtype-checkbox_group label:not(:first-child) {
    font: normal 20px sans-serif;
    color: #ffffff;
    background-color: #1d1f23;
    border: 1px solid #767676;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 5px;
    cursor: pointer;
}
.freeform-fieldtype-radio_group label:not(:first-child):hover,
.freeform-fieldtype-checkbox_group label:not(:first-child):hover {
    background-color: #262a2e;
    border: 1px solid #0d6efd;
}
.freeform-fieldtype-checkbox_group span {
    font: italic 15px sans-serif;
    color: #6c757d;
    margin-bottom: 15px;
}
.freeform-fieldtype-radio_group .option-label span,
.freeform-fieldtype-checkbox_group .option-label span {
    font: bold 16px sans-serif;
    color: #6c757d;
    text-align: center;
    background-color: #ffffff;
    border: 1px solid #767676;
    border-radius: 5px;
    width: 17px;
    height: 17px;
    padding: 5px;
    margin: 0 15px 0 0;
    display: inline-block;
}
.freeform-fieldtype-radio_group .freeform-has-errors + label:not(:first-child),
.freeform-fieldtype-checkbox_group .freeform-has-errors + label:not(:first-child) {
    border: 1px dashed #dc3545;
}
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
    color: #0d6efd;
    background-color: #1a1d20;
    border: 1px solid #0d6efd;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
input[type="radio"]:checked + label:after,
input[type="checkbox"]:checked + label:after {
    font: normal 18px sans-serif;
    color: #ffffff;
    content: "✓";
    margin-left: 15px;
}
input[type="radio"]:checked + label span,
input[type="checkbox"]:checked + label span {
    color: #ffffff;
    background-color: #0d6efd;
    border: 1px solid #0d6efd;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

/* OPINION SCALE FIELDS */
.freeform-fieldtype-opinion_scale .opinion-scale-scales label:not(:first-child) {
    font: normal 18px sans-serif;
    color: #ffffff !important;
    background-color: #1d1f23;
    border: 1px solid #767676;
    border-radius: 5px;
    padding: 15px;
    margin: 0;
    cursor: pointer;
}
.freeform-fieldtype-opinion_scale .opinion-scale-scales li:not(:last-child) {
    margin-right: 10px;
}
.freeform-fieldtype-opinion_scale .opinion-scale-scales label:not(:first-child):hover {
    background-color: #262a2e;
    border: 1px solid #0d6efd;
}
.freeform-fieldtype-opinion_scale input[type="radio"]:checked + label,
.freeform-fieldtype-opinion_scale input[type="radio"]:checked + label:hover {
    font-weight: bold;
    color: #0d6efd !important;
    background-color: #ffffff;
    border: 1px solid #0d6efd;
}
.freeform-fieldtype-opinion_scale input[type="radio"]:checked + label:after {
    content: "";
    margin-left: 0;
}
.freeform-fieldtype-opinion_scale .freeform-has-errors + label {
    border: 1px dashed #dc3545 !important;
}
.freeform-fieldtype-opinion_scale .opinion-scale-legends li {
    font: normal 18px sans-serif;
    color: #ffffff;
    padding: 10px 0;
    margin-top: 5px;
}

/* RATING FIELDS */
.freeform-fieldtype-rating .freeform-has-errors + label:not(:first-child) {
    color: #dc3545;
}
.form-rating-field-wrapper input[type="radio"] + label {
    background-color: initial;
    border: initial;
    border-radius: initial;
    width: initial;
    padding: initial;
    margin-right: 15px;
}

/* FILE UPLOAD DRAG & DROP FIELDS */
.freeform-file-drag-and-drop {
    background-color: #1d1f23 !important;
    border: 1px dashed #767676 !important;
}
.freeform-file-drag-and-drop__placeholder {
    font: italic 200 18px sans-serif;
    color: #6c757d;
}
.freeform-file-drag-and-drop [data-messages]>li[data-error],
.freeform-file-drag-and-drop [data-field-errors]>li[data-error] {
    font: 200 16px sans-serif;
    color: #dc3545;
    margin-top: 15px;
}
.freeform-file-drag-and-drop [data-field-errors]>li {
    color: #dc3545;
}

/* SIGNATURE FIELDS */
.freeform-fieldtype-signature button {
    font: 400 16px sans-serif;
    color: #ffffff;
    border: 1px solid #6c757d;
    background-color: transparent;
}
.freeform-fieldtype-signature button:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.freeform-fieldtype-signature canvas {
    border: 1px solid #767676;
    border-radius: 5px;
}

/* TABLE FIELDS */
.freeform-fieldtype-table table thead tr th {
    font: 400 16px sans-serif;
    text-align: left;
}
.freeform-fieldtype-table table button[data-freeform-table-remove-row] {
    font-size: 1px;
    margin: 0;
    padding: 0;
    visibility: hidden;
}
.freeform-fieldtype-table table button[data-freeform-table-remove-row]:after {
    font: 400 16px sans-serif;
    color: #b02a37;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    content: "✕";
    border: 1px solid #b02a37;
    border-radius: 5px;
    background-color: transparent;
    padding: 5px 15px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    visibility: visible;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.freeform-fieldtype-table table button[data-freeform-table-remove-row]:hover:after {
    color: #ffffff;
    background-color: #b02a37;
    border-color: #b02a37;
}
.freeform-fieldtype-table button[data-freeform-table-add-row] {
    color: #146c43;
    content: "+";
    border: 1px solid #146c43;
    background-color: transparent;
    margin: 10px 10px 0 0;
    width: 100px;
}
.freeform-fieldtype-table button[data-freeform-table-add-row]:hover {
    color: #ffffff;
    background-color: #146c43;
    border-color: #146c43;
}
.freeform-fieldtype-table button[data-freeform-table-add-row]:after {
    content: "+";
    margin-left: 5px;
}
.freeform-fieldtype-table input[type="checkbox"] {
    display: block;
    transform: scale(2);
}

/* CHECKBOX & MAILING LIST FIELDS */
.freeform-fieldtype-checkbox,
.freeform-fieldtype-mailing_list {
    min-height: 75px;
}
.freeform-checkbox {
    width: 60px;
    height: 34px;
    position: relative;
}
.freeform-checkbox input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.freeform-checkbox-label {
    padding-left: 100px;
    width: 30vw;
    cursor: pointer;
    display: inline-block;
}
.freeform-checkbox-slider {
    background-color: #6c757d;
    border-radius: 5px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    cursor: pointer;
    transition: .4s;
}
.freeform-checkbox-slider:before {
    content: "";
    background-color: #ffffff;
    border-radius: 5px;
    height: 26px;
    width: 26px;
    position: absolute;
    left: 4px;
    bottom: 4px;
    transition: .4s;
}
.freeform-fieldtype-checkbox input:checked + span,
.freeform-fieldtype-mailing_list input:checked + span {
    background-color: #0d6efd;
}
.freeform-fieldtype-checkbox input:focus + span,
.freeform-fieldtype-mailing_list input:focus + span {
    box-shadow: 0 0 1px #0d6efd;
}
.freeform-fieldtype-checkbox input:checked + span:before,
.freeform-fieldtype-mailing_list input:checked + span:before {
    transform: translateX(26px);
}
.freeform-fieldtype-checkbox label.freeform-required:after,
.freeform-fieldtype-mailing_list label.freeform-required:after {
    content: "";
    margin-left: 0;
    display: none;
}
.freeform-fieldtype-checkbox .freeform-checkbox-label.freeform-required:after,
.freeform-fieldtype-mailing_list .freeform-checkbox-label.freeform-required:after {
    color: #dc3545;
    content: "*";
    margin-left: 5px;
}
.freeform-fieldtype-checkbox .freeform-instructions,
.freeform-fieldtype-mailing_list .freeform-instructions {
    margin: 5px 0 0 100px;
    width: 30vw;
}
.freeform-fieldtype-checkbox .freeform-errors,
.freeform-fieldtype-mailing_list .freeform-errors {
    margin: 5px 0 0 100px;
    width: 30vw;
}
.freeform-fieldtype-checkbox input[type="checkbox"].freeform-has-errors + .freeform-checkbox-slider {
    background-color: #dc3545;
}

/* RESPONSIVE */
@media only screen and (max-width: 1600px) {
    .freeform-question {
        width: 50vw;
    }
    .freeform-form-success,
    .freeform-ajax-form-success p,
    .freeform-form-errors,
    .freeform-ajax-form-errors p,
    .freeform-warning {
        width: 50vw;
    }
    .freeform-fieldtype-checkbox .freeform-instructions,
    .freeform-fieldtype-mailing_list .freeform-instructions,
    .freeform-fieldtype-checkbox .freeform-errors,
    .freeform-fieldtype-mailing_list .freeform-errors,
    .freeform-checkbox-label {
        width: 40vw;
    }
}
@media only screen and (max-width: 1300px) {
    .freeform-question {
        width: 70vw;
    }
    .freeform-form-success,
    .freeform-ajax-form-success p,
    .freeform-form-errors,
    .freeform-ajax-form-errors p,
    .freeform-warning {
        width: 70vw;
    }
    .freeform-fieldtype-checkbox .freeform-instructions,
    .freeform-fieldtype-mailing_list .freeform-instructions,
    .freeform-fieldtype-checkbox .freeform-errors,
    .freeform-fieldtype-mailing_list .freeform-errors,
    .freeform-checkbox-label {
        width: 60vw;
    }
}
@media only screen and (max-width: 800px) {
    .freeform-question {
        width: 90vw;
    }
    .freeform-form-success,
    .freeform-ajax-form-success p,
    .freeform-form-errors,
    .freeform-ajax-form-errors p,
    .freeform-warning {
        width: 80vw;
    }
    .freeform-fieldtype-checkbox .freeform-instructions,
    .freeform-fieldtype-mailing_list .freeform-instructions,
    .freeform-fieldtype-checkbox .freeform-errors,
    .freeform-fieldtype-mailing_list .freeform-errors,
    .freeform-checkbox-label {
        width: 70vw;
    }
}

/* SUBMIT LOADING INDICATOR */
button[type=submit].ff-loading {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: center;
    align-items: center;
}
button[type=submit].ff-loading:before {
    content: '';
    display: block;
    -ms-flex: 1 0 11px;
    flex: 1 0 11px;
    width: 11px;
    height: 11px;
    margin-right: 10px;
    border-style: solid;
    border-width: 2px;
    border-color: transparent transparent white white;
    border-radius: 50%;
    animation: ff-loading .5s linear infinite;
}
.mt-n1 {
    margin-top: -0.5rem !important;
}
@keyframes ff-loading {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(1turn);
    }
}
</style>

{{ form.renderTag }}

<div id="freeform-success-error-banner">
    {% if not form.ajaxEnabled and form.submittedSuccessfully %}
        <div class="freeform-form-success">
            {{ form.successMessage | t('freeform') }}
        </div>
    {% endif %}

    {% if form.hasErrors %}
        <div class="freeform-form-errors">
            {{ form.errorMessage | t('freeform') }}

            {% if form.errors|length %}
                <ul>
                    {% for error in form.errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    {% endif %}
</div>

{% for row in form %}
    {% set questionId = loop.index %}
    {% set questionTotal = loop.length %}
    <div id="q{{ questionId }}" class="freeform-page {{ form.customAttributes.rowClass }}">
        <div class="freeform-question">
            {% for field in row %}
                {% set columnClass = form.customAttributes.columnClass %}
                {% if field.type == "submit" or field.type == "save" %}
                    {% set columnClass = columnClass ~ " freeform-column-content-align-" ~ field.position %}
                {% endif %}
                {% if field.type in ["radio_group", "checkbox_group"] %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        {{ field.renderLabel({
                            labelClass: "freeform-label" ~ (field.required ? " freeform-required" : "")
                        }) }}
                        {{ field.renderInstructions({
                            instructionsClass: "freeform-instructions"
                        }) }}
                        {% if field.type == "checkbox_group" %}
                            <span>Choose as many as you like</span>
                        {% endif %}
                        {% for index, option in field.options %}
                                <input type="{{ field.type == "radio_group" ? "radio" : "checkbox" }}"
                                    name="{{ field.handle }}{{ field.type == "radio_group" ? "" : "[]" }}"
                                    value="{{ option.value }}"
                                    id="{{ field.idAttribute }}-{{ index }}"
                                    class="form-check-input{{ field.hasErrors ? " freeform-has-errors" }}"
                                        {{ option.checked ? "checked" : "" }}
                                />
                            <label class="option-label" for="{{ field.idAttribute }}-{{ index }}">
                                <span>{{ range('A','Z')[loop.index0] }}</span> {{ option.label|t('freeform')|raw }}
                            </label>
                        {% endfor %}
                        {{ field.renderErrors({
                            errorClass: "freeform-errors"
                        }) }}
                    </div>
                {% elseif field.type in ["checkbox", "mailing_list"] %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        <div class="freeform-checkbox">
                            <label for="{{ field.idAttribute }}" class="form-check-label {{ field.hasErrors ? "freeform-has-errors" }} {{ field.required ? "freeform-required" }}">
                                {{ field.renderInput({
                                    class: " form-check-input" ~ (field.hasErrors ? " freeform-has-errors")
                                }) }}
                                <span class="freeform-checkbox-slider"></span>
                                <span class="freeform-checkbox-label {{ field.required ? "freeform-required" }}">{{ field.label|t('freeform') }}</span>
                            </label>
                            {{ field.renderInstructions({
                                instructionsClass: "freeform-instructions"
                            }) }}
                            {{ field.renderErrors({
                                errorClass: "freeform-errors"
                            }) }}
                        </div>
                    </div>
                {% elseif field.type in ["multiple_select", "dynamic_recipients", "cc_details", "save"] %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        <p class="freeform-warning">This template does not support the {{ field.type|replace({'_': " ", '-': " "})|title }} field type by default. The affected field handle is: <code>{{ field.handle }}</code></p>
                    </div>
                {% elseif field.type == "submit" %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        <p class="freeform-warning">In order for this template to work correctly, it expects that there isn't Submit button in the form layout in the form builder. Please remove this Submit button inside the form builder.</p>
                    </div>
                {% else %}
                    <div class="freeform-fields {{ columnClass }} freeform-fieldtype-{{ field.type }}"{{ field.rulesHtmlData }}>
                        {{ field.render({
                            class: field.type not in ["submit", "save", "signature"] ? "freeform-input" : "",
                            labelClass: "freeform-label" ~ (field.required ? " freeform-required" : ""),
                            errorClass: "freeform-errors",
                            instructionsClass: "freeform-instructions",
                        }) }}
                    </div>
                {% endif %}
            {% endfor %}
            <div class="freeform-buttons">
                {% if questionId != questionTotal %}
                    <a href="#q{{ questionId + '1' }}">Next</a>
                {% endif %}
                {% if questionId == questionTotal %}
                    <button type="submit" class="submit-button" data-freeform-action="submit">Submit</button>
                {% endif %}
                {% if questionId > "1" %}
                    <a href="#q{{ questionId - '1' }}" class="previous">Previous</a>
                {% endif %}
            </div>
        </div>
    </div>
{% endfor %}
{{ form.renderClosingTag }}

<script>
  var form = document.querySelector('[data-id="{{ form.anchor }}"]');
  if (form) {
    form.addEventListener("freeform-stripe-styling", function (event) {
      event.detail.base = {
        fontSize: "16px",
        fontFamily: "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
      }
    });
    form.addEventListener('freeform-ready', function (event) {
        event.options.errorClassBanner = 'freeform-ajax-form-errors';
        event.options.errorClassList = 'freeform-errors';
        event.options.errorClassField = 'freeform-has-errors';
        event.options.successClassBanner = 'freeform-ajax-form-success';
    })
  }
</script>