.treeHolder {
  height: 100%;
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 100;
  display: flex;
  width: 10%;
  right: -4%;
  opacity: 20%;
}

.treeHolder:hover {
  opacity: 100%;
}

.tree {
  height: fit-content;
  position: absolute;
  /*padding-top: 300px;*/
  /*top: 50%;*/
  /*margin-bottom: 120px;*/
  /*padding-bottom: 80px;*/
  margin-top: 15vh;
  /*transform: translateY(-50%);*/
}

.tree ul {
  position: relative;
  padding: 0.8em 0px 0;
  white-space: nowrap;
  margin: 0 auto;
  text-align: center;
}

.tree ul::after {
  content: "";
  display: table;
  clear: both;
}

.tree li {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 0.8em 0.1em 0 0.1em;
}

.tree li::before, .tree li::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 49%;
  border-top: 3px solid #1393BF;
  width: 61%;
  height: 0.8em;
}

.tree li::after {
  right: auto;
  left: 49%;
  border-left: 3px solid #1393BF;
}

.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: 3px solid #1393BF;
  border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
}

.tree ul ul::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 49%;
  border-left: 3px solid #1393BF;
  width: 0;
  height: 1.25em;
}

.tree li div {
  text-decoration: none;
  display: inline-block;
  position: relative;
  top: -1px;
  left: 0.5px;
}

.treeHolder:hover .circle{
  background-color: black;
}

.circle {
  border-radius: 40px;
  height: 20px;
  width: 20px;
  font-size: 12px;
  border: 3px solid #0c5470;
}

.circle.active {
  border: 3px solid #FFFFFF88;
}

.treeIcon{
  position:relative;
  top:-3px;
}

/*# sourceMappingURL=tree.css.map */

/*# sourceMappingURL=tree.css.map */