.block-readiness-quiz {
    background-image: url('../../../images/inovayt-header-watermark-blue.png');
    background-position: 40% 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.block-readiness-quiz .gform_required_legend {
    display: none;
}

.block-readiness-quiz .gf_progressbar_wrapper,
.block-readiness-quiz .js-quiz-pagetitle,
.block-readiness-quiz .gfield--type-hidden {
    display: none;
}

.block-readiness-quiz__quiz.animate-in {
    animation: quizProgressQuizPopin 600ms cubic-bezier(0.165, 0.840, 0.440, 1.000) 0s 1 both;
}

@keyframes quizProgressQuizPopin {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.block-readiness-quiz__title {
    font-size: 40px;
    line-height: 1.2;
}

@media screen and (max-width: 1024px) {
    .block-readiness-quiz__title {
        font-size: 32px;
    }
}

/* Progress Bar */

.block-readiness-quiz__progress {
    display: flex;
    width: 450px;
    max-width: 100%;
    gap: 8px;
}

.block-readiness-quiz__progress-step {
    border-radius: 99px;
    background: linear-gradient(to right, white 50%, #FFFFFF33 50%);
    background-size: 200% 100%;
    background-position: right top;
    width: 100%;
    height: 8px;
}

.block-readiness-quiz__progress-step.current {
    animation: quizProgressStepCurrent 500ms ease 0s 1 both;
}

@keyframes quizProgressStepCurrent {
    from {
        background-position: right top;
    }

    to {
        background-position: left top;
    }
}

.block-readiness-quiz .gform_fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Gravity Forms Footer/Buttons */

.block-readiness-quiz .gform_page_footer {
    margin-top: 40px;
    display: flex;
    align-items: center;
}

.block-readiness-quiz .gform_page_footer .button {
    border-radius: 999px;
    border: 2px solid transparent;
    font-weight: bold;
    transition: all 150ms ease;
    padding: 16px 24px;
    font-size: 16px;
    line-height: 1.5;
}

.block-readiness-quiz .gform_page_footer .button:hover {
    transform: scale(1.05);
    background: var(--color-inolightblue);
    color: var(--color-inoblue);
    border-color: currentColor;
}

.block-readiness-quiz .gform_page_footer .button:active {
    transform: scale(0.98);
    transition-duration: 20ms;
}

.block-readiness-quiz .gform_page_footer .gform_previous_button {
    background: white;
    border-color: #7F7F7F80;
    color: var(--color-primary);
    margin-right: auto;
}

/* Labels and Descriptions */


.block-readiness-quiz .gfield_required_asterisk {
    visibility: hidden;
}

.block-readiness-quiz .gfield_label {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
    display: block;
}

.block-readiness-quiz .gfield--type-select .gfield_label {
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: normal;
}

.block-readiness-quiz .gfield_description {
    font-size: 16px;
    margin-bottom: 40px;
    display: block;
}

.block-readiness-quiz .gfield_description:last-child {
    margin-bottom: 0px;
}

.block-readiness-quiz .gfield_description.instruction {
    display: none;
}

/* Basic inputs */

.block-readiness-quiz input[type="text"],
.block-readiness-quiz input[type="number"],
.block-readiness-quiz input[type="email"],
.block-readiness-quiz input[type="tel"],
select {
    width: 100%;
    padding: 16px;
    border: 1px solid #7F7F7F80;
    border-radius: 8px;
    font-size: 14px;
}

/* Range inputs */

.gf-dollar-amount .ginput_container {
    position: relative;
}

.gf-dollar-amount .ginput_container:before {
    content: '$';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
}

.gf-dollar-amount .ginput_container input {
    padding-left: 32px;
}

.block-readiness-quiz__range {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #00000099;
    gap: 8px;
}

.block-readiness-quiz input[type="range"] {
    width: 100%;
    margin-top: 24px;
}

/* Radio Buttons */

.block-readiness-quiz .gfield--type-radio .gfield_label {
    display: none;
}

.block-readiness-quiz .gfield--type-radio .gfield_radio {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.block-readiness-quiz .gfield--type-radio .gchoice {
    position: relative;
    transition: all 150ms ease;
    transform: scale(1);
}

.block-readiness-quiz .gfield--type-radio .gchoice:active {
    transform: scale(1.02);
    transition-duration: 20ms;
}

.block-readiness-quiz .gfield--type-radio .gchoice label {
    border-radius: 8px;
    border: 2px solid var(--color-inoblue);
    padding: 16px;
    padding-left: 48px;
    display: block;
    font-size: 16px;
    font-weight: bold;
    transition: all 150ms ease;
    cursor: pointer;
}

.block-readiness-quiz .gfield--type-radio .gchoice label:hover {
    background-color: var(--color-inolightblue);
}


.block-readiness-quiz .gfield--type-radio .gchoice:has(:checked) label {
    background-color: var(--color-inoblue);
    color: white;
}

.block-readiness-quiz .gfield--type-radio .gchoice input {
    background: white;
    appearance: none;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 99px;
    z-index: 2;
    box-shadow: 0 0 0 0px white inset, 0 0 0 2px var(--color-inoblue) inset;
    transition: all 150ms ease;
}

.block-readiness-quiz .gfield--type-radio .gchoice input:checked {
    box-shadow: 0 0 0 2px white inset, 0 0 0 4px var(--color-inoblue) inset;
}

/* Checkboxes */

.block-readiness-quiz .gfield--type-checkbox .gfield_checkbox {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.block-readiness-quiz .gfield--type-checkbox .gchoice {
    display: flex;
    gap: 10px;
    align-items: center;
}

.block-readiness-quiz .gfield--type-checkbox .gchoice input {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #7F7F7F80;
    vertical-align: middle;
    transition: all 150ms ease;
    cursor: pointer;
}

.block-readiness-quiz .gfield--type-checkbox .gchoice:hover input {
    border-color: var(--color-inoblue);
}

.block-readiness-quiz .gfield--type-checkbox .gchoice input:checked {
    background: var(--color-inoblue);
    box-shadow: 0 0 0 2px white inset;
    border-color: transparent;
}

.block-readiness-quiz .gfield--type-checkbox .gchoice label {
    cursor: pointer;
    font-size: 14px;
}

/* Validation */

.block-readiness-quiz .gform_validation_errors {
    background: #f8d9d9;
    color: #db3f3f;
    margin-bottom: 24px;
    border-radius: 8px;
    padding: 24px;
}

.block-readiness-quiz .gform_validation_errors h2 {
    font-size: 18px;
}

.block-readiness-quiz .gfield_validation_message {
    color: #db3f3f;
    font-size: 14px;
    margin-top: 8px;
    font-weight: bold;
}

.block-readiness-quiz .gfield_visibility_hidden {
    display: none !important;
}