.@{noahvPrefixCls}-steps-wrapper {
    min-width: 860px;
    .@{noahvPrefixCls}-steps-header-wrapper {
        width: 100%;
        height: 50px;
        position: relative;
        user-select: none;
        .@{noahvPrefixCls}-steps-prev-btn {
            display: inline-block;
            vertical-align: middle;
            width: 10px;
            height: 10px;
            border-left: 1px solid @noahv-steps-border-color;
            border-bottom: 1px solid @noahv-steps-border-color;
            transform: rotate(45deg);
            position: absolute;
            left: 0;
            top: 10px;
        }
        .@{noahvPrefixCls}-steps-back-btn {
            display: inline-block;
            vertical-align: middle;
            width: 10px;
            height: 10px;
            border-right: 1px solid @noahv-steps-border-color;
            border-top: 1px solid @noahv-steps-border-color;
            transform: rotate(45deg);
            position: absolute;
            right: 0;
            top: 10px;
        }
        .@{noahvPrefixCls}-steps-steps-wrapper {
            width: 90%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            .step-wrapper {
                width: 15.5%;
            }
            .step-last-shown {
                width: 6%;
            }
            .step-wrapper, .step-last-shown {
                display: inline-block;
                vertical-align: middle;
                position: relative;
                .finished {
                    background: #3a62ca;
                    left: 15px;
                }
                .unfinished {
                    background: #ddd;
                    left: 8px;
                }
                .text-finished {
                    color: #3a62ca;
                }
                .text-running {
                    color: #3a62ca;
                }
                .text-paused {
                    color: #3a62ca;
                }
                .text-unfinished {
                    color: #999;
                }
                .step-line {
                    display: inline-block;
                    vertical-align: middle;
                    width: 97%;
                    height: 1px;
                    position: absolute;
                    top: 15px;
                }
                .step-icon {
                    display: inline-block;
                    vertical-align: middle;
                    height: 32px;
                    z-index: 9;
                    position: relative;
                    img:nth-child(1) {
                        display: inline-block;
                        width:32px;
                        height:32px;
                        position: relative;
                        top: 1px;
                    }
                    .running-outer {
                        display: inline-block;
                        width:32px;
                        height:32px;
                        position: absolute;
                        top: -1px;
                        left: 0;
                        animation: noahvStepRunning 3s linear infinite;
                        @keyframes noahvStepRunning {
                            from {
                                transform: rotate(360deg);
                            }
                            to {
                                transform: rotate(0deg);
                            }
                        }
                    }
                    .step-text {
                        display: block;
                        font-size: @noahv-font-size;
                        letter-spacing: 0;
                        font-family: Microsoft YaHei;
                        position: absolute;
                        top: 30px;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                    .step-icon-ready {
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        border-radius: 100%;
                        background: #bbb;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .step-prev-line, .step-back-line {
                    display: inline-block;
                    vertical-align: middle;
                    height: 1px;
                }
                .step-prev-line {
                    position: absolute;
                    width: 20px;
                    top: 15px;
                    left: -13px;
                }
                .step-back-line {
                    position: absolute;
                    width: 40px;
                    top: 15px;
                    left: 0;
                }
            }
        }
    }
    .@{noahvPrefixCls}-steps-steps-body-wrapper {
        width: 100%;
        margin-top: 35px;
        position: relative;
        min-height: 180px;
        background: @noahv-steps-bg-color;
        border: 1px solid @noahv-steps-border-color;
        .nav {
            position: absolute;
            left: 30px;
            overflow: hidden;
            width: 0;
            height: 0;
            border-width: 15px;
            border-style: solid dashed dashed dashed;
        }
        .nav-border {
            top: -30px;
            border-color: transparent transparent @noahv-steps-border-color transparent;
        }
        .nav-background {
            top: -29px;
            border-color: transparent transparent @noahv-steps-bg-color transparent;
        }
    }
    .steps-compute-container {
        visibility: hidden;
        font-size: @noahv-font-size;
        font-family: Microsoft YaHei;
        letter-spacing: 0;
        white-space: nowrap;
        float: left;
    }
}