$brand-primary: #0e4da4;
$white: #fff;
$grey-light: #a2a5a8;
%remain-steps {
    &:before {
        content: "\00a0";
        font-weight: 700;
    }
    &:after {
        //background-color: #000000;
    }
}
.multi-steps {
    display: table;
    table-layout: fixed;
    width: 100%;
    > li {
        min-width: 162px;
        display: inline-block;
        counter-increment: stepNum;
        text-align: center;
        position: relative;
        color: $primary;
        font-weight: normal;
        font-size: 1.1rem;
        line-height: 2;
        &:before {
            font-weight: bold;
            font-size: 1.1rem;
            line-height: 2;
            font-family: "bootstrap-icons" !important;
            content: "\f26e";
            display: block;
            margin: 0 auto 4px;
            //background-color: $white;
            width: 40px;
            height: 40px;
            line-height: 1.3;
            text-align: center;
            font-weight: bold;
            font-size: 2.3rem;
            position: relative;
            z-index: 2;
            border: {
                width: 1px;
                style: dashed;
                radius: 25%;
            }
        }
        &:after {
            content: "";
            height: 1px;
            width: 70%;
            position: absolute;
            top: 21px;
            left: 65%;
            border: {
                width: 1px;
                style: dashed;
            }
        }
        &:last-child {
            &:after {
                display: none;
            }
        }

        &.is-active {
            @extend %remain-steps;
            &:before {
                background-color: $white;
                //border-color: $primary;
            }

            ~ li {
                //color: #808080;
                @extend %remain-steps;
                &:before {
                    background-color: $white;
                    //border-color: $grey-light;
                }
            }
        }
    }

    @media (max-width: 576px) {
        .installation_status_table tbody tr td {
            font-size: 13px;
            padding: 5px 10px !important;
        }
        .multi-steps {
            > li {
                font-size: 11px;
                font-weight: normal;
                padding-right: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:before {
                    width: 20px;
                    height: 20px;
                }
                &::after {
                    display: none;
                }
            }
        }
    }
}


