.step-indicator {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
}

    .step-indicator::before {
        content: '';
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        height: 3px;
        background-color: #dee2e6;
        z-index: 0;
    }

.step {
    position: relative;
    text-align: center;
    z-index: 1;
/*    flex: 1;*/
}

    .step .label {
        color: #3d9970;
    }

    .step .circle {
        width: 60px;
        height: 60px;
        background: url(../publicSite/images/icons/step-incomplete.svg) #ffffff;
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 50%;
        display: inline-block;
        line-height: 60px;
        font-weight: bold;
        color: #ffffff;
        font-size: 2.0rem;
    }

    .step.active .circle {
        background: url(../publicSite/images/icons/step-current.svg) #ffffff;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .step.active .label {
        color: #3d9970;
    }


    .step.complete .circle {
        background: url(../publicSite/images/icons/step-completed.svg) #ffffff;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .step:not(:last-child) {
        margin-right: -60px; /* brings steps closer */
    }

.wizard-step {
    display: none;
}

    .wizard-step.active {
        display: block;
    }