div.wizard {
    --number-size: 40px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    div.wizard > .heading{
        margin-bottom: 30px;
    }

    div.wizard > form#wizard-form .wizard-content {
        width: 100%;
    }

    div.wizard > form#wizard-form > div.wizard-body {
        width: 88vw;
        max-width: 600px;
    }

        div.wizard > form#wizard-form > div.wizard-body > div.control-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }

    div.wizard > div.wizard-steps {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

        div.wizard > div.wizard-steps > div.wizard-step {
            font-size: 1.2em;
            position: relative;
            text-align: center;
            color: var(--brand-primary-blue);
        }

            div.wizard > div.wizard-steps > div.wizard-step:not(:last-child):after {
                background-color: var(--brand-primary-blue);
                content: "";
                display: block;
                height: 2px;
                position: absolute;
                width: 100%;
                top: calc(var(--number-size) / 2);
                left: 50%
            }

            div.wizard > div.wizard-steps > div.wizard-step div.wizard-step-number {
                background-color: var(--background-color);
                color: var(--brand-primary-blue);
                border-radius: 50%;
                border: 1px solid var(--brand-primary-blue);
                box-shadow: 0 0 0 var(--element-spacing) var(--background-color);
                font-weight: bold;
                height: var(--number-size);
                line-height: var(--number-size);
                width: var(--number-size);
                margin: 0 auto;
                position: relative;
                z-index: 1;
            }

            div.wizard > div.wizard-steps > div.wizard-step div.wizard-step-name {
                font-weight: bold;
                padding-top: var(--element-spacing);
                text-align: center;
            }

                div.wizard > div.wizard-steps > div.wizard-step.complete div.wizard-step-number {
                    background-color: var(--brand-primary-blue);
                    border-color: var(--brand-primary-blue);
                    color: var(--background-color);
                }

                div.wizard > div.wizard-steps > div.wizard-step.complete:after {
                    background-color: var(--brand-primary-blue);
                }

            div.wizard > div.wizard-steps > div.wizard-step.active {
                color: var(--brand-primary-blue);
            }

                div.wizard > div.wizard-steps > div.wizard-step.active div.wizard-step-number {
                    background-color: var(--brand-primary-blue);
                    border-color: var(--brand-primary-blue);
                    color: var(--background-color);
                }