.approval-item-old{
    position: relative;
    width: calc(100% - 8px);
    min-height: .56rem;
    box-sizing: border-box;
    margin-bottom: 8px;
    .approval-item-icon,.approval-item-text,.approval-item-separate,.approval-item-avatars,.arrow{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    .approval-item-left{
        .approval-item-icon{
            left: 16px;            
            &.icon {
               font-size: 16px;
            }    
            &.m-sys-approval-progress {
                font-size: 20px;
                left: 17px;
            }
        }
        .approval-item-readmore{
            left: 18px;
            background:#bfc4c7;
            border-radius:100px;
            width:12px;
            height:12px;
        }
        .approval-item-line{
            position: absolute;
            left: 24px;
            width: 1px;
            &.l-1, &.l-5{
                background: -webkit-linear-gradient(top,#BFEF79,#6EC421);
            }
            &.l-2{
                background: -webkit-linear-gradient(top,#64CAFB,#2777BF);
            }
            &.l-3,&.l-4{
                background: -webkit-linear-gradient(top,#E1E3E5,#9DA0A3);
            }
        }
    }
    .approval-item-right{
        border-radius: 3px;
        padding: 8px 12px;
        background: #fff;
        position: relative;
        width: calc(100% - 72px);
        min-height: .4rem;
        margin-left: .48rem;
        .arrow{
            right: 12px;
            font-size: 16px;
        }
        .approval-item-text{
            left:12px;
            display: inline-block;
            font-size: 14px;
            line-height: 16px;
            text-align: center;
            padding-right: .12rem;
            &.t-1,&.t-5{
                color: #8bda44;
            }
            &.t-2{
                color: #349af6;
            }
            &.t-3{
                color: #bfc4c7;
            }
            &.t-4{
                color: #1e80c7;
                font-size: 16px;
            }
        }
        .approval-item-separate{
            left: 66px;
            width: .01rem;
            height: .24rem;
            background: #d8d8d8;
        }
        .approval-item-avatars{
            left: 78px;
            color: #fff;
        }
        .approval-item-names{
            max-width: calc(100% - 110px);
            margin-left: 110px;
            &.only{
                height: 40px;
                margin-left: 66px;
                .approval-item-name{
                    font-size:16px;
                    color:#3a4247;
                    line-height:40px;
                    text-align:left;
                }            
            }
            &.n-3{
                .approval-item-name,.approval-item-assignesNames{
                    color: #9da0a3;
                }
            }
            .approval-item-name{
                width: 100%;
                font-size:16px;
                color:#3a4247;
                line-height: 1.12;
                text-align:left;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;            
            }
            .approval-item-assignesNames{
                font-size:14px;
                color:#6b7175;
                line-height:1.14;
                text-align:left;
                word-break: break-all;
                margin-top: 6px;
            }
        }
    }
}