.tree{ text-align: center;}
.tree ul { padding: 20px 0 0 0; margin: 0; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;}
.tree > ul{ display: inline-block; width: 100%; overflow: auto;}
/*.tree > ul > li{ display: inline-block;}*/
.tree li { display: table-cell; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; vertical-align: top;}
.tree li:before, .tree li:after{ content: '';	position: absolute; top: 0; right: 50%;	border-top: 1px solid #ccc;	width: 50%; height: 20px;}
.tree li:after{ right: auto; left: 50%; border-left: 1px solid #ccc;}
.tree li:only-child:after, .tree li:only-child:before { display: none;}
.tree li:only-child{ padding-top: 0;}
.tree li:first-child:before, .tree li:last-child:after{ border: 0 none;}
.tree li:last-child:before{ border-right: 1px solid #ccc; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0;}
.tree li:first-child:after{ border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0;}
.tree ul ul:before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #ccc; width: 0; height: 20px;}
.tree li .org-widget{ min-height: 150px; width: 180px; overflow: hidden; border: 1px solid #ccc; padding: 5px; text-decoration: none; color: #666;
 font-size: 0.9em; display: inline-grid; background-color: #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s;
display: inline-grid; align-items: center;}
 .tree-usrprof{ position: relative; text-align: center; width: 100%;}
.tree-usrprof img{ width: 64px; height: 68px; border: 1px solid #ccc; margin-bottom: 10px;}
.tree-usrprof .user-details strong{ display: block;}
.tree.no-prof-img li .org-widget{ min-height: 100px;}
.tree.no-prof-img li .org-widget .tree-usrprof{ padding-left:0; text-align: center;}
.tree.no-prof-img li .org-widget .tree-usrprof img{ display: none;}
.tree li .org-widget:hover, .tree li .org-widget:hover+ul li .org-widget { background: #c8e4f8; color: #000; border: 1px solid #94a0b4;}
/*Connector styles on hover*/
.tree li .org-widget:hover+ul li:after, 
.tree li .org-widget:hover+ul li:before, 
.tree li .org-widget:hover+ul:before, 
.tree li .org-widget:hover+ul ul:before{	border-color:  #94a0b4;}

.tree.prof-img-left li .org-widget{ height: 80px; min-height: 80px; width: 260px; align-items: normal;}
.tree.prof-img-left .tree-usrprof{ padding-left:70px; text-align: left; display: inline-grid; align-items: center;}
.tree.prof-img-left .tree-usrprof img{ position: absolute; left: 0; top: 0; margin-bottom: 0;}

.contrast .tree li .org-widget{ background-color: #000;}
.contrast .tree li .org-widget:hover, .contrast .tree li .org-widget:hover+ul li .org-widget {
    background: #333;
    border: 1px solid #ccc;
}