._step-wizard {
    list-style-type: none;
    border-radius: 10px;
    display: flex;
    position: relative;
    z-index: 10;
}

._step-wizard__item {
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
}
._step-wizard__item + ._step-wizard__item:after {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    background: #afd67d;
    width: 100%;
    height: 2px;
    transform: translateX(-50%);
    z-index: -10;
}
._step-wizard__item__count {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    user-select: none;
    cursor: pointer;
}
._step-wizard__item__count:after {
    content: "";
    height: 40px;
    width: 40px;
    background: #afd67d;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -10;
    touch-action: none;
    pointer-events: none;
}
._step-wizard__item__count:before {
    content: "";
    height: 10px;
    width: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    touch-action: none;
    pointer-events: none;
}
._step-wizard__item__label {
    font-size: 14px;
    margin-top: 10px;
}

._step-wizard__item--active
    ~ ._step-wizard__item
    ._step-wizard__item__count:after {
    background-color: #efefef;
    border: 3px solid #c4c4c4;
}

._step-wizard__item--active ~ ._step-wizard__item ._step-wizard__item__count {
    cursor: auto;
}

._step-wizard__item:not(._step-wizard__item--active)
    ._step-wizard__item__label {
    opacity: 0.5;
}
._step-wizard__item--active ._step-wizard__item__count:after {
    background: #fff;
    border: 3px solid #afd67d;
}

._step-wizard__item--active ~ ._step-wizard__item:after {
    background: #9c9c9c;
}