.barbody,.barbody div{
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
}
.barbody{
    flex-direction: row;
    flex-wrap: nowrap;
    height: 67px;
}
.barbody .barrightbody,.barbody .barleftbody{
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: 45px;
}
/**左右箭头**/
.barbody .leftarrow {
    position: relative;
    width: 0;
    height: 0;
    flex-grow: 0;
    flex-shrink: 0;
    border-width: 12px 12px 12px 0;
    border-style: solid;
    border-color: transparent #999 transparent transparent ;
    margin-bottom: 20px;
}
.barbody .leftarrow:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 2px;
    border-width: 10px 10px 10px 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
}
.barbody .rightarrow {
    position: relative;
    width: 0;
    height: 0;
    flex-grow: 0;
    flex-shrink: 0;
    border-width: 12px 0 12px 12px;
    border-style: solid;
    border-color: transparent transparent transparent #999;
    margin-bottom: 20px;
}
.barbody .rightarrow:after {
    content: "";
    position: absolute;
    top: -10px;
    left: -12px;
    border-width: 10px 0 10px 10px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
}
.barbody .barcenterbody{
    flex-wrap: nowrap;
    flex-grow: 0;
    width: 731px;
}
.barbody .firstlevel{
    height: 21px;
    margin-bottom: 6px;
    padding-left: 35px;
    padding-right: 35px;
    align-items: center;
    justify-content: center;
}
.barbody .nodespan{
    height: 21px;
    width: 21px;
    border-radius: 21px;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: #1890FF;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.barbody .nodespan0{
    background-color: #D9D9D9;
}

.barbody .nodeline{
    height: 4px;
    width: 107px;
    flex-grow: 0;
    background-color: #1890FF;
}
.barbody .nodeline.nodeline0{
    background-color: #D9D9D9;
}
.barbody .nodeline.nodeline1{
    background-color: #1890FF;
}
.barbody .nodeline.nodeline2{
    background-color: #FB2323;
}
.barbody .secondlevel,.barbody .thirdlevel{
    height: 20px;
    justify-content: center;
}

.barbody .nodename,.barbody .nodedesc{
    width: 96px;
    flex-grow: 0;
    justify-content: center;
    margin-right: 32px;
}
.barbody .nodename>span,.barbody .nodedesc>span{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.barbody .barcell{
    flex-direction: column;
    display: none;
}

/**成功勾*/
.barbody .icon-successed {display: inline-block;position: relative;width: 21px;height: 21px;border-radius: 50%;/* background-color: #2ac845; */border: 2px solid #5582F3;flex-grow: 0;flex-shrink: 0;}


.barbody .icon-successed:before, .icon-successed:after{content: '';pointer-events: none;position: absolute;color: #5582F3;border: 1px solid;background-color: #5582F3;}


.barbody .icon-successed:before{width: 3px;height: 1px;left: 5px;top: 50%;transform: skew(0deg,50deg);}


.barbody .icon-successed:after{width: 5px;height: 1px;left: 8px;top: 45%;transform: skew(0deg,-50deg);}
/**感叹号**/
.barbody .nodespan.icon-fail{
    display: inline-block;
    position: relative;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: #FB2323;
}
.barbody .nodespan.icon-fail:before{
    content: '';
    position: absolute;
    width: 3px;
    height: 10px;
    top: 3px;
    left: 9px;
    background-color: white;
    border-radius: 1px;
}
.barbody .nodespan.icon-fail:after{
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 1px;
    top: 15px;
    left: 9px;
    background-color: white;
}