.x-tree-attr[controltype="checkbox"]:before {
    content: "\f14a";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #480ef9;
}
.x-tree-attr[controltype="checkbox"]:after{
    background-color: #ff5785;
}
.x-tree-attr[controltype="month"]:before {
    content: "\f08e";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #480ef9;
}
.x-tree-attr[controltype="month"]:after{
    background-color: #ff5785;
}
.x-tree-attr[controltype="submit"]:before {
    content: "\f02d";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #00f941;
}
.x-tree-attr[controltype="submit"]:after{
    background-color: #aa39ff;
}
.x-tree-attr[controltype="range"]:before {
    content: "\f0a0";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ef7c06;
}
.x-tree-attr[controltype="range"]:after{
    background-color: #5af775;
}
.x-tree-attr[controltype="week"]:before {
    content: "\f133";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #f16f00;
}
.x-tree-attr[controltype="week"]:after{
    background-color: #ffda73;
}
.x-tree-attr[controltype="hidden"]:before {
    content: "\f133";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #730519;
}
.x-tree-attr[controltype="hidden"]:after{
    background-color: #ff6eaa;
}


.x-tree-attr[controltype="email"]:before {
    content: "\f0e0";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #64bef3;
}
.x-tree-attr[controltype="email"]:after{
    background-color: #f76fe0;
}
.x-tree-attr[controltype="radio"]:before {
    content: "\f28e";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #d80553;
}
.x-tree-attr[controltype="radio"]:after{
    background-color: #7ee7ff;
}
.x-tree-attr[controltype="date"]:before {
    content: "\f073";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #7b04e8;
}
.x-tree-attr[controltype="date"]:after{
    background-color: #7efefe;
}

.x-tree-attr[type="datetime"]:before {
    content: "\f274";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ff5757;
}
.x-tree-attr[type="datetime"]:after{
    background-color: #ffcc5a;
}
.x-tree-attr[type="button"]:before {
    content: "\f0c2";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}
.x-tree-attr[type="button"]:after{
    background-color: #987efe;
}

.x-tree-attr[controltype="button"]:before {
    content: "\f08b";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #091074;
}
.x-tree-attr[controltype="button"]:after{
    background-color: #987efe;
}
.x-tree-attr[controltype="datetime-local"]:before {
    content: "\f133";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #d80553;
}
.x-tree-attr[controltype="datetime-local"]:after{
    background-color: #7ee7ff;
}
.x-tree-attr[controltype="datetime"]:before {
    content: "\f274";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #d80553;
}
.x-tree-attr[controltype="datetime"]:after{
    background-color: #7ee7ff;
}


.x-tree-attr[controltype="radiolist"]:before {
    content: "\f05d";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #d80553;
}
.x-tree-attr[controltype="radiolist"]:after{
    background-color: #7ee7ff;
}
.x-tree-attr[controltype="webcontrol"]:before {
    content: "\f268";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #d80553;
}
.x-tree-attr[controltype="webcontrol"]:after{
    background-color: #7ee7ff;
}
.x-tree-attr[controltype="select"]:before {
    content: "\f0d7";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #d80553;
}
.x-tree-attr[controltype="select"]:after{
    background-color: #7ee7ff;
}

.x-tree-attr[controltype="START"]:before {
    content: "\f144";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #7b04e8;
}
.x-tree-attr[controltype="START"]:after{
    background-color: #7efefe;
}
.x-tree-attr[controltype="STOP"]:before {
    content: "\f28d";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #d85205;
}
.x-tree-attr[controltype="STOP"]:after{
    background-color: #5af775;
}
.x-tree-attr[controltype="DELAY"]:before {
    content: "\f28b";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #d80553;
}
.x-tree-attr[controltype="DELAY"]:after{
    background-color: #7ee7ff;
}
.x-tree-attr[controltype="component"]:before {
    content: "\f1b3";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #a90056;
}
.x-tree-attr[type="component"]:after{
    background-color: #72c5ff;
}



.x-tree-attr[controltype="time"]:before {
    content: "\f017";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #480ef9;
}
.x-tree-attr[controltype="time"]:after{
    background-color: #ff5785;
}
.x-tree-attr[controltype="file"]:before {
    content: "\f016";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #00f941;
}
.x-tree-attr[controltype="file"]:after{
    background-color: #aa39ff;
}
.x-tree-attr[controltype="condition"]:before {
    content: "\f1cb";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ff5757;
}
.x-tree-attr[controltype="condition"]:after{
    background-color: #ffcc5a;
}
.x-tree-attr[controltype="loop"]:before {
    content: "\f021";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ffe210;
}
.x-tree-attr[controltype="loop"]:after{
    background-color: #987efe;
}
.x-tree-attr[controltype="image"]:before {
    content: "\f03e";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #ef7c06;
}
.x-tree-attr[controltype="image"]:after{
    background-color: #5af775;
}
.x-tree-attr[controltype="number"]:before {
    content: "\f163";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #f16f00;
}
.x-tree-attr[controltype="number"]:after{
    background-color: #ffda73;
}
.x-tree-attr[controltype="password"]:before {
    content: "\f13e";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #730519;
}
.x-tree-attr[controltype="password"]:after{
    background-color: #ff6eaa;
}
.x-tree-attr[controltype="reset"]:before {
    content: "\f2d2";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #f91b1b;
}
.x-tree-attr[controltype="reset"]:after{
    background-color: #a872ff;
}
.x-tree-attr[controltype="search"]:before {
    content: "\f002";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #4d11de;
}
.x-tree-attr[controltype="search"]:after{
    background-color: #ff70e7;
}
.x-tree-attr[controltype="value"]:before {
    content: "\f149";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #64bef3;
}
.x-tree-attr[controltype="value"]:after{
    background-color: #f76fe0;
}
.x-tree-attr[controltype="tel"]:before {
    content: "\f095";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #d80553;
}
.x-tree-attr[controltype="tel"]:after{
    background-color: #7ee7ff;
}
.x-tree-attr[controltype="url"]:before {
    content: "\f08e";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #7b04e8;
}
.x-tree-attr[controltype="url"]:after{
    background-color: #7efefe;
}


.x-tree-attr[controltype="operation"].x-tree-attr[name="Add"]:before {
    content: "\f067";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="operation"].x-tree-attr[name="Add"]:after{
    background-color: #ffe37b;
}
.x-tree-attr[controltype="MINUS"]:before {
    content: "\f068";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="MINUS"]:after{
    background-color: #ff7b7b;
}
.x-tree-attr[controltype="MULTIPLY"]:before {
    content: "\f00d";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="MULTIPLY"]:after{
    background-color: #f7ff7b;
}
.x-tree-attr[controltype="DIVIDE"]:before {
    content: "\f033";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="DIVIDE"]:after{
    background-color: #e57bff;
}
.x-tree-attr[controltype="MOD"]:before {
    content: "\f295";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="MOD"]:after{
    background-color: #c67bff;
}

.x-tree-attr[controltype="RESULT"]:before {
    content: "\f03b";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="RESULT"]:after{
    background-color: #c67bff;
}

.x-tree-attr[controltype="VALUE"]:before {
    content: "\f149";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="VALUE"]:after{
    background-color: #c67bff;
}

.x-tree-attr[controltype="FILTER"]:before {
    content: "\f0b0";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="FILTER"]:after{
    background-color: #584a63;
}


.x-tree-attr[controltype="CONCAT"]:before {
    content: "\f1b8";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="CONCAT"]:after{
    background-color: #c67bff;
}
/* .x-tree-attr[controltype="operation"].x-tree-attr[name="Substring"]:before {
    content: "\f160";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="operation"].x-tree-attr[name="Substring"]:after{
    background-color: #c67bff;
} */
.x-tree-attr[controltype="TRANSFORM"]:before {
    content: "\f07e";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="TRANSFORM"]:after{
    background-color: #c67bff;
}
.x-tree-attr[controltype="REPLACE"]:before {
    content: "\f122";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="REPLACE"]:after{
    background-color: #c67bff;
}
.x-tree-attr[controltype="GREATERTHAN"]:before {
    content: "\f105";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="GREATERTHAN"]:after{
    background-color: #c67bff;
}
.x-tree-attr[controltype="NOTEQUAL"]:before {
    content: "";
    background-image: url("../../assets/images/notEqual.png");
    background-repeat: no-repeat;
    background-size: 20px;
    width:26px;
    height:26px;
}
.x-tree-attr[controltype="NOTEQUAL"]:after{
    background-color: #c67bff;
}
.x-tree-attr[controltype="LESSTHANEQUAL"]:before {
    content: "";
    background-image: url("../../assets/images/lessThanEqual.png");
    background-repeat: no-repeat;
    background-size: 20px;
    width:26px;
    height:26px;
}
.x-tree-attr[controltype="LESSTHANEQUAL"]:after{
    background-color: #7bff7f;
}

.x-tree-attr[controltype="LESSTHAN"]:before {
    content: "\f295";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="LESSTHAN"]:after{
    background-color: #c67bff;
}
.x-tree-attr[controltype="EQUALTO"]:before {
    content: "";
    background-image: url("../../assets/images/equalto.png");
    background-repeat: no-repeat;
    background-size: 20px;
    width:26px;
    height:26px;
}
.x-tree-attr[controltype="EQUALTO"]:after{
    background-color: #ff7b7b;
}
.x-tree-attr[controltype="GREATERTHANEQUAL"]:before {
    content: "";
    background-image: url("../../assets/images/greaterThanEqual.png");
    background-repeat: no-repeat;
    background-size: 20px;
    width:26px;
    height:26px;
}
.x-tree-attr[controltype="GREATERTHANEQUAL"]:after{
    background-color: #7bffc2;
}

.x-tree-attr[controltype="request"]:before {
    content: "\f0c1";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="request"]:after{
    background-color: #c67bff;
}

.x-tree-attr[controltype="response"]:before {
    content: "\f0c1";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="response"]:after{
    background-color: #c67bff;
}
.x-tree-attr[controltype="body"]:before {
    content: "\f0c1";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="body"]:after{
    background-color: #c67bff;
}
.x-tree-attr[controltype="headers"]:before {
    content: "\f0c1";
    font-family: fontAwesome;
    margin-right: 5px;
    color: #fff;
}
.x-tree-attr[controltype="headers"]:after{
    background-color: #c67bff;
}

/*scroll for mainTreeSetup */
.mainTreeSetup
{

    max-height: calc(100vh - 66px);
    padding-bottom: 100px;
     

}
.mainTreeSetup::-webkit-scrollbar
{
	width: 4px;
    height: 4px;
}

.mainTreeSetup:hover {
    -webkit-mask-position: left top;
  }


  .hide-Remover .ifRemover  
{
  display:none !important;
}

.x-tree-attr .shaded-label

{
    display: none;

}

.x-tree-attr[type="component"] .shaded-label
{

    display: inline-block;
    width: 70px;
    height: auto;
    position: absolute;
    background: #72c5ff;
    right: 0px;
    color: #a90056;
    padding: 2px;
    top: 100%;
    transform: translate(0px, 0%);
    border-bottom-left-radius: 5px;
    text-align: center;
    font-size: 0.8em;
    border: 0.1em solid #b37878;

}
.x-tree-attr[type="api"] .shaded-label
{

    display: inline-block;
    width: 80px;
    height: auto;
    position: absolute;
    background: #72c5ff;
    right: 0px;
    color: #a90056;
    padding: 2px;
    top: 100%;
    transform: translate(0px, 0%);
    border-bottom-left-radius: 5px;
    text-align: center;
    font-size: 0.8em;
    border: 0.1em solid #b37878;
    text-transform: uppercase;

}
.x-tree-root-ct > li > .x-tree-node-el > .x-tree-node-anchor > .x-tree-attr[type="component"]:first-of-type > .shaded-label
{
    display: none !important;

}

.x-tree-attr[type="component"] .shaded-label::after
{
/* border-width: 5px 5px 0 5px;
    border-color: #72c5ff transparent transparent transparent;
    border-style: solid;

top:100%;
position: absolute;
content: '';
left:4px;
top:100%; */

}
#myModalmIcroaddApi .modal-content
{
    height: calc(100vh - 100px);
    overflow-y: scroll;

}

.setNodeHead >span::after {
    outline: dashed 1px #696969;
    content: "";
    height: 15px;
    left: 55%;
    position: absolute;
    top: 50px;
}

.node-status-info
{
    position: absolute;
    display: block;
    /* right: -12px;
    top: 4px; */

    right: -8%;
    top: 25%;
}
.pipeviewflow .node-status-info
{
    display: block;
}
.node-status-info .node-status-failed
{
   

}
.node-status-info i::before
{
   bottom: 0px !important;
   right: 0px !important;

}
.node-status-info[nodestatus="undefined"] .node_status_passed
{
    display:none;

}
.node-status-info[nodestatus="undefined"] .node_status_failed
{
    display: inline-block;
    background-color: red;
    color:#fff;
    border-radius:50%;
    position: relative;

}
.node-status-info[nodestatus="1"] .node_status_passed
{
    display: inline-block;

}
.node-status-info[nodestatus="1"] .node_status_failed
{
    display: none;

}

.node-status-info[nodestatus="2"] .node_status_passed
{
    display: inline-block;

}
.node-status-info[nodestatus="2"] .node_status_failed
{
    display: none;

}
.node-status-info[nodestatus="3"] .node_status_passed
{
    display: none;

}
.node-status-info[nodestatus="3"] .node_status_failed
{
    display: inline-block;
    background-color: red;
    color:#fff;
    border-radius:50%;
    position: relative;

}