/* Aztechweek form styles */
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.registrationaztechweek {
    justify-content: center;
    padding-top: 10px !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    /* padding-bottom: 60px !important; */

    :disabled {
        background-color: #fff;
    }

    &.js-layout-ready {
        opacity: 1;
        visibility: visible;
    }

    @media (min-width: 768px) {
        padding-top: 50px !important;
        /* padding-bottom: 100px !important; */
    }

    form {
        max-width: 1270px;
        display: flex;
        justify-content: flex-start;
        gap: 25px;
        margin: 0;
        margin-bottom: 60px;

        .field-validation-valid {
            display: none;
        }

        .umbraco-forms-field>div {
            max-width: unset;
        }

        input[type="submit"] {
            display: none;
        }

        @media (min-width: 768px) {
            margin-bottom: 100px;
        }

        @media (min-width: 992px) {
            gap: 50px;
        }

        @media (min-width: 1200px) {
            gap: 100px;
        }
    }

    .aztechform__nav {
        display: none;

        .aztechform__nav-list {
            list-style-type: none;
            padding: 0;
            padding-right: 15px;
            padding: 50px 15px 0 0;

            .aztechform__nav-item {
                position: relative;
                padding-left: 40px;
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                color: #999DC4;
                font-size: 21px;


                .aztechform__nav-button {
                    background-color: unset;
                    border: unset;
                    padding: unset;
                    min-height: 35px;
                    text-transform: uppercase;
                    line-height: 110%;
                    font-family: "Figtree", sans-serif;
                    font-weight: 500;
                    text-align: left;
                    opacity: 50%;

                    &.validated {
                        &::before {
                            font-family: "FontAwesome";
                            font-weight: 400;
                            content: "\f00c";
                            position: absolute;
                            left: 0;
                            top: 53%;
                            transform: translateY(-50%);
                        }
                    }

                    &.nav--active {
                        color: #FFF;
                        opacity: 1;

                        &::before {
                            font-family: "FontAwesome";
                            font-weight: 400;
                            content: "\f054";
                            position: absolute;
                            left: 0;
                            top: 53%;
                            transform: translateY(-50%);
                        }
                    }

                    /* &:not(.validated, .nav--active) {
                        
                    } */
                }

                :not(.nav--active) {
                    color: #999DC4;
                }
            }
        }

        @media (min-width: 768px) {
            display: flex;
        }
    }

    .aztechform__inner-root {
        width: min(930px, 100%);
        display: flex;
        overflow-x: hidden;
        position: relative;
        padding-top: 50px;

        .aztechform__slider {
            display: flex;
            transition: transform, height 1.5s ease-in-out;
            width: 100%;
        }

        >.umbraco-forms-navigation {
            display: none;
        }

        .aztechform__step {
            padding: 0 15px;
            flex-shrink: 0;
            width: min(930px, 100%);
            margin: 0;
            /* z-index: 5; */

            &.step--hidden {
                display: none;
            }

            &.step--adjacent {
                /* display: flex; */
            }

            .aztechform__duplicate-email-message {
                display: block;

                /* Beats the shared h3 color rule, which is nested at the same depth */
                .aztechform__error_msg_header {
                    color: #641616;
                }

                p {
                    margin: 40px 0 0;
                    color: #641616;
                    line-height: 120%;
                    font-style: italic;

                    a {
                        color: #641616;
                        font-style: italic;
                        line-height: 120%;
                        text-decoration: underline;
                    }
                }

                &.resent {
                    p {
                        color: #221F20;
                    }
                }
            }

            .aztechform__step-header {
                margin: 0 0 20px;

                .aztechform__step-count {
                    margin: 0;
                    font-size: 13px;
                    line-height: 150%;
                    color: #929292;
                }

                .aztechform__title {
                    margin: 0;
                    font-size: 32px;
                    line-height: 95%;
                    color: #FFF;
                    text-transform: uppercase;

                    @media (min-width: 768px) {
                        font-size: 52px;
                    }
                }

                .aztechform__back-btn {
                    background-color: transparent;
                    margin-top: 8px;
                    padding: 0px 15px 0;
                    text-transform: uppercase;
                    border: none;
                    color: #949494;
                    position: relative;
                    font-family: "Figtree", sans-serif;

                    &::before {
                        content: "\f053";
                        font-family: "FontAwesome";
                        font-weight: 400;
                        font-size: 12px;
                        position: absolute;
                        left: 0;
                        top: 56%;
                        transform: translateY(-50%);
                    }
                }
            }

            .aztechform__dynamic-header {
                background-color: #999DC4;
                padding: 40px 20px;
                border-radius: 10px;
                text-align: center;
                margin-bottom: 40px;
                transition: all .3s ease;
                color: #221F20;
                font-family: "Figtree", sans-serif;
                position: relative;

                @media (min-width: 768px) {
                    padding: 40px 60px;
                }

                .aztechform__dynamic-title {
                    font-weight: 600;
                    line-height: 100%;
                    font-size: 24px;
                    text-transform: uppercase;
                    margin: 0;

                    @media (min-width: 768px) {
                        font-size: 28px;
                    }
                }

                .aztechform__dynamic-themes,
                .aztechform__dynamic-date {
                    margin: 8px 0 0;
                    font-weight: 600;
                    text-transform: uppercase;
                    font-size: 18px;
                    line-height: 110%;

                    @media (min-width: 768px) {
                        font-size: 21px;
                    }
                }

                .aztechform__dynamic-date {
                    margin-top: 25px;
                    margin-bottom: 8px;
                }

                .aztechform__dynamic-event-info-container {
                    margin: 0 auto;
                    max-width: fit-content;

                    li {
                        text-align: left;
                        color: #221F20;
                        font-family: "Figtree", sans-serif;
                        font-size: 18px;
                        line-height: 120%;
                        font-weight: 500;

                        p,
                        a {
                            color: #221F20;
                            margin: 0;
                            line-height: 120%;
                        }
                    }
                }

                .aztechform__dynamic-calendar {
                    width: 80px;
                    height: 80px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    background-color: #999DC4;
                    border: 5px solid #fff;
                    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 2;

                    &::before {
                        content: "\f133";
                        font-family: "FontAwesome";
                        font-weight: 400;
                        font-size: 42px;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }

                    p {
                        font-family: "Figtree", sans-serif;
                        font-weight: 600;
                        font-size: 22px;
                        margin: 0;
                        width: 100%;
                        position: absolute;
                        top: 60%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }

            .aztechform__continue-btn {
                width: min(300px, 100%);
                background-color: #D13D3D;
                border: 1px solid #D13D3D;
                padding: 13px;
                font-size: 18px;
                font-weight: 600;
                color: #FFFFFF;
                text-transform: uppercase;
                border-radius: 22px;
                letter-spacing: 3px;
                line-height: 120%;
                margin: 40px 0;
                transition: all 0.3s ease;

                &:hover {
                    background-color: #221F20;
                    border: 1px solid #FFFFFF;
                }

                /* partifulSync.js holds this closed while the Partiful check is
                   outstanding. The colours are restated so the hover above does not
                   paint a disabled button as active; the dim and the not-allowed
                   pointer match the single-page submit's disabled treatment. */
                &:disabled,
                &:disabled:hover {
                    background-color: #D13D3D;
                    border: 1px solid #D13D3D;
                    opacity: 0.45;
                    cursor: not-allowed;
                }
            }

            .aztechform__continue-submission-btn {
                background-color: transparent;
                border: 1px solid #212529;
                padding: 13px 40px;;
                font-size: 18px;
                font-weight: 600;
                color: #212529;
                text-transform: uppercase;
                border-radius: 22px;
                letter-spacing: 3px;
                line-height: 120%;
                transition: all 0.3s ease;
                margin-top: 20px;

                &:hover {
                    background-color: #221F20;
                    color: #ffffff;
                    border: 1px solid #ffffff;
                }

                /* Same reason as the continue button above. The colour inherits
                   rather than restating #212529 because this button also appears
                   on the dark-ground steps, where the shared * rule whitens it. */
                &:disabled,
                &:disabled:hover {
                    background-color: transparent;
                    border: 1px solid #212529;
                    color: inherit;
                    opacity: 0.45;
                    cursor: not-allowed;
                }
            }

            .aztechform__add-cohost-btn {
                display: block;
                padding: 8px 22px;
                background-color: transparent;
                border: 1px solid #fff;
                text-transform: uppercase;
                border-radius: 4px;
                font-family: "Figtree", sans-serif;
                font-weight: 600;
                font-size: 18px;
                letter-spacing: 2px;
                line-height: 120%;
            }

            .umbraco-forms-container {
                padding: 0;
            }

            .spinner-active {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 150px 31px !important;
                transition: all 0.5s ease;

                >*:not(.aztechform__loading-container) {
                    display: none !important;
                }
            }

            .aztechform__loading-container {
                text-align: center;

                .aztechform__building-text {
                    font-size: 16px;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    margin-bottom: 0;
                }

                .loader {
                    width: 42px;
                    height: 42px;
                    border: 5px solid #FFF;
                    border-bottom-color: #F86363;
                    border-radius: 50%;
                    display: inline-block;
                    box-sizing: border-box;
                    animation: rotation 1s linear infinite;
                    margin-bottom: 30px;
                }

                .aztechform__generating-title {
                    font-size: 28px;
                    line-height: 100%;
                    font-weight: 500;
                    margin: 0;
                    text-transform: uppercase;
                }
            }

            &[data-step="1"],
            &[data-step="2"],
            &[data-step="3"] {
                .umbraco-forms-container {
                    background-color: #999DC4;
                    padding: 60px 20px;
                    border-radius: 10px;

                    .aztechform__continue-btn {
                        margin: 0;
                        margin-left: auto;
                        margin-right: auto;
                        display: block;

                        @media (min-width: 768px) {
                            margin-left: 0;
                            margin-right: 20px;
                            display: inline-block;
                        }
                    }

                    .aztechform__continue-submission-btn {
                        margin-left: auto;
                        margin-right: auto;
                        display: block;

                        @media (min-width: 768px) {
                            margin-left: 0;
                            display: inline-block;
                        }
                    }

                    /* Sends hosts with more than one event to the express form.  */
                    /* Only step 1 of the step-by-step page creates this element.  */
                    .aztechform__multiple-events-link {
                        display: block;
                        margin-top: 30px;
                        color: #221F20;
                        font-family: "Figtree", sans-serif;
                        font-size: 16px;
                        line-height: 130%;
                        text-align: center;
                        text-decoration: underline;

                        &:hover,
                        &:focus-visible {
                            color: #641616;
                        }

                        @media (min-width: 768px) {
                            text-align: left;
                        }
                    }
                }
            }

            &[data-step="4"],
            &[data-step="5"],
            &[data-step="6"],
            &[data-step="7"],
            &[data-step="8"],
            &[data-step="9"] {
                .umbraco-forms-container {
                    * {
                        color: #fff;
                    }

                    /* The * rule above carries one more class than the shared
                       error style, so validation text came out white on the dark
                       ground. Restated here in the lighter error red used against
                       the dark ground elsewhere in this sheet -- #641616 is meant
                       for the purple card and would all but disappear. */
                    .field-validation-error-jquery {
                        color: #F86363;
                    }
                }

                .aztechform__custom-select {
                    position: relative;
                    max-width: 400px;
                    margin: .5em 0;

                    &:not(.has-options) {
                        display: none;
                    }

                    .aztechform__custom-select-trigger {
                        width: 100%;
                        border: 1px solid #bbb;
                        color: #949494;
                        text-align: left;
                        max-width: 400px;
                        min-height: 51px;
                        padding: 16px 12px;
                        line-height: 120%;
                        font-size: 16px;
                        border-radius: 4px;
                        position: relative;
                        background-color: #fff;

                        &::before {
                            content: "\f078";
                            /* transition: all 0.3s ease; */
                            font-family: "FontAwesome";
                            color: #949494;
                            font-weight: 300;
                            transform: translateY(-50%);
                            font-size: 12px;
                            position: absolute;
                            right: 12px;
                            top: 27px;
                            line-height: 12px;
                        }

                        &[aria-expanded="true"] {
                            &::before {
                                transform: translateY(-50%) rotate(180deg);
                            }
                        }

                        &.has-value {
                            color: #221F20;
                        }
                    }

                    .aztechform__custom-select-options {
                        padding: 0;
                        list-style: none;
                        background-color: #fff;
                        position: absolute;
                        z-index: 5;
                        top: 54px;
                        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
                        max-width: 400px;
                        width: 100%;
                        max-height: 300px;
                        overflow-y: auto;

                        .aztechform__custom-select-option {
                            padding: 4px 12px;
                            color: #221F20;
                            cursor: pointer;
                        }

                        .aztechform__custom-select-option {

                            &:hover,
                            &:focus-visible {
                                background-color: #f5f5f5;
                            }
                        }
                    }
                }

                .field-validation-error-jquery {
                    color: #DA6262;
                }

                .aztechform__step-header {
                    margin-bottom: 40px;
                }

                .aztechform__title {
                    font-family: "Figtree", sans-serif;
                    font-weight: 400;
                }
            }

            input[type="text"],
            input[type="email"],
            input[type="tel"],
            input[type="number"],
            input[type="url"] {
                max-width: 400px;
                min-height: 51px;
                padding: 16px 12px;
                line-height: 120%;
                font-size: 16px;
                border-radius: 4px;
                color: #221F20 !important;
                width: 100%;

                &::placeholder {
                    color: #949494;
                }
            }

            .countryprovincedropdown {
                label {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    clip-path: inset(50%);
                    border: 0;
                    white-space: nowrap;
                }
            }

            input[type="checkbox"],
            input[type="radio"] {
                position: absolute;
                left: -9999px;

                &:focus-visible {
                    &~label {
                        outline: 2px solid #000000;
                        outline-offset: 2px;
                    }
                }
            }

            h2 {
                margin: 0 0 8px;
                font-weight: 400;
                text-transform: uppercase;
            }

            h3,
            .umbraco-forms-legend {
                color: #221F20;
                font-family: "Figtree", sans-serif;
                font-weight: 600;
                font-size: 24px;
                line-height: 100%;
                margin: 0 0 8px;
                text-transform: uppercase;

                @media (min-width: 768px) {
                    font-size: 28px;
                }
            }

            .umbraco-forms-legend {
                margin-bottom: 0;
            }

            .umbraco-forms-hidden {
                position: absolute;
                display: block !important;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;

                &[aria-hidden="true"] {
                    display: none !important;

                    input {
                        display: none !important;

                    }
                }
            }

            p {
                font-size: 18px;
                font-weight: 500;
                line-height: 120%;
                font-family: "Figtree", sans-serif;

            }

            a {
                color: #221F20;
                text-decoration: underline;
            }

            .umbraco-forms-field.shortanswer label {
                font-family: "Figtree", sans-serif;
                font-weight: 600;
                font-size: 24px;
                line-height: 100%;
                margin: 0 0 16px;
                text-transform: uppercase;

                @media (min-width: 768px) {
                    font-size: 28px;
                }
            }

            .gotbiggerplans {
                p {
                    color: #fff;
                    text-align: center;
                    padding-top: 50px;
                    opacity: 70%;
                }

                a {
                    color: #fff;
                }

            }

            .umbraco-forms-field {
                margin: 0;

                &.dropdown {
                    margin: .5em 0;
                }

                >div input.valid::after {
                    display: none !important;
                }

                textarea {
                    height: 141px;
                    padding: 16px 12px;
                    color: #221F20 !important;
                    border-radius: 4px;
                    resize: none;
                }

                &.multiplechoice {
                    display: flex;
                    flex-direction: column;

                    .checkboxlist {
                        padding: 8px 0 0;
                        display: flex;
                        flex-wrap: wrap;
                        gap: 10px;

                        input[type="checkbox"] {
                            width: 0 !important;
                        }

                        div {
                            margin: 0;

                            &:focus-within {
                                label {
                                    background-color: #221F20 !important;
                                    color: #ffffff !important;
                                    border-color: #ffffff !important;
                                }
                            }
                        }

                        label {
                            background-color: #fff;
                            color: #949494;
                            padding: 4px 10px;
                            border-radius: 5px;
                            transition: all .3s ease;
                            min-width: 80px;
                            text-align: center;
                            font-size: 16px;
                            margin: 0;
                            line-height: 120%;
                            transition: all 0.3s ease;
                            border: 1px solid transparent;

                            &::before {
                                content: none;
                            }

                            &::after {
                                content: none;
                            }

                            &.selected {
                                background-color: #999DC4;
                                color: #221F20;
                            }

                            &:hover {
                                background-color: #221F20 !important;
                                color: #ffffff !important;
                                border-color: #ffffff !important;
                            }
                        }


                    }
                }

                .help-block {
                    margin: 0 0 10px;
                    font-size: 18px;
                    line-height: 110%;
                    font-family: "Figtree", sans-serif;
                    text-transform: uppercase;

                    @media (min-width: 768px) {
                        font-size: 21px;
                    }
                }
            }

            .needabreak,
            .aztechform__break-text {
                color: #858585;
                max-width: 400px;
                text-align: center;
                margin: 0 !important;
            }

            fieldset.umbraco-forms-field {
                padding: 0;
            }

            .umbraco-forms-field.address {
                position: relative;

                .aztech-autocomplete-list {
                    list-style: none;
                    padding: 16px 0;
                    background-color: #fff;
                    border-radius: 4px;
                    position: absolute;
                    top: 100%;
                    left: 0;
                    right: 0;
                    max-width: 400px;
                    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

                    li {
                        color: #221F20;
                        padding: 4px 12px 4px;

                        &:hover,
                        &:focus-visible {
                            background-color: #f5f5f5;
                            cursor: pointer;
                        }
                    }

                    .aztech-autocomplete-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 12px 4px;

                        &:hover {
                            background-color: #fff;
                            cursor: default;
                        }

                        span {
                            color: #221F20;
                            font-family: "Figtree", sans-serif;
                            font-weight: 500;
                            font-size: 13px;
                            line-height: 150%;
                            text-transform: uppercase;
                        }

                        button {
                            color: #221F20;
                            font-size: 26px;
                            background: none;
                            border: none;
                            line-height: 100%;
                            padding-top: 0;
                            margin-top: -2px;
                        }
                    }
                }
            }

            .umbraco-forms-field.checkbox {
                label {
                    position: relative;
                    padding-left: 36px;
                    font-size: 16px;
                    line-height: 150%;

                    &::before {
                        content: "";
                        border: 2px solid #221F20;
                        height: 18px;
                        width: 18px;
                        position: absolute;
                        left: 3px;
                        top: 10px;
                        transform: translateY(-50%);
                    }

                    &.selected {
                        &::after {
                            content: "\f00c";
                            font-family: "FontAwesome";
                            font-weight: 400;
                            position: absolute;
                            color: #221F20;
                            left: 7.5px;
                            top: 10px;
                            transform: translateY(-50%);
                            font-size: 11px;
                        }
                    }
                }
            }

            .aztechform__accordion-list {
                padding: 0;
                list-style: none;

                .aztechform__accordion-item {
                    padding: 14px 0 14px 36px;
                    position: relative;
                    border-top: #6D72AB 1px solid;

                    &:last-of-type {
                        border-bottom: #6D72AB 1px solid;
                    }

                    .aztechform__accordion-header {
                        display: flex;
                        justify-content: space-between;

                        input[type="radio"] {

                            &:focus-visible {
                                &~label {
                                    outline: none;

                                    &::before {
                                        outline: 2px solid #000000 !important;
                                        outline-offset: 2px;
                                    }
                                }
                            }
                        }

                        &:focus-within {
                            outline: 2px solid #000000 !important;
                            outline-offset: 2px;
                        }
                    }

                    label {
                        position: unset;
                        min-height: 30px;
                        display: flex;
                        align-items: center;
                        margin: 0;
                        font-size: 18px;
                        line-height: 120%;
                        width: 100%;
                        max-width: fit-content;
                        font-family: "Figtree", sans-serif;
                        font-weight: 500;

                    }


                    input[type="radio"]+label::before {
                        content: "";
                        border: 2px solid #221F20;
                        height: 18px;
                        width: 18px;
                        position: absolute;
                        left: 3px;
                        top: 29px;
                        transform: translateY(-50%);
                        border-radius: 0;
                        background-color: transparent;
                    }

                    input[type="radio"]:checked+label::before {
                        background-color: transparent;
                    }

                    input[type="radio"]:checked+label::after {
                        content: "\f00c";
                        font-family: "FontAwesome";
                        font-weight: 400;
                        position: absolute;
                        color: #221F20;
                        left: 7.5px;
                        top: 30px;
                        transform: translateY(-50%);
                        font-size: 11px;
                        height: unset;
                        width: unset;
                        background-color: transparent;
                    }

                    .aztechform__accordion-trigger {
                        width: 100%;
                        height: auto;
                        position: relative;
                        background: transparent;
                        min-height: 30px;
                        border: none;
                        max-width: 20%;

                        @media (min-width: 768px) {
                            max-width: 100%;
                        }

                        &::before {
                            content: "\f078";
                            font-family: "FontAwesome";
                            color: #221F20;
                            position: absolute;
                            right: 23px;
                            top: 15px;
                            transform: translateY(-50%);
                            font-size: 13px;
                            height: unset;
                            width: unset;
                            background-color: transparent;
                        }

                        &:focus-visible {
                            outline: none !important;
                        }

                        &[aria-expanded="true"] {
                            &::before {
                                transform: translateY(-50%) rotate(180deg);
                            }
                        }

                    }

                    .othereventtype {
                        input {
                            margin: 0 0 6px;
                        }

                        label {
                            position: absolute;
                            display: block !important;
                            width: 1px;
                            height: 1px;
                            padding: 0;
                            margin: -1px;
                            overflow: hidden;
                            clip: rect(0, 0, 0, 0);
                            white-space: nowrap;
                            border: 0;
                        }
                    }

                    .aztechform__accordion-content {
                        padding-top: 6px;

                        p {
                            margin: 0;
                            font-size: 16px;
                            line-height: 120%;
                            font-weight: 500;
                            font-family: "Figtree", sans-serif;
                        }
                    }
                }
            }

            .field-validation-error {
                display: none;
            }

            input[aria-invalid="true"] {
                border-color: transparent;
                background: #fff;
            }

            .field-validation-error-jquery {
                color: #641616;
                font-size: 18px;
                font-style: italic;
                line-height: 120%;
                font-family: "Figtree", sans-serif;
                text-transform: none;
                margin: 8px 0;
                display: block;
                font-weight: 400;
                padding: 0;
                display: block;
            }

            /* "How did you hear about AZTW?"

               Radios are hidden off screen further up, and every other radio group draws
               its own circle through the label. This one had none, so the options read as
               plain text with nothing to show what was picked. The treatment matches the
               admission fee group below. Scoped by field rather than by step, so it holds
               if the step order changes. */
            .howdidyouhearaboutaztw {
                margin-top: 40px;

                /* Left to the shared h3 / legend rule so it reads as a heading. Only the
                   gap above the options is set, matching the admission fee group. */
                .umbraco-forms-legend {
                    margin-bottom: 12px;
                }

                .radiobuttonlist {
                    padding: 0;

                    div {
                        display: flex;
                        margin-bottom: 15px;
                    }
                }

                label {
                    padding-left: 42px;
                    display: block;
                    position: relative;
                    margin: 0;
                }

                input[type="radio"]+label::before {
                    content: "";
                    position: absolute;
                    left: 9px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    top: 0px;
                    border: 2px solid #fff;
                    background-color: transparent;
                }

                input[type="radio"]:checked+label::after {
                    content: "";
                    position: absolute;
                    top: 10px;
                    left: 19px;
                    transform: translate(-50%, -50%);
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    background-color: #fff;
                }
            }

            /* The follow up box only appears under "Other", where the question above it is
               the label. Hidden from view but left in place for screen readers, which would
               otherwise be handed an unlabelled text box. */
            .howdidyouhearaboutaztwother {
                .umbraco-forms-label {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border: 0;
                }

                /* Lines the box up with the radio labels above it, which clear their
                   circles with a 42px indent. */
                input {
                    margin-left: 40px;
                }
            }

            /* Event capacity: the approval guidance under the field.

               The sentence is the field's Description in Umbraco Forms and carries an
               {approvalCount} token. It is hidden until eventCapacityHelper.js has a
               number to put there, which also keeps the raw token off the page and leaves
               nothing behind if that script never runs. */
            .whatisyoureventcapacity {
                display: flex;
                flex-direction: column;

                /* The description renders between the label and the input, and belongs
                   underneath it. */
                .umbraco-forms-field-wrapper {
                    order: 1;
                }

                .help-block {
                    order: 2;
                    display: none;
                }

                .help-block.is-visible {
                    display: flex;
                    align-items: center;
                    gap: 16px;
                    margin: 12px 0 0;
                    font-family: "Figtree", sans-serif;
                    font-size: 18px;
                    font-weight: 400;
                    line-height: 130%;
                    text-transform: none;

                    @media (min-width: 768px) {
                        font-size: 21px;
                    }
                }

                /* The icon. A background rather than an <img>, because the sentence beside
                   it carries the meaning and this is decoration.

                   community.svg is filled #221F20, the same charcoal as the ground it sits
                   on, so as supplied it would be invisible here. brightness(0) flattens it
                   to black and invert(1) takes that to white, leaving its transparency
                   alone. Drop the filter if a white version of the file ever lands. */

                .help-block.is-visible::before {
                    content: "";
                    flex: 0 0 auto;
                    width: 56px;
                    height: 56px;
                    background-image: url("/favicons/aztechweek/community.svg");
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                    filter: brightness(0) invert(1);
                }
            }

            /* STEP SPECIFIC STYLES */
            /* Step One */
            &[data-step="1"] {
                .emailaddress {
                    margin: 16px 0;

                    input[type="email"] {
                        margin: 0 0 6px;
                    }
                }

                .readandagree {
                    margin-bottom: 24px;

                    .umbraco-forms-hidden {
                        display: none !important;
                    }
                }

                .richtext.body {
                    a {
                        font-size: 21px;

                        &[title="Click here to see the planning guide"] {
                            text-decoration: none;

                            &:after {
                                content: "\f08e";
                                font-family: "FontAwesome";
                                font-weight: 400;
                                font-size: 20px;

                                margin-left: 5px;
                                margin-right: 5px;
                                text-decoration: none !important;
                            }
                        }
                    }
                }

                h3 {
                    margin-bottom: 25px;
                }
            }

            /* Step Two */
            &[data-step="2"] {
                h3 {
                    margin-bottom: 30px;
                }

                .eventtype.singlechoice {
                    padding: 0;
                    margin-bottom: 30px;

                    .radiobuttonlist {
                        padding: 0;
                    }
                }
            }

            /* Step Three */
            &[data-step="3"] {
                .whatisthetitleofyourevent {
                    margin-bottom: 16px;
                }
            }

            /* Step Four */
            &[data-step="4"] {
                p {
                    margin-bottom: 8px;
                }

                .tellusaboutyourevent {
                    .umbraco-forms-field-wrapper {

                        margin-bottom: 40px;
                    }
                }
            }

            /* Step Five */
            &[data-step="5"] {
                .shortanswer {
                    label {
                        margin-bottom: 0;
                    }
                }

                .whosyourtargetaudience {
                    margin-top: 40px;

                    p {
                        margin: 0 0 10px;
                        font-size: 18px;
                        line-height: 110%;
                        font-family: "Figtree", sans-serif;
                        text-transform: uppercase;

                        @media (min-width: 768px) {
                            font-size: 21px;
                        }
                    }
                }

                .willyoureventbeopentothecommunityandifsoisthereanadmissionfee {
                    margin-top: 40px;

                    .radiobuttonlist {
                        padding: 0;

                        div {
                            display: flex;
                            margin-bottom: 15px;
                        }
                    }

                    .umbraco-forms-legend {
                        margin-bottom: 12px;
                    }

                    input[type="radio"] {
                        width: 0 !important;
                        height: 0 !important;
                    }

                    label {
                        padding-left: 42px;
                        display: block;
                        position: relative;
                        margin: 0;

                    }

                    input[type="radio"]+label::before {
                        content: "";
                        position: absolute;
                        left: 9px;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        top: 0px;
                        border: 2px solid #fff;
                        background-color: transparent;
                    }

                    input[type="radio"]:checked+label::after {
                        content: "";
                        position: absolute;
                        top: 10px;
                        left: 19px;
                        transform: translate(-50%, -50%);
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        background-color: #fff;
                    }
                }

                .thisinfowillhelpusgetyoureventinfrontoftherightpeople {
                    .umbraco-forms-legend {
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 120%;
                        font-family: "Figtree", sans-serif;
                        text-transform: none;

                        @media (min-width: 768px) {
                            font-size: 18px;
                        }
                    }
                }


            }

            /* Step Six */
            &[data-step="6"] {
                .attendeeregistration {
                    p {
                        margin-bottom: 25px;
                    }
                }

                .admission-fee-hidden {

                    &~.bullets,
                    &~.partifulcomurl {
                        display: none;
                    }
                }

                .ticketsales {
                    margin-top: 40px;
                }

                .partifulcomurl {
                    .umbraco-forms-field-wrapper {
                        max-width: 400px;
                        position: relative;

                    }

                    input {
                        padding: 16px 36px 16px 12px;
                        width: min(400px, 100%);
                    }
                }

                .bullets {
                    margin-bottom: 30px;

                    ul {
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        max-width: 272px;

                        li {
                            padding-left: 24px;
                            position: relative;
                            margin-bottom: 4px;
                            font-size: 18px;
                            font-family: "Figtree", sans-serif;
                            font-weight: 500;

                            &::before {
                                content: "\f00c";
                                font-family: "FontAwesome";
                                color: #fff;
                                position: absolute;
                                left: 0;
                                top: 11px;
                                font-weight: 300;
                                transform: translateY(-50%);
                                font-size: 14px;
                            }
                        }
                    }
                }
            }

            /* Step Seven */
            &[data-step="7"] {
                .whereandwhen {
                    label {
                        margin: 0 0 8px;
                        font-family: "Figtree", sans-serif;
                        font-weight: 600;
                        font-size: 24px;
                        line-height: 100%;
                        text-transform: uppercase;

                        @media (min-width: 768px) {
                            font-size: 28px;
                        }
                    }


                    .help-block {
                        font-size: 18px;
                        font-weight: 500;
                        line-height: 120%;
                        font-family: "Figtree", sans-serif;
                        text-transform: none;
                        margin-bottom: 8px;
                        display: block;
                    }
                }

                p {
                    margin-bottom: 8px;
                }


                .aztechform__time-fields-container {
                    display: flex;
                    gap: 8px;
                    margin-bottom: 60px;
                    position: relative;
                    max-width: 400px;
                    width: 100%;

                    @media (min-width: 768px) {
                        margin-bottom: 40px;

                    }

                    .umbraco-forms-field {
                        width: 100%;
                    }

                    .custom-error-container-group {
                        position: absolute;
                        top: 86%;
                        left: 0;
                        width: 100%;
                        margin-top: 8px;
                    }
                }

                .flatpickr-wrapper {
                    max-width: 196px;
                    width: 100%;

                    .numInputWrapper {
                        span {
                            display: none;
                        }
                    }

                    .numInput {
                        &:focus-visible {
                            outline-offset: -4px;
                        }
                    }

                    &::after {
                        content: "\f017";
                        font-family: "FontAwesome";
                        color: #949494;
                        font-weight: 300;
                        transform: translateY(-50%);
                        font-size: 22px;
                        position: absolute;
                        right: 12px;
                        top: 34px;
                        line-height: 20px;
                    }

                    input[type="text"] {
                        margin-bottom: 0;
                    }
                }

                .flatpickr-calendar {
                    max-width: 400px;
                    width: 100%;

                    span {
                        color: #221F20 !important;
                    }


                    .numInput {
                        padding: 0;
                        min-height: fit-content;
                    }

                    &::before {
                        border: 0;
                    }

                    &::after {
                        border: 0;

                    }

                    .flatpickr-time {
                        input {
                            &:hover {
                                background-color: #f5f5f5;
                            }
                        }
                    }
                }

            }

            &[data-step="8"] {
                .aztechform__cohost-group {
                    display: none;

                    &.show {
                        display: block;
                    }

                    &:not([data-cohost="1"]) {
                        margin-top: 30px;

                    }
                }

                p {
                    margin-bottom: 8px;
                }

                .addacohostoptional {
                    margin-top: 40px;
                }
            }

            &[data-step="9"] {
                .congratulationsyoureventisreadytosubmit {
                    text-align: center;

                    @media (min-width: 768px) {
                        text-align: left;
                    }
                }

                p {
                    margin-bottom: 0;
                }

                .aztechform__step-header {
                    margin-bottom: 50px;

                    @media (min-width: 768px) {
                        margin-bottom: 80px;

                    }
                }

                a {
                    text-decoration: underline;
                }

                .aztechform__dynamic-header {
                    padding: 60px 20px;

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

        }
    }
}

#partifulLink a:after {
    content: "\f08e";
    font-family: "FontAwesome";
    font-weight: 400;
    font-size: 20px;
    margin-left: 10px;
    margin-right: 5px;
    text-decoration: none !important;
}

/* A validation rule that blocks without wording of its own leaves an empty error span.
   The blackout rule does exactly that, because the notice above already explains the
   window. :empty only ever matches a span with no text, so real errors are untouched. */
.field-validation-error-jquery:empty {
    display: none;
}

/* ------------------------------------------------- partiful event check */

/* The checks the Validate button reports, as a checklist on the dark ground: a box per
   rule, a heading saying what it is, and the detail underneath.

   Colours carry !important because both registration pages paint everything inside
   .umbraco-forms-container white, and that rule is far more specific than these. */

/* Input and button sit on one row, with the label above and the checklist below. The
   field is laid out here rather than wrapping new elements around the Umbraco markup,
   which this script does not own. */
.partifulcomurl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.partifulcomurl > label,
.partifulcomurl > .help-block {
    flex: 0 0 100%;
    margin-bottom: 0;
}

.partifulcomurl .umbraco-forms-field-wrapper {
    flex: 1 1 280px;
    margin: 0;
}

.partifulcomurl .aztechform__partiful-results {
    flex: 0 0 100%;
}

.aztechform__partiful-sync-btn {
    flex: 0 0 auto;
    display: inline-block;
    margin: 0;
    padding: 14px 32px;
    border: 1px solid #FFFFFF;
    border-radius: 999px;
    background-color: transparent;
    color: #FFFFFF !important;
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 120%;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.aztechform__partiful-sync-btn:hover,
.aztechform__partiful-sync-btn:focus-visible {
    background-color: #FFFFFF;
    color: #221F20 !important;
}

/* Restated for the disabled state because the shared sheet turns any :disabled control
   white, which left white label text sitting on a white pill and reading as empty. */
.aztechform__partiful-sync-btn[disabled],
.aztechform__partiful-sync-btn[disabled]:hover {
    background-color: transparent !important;
    border-color: #FFFFFF;
    color: #FFFFFF !important;
    opacity: 0.65;
    cursor: default;
}

/* The same spinner the form shows between the event title and topic steps, sized to
   sit on the button's line rather than filling a step. Its rotation keyframes are
   declared once at the top of this sheet. */
.aztechform__partiful-sync-spinner {
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    vertical-align: -2px;
    border: 2px solid #FFFFFF;
    border-bottom-color: #F86363;
    border-radius: 50%;
    animation: rotation 1s linear infinite;
}

.aztechform__partiful-results {
    margin: 24px 0 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    color: #FFFFFF !important;
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 135%;
    text-transform: none;
}

.aztechform__partiful-results-message {
    margin: 0;
    font-style: italic;
}

.aztechform__partiful-results-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aztechform__partiful-results-check {
    display: block;
    position: relative;
    margin: 0 0 16px;
    padding-left: 34px;
}

/* Said in words for a screen reader; the box beside it carries the same meaning visually. */
.aztechform__partiful-results-check-state {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The box and its mark are drawn in CSS, with no character and no icon font.

   The page loads Font Awesome 6, whose family is "Font Awesome 6 Free", so the older
   "FontAwesome" name used elsewhere in this sheet resolves to nothing. Swapping to a
   Unicode tick then landed on a second problem: the glyphs are not in the page's font
   stack either and came out as empty boxes. Borders and gradients have neither failing. */
.aztechform__partiful-results-check::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    border-radius: 2px;
}

.aztechform__partiful-results-check::after {
    content: "";
    position: absolute;
}

/* A tick: the right and bottom edges of a small box, turned on its corner. */
.aztechform__partiful-results-check.is-pass::after {
    left: 5px;
    top: 4px;
    width: 5px;
    height: 9px;
    box-sizing: border-box;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* A cross: two bands drawn across the square, one each way. */
.aztechform__partiful-results-check.is-fail::before {
    border-color: #F86363;
}

.aztechform__partiful-results-check.is-fail::after {
    left: 3px;
    top: 5px;
    width: 10px;
    height: 10px;
    background-image:
        linear-gradient(45deg, transparent 42%, #F86363 42%, #F86363 58%, transparent 58%),
        linear-gradient(-45deg, transparent 42%, #F86363 42%, #F86363 58%, transparent 58%);
}

.aztechform__partiful-results-check-name {
    display: block;
    font-weight: 600;
}

.aztechform__partiful-results-check-detail {
    display: block;
    font-style: italic;
}

/* Everything about a rule that has not been met reads in the error red, which is lighter
   than the shared #641616 so that it carries against the dark ground. */
.aztechform__partiful-results-check.is-fail .aztechform__partiful-results-check-name,
.aztechform__partiful-results-check.is-fail .aztechform__partiful-results-check-detail {
    color: #F86363 !important;
}

/* The box the host ticks to settle the cover image, the one rule nothing in the Partiful
   data can answer. Sits under that rule's detail, lined up with it. */
/* This is a <label>, and the shared sheet dresses any label inside a field as the
   field's own heading: 24px, semibold, uppercase. That is why it came out shouting.
   The type is restated here, and has to be !important to beat a rule that carries
   the whole nested ancestry with it. */
.aztechform__partiful-results-acknowledge {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 0 !important;
    font-family: "Figtree", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 135% !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    cursor: pointer;
}

/* The form pushes every checkbox and radio off screen and draws its own in their
   place. This one is a real control the host ticks, so it is brought back.
   !important is needed to beat that rule, which carries the nested ancestry. */
.aztechform__partiful-results-acknowledge-box {
    position: static !important;
    left: auto !important;
    flex: 0 0 auto;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;

    /* The right margin does the spacing, not the flex gap alone: the shared sheet
       dresses labels in this form, and if one of those rules wins the display then
       gap stops applying and the box ends up against the words. */
    margin: 1px 10px 0 0 !important;

    /* White, like the tick drawn on the rules above it. */
    accent-color: #FFFFFF;
    cursor: pointer;
}

.aztechform__partiful-results-acknowledge-text {
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 135% !important;
    text-transform: none !important;
}

.aztechform__partiful-results-check.is-fail .aztechform__partiful-results-acknowledge-text {
    color: #F86363 !important;
}

/* The cover image is the one rule nothing can answer for the host, so until they
   confirm it the row reads as a prompt in warning yellow with an exclamation, rather
   than in the error red used for something that is actually wrong. The wording never
   changes, so colouring it as an error would cry wolf on every single check. */
.aztechform__partiful-results-check.is-manual.is-fail::before {
    border-color: #E8B339;
}

.aztechform__partiful-results-check.is-manual.is-fail::after {
    content: "!";
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background-image: none;
    font-family: "Figtree", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #E8B339;
}

/* Only the heading carries the warning colour. The explanation and the box beside it
   are instructions, not a problem, so they stay white. */
.aztechform__partiful-results-check.is-manual.is-fail .aztechform__partiful-results-check-name {
    color: #E8B339 !important;
}

.aztechform__partiful-results-check.is-manual.is-fail .aztechform__partiful-results-check-detail,
.aztechform__partiful-results-check.is-manual.is-fail .aztechform__partiful-results-acknowledge-text {
    color: #FFFFFF !important;
}

.aztechform__partiful-results-summary {
    margin: 16px 0 0;
    font-style: italic;
}

/* The verdict line takes the result's colour: white once everything is done, the
   error red used on the failing rules while anything is still outstanding. Both host
   forms load this sheet, and partifulSync.js sets the state class on the container. */
.aztechform__partiful-results.is-passing .aztechform__partiful-results-summary {
    color: #FFFFFF !important;
}

.aztechform__partiful-results.is-failing .aztechform__partiful-results-summary {
    color: #F86363 !important;
}

/* Something outside these stylesheets paints the failing state black. The checklist sits
   directly on the page ground in every state, so the background is refused outright. */
.aztechform__partiful-results,
.aztechform__partiful-results.is-passing,
.aztechform__partiful-results.is-failing {
    background: transparent !important;
}

/* --------------------------------------------------------- blackout notice */

/* Two different things, said two different ways.

   The notice is a heads up about the chosen day: a blackout exists, nothing is wrong yet.
   It is yellow, like the cover image prompt, and stays for as long as that day is picked.

   The error below the pickers is a real problem: the times actually run into the window.
   It is red, and it disappears by itself the moment the times clear the window. */
.aztechform__blackout-notice {
    display: block;
    margin: 12px 0 0;
    padding: 0 0 0 34px;
    position: relative;
    background-color: transparent;
    border: 0;
    color: #E8B339 !important;
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 135%;
    text-transform: none;
}

.aztechform__blackout-notice::before {
    content: "!";
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid #E8B339;
    border-radius: 2px;
    font-family: "Figtree", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    color: #E8B339;
}

.aztechform__blackout-error {
    display: block;
    margin: 8px 0 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    color: #F86363 !important;
    font-family: "Figtree", sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 135%;
    text-transform: none;
}