.f-timeline{
    padding-right: 26px;
    .timeline-date{
        position: relative;
        padding-bottom: 16px;
        padding-left: 18px;
        color: rgba(0,0,0,0.45);
        font-size: 14px;
        line-height: 20px;
        &::before{
            position: absolute;
            left: 0;
            top: 0;
            width: 1px;
            height: 35px;
            border-left: 1px dotted #dcdcdc;
            content: '';
            z-index: 9;
        }
        &::after{
            position: absolute;
            left: -3px;
            top: 6.5px;
            display: block;
            width: 7px;
            height: 7px;
            background: #66B869;
            border-radius: 100%;
            content: '';
            z-index: 10;
        }
    }
    .timeline-content-wrapper{
        padding-left: 18px;
        padding-bottom: 13px;
        border-left: 1px dotted #dcdcdc;
        .timeline-content{
            // margin-left: 21px;
            padding: 15px 14px;
            background: #F9F9F9;
            border: 1px solid #F2F2F2;
            &-title{
                padding-bottom: 12px;
                font-size: 14px;
                line-height: 20px;
                color: rgba(0,0,0,0.65);
                border-bottom: 1px solid rgba(220,220,220,0.60);
                .title-sum{
                    line-height: 22px;
                    font-size: 16px;
                    color: #F49730;
                }
            }
            &-main{
                .content-data{
                    font-size: 0;
                    margin-top: 16px;
                    li{
                        display: inline-block;
                        padding-right: 30px;
                        margin-bottom: 18px;
                        font-size: 14px;
                        line-height: 20px;
                        color: rgba(0,0,0,0.65);
                    }
                }
                .content-progress{
    
                }
            }
        }
    }
    &.f-timeline-first{
        .timeline-date{
            &::before{
                height: 28px;
                top: 7px;
            }
        }
    }
    &.f-timeline-success{
        .timeline-date::after{
            background-color: #66B869;
        }
    }
    &.f-timeline-info{
        .timeline-date::after{
            background-color: #59A1FF;
        }
    }
    &.f-timeline-error{
        .timeline-date::after{
            background-color: #f24645;
        }
    }
    &.f-timeline-warn{
        .timeline-date::after{
            background-color: #f49730;
        }
    }
}