/* Pedigree Tree */

.pedigree-tree {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  position: relative;
  font-family: sans-serif;
}

.pedigree-tree ul{
  padding-left:0;
	transition: all 0.5s; 
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
  position: relative;
  margin-left: 250px !important;
}

.pedigree-tree ul:before {
  content: "";
  width: 50px;
  border-top: 2px solid #EEE;
  position: absolute;
  left: -100px;
  top: 50%;
  margin-top: 1px;

  	transition: all 0.5s; 
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.pedigree-tree > ul:nth-child(1) { margin-left: 0px !important; }
.pedigree-tree > ul:nth-child(1):before { border: 0; }

.pedigree-tree li{
  list-style: none;
  position: relative;
  min-height: 100px;

  transition: all 0.5s; 
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.pedigree-tree li:before {
  content: "";
  height: 100%;
  border-left: 2px solid #EEE;
  position: absolute;
  left: -50px;

  	transition: all 0.5s; 
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
.pedigree-tree li:after {
  content: "";
  width: 50px;
  border-top: 2px solid #EEE;
  position: absolute;
  left: -50px;
  top: 50%;
  margin-top: 1px;
  	transition: all 0.5s; 
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
.pedigree-tree li:first-child:before {
  width: 10px;
  height: 50%;
  top: 50%;
  margin-top: 2px;
  border-radius: 10px 0 0 0;
}
.pedigree-tree li:first-child:after {
  height: 10px;
  border-radius: 10px 0 0 0;
}
.pedigree-tree li:last-child:before {
  width: 10px;
  height: 50%;
  border-radius: 0 0 0 10px;
}
.pedigree-tree li:last-child:after {
  height: 10px;
  border-top: none;
  border-bottom: 2px solid #EEE;
  border-radius: 0 0 0 10px;
  margin-top: -9px;
}
.pedigree-tree li.sole:before {
  display: none;
}
.pedigree-tree li.sole:after {
  width: 50px;
  height: 0;
  margin-top: 1px;
  border-radius: 0;
}

.pedigree-tree span.wr {
  display: block;
  width: 150px;
  /*
  padding: 5px 10px;
  line-height: 20px;
  border: 2px;
  border-style: solid;
  border-radius: 5px;
  */
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -30px;
  font-size: .8em;
  color: #666;
  background-color: #777;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.pedigree-tree li.female > span.wr { border-color: rgba(255,105,180,1);  }
.pedigree-tree li.male > span.wr { border-color: rgba(105,180,255,1);  }

.pedigree-tree span.wr a {
  display: block;
  white-space: pre-wrap;
  border: 0;
  padding: 1em;
  text-decoration: none;
}

.pedigree-tree span.wr a time { opacity: .7; font-size: .7em; }
.pedigree-tree span.inexistant { min-height: 80px; background-color: rgba(0,0,0,.2); }


/*Time for some hover effects (We will apply the hover effect the the lineage of the element also) */
/*.pedigree-tree li span.wr:hover, .pedigree-tree li span.wr:hover+ul li span.wr {
	background: #FFF; color: #000;
}*/

/*Connector styles on hover*/
/*.pedigree-tree li span.wr:hover+ul li:after, 
.pedigree-tree li span.wr:hover+ul li:before, 
.pedigree-tree li span.wr:hover+ul:before, 
.pedigree-tree li span.wr:hover+ul ul:before{
	border-color:  #000;
}*/

.pedigree-tree li > span.wr:not(.nobg):hover a,
.pedigree-tree li > span.wr:not(.nobg):hover a time { background-color:transparent; color: transparent; }



.pedigree-tree li > span.wr:hover a.private { cursor:not-allowed; }