.x-tree-breadcrumb[type="component"]:before {
    content: "\f1b3";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #a90056;
}

.x-tree-breadcrumb[type="flow"]:before {
    content: "";
    background-image: url(../../assets/images/tree.png);
    background-repeat: no-repeat;
    background-size: 1em;
    
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: 0.6em;

  
}

.x-tree-breadcrumb[type="api"]:before {
    content: "\f013";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #00a94b;
}

.x-tree-breadcrumb[type="condition"]:before {
    content: "\f1cb";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ff5757;
}

.x-tree-breadcrumb[type="conditionStep"]:before {
    content: "\f079";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ff67a6;
}

.x-tree-breadcrumb[controltype="request"]:before {
    content: "\f0c1";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ff0c00;
}

.x-tree-breadcrumb[controltype="response"]:before {
    content: "\f0c1";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ff0c00;
}

.x-tree-breadcrumb[controltype="body"]:before {
    content: "\f0c1";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ff0c00;
}

.x-tree-breadcrumb[controltype="headers"]:before {
    content: "\f0c1";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ff0c00;
}

.x-tree-breadcrumb[controltype="loop"]:before {
    content: "\f021";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ffe210;
}
.x-tree-breadcrumb[controltype="loop"]:after{
    background-color: #987efe;
}
.x-tree-breadcrumb[controltype="conditionStep"]:before {
    content: "\f079";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ff67a6;
}
.x-tree-breadcrumb[controltype="conditionStep"]:after{
    background-color: #84b9fb;
}
.x-tree-breadcrumb[controltype="iteration"]:before {
    content: "\f079";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #87fdd7;
}
.x-tree-breadcrumb[controltype="iteration"]:after{
    background-color: #fb8484;
}

.tracebrdcrmb_dropdown {
    z-index: 999;
    color: #000;
    width: 200px;
    height: auto;
    padding: 0px 0px;
    max-height: 496px;
    position: absolute;
    background-color: #b9b9b9;
    border: 1px solid #939393;
    border-top: 0px;
    right: 0px;
    top: calc(100% + 1px)
}

.tracebrdcrmb_dropdown .tracebrdcrmb_dropdown_item {

    border-bottom: 1px solid #939393;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 24px;
    margin-top: 0px;
    margin-bottom: 0px;
    position:relative;
}
.tracebrdcrmb_dropdown .tracebrdcrmb_dropdown_item:hover {

    
    background: #669543;
color: #ffffff;
border-bottom-color:  #669543;

}
.tracebrdcrmb_dropdown:last-child {
    margin-bottom: 0px;
    border-bottom: 0px !important;
}

.tracebrdcrmb_dropdown .tracebrdcrmb_dropdown_item .node_level {

    width:28px;
    height:28px;
    display: inline-block;
    background-color:#669543;
    color:#fff;
    border-radius:50%;
    text-align: center;
    margin-left:5px;
    line-height: 28px;
    position: absolute;
    top:2px;
    right:10px;

}


.tracebrdcrmb_dropdown .tracebrdcrmb_dropdown_item:hover .node_level {

   
    background-color:#fff;
    color:#669543;
    

}

.trace_breadcrumb
{
    padding-right:40px !important;
}
.trace_breadcrumb .node_level
{
    width:28px;
    height:28px;
    display: inline-block;
    background-color:#669543;
    color:#fff;
    border-radius:50%;
    text-align: center;
    margin-left:5px;
    float: right;
    line-height: 28px;
    position: absolute;
    top:2px;

}

.trace_breadcrumb:hover .node_level
{
    
    background-color:#fff;
    color:#669543;
   

}

.brdcrmbDropDown_scroll

{
    overflow-y:scroll;
}

.traceMoreEllipse:before
{
    content:'' !important;
    width:0px !important;
    height:0px !important;
    color:#dda509 !important;
}

.traceMoreEllipse i:before
{
    
    color:#000 !important;
}
.traceMoreEllipse:hover i:before
{
    
    color:#fff !important;
}
