.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;
        }
    }
    &.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;
        }
    }
}