@wz-color-default: #C0C0C0;
@wz-color-current: #2cc5c5;
@wz-color-done: #2cc5c5;
@wz-color-editing: #2cc5c5;
.steps-indicator {
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 20px 0 0 0;
    height: 30px;
    list-style: none;
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    li {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        padding-top: 10px;
        text-align: center;
        line-height: 15px;
        &>div {
            cursor: pointer; // &>span:first-child {
            //     margin-top: 15px;
            //     margin-left: 6%;
            // }
        }
        &>div.default,
        &>div.current,
        &>div.editing,
        &>div.done {
            &>div:last-child {
                margin-top: 15px;
            }
            .container-default {
                width: 100%;
                height: 3px;
                position: relative;
                .circle {
                    display: inline-block;
                    vertical-align: middle;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    position: absolute;
                    top: -8px;
                    left: calc(50% - 2px);
                }
            }
            .container-first {
                width: 50%;
                margin-left: 50%;
                height: 3px;
                position: relative;
                .circle {
                    display: inline-block;
                    vertical-align: middle;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    position: absolute;
                    top: -8px;
                    left: 0;
                }
            }
            .container-last {
                width: 50%;
                margin-right: 50%;
                height: 3px;
                position: relative;
                .circle {
                    display: inline-block;
                    vertical-align: middle;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    position: absolute;
                    top: -8px;
                    left: calc(100% - 5px);
                }
            }
        }
        &>div.default {
            &>div:first-child {
                background-color: @wz-color-default;
                &>span {
                    background-color: @wz-color-default;
                    border: solid 1px @wz-color-default;
                }
            }
        }
        &>div.current {
            &>div:first-child {
                background-color: @wz-color-current;
                &>span {
                    background-color: @wz-color-current;
                    border: solid 1px @wz-color-current;
                }
            }
        }
        &>div.editing {
            &>div:first-child {
                background-color: @wz-color-editing;
                &>span {
                    background-color: @wz-color-editing;
                    border: solid 1px @wz-color-editing;
                }
            }
        }
        &>div.done {
            &>div:first-child {
                background-color: @wz-color-done;
                &>span {
                    background-color: @wz-color-done;
                    border: solid 1px @wz-color-done;
                }
            }
        }
    }
    li:last-child .arrow {
        display: none;
    }
    &.steps-2 li {
        width: ~'calc(100% / 2)';
    }
    &.steps-3 li {
        width: ~'calc(100% / 3)';
    }
    &.steps-4 li {
        width: ~'calc(100% / 4)';
    }
    &.steps-5 li {
        width: ~'calc(100% / 5)';
    }
    &.steps-6 li {
        width: ~'calc(100% / 6)';
    }
    &.steps-7 li {
        width: ~'calc(100% / 7)';
    }
    &.steps-8 li {
        width: ~'calc(100% / 8)';
    }
    &.steps-9 li {
        width: ~'calc(100% / 9)';
    }
    &.steps-10 li {
        width: ~'calc(100% / 10)';
    }
    &.steps-11 li {
        width: ~'calc(100% / 11)';
    }
    li.default {
        pointer-events: none;
    }
    li.current,
    li.editing {
        pointer-events: none;
    }
}

.bg-wizard {
    position: absolute;
    width: 100%;
    height: 82px;
    background-color: #F2F2F2;
    top: 0px;
}