.f-template-progressstep-demo{
    padding: 2rem;
    .progressstep-example-wrapper{
        border:1px solid #ddd;
        padding:30px 10px;
        
    }
    .demo-title{
        margin: 20px 0;
    }
}

.progressstep-template{
    font-size: 16px;
    &.step-finish{
        color: #4999FE;
    }
    &.step-active{
        color: #F7962A;
    }
}

.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;
            }
        }
    }
}
// .f-step-row{
//     display: flex;
//     position: relative;
//     padding-right: 0.4375rem;
//     padding-bottom: 0.9375rem;
//     // flex: 1 1 auto;
//     .f-progress-step-content{
//         display: inline-block;
//         .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-multi{
//     .f-step-multi-item{
//         display: flex;
//         flex-direction: row;
//         padding-right: 0.4375rem;
//         padding-bottom: 0.9375rem;
//         align-items: center;
//         .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;
//                 }
//             }
//         }
//     }
// }