.treehierarchy {
  width:  auto;
  
  /*overflow-x: auto; */
  /*overflow-y: auto; */
  /*margin-left: -80px;*/
  color:  #00f;
}
.treehierarchy ul {
  width:auto;
  padding-top: 20px;
  position: relative;
  white-space: nowrap;
}
.treehierarchy li {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  margin: 0 -2px;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0;
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}
/*We will use ::before and ::after to draw the connectors*/
.treehierarchy li::before,.treehierarchy li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #00f;
  width: 50%;
  height: 20px;
}
.treehierarchy li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #00f;
}
/*We need to remove left-right connectors from elements without any siblings*/
.treehierarchy li:only-child::after,.treehierarchy li:only-child::before {
  display: none;
}
/*Remove space from the top of single children*/
.treehierarchy li:only-child {
  padding-top: 0;
}
/*Remove left connector from first child and 
right connector from last child*/
.treehierarchy li:first-child::before,.treehierarchy li:last-child::after {
  border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.treehierarchy li:last-child::before {
  border-right: 1px solid #00f;
  border-radius: 0 5px 0 0;
}
.treehierarchy li:first-child::after {
  border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.treehierarchy ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #00f;
  width: 0;
  height: 20px;
}
.treehierarchy li a {
  border: 1px solid #00f;
  padding: 5px 10px;
  text-decoration: none;
  color: #00f;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  display: inline-block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.treehierarchy li a:hover,.treehierarchy li a:hover+ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.treehierarchy li a:hover+ul li::after,.treehierarchy li a:hover+ul li::before,.treehierarchy li a:hover+ul::before {
  border-color: #94a0b4;
}