:root {
    --hierarchy-active:#77CC77;
    --hierarchy-inactive:#CC7777;
}

#faddHierarchyTable>div>div:last-child{width:270px;}
#faddHierarchyTable>div>div div.scroller>div.padder{padding:20px;}

#faddHierarchyZone div.user,#faddHierarchyZone div.level{
    box-sizing:border-box;
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.25);
    border: 1px solid #BBB;
    padding: 5px 10px;
    background: rgba(0,0,0,0.1);
    margin-bottom:10px;
    position:relative;
    text-align:left;
}

#faddHierarchyZone div.user{display:flex;flex-direction: row;}

#faddHierarchyZone div.user div.action{display:none;position:absolute;top:0px;right:0px;height:100%;background:rgba(255,255,255,0.1);}
#faddHierarchyZone div.user div.action>div{padding:0px 5px;cursor:pointer;}
#faddHierarchyZone div.user div.action>div>svg{margin-right:0px;width:16px;height:16px;margin-top:1px;}
#faddHierarchyZone div.user div.adder:hover{background:rgba(180,255,180,0.1);}
#faddHierarchyZone div.user div.adder:hover>div>svg{fill:var(--hierarchy-active);}
#faddHierarchyZone div.user div.remer:hover{background:rgba(255,180,180,0.1);}
#faddHierarchyZone div.user div.remer:hover>div>svg{fill:var(--hierarchy-inactive);}
#faddHierarchyZone.adding div.user div.adder{display:block;}
#faddHierarchyZone.adding div.user{padding-right:30px;}
#faddHierarchyZone.adding div.user.selected div.adder{display:none;}
#faddHierarchyZone.adding div.user.selected div.remer{display:block;}
#faddHierarchyZone.adding div.user.selected div.name{color:var(--hierarchy-active);}

#faddHierarchySearchHolder{padding:20px 20px 0px 20px;}
#faddHierarchySearchHolder>div{display:block;}
#faddHierarchyList.searching div.user:not(.found):not(.selected){display:none;}
#faddHierarchyList div.user.blocked{display:none !important;}
#faddHierarchyList>div.padder>div.flex{display:flex;flex-flow:column;}

#faddHierarchyZone div.levelChilds{text-align:center;white-space:nowrap;}
#faddHierarchyZone div.levelChilds>div.endPoint:empty{display:none !important;}
#faddHierarchyZone div.levelHolder{}
#faddHierarchyZone div.level{cursor:pointer;display:inline-block;min-width:210px;}
#faddHierarchyZone div.level.active{border-color:var(--hierarchy-active);background:var(--hierarchy-active);color:#FFF;}
#faddHierarchyZone div.levelHolder:last-child>div.level{margin-bottom:0px;}

#faddHierarchyZone div.levelChilds.horizontal>div.levelHolder,#faddHierarchyZone div.levelChilds.horizontal>div.endPoint{display:inline-block;vertical-align:top;padding:0px 10px;}
#faddHierarchyZone div.levelChilds.horizontal>div.levelHolder>div.level{margin-bottom:20px;position:relative;}
#faddHierarchyZone div.levelChilds>div.levelHolder div.level>div.arrow{display:none;}
#faddHierarchyZone div.levelChilds.horizontal>div.levelHolder.hasChilds>div.level>div.arrow{display:block;position:absolute;top:100%;left:50%;margin-left:-7px;margin-top:0px;}
#faddHierarchyZone div.levelChilds.horizontal>div.levelHolder.hasChilds>div.level>div.arrow>svg{width:14px;height:14px;fill:#BBB;}
#faddHierarchyZone div.levelChilds.horizontal>div.levelHolder.hasChilds>div.level.active>div.arrow>svg{fill:var(--hierarchy-active);}
#faddHierarchyZone div.levelChilds.horizontal>div.levelHolder:not(.hasChilds){}

#faddHierarchyZone div.levelChilds.horizontal>div.endPoint{padding:0px 20px;}

#faddHierarchyBaseLevelHandler{text-align:center !important;color:#BBB;text-transform:uppercase;display:block !important;margin-bottom:20px !important;}

#faddHierarchyZone #level0.horizontal{margin-left:-20px;}
#faddHierarchyZone #level0.horizontal>div.levelHolder{border-right:1px solid #BBB;padding:0px 20px;}
#faddHierarchyZone #level0.horizontal>div.levelHolder:last-child{border-right:0px;}