/* Mobile-only steps progress bar styles START */
.mob-steps-progress-bar-wrapper {
    margin: 2rem 0;
}

.mob-steps-progress-bar {
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    align-self: center;
    padding: 0;
}

.mob-steps-progress-bar__list-item {
    font-size: 2rem;
    padding: 1em 5vw;
    background-color: #0054a4;
    color: #fff;
    font-weight: 700;
    width: 100%;
}

/* .mob-steps-progress-bar__list-item--disabled {
    background-color: #95989a;
} */

/* 2023 fixes by Oleg start */
.mob-steps-progress-bar__list-item--disabled {
    background-color: #74777A;
}

/* 2023 fixes by Oleg end */

.mob-steps-progress-bar__list-item--active {
    background-color: #007129;
    /* legacy IE11 */
    background-color: var(--green-clr);
}

.mob-steps-progress-bar__list-item:not(:last-child) {
    border-bottom: 2px solid white;
}

.mob-steps-progress-bar__link-item {
    padding: 1em auto;
    color: inherit;
}

.mob-steps-progress-bar__link-item:link,
.mob-steps-progress-bar__link-item:visited,
.mob-steps-progress-bar__link-item:active {
    color: inherit;
}

.mob-steps-progress-bar__link-item:hover,
.mob-steps-progress-bar__link-item:focus {
    color: hsl(0, 20%, 90%);
}

/* Mobile-only steps progress bar styles END */

/* Steps progress bar styles START */

/* The bar appears at 768px wide viewports and up */

@media screen and (min-width: 768px) {

    .steps-progress-bar-wrapper {
        display: block;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .steps-progress-navbar {
        margin: 4rem auto;
    }

    .steps-progress-bar {
        width: 100%;
        height: 140px;
    }

    .steps-progress-link {
        transition: all ease .5s;
    }

    .steps-progress-link__active-circle {
        fill: #007129;
        /* legacy IE11 */
        fill: var(--green-clr);
    }

    /* 2023 fixes by Oleg start */
    .steps-progress-link:focus .steps-progress-link__circle {
        outline-color: transparent;
        transition: none;
    }

    .steps-progress-link:focus-visible .steps-progress-link__circle {
        outline: 2px solid var(--green-clr);
        outline-offset: 0.2rem;
    }

    /* 2023 fixes by Oleg end */

    .steps-progress-link__disabled ellipse {
        fill: #FFFFFF;
        stroke: #0054A4;
        stroke-width: 3px;
    }

    .steps-progress-link__circle {
        fill: #0054a4;
        transition: all ease .5s;
    }

    .steps-progress-link:hover .steps-progress-link__circle,
    .steps-progress-link:focus .steps-progress-link__circle {
        -webkit-filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
        filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
        fill: #007129;
        /* legacy IE11 */
        fill: var(--green-clr);
    }

    .steps-progress-link__circle-number {
        fill: #fff;
        font-size: 25px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 700;
    }

    .steps-progress-link__disabled .steps-progress-link__circle-number {
        fill: #0054A4;
    }

    .steps-progress-link__label {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        fill: #0054a4;
        font-size: 16px;
        font-weight: 700;
    }

    .steps-progress-link:hover .steps-progress-link__label,
    .steps-progress-link:focus .steps-progress-link__label {
        text-decoration: underline;
    }

    .steps-progress-link__label-active {
        fill: #007129;
        /* legacy IE11 */
        fill: var(--green-clr);
    }

}

/* Steps progress bar styles END */

/* Is this a test survey checkboxes START  */
.test-survey-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #FFF;
    box-shadow: 0px 3px 6px #00000029;
    border: 5px solid #4C9B4B;
    border-radius: 8px;
}

.test-survey-left-col {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 250px;
    margin-right: 1.5rem;
    box-shadow: none;
    margin-bottom: 0;
}

.test-survey-right-col {
    flex: 1;
    padding: 1em;
    box-shadow: none;
    margin-bottom: 0;
}

.test-survey-text {
    margin-bottom: 0;
}

.test-survey-label {
    font-size: 2rem;
}

.checkbox label .checkbox-material--test-survey {
    margin-right: 0px !important;
}

/* Is this a test survey checkboxes END  */