.x-tree-attr[type="component"]
{
    overflow: visible !important;
}
.x-tree-attr[type="api"]
{
    overflow: visible !important;
}
.x-tree-attr .node_text
{
    width: 100%;
    overflow: hidden;
    display: inline-block;
    line-height:30px;
}
.x-tree-attr[type="flow"]:before {
    content: "";
    background-image: url("../../assets/images/tree.png");
    background-repeat: no-repeat;
    background-size: 20px;
    width:26px;
    height:26px;
}

/* .showComponentul:before 
{
    top:10px;
} */
.tree_js .x-tree-node-ct li[type="iteration"] > ul > li::after
{
    outline: dashed 1px #696969;
    content: "";
    height: 8px;
    left: 2%;
    position: absolute;
    top: 20.5px;
    transform: rotate(90deg);
    display: block;
}
.tree_js .x-tree-node-ct li[type="conditionStep"] > ul > li::after
{
    outline: dashed 1px #696969;
    content: "";
    height: 8px;
    left: 2%;
    position: absolute;
    top: 20.5px;
    transform: rotate(90deg);
    display: block;
}


.tree_js  > li > .showComponentul:before
{
    top:14px; 
}

.tree_js  > li[type="conditionStep"] > ul
{
    padding-left:0px;
}



.tree_js  > li > .showcondstepul:before 
{
  height:36px !important;
}
.tree_js  > li > .showloopul:before
{
    top:14px; 
    outline: dashed 1px #696969;
    content: "";
    left: -6px;
    position: absolute;
    top: 14px;
    bottom: 50%;
}
.tree_js  > li > .showloopul :before 
{
  /* height:36px !important; */
}

.showcondstepul li .x-tree-node-ct
{
padding-left:0px;
}
.hflowtreeRender1LiveTree .tree_js
{
top: 20px;
}