.approval-item{
    position: relative;
    width: calc(100% - 12px);
    box-sizing: border-box;
    margin-bottom: 12px;
    
    .approval-item-avatars,.arrow{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    .approval-time {
        display: inline-block;
        font-size: 14px;
        color: #9DA0A3;
        margin-left: .38rem;
        margin-bottom: .04rem;
        font-weight: 300;
        &.time-status-2 {
            color: #FF9500;
        }
        &.time-status-6 {
            color: #FF7360;
            span{
                padding-left: 6px;
            }
        }
    }
    .approval-item-container {
        position: relative;
    }
    .approval-item-left{
        .approval-item-icon{
            position: absolute;
            top: 26px;
            left: 16px;
            width: 16px;
            height: 16px;
            background-repeat: no-repeat;
            display: inline-block;  
            z-index: 1;
            &.approval-start {
                background-image: url('./Icon/approval-start.svg');
            }
            &.approval-unstart {
                background-image: url('./Icon/approval-unstart.svg');
            }
            &.approval-end {
                top: 14px;
                background-image: url('./Icon/approval-end.svg');
            }
            &.approval-end-false {
                top: 14px;
                background-image: url('./Icon/approval-end-false.svg');
            }
            &.approval-complete {
                background-image: url('./Icon/approval-complete.svg');
            }
            &.approval-progress {
                left: 14px;        
                background-image: url('./Icon/approval-progress.svg');
                width: 20px;
                height: 24px;
                top: 24px;
            }
            &.approval-discontinue {
                background-image: url('./Icon/approval-discontinue.svg');
            }
        }        
        .approval-item-line{
            position: absolute;
            left: 23px;
            width: 1px;
            &.l-1, &.l-5{
                background: #8BDA44;
            }
            &.l-2{
                background: -webkit-linear-gradient(top,#8BDA44,#349AF6);
            }
            &.l-6{
                background: -webkit-linear-gradient(top,#8BDA44,#FF7360);
            }
            &.l-3,&.l-4{
                // background: -webkit-linear-gradient(top,#E1E3E5,#9DA0A3);
                background: #E6E7E8;
            }
        }
    }
    .approval-item-card {
        width: calc(100% - 38px);
        margin-left: .38rem;
    }
}
.approval-item-workflow {
    font-size: 16px;
    color: #1E80C7;
    margin-left: .5rem;
}