.tree {
    margin: 18px;
    padding: 0;
  }
  .tree:not(:empty):before, .tree:not(:empty):after,
  .tree ul:not(:empty):before, .tree ul:not(:empty):after,
  .tree li:not(:empty):before, .tree li:not(:empty):after {
    display: block;
    position: absolute;
    content: "";
  }
  .tree ul, .tree li {
    position: relative;
    margin: 0;
    padding: 0;
  }
  .tree li {
    list-style: none;
  }
  .tree li > div {
    background-color: #eee;
    color: #222;
    padding: 5px;
    display: inline-block;
  }
  .tree.cascade li {
    margin-left: 24px;
  }
  .tree.cascade li div {
    margin-top: 12px;
  }
  .tree.cascade li:before {
    border-left: 3px solid goldenrod;
    height: 100%;
    width: 0;
    top: 0;
    left: -12px;
  }
  .tree.cascade li:after {
    border-top: 3px solid goldenrod;
    width: 12px;
    left: -12px;
    top: 24px;
  }
  .tree.cascade li:last-child:before {
    height: 24px;
    top: 0;
  }
  .tree.cascade > li:first-child:before {
    top: 24px;
  }
  .tree.cascade > li:only-child {
    margin-left: 0;
  }
  .tree.cascade > li:only-child:before, .tree.cascade > li:only-child:after {
    content: none;
  }
  .tree.vertical {
    /* display: flex; */
  }
  .tree.vertical ul {
    display: flex;
    justify-content: center;
  }
  .tree.vertical li {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tree.vertical li div {
    margin: 12px 6px;
    padding-top: 20px;
    border-radius: 50%;
    border: 4px solid #FFF;
    background: goldenrod;
    box-shadow: 0px 0px 4px 1px;
    width: 120px;
    height: 120px;
    text-align: center;
    align-items: flex-end;
    /* margin-top: 50%; */
    font-weight: 700;
    /* color: #fff; */
}

.tree.vertical li:before {
  border-left: 3px solid goldenrod;
  height: 12px;
  width: 0;
  top: 0;
}

  .tree.vertical li:after {
    border-top: 3px solid goldenrod;
    height: 0;
    width: 100%;
  }
  .tree.vertical li:first-child:after {
    border-top: 3px solid goldenrod;
    height: 0;
    width: 50%;
    left: 50%;
  }
  .tree.vertical li:last-child:after {
    border-top: 3px solid goldenrod;
    height: 0;
    width: 50%;
    right: 50%;
  }
  .tree.vertical li:only-child:after {
    content: none;
  }
  .tree.vertical li ul:before {
    border-left: 3px solid goldenrod;
    height: 12px;
    width: 0;
    top: -9px;  
   }
  .tree.vertical > li:only-child:before, .tree.vertical > li:only-child:after {
    content: none;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li, .tree.vertical.cascade-3 > li > ul > li > ul > li, .tree.vertical.cascade-2 > li > ul > li, .tree.vertical.cascade-1 > li, .tree.vertical .cascade {
    flex-direction: column;
    align-items: start;
    padding: 0 12px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:before, .tree.vertical.cascade-3 > li > ul > li > ul > li:before, .tree.vertical.cascade-2 > li > ul > li:before, .tree.vertical.cascade-1 > li:before, .tree.vertical .cascade:before {
    left: 24px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:after, .tree.vertical.cascade-3 > li > ul > li > ul > li:after, .tree.vertical.cascade-2 > li > ul > li:after, .tree.vertical.cascade-1 > li:after, .tree.vertical .cascade:after {
    left: 0;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:first-child:after, .tree.vertical.cascade-3 > li > ul > li > ul > li:first-child:after, .tree.vertical.cascade-2 > li > ul > li:first-child:after, .tree.vertical.cascade-1 > li:first-child:after, .tree.vertical .cascade:first-child:after {
    left: 24px;
    width: 100%;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:last-child:after, .tree.vertical.cascade-3 > li > ul > li > ul > li:last-child:after, .tree.vertical.cascade-2 > li > ul > li:last-child:after, .tree.vertical.cascade-1 > li:last-child:after, .tree.vertical .cascade:last-child:after {
    left: 0;
    width: 24px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul, .tree.vertical.cascade-3 > li > ul > li > ul > li ul, .tree.vertical.cascade-2 > li > ul > li ul, .tree.vertical.cascade-1 > li ul, .tree.vertical .cascade ul, .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li, .tree.vertical.cascade-3 > li > ul > li > ul > li li, .tree.vertical.cascade-2 > li > ul > li li, .tree.vertical.cascade-1 > li li, .tree.vertical .cascade li {
    display: block;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:before, .tree.vertical.cascade-3 > li > ul > li > ul > li ul:before, .tree.vertical.cascade-2 > li > ul > li ul:before, .tree.vertical.cascade-1 > li ul:before, .tree.vertical .cascade ul:before, .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:after, .tree.vertical.cascade-3 > li > ul > li > ul > li ul:after, .tree.vertical.cascade-2 > li > ul > li ul:after, .tree.vertical.cascade-1 > li ul:after, .tree.vertical .cascade ul:after,
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before,
  .tree.vertical.cascade-3 > li > ul > li > ul > li li:before,
  .tree.vertical.cascade-2 > li > ul > li li:before,
  .tree.vertical.cascade-1 > li li:before,
  .tree.vertical .cascade li:before, .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after, .tree.vertical.cascade-3 > li > ul > li > ul > li li:after, .tree.vertical.cascade-2 > li > ul > li li:after, .tree.vertical.cascade-1 > li li:after, .tree.vertical .cascade li:after {
    border: none;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li div, .tree.vertical.cascade-3 > li > ul > li > ul > li div, .tree.vertical.cascade-2 > li > ul > li div, .tree.vertical.cascade-1 > li div, .tree.vertical .cascade div {
    margin: 0;
    margin-top: 12px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li, .tree.vertical.cascade-3 > li > ul > li > ul > li li, .tree.vertical.cascade-2 > li > ul > li li, .tree.vertical.cascade-1 > li li, .tree.vertical .cascade li {
    margin-left: 24px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before, .tree.vertical.cascade-3 > li > ul > li > ul > li li:before, .tree.vertical.cascade-2 > li > ul > li li:before, .tree.vertical.cascade-1 > li li:before, .tree.vertical .cascade li:before {
    border-left: 3px solid goldenrod;
    height: 100%;
    width: 0;
    top: 0;
    left: -12px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after, .tree.vertical.cascade-3 > li > ul > li > ul > li li:after, .tree.vertical.cascade-2 > li > ul > li li:after, .tree.vertical.cascade-1 > li li:after, .tree.vertical .cascade li:after {
    border-top: 3px solid goldenrod;
    width: 12px;
    height: 0;
    left: -12px;
    top: 24px;
    content: "";
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:last-child:before, .tree.vertical.cascade-3 > li > ul > li > ul > li li:last-child:before, .tree.vertical.cascade-2 > li > ul > li li:last-child:before, .tree.vertical.cascade-1 > li li:last-child:before, .tree.vertical .cascade li:last-child:before {
    height: 24px;
    top: 0;
  }