.tree_flow, .tree_flow ul, .tree_flow li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree_flow {
    margin: 0 0 1em;
    text-align: center;
}
.tree_flow, .tree_flow ul {
    display: table;
}
.tree_flow ul {
  width: 100%;
}
    .tree_flow li {
        display: table-cell;
        padding: .5em 0;
        vertical-align: top;
    }
        /* _________ */
        .tree_flow li:before {
            outline: solid 1px #666;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
        .tree_flow li:first-child:before {left: 50%;}
        .tree_flow li:last-child:before {right: 50%;}

        .tree_flow code, .tree_flow span {
            border: solid .1em #666;
            border-radius: .2em;
            display: inline-block;
            margin: 0 .2em .5em;
            padding: 10px 12px;
            position: relative;
        }
        /* If the tree represents DOM structure */
        .tree_flow code {
            font-family: monaco, Consolas, 'Lucida Console', monospace;
        }

            /* | */
            .tree_flow ul:before,
            .tree_flow code:before,
            .tree_flow span:before {
                outline: solid 1px #666;
                content: "";
                height: .5em;
                left: 50%;
                position: absolute;
            }
            .tree_flow ul:before {
                top: -.5em;
            }
            .tree_flow code:before,
            .tree_flow span:before {
                top: -.55em;
            }

/* The root node doesn't connect upwards */
.tree_flow > li {margin-top: 0;}
    .tree_flow > li:before,
    .tree_flow > li:after,
    .tree_flow > li > code:before,
    .tree_flow > li > span:before {
      outline: none;
    }

    .tr_parent:hover
    {
        cursor: pointer;
    }

    .tr_child:hover
    {
        cursor: pointer;
    }
.tree_flow h6:before {
/* outline: solid 1px #666;
content: "";
height: 1.5em; */
left: 82%;
position: absolute;
top: 1px;
}
/* h6:first-child:before {
top: 0;
} */
.tree_light{
background-color: #3c8dbc;
color: #fff;
}
.build_light{
border: 3px solid #04cc67;
}
.plus_icon:after{
content: "\f0fe";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #ffffff;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
top: 31px;
left: 44%;
}
.minus_icon:after{
content: "\f146";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #ffffff;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
top: 31px;
left: 44%;
}
.loop_shape{
background-image: url(../img/parl.png) !important;
background-repeat: no-repeat;
width: 95px;
height: 52px;
}
.loop_shape p{margin: 8px 0px 0px 0px !important;}
.tr_item p{
margin: 33px 0px 0px -29px;
color: #fff;
}
.func_shape{
background-image: url(../img/oval.png) !important;
background-repeat: no-repeat;
width: 92px;
height: 51px;;
}
.func_shape p{
margin: 8px 0px 0px 0px !important;
}
.tri_shape {
background-image: url(../img/diamond.png) !important;
color: #fff;
width: 82px !important;
height: 82px !important;
background-repeat: no-repeat;
}
.tri_shape p{
margin: 21px 0px 0px 1px;
}
.subitems  img{width: 14px !important;margin-right: 6px !important;}
.tree_flow code {
background-image: url(../img/rect.png);
color: #000;width: 92px;height: 51px;
background-repeat: no-repeat;
border: none !important;
}
.plus_icon:after {color: #000 !important;}
.minus_icon:after {color: #000 !important;}

.treestatus[status="3"]:after{
    content: "\f00d";
    font-family: FontAwesome;
    background: #e61f0b;
    height: 14px;
    width: 16px;
    border: 1px solid #e61f0b;
    color: #fff;
}
.treestatus[status="2"]:after{
    content: "\f00c";
    font-family: FontAwesome;
    background: #028338;
    height: 14px;
    width: 16px;
    border: 1px solid #028338;
    color: #fff;
}
.treestatus[status="1"] {
    content: url(../../images/task_exe/ongoing2.gif);
    width: 20px;
}
.setstatus:before {
    outline-color: #dc0909 !important;
}
.x-tree-attr[type="text"]:before {
    content: "\f035";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}
.x-tree-attr[type="email"]:before {
    content: "\f003";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}
.x-tree-attr[type="area"]:before {
    content: "\f034";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}
.x-tree-attr[type="area"]:before {
    content: "\f034";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}
.x-tree-attr[type="num"]:before {
    content: "\f098";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}
.x-tree-attr[type="function"]:before {
    content: "\f08b";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}
.x-tree-attr[type="object"]:before{
    content: url(http://jsonviewer.stack.hu/object.gif);
}
.x-tree-attr[type="array"]:before {
    content: url(http://jsonviewer.stack.hu/array.gif);
}
.x-tree-attr[type="attribute"]:before {
    content: url(http://jsonviewer.stack.hu/blue.gif);
}
.x-tree-attr[type="radio"]:before {
    content: url(../../images/tree/radio.png);
}
.x-tree-attr[type="button"]:before {
    content: "\f08b";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}
.x-tree-attr[type="condition"]:before {
    content: "\f066";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}