.f-progress-step {
    .f-progress-step-list{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .step {
        display: inline-block;
        .f-progressstep-row{
            display: flex;
            position: relative;
            padding-right: 0.4375rem;
            padding-bottom: 0.9375rem;
            // flex: 1 1 auto;
            .f-progress-step-content{
                display: inline-block;
                .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;
                }
                .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-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%;
                    // top: 0.6875rem;
                    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-success {
                //     &::after{
                //         border-color: #388FFF;
                //     }
                //     .triangle {
                //         border-color: #388FFF;
                //     }
                // }
            }
            // .f-progress-step-desc{
            //     position: absolute;
            //     left: 0;
            //     top: 34px;
            //     font-size: 14px;
            //     color: #000;
            //     opacity: 0.45;
            // }
            
            &.step-finish{
                .f-progress-step-content{
                    .step-icon{
                        //background-color: #59A1FF;
                    }
                }
                &:hover{
                    .f-progress-step-content{
                        .step-icon{
                            //background-color: #388FFF;
                        }
                    }
                }
                &:active{
                    .f-progress-step-content{
                        .step-icon{
                            //background-color: #0068F3;
                        }
                    }
                }
            }
            &.step-active{
                .f-progress-step-content{
                    .step-icon{
                        //background-color: #388FFF;
                    }
                }
                &:hover{
                    .f-progress-step-content{
                        .step-icon{
                            //background-color: #59A1FF;
                        }
                    }
                }
                &:active{
                    .f-progress-step-content{
                        .step-icon{
                            //background-color: #0068F3;
                        }
                    }
                }
            }
            &.step-error{
                .f-progress-step-content{
                    .step-icon{
                        //background-color: #dc3545;
                    }
                }
            }
        }
    }
    .f-progress-step-list-block{
        .step{
            display: block;
            .f-progressstep-row{
                padding: 0;
                flex-direction: column;
                .f-progress-step-line{
                    flex: 1 1 auto;
                    // justify-content:end;
                    width: 0.625rem;
                    min-width: 0.625rem;
                    min-height: 2.5rem;
                    margin:  0.5rem 0 1.25rem 1.375rem;
                    // border-left: 2px dotted rgba(0,0,0,0.20);
                    &::after{
                        content: '';
                        border-top: 0;
                    }
                    .triangle{
                        top: auto;
                        left: -0.3125rem;
                        bottom: -0.5rem;
                        border-top: 0;
                        // border-bottom: 1px solid rgba(0,0,0,0.20);
                    }
                    &.f-progress-step-line-success {
                        //&::after{
                            //border-color: #4999FE;
                        //}
                        .triangle {
                            //border-color: #4999FE;
                        }
                    }

                  .f-progress-step-title .step-name{
                      padding-right:0.875rem;
                  }
                }
                // .f-progress-step-desc{
                //     left: 46px;
                //     top: 34px;
                // }
            
            }
        }
        
    }
    .f-progress-step-horizontal-fill{
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap;
        .step{
            flex: 1 1 auto;
        }
    }
    .f-progress-step-vertical-fill{
        display: flex;
        flex-direction: column;
        align-content: space-between;
        .step{
            display: flex;
            flex: 1 1 auto;
            .f-progressstep-row{
                flex: 1 1 auto;
                display: flex;
            }
        }
    }
    li.clickable{
        cursor: pointer;
    }
    li.click-disable{
        cursor: not-allowed;
    }

    .f-progress-step-empty{
        color: #000;
        opacity: 0.65;
        font-size: 0.875rem;
        
    }

    .f-progressstep-row-multi{
        display: flex;
        flex-direction: column;
        align-items: left;
        .f-progressstep-multi-item-content{
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
        }
        .f-step-multi-item{
            position: relative;
            padding-right: 0.4375rem;
            padding-bottom: 0.9375rem;
            &:last-child{
                padding-bottom: 0;
            }
            &.f-step-multi-item-active{
                .f-progress-step-title{
                    .step-name{
                        color: rgba(0,0,0,0.85)!important;
                    }
                }

            }
            &.f-step-multi-item-finish{
                .f-progress-step-title{
                    .step-name{
                        color: rgba(0,0,0,0.85)!important;
                    }
                }
            }
        }
    }

    .f-progress-step-list-block{
        .step{
            // display: block;
            .f-progressstep-row.f-progressstep-row-multi{
                flex-direction: row;
                .f-step-multi-item{
                    padding: 0;
                    flex-direction: column;
                    .f-progress-step-line{
                        display: block;
                    }
                }
            }
        }
    }
}