.steps-wizard {
    position:relative;
    margin-bottom:25px;
}
.steps1::after {
    width:20% !important;
}
.steps2::after {
    width: 40% !important;
}
.steps3::after {
    width: 60% !important;
}
.steps4::after {
    width: 80% !important;
}
.steps5::after {
    width: 100% !important;
}
    .steps-wizard::after {
        position: absolute;
        content: "";
        width: 85%;
        margin: auto;
        height: 1px;
        background: lightgrey;
        bottom: -4px;
    }
.step {
    font-size: 20px;
    color: grey;
    position:relative;
}
.outer-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .outer-container::after {
        position: absolute;
        content: "";
        left:45px;
        width: 85%;
        margin: auto;
        height: 1px;
        background: lightgrey;
        bottom: -4px;
    }

.stepar {
    font-size: 20px;
    color: grey;
    position: relative;
}
.step-col-1 {
    font-size: 20px;
    color: grey;
    position: relative;
}
.step-col-1ar {
    font-size: 20px;
    color: grey;
    position: relative;
}
.stepar:not(:last-of-type)::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 54%;
    background: lightgrey;
    left: 0;
    top: 8px;
}
    .step:not(:last-of-type)::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 54%;
        background: lightgrey;
        right: 0;
        top: 8px;
    }
    .step-col-1:not(:last-of-type)::after {
        content: "";
        position: absolute;
        width: 1px;
        height: 54%;
        background: lightgrey;
        right: -8px;
        top: 8px;
    }
.step-col-1ar:not(:last-of-type)::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 54%;
    background: lightgrey;
    left: -8px;
    top: 8px;
}
.checked {
    color: green !important;
}