.f-step-row-wrapper{
    .f-step-row,.f-step-multi-item{
        display: flex;
        position: relative;
        padding-right: 0.4375rem;
        padding-bottom: 0.9375rem;
        align-items: center;
        .f-progress-step-content,.f-step-multi-item-content{
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
        }
        .f-progress-step-title {
            display: inline-block;
            vertical-align: middle;
            .step-name,.step-message{
                margin-bottom: 0;
            }
            .step-name {
                font-size: 0.875rem;
                color: #8C8C8C;
                line-height: 1.25rem;
                padding-right: 0.625rem;
                &.step-name-success{
                    color: #000;
                    opacity: 0.85;
                }
            }
        }
    }
    .f-step-row-item-hidden,.f-step-multi-item-hidden{
        visibility: hidden;
    }
    .step-icon {
        display: inline-block;
        width: 1.875rem;
        height: 1.875rem;
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        line-height: 1.875rem;
        border-radius: 100%;
        font-size: 0.75rem;
        text-align: center;
        color: #fff;
        vertical-align: middle;
        background-color: #cdcdcd;
        flex-shrink: 0;
        &.step-icon-doing{
            background-color: #388fff;
        }
        &.step-icon-done{
            background-color: #59A1FF;
        }
    }
    .f-step-row,.f-step-multi-item{
        &:hover{
            .step-icon-done{
                background-color: #388fff;
            }
            .step-icon-doing{
                background-color: #59A1FF;
            }
        }
    }
    .f-progress-step-line{
        // display: inline-block;
        flex: 1 1 auto;
        position: relative;
        display: inline-flex;
        min-width: 3.75rem;
        // justify-content:end;
        vertical-align: middle;
        &::after{
            content: '';
            border-top: 2px dotted rgba(0,0,0,0.20);
            left: 0;
            height: 0.125rem;
            overflow: hidden;
            position: absolute;
            right: 0.625rem;
            top: 50%;
            margin-top: -0.0625rem;
        }
        .triangle {
            position: absolute;
            right: 0;
            top: 50%;
            display: inline-block;
            width: 0.4375rem;
            height: 0.4375rem;
            margin-top: -0.21875rem;
            border-top: 1px solid rgba(0,0,0,0.20);
            border-right: 1px solid rgba(0,0,0,0.20);
            transform: rotate(45deg);
        }
        &.f-progress-step-line-doing {
            &::after{
                border-color: #388FFF;
            }
            .triangle {
                border-color: #388FFF;
            }
        }
    }
}