/* aus https://fractaledmind.github.io/2018/03/06/css-tree-vertical/ */
.fam-tree {
	
	
  list-style: none;
  
  &, * { margin: 0; padding: 0; }

  li {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: .5vh;
    padding-bottom: .5vh;

    position: relative;
    padding-left: 1vw;
    
    /* [connector] child-to-parent */
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      border-top: 1px solid orange;
      width: 1vw;
    }

    /* [connector] children-group */
    &::after {
      content: '';
      position: absolute;
      left: 0;
      border-left: 1px solid orange;
    }
    /* [connector] children-group:last-child */
     &:only-child::after {  /* no border for first child */
      border: 0;
    }
    &:only-child::before {
      border: 0;
    }
    &:last-of-type::after {
      height: 50%;
      top: 0;
    }
    /* [connector] children-group:first-child */
    &:first-of-type::after {
      height: 50%;
      bottom: 0;
    }
    /* [connector] children-group:middle-child(ren)*/
    &:not(:first-of-type):not(:last-of-type)::after {
      height: 100%;
    }
  }
  
  ul, ol {
    padding-left: 1vw;
    position: relative;

    /* [connector] parent-to-children */
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      border-top: 1px solid orange;
      width: 1vw;
    }
  }

  span {
    border: 1px solid orange;
    border-radius: 0.5em;
    text-align: center;
    padding: 0.13em 0.26em;
    min-width: 5em;
  }
  a {
  	white-space: nowrap;
  }

  > li {
    padding-left: 0;
    
    &::before,
    &::after {
      display: none;
    }
  }
}


ol, ul {
  *counter-reset: section;
}

li span::before {
  *counter-increment: section;
  *content: counters(section, ".") " ";
  font-family: monospace;
}
.fam-tree ul:only-child::before,.fam-tree ul:only-child::after {
	border: 0;
}
/*Connector styles on hover*/
.fam-tree li a:hover+ul li::after, 
.fam-tree li a:hover+ul li::before, 
.fam-tree li a:hover+ul::before, 
.fam-tree li a:hover+ul ul::before{
	border-color:  red;
	border-width: 2px;
}
/*#br-over-cont-2a {display: flex; justify-content: left; align-items: center;}*/
.fam-tree {height: fit-content; width: fit-content;}