.row, .group{
  display:flex;
}

.group{
  display:flex;
  margin-bottom: 6px;
}
.group div{
  border-bottom:2px solid black;
  width:50px;
  position:relative;
}
.group div img{
  margin-bottom:6px;
  padding:1px;
  width:48px;
  height:48px;
}

.group.gap{
  width:50px;
}
.group.gap2{
  width:100px;
}
.group.gap3{
  width:150px;
}
.group.gap4{
  width:200px;
}

.group div:first-child{
  width:25px;
  margin-left: 25px;
}
.group div:first-child img{
  margin-left: -24px;
}
.group div:last-child{
  width:25px;
  margin-right: 25px;
}
.group div:only-child{width: 0px;}
.group div:first-child::before,
.group div:first-child::after{
  left:0;
}

.group abbr.line {
    width: 0px;
    border-left: 2px solid black;
    height: 62px;
    display: block;
    margin-bottom: -2px;
    margin-top: -4px;
    text-align: center;
    vertical-align: middle;
    margin-left: 0px;
}
.group abbr::before{
  content:"?";
  background:white;
  display: block;
  text-align:center;
  font-size:1.2em;
  padding-top: 1em;
  margin-left:4px;
}

.group .child::before{
  content:"";
  border-right:2px solid black;
  height:6px;
  position:absolute;
  left: 23px;
  bottom: -8px;
}
.group .parent::after{
  content:"";
  border-right:2px solid black;
  height:6px;
  position:absolute;
  left: 23px;
  bottom:0px;
}

.relationBox{
  display:flex;
  flex-wrap:wrap;
  width:208px;
  justify-content:center;
  text-align:center;
}
.relationBox img{
  width:100px;
  height:100px;
  margin:2px;
}
.relationBox .relation{
  width:208px;
}
.relationBox .r1, .relationBox .r2{
  width:104px;
}

.info{
  font-size: 0.7em;
  margin-bottom:0.5em;
}