.member {
    background-color: wheat;
    display: flex;
    flex-grow: 0;
    min-height: 90px;
    padding: 5px 10px;
    margin: 25px 40px;

    border: 2px solid #808000 ;
    border-radius: 10px;
}

.member-photo{
    padding: 5px 10px;
    float:left;

}

.member-descr{

    margin: 2px 10px;
    padding: 5px 10px;
    float: right;

    width:  82%;
    height: 95%;

}

.member-name {
    padding: 5px 10px;
    font-size: 32px;
    color: white;
}

.member-born, .member-died, .member-baptized, .member-married, .member-address, .member-extra  {
    font-size: 18px;
    color: white;
    padding: 5px 20px;
}

.member-name::before{
    content: " ";
    color: red;
}

.member-born::before{
    content: "Born: ";
    color: rgb(178, 206, 55);
}

.member-married::before{
    content: "Married: ";
    color: rgb(178, 206, 55);
}
.member-married::after{
    content: " ♥";
    color: rgb(226, 27, 87);
}


.member-address::before{
    content: "Lives: ";
    color: rgb(178, 206, 55);
}

.member-extra::before{
    content: "Extra: ";
    color: rgb(178, 206, 55);
    padding-top: 5px;
}

.male{
    background-color: rgb(88, 60, 216);
}

.female{
    background-color: rgb(216, 60, 208);
}
.ki{
    background-color: rgb(119, 131, 14);
}


.male-hl{
    background-color: rgb(117, 95, 214);
 }

.female-hl{
    background-color: rgb(214, 91, 208);
}
.kid-hl{
    background-color: rgb(128, 138, 40);
}


.family{
    background-color:white;
    display: flex;
    flex-flow:row wrap;
    align-content: space-between;
    justify-content: space-evenly;
    margin: 60px;
    width: 45%;
}


.break {
    flex-basis: 100%;
    height: 0;
    margin: 20px;
  }

.line {
    background-color:silver;
    display: flex;
    flex-flow:row wrap;
    align-content: space-between;
    width: 100%;
}

 /* body */
 /* .draggable {
    background: #deb;
    line-height: 40px;
    padding: 15px;
    float: left;
    margin: 1em;
    border: 1px dotted;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  } */
  .demo {
    border: 5px double;
    z-index: 2;
    display: table;
    border-radius: 90px;
    /*pointer-events:none;*/
    color: rgb(200, 200, 200);
    color: rgba(0, 0, 0, 0.7);
  }

  .demo:hover {
    color: #55f;
  }

  .demo2 {
    border: 3px dotted #051;
    opacity: 0.5;
    z-index: 1;
    border-radius: 100%;
    pointer-events: none;
  }

  .fast {
    border: 3px solid #051;
    opacity: 0.5;
    z-index: 1;
    border-radius: 100%;
    pointer-events: none;
  }

  .marriage {
      border: 3px solid red;
      opacity: 0.5;
      z-index: 1;
      border-radius: 100%;
      pointer-events: none;
  }

  .demo3 {
    border: 7px dashed #951;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
    border-radius: 21px;
  }

  .demo span {
    z-index: 1;
    background: black;
    color: white;
    opacity: 0.7;
    position: absolute;
    display: block;
    margin: auto;
    padding: 0.3em 0.6em;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  }

  .demo:hover span {
    background: #55f;
    opacity: 1;
  }

  .connection-border-right span {
    left: 1em;
  }

  .connection-border-left span {
    right: 1em;
  }

  .connection-border-top span {
    top: 1em;
  }

  .connection-border-bottom span {
    bottom: 1em;
  }
.connection {
    z-index: -1;
    border: 3px solid;
    border-radius: 7em;
    color: rgb(128, 128, 128);
    color: rgba(0, 0, 0, 0.5);
}
.connection.odd {
    border-radius: 100%;
}
.connection.first {
    color: black;
    border: 5px dotted;
}