.person{
  padding:10px;
  z-index:10 !important;
  box-shadow: #000 0px 2px 3px;
}
.femalecolor{
  color: pink;
}
.malecolor{
  color: lightblue;
}
.woman{
  background-color: pink;
}
.man{
  background-color: lightblue;
}
.dummy{
  background-color: lightgreen;
}
.spouse{
  margin-top: 5px;
}
.cursive.female{
  font-style: italic;
  color:rgb(223, 23, 123);
}
.cursive.male{
  font-style: italic;
  color: blue;
}
.treeparagraph{
  line-height: 1 !important;
  margin: 0 0 0 0 !important;
  text-align: center;
}

.treeparagraphLeft{
  line-height: 1 !important;
  margin: 0 0 0 0 !important;
	padding-bottom: 5px;
  text-align: left;
}

/*struktur på trädet*/
* {margin: 0; padding: 0;}
#tree ul {
  padding-top: 20px; position: relative;
  text-align: center;

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

#exampleTree li {
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 5px 5px 0 5px;
  text-align: center;
  transition-duration: 1s;
}

#exampleTree li .person{
	border: 1px solid #555;
	padding: 5px 10px;
	text-decoration: none;
	color: #000;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}




#tree li {
  float: left; 
	text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  text-align: center;
  
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}
/* connectors */
#tree li::before, #tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #555;
	width: calc(50% + 2px); 
  height: 21px;
  z-index: 1;
}
#tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #555;
}
#tree .dummyancestors::before, #tree .dummyancestors::after{
  border-top: 1px dashed #555;
}
#tree .dummyancestors::after{
  border-left: 1px dashed #555;
}


/*firstchild lastchild code*/
/*We need to remove left-right connectors from elements without 
any siblings*/
#tree li:only-child::after, #tree li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
#tree li:only-child{ 
padding-top: 0;
}

/*Remove left connector from first child and 
right connector from last child*/
#tree li:first-child::before, #tree li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
#tree li:last-child::before{
	border-right: 1px solid #555;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
}
#tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

#tree .dummyancestors:last-child::before{
  border-right: 1px dashed #555;
}

#tree ul ul::before{
  content: '';
  position: absolute;
  top: 0px;
  left: 50%;
	border-left: 1px solid #555;
	width: 0; 
  height: 21px;
  z-index: 1;
}

#tree ul .dummyancestor::before{
  border-left: 1px dashed #555;
}

#tree ul .orphan::before{
  border: 0 none;
}
#tree ul .orphan::after{
  border: 0 none;
}
#tree li .orphan::after{
  border: 0 none;
}
.self{
  border: 2px solid #000 !important;
  
}
.christancestor{
  box-shadow: #000 0px 2px 3px, inset 3px 0px red !important;
}
#tree li .person{
	border: 1px solid #555;
	padding: 5px 10px;
	text-decoration: none;
	color: #000;
	font-family: arial, verdana, tahoma;
	font-size: 11px;
	display: inline-block;
	
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

.treedropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 80px;
  padding: 6px 8px;
  border:0.5px solid #777;
  border-radius: 5px;
  z-index: 100 !important;
}

.treedropdown:hover .treedropdown-content {
  display: block;
}
#tree{
  width:max-content;
  text-align: center;
  min-width: 100%;
  display: flex;
  justify-content: center;
  transition-duration: 0.5s;
}
.hidden{
  display: none !important;
}
#familyTree{
  width: 100%;
  height:400px;
  overflow-y: hidden;
  /*border: 1px solid rgb(94, 48, 48)
  /*margin-bottom: 400px;*/
}
#treeHeader{
  position: absolute;
  height:60px;
  text-align: center;
  width: 100%;
  vertical-align: top;
}
.showhider{
  position:absolute;
  display: block;
  z-index: 20;
  text-align: center;
  height:16px;
  margin-left: calc(50% - 12.5px);
  color:white;
  width:16px;
  border-radius: 50%;
  line-height: 0em !important;
  background-color: rgb(80, 79, 79);
  overflow: hidden;
  /*font-weight: bold;*/
}
.fa-crown{
  color: #cc9900;
}
.fa-bullhorn{
  color: #8080c1;
}
.fa-synagogue{
  color: #999999;
}
.fa-gavel{
  color: #72551e;
}
.fa-people-group{
  color: lightgreen;
}
#adamnoah{
  margin-top:60px;
  background-color: white;
  height: 530px !important;
}
#noahabraham{
  margin-top:550px;
  background-color: #FCFAE8;
  height: 590px;
}
#abrahammose{
  margin-top:1140px;
  background-color: white;
  height: 490px;
}
#mosedavid{
  margin-top:1630px;
  background-color: #FCFAE8;
  height: 410px;
}
#davidcaptivity{
  margin-top:2040px;
  background-color: white;
  height: 1150px;
}
#captivityjesus{
  margin-top:3190px;
  background-color: #FCFAE8;
  height: 1010px;
}
#jesusforward{
  margin-top:4200px;
  background-color: white;
  height: 500px;
}
.epoch{
  z-index: 0;
  width: 100%;
  min-width: 1308px;
  border-top: 1px dashed black;
  padding-left: 25%;
  position: absolute;
  position: 0;
  opacity: 50%;
}
#chart{
  padding-top: 20px;
  transition-duration: 0.5s;
}
.century{
  padding-left: 40px;
  position:absolute;
  width: 100%;
  min-width: 1308px;
  border-top: 1px solid rgb(24, 24, 24);
  border-left: 1px solid rgb(24, 24, 24);
  opacity: 50%;
  height: 100px;
  transition-duration: 0.5s;
}
.century:nth-child(even){
  background-color: white;
}
.century:nth-child(odd){
  background-color: #dbdbdb;
}
.timeperson{
  margin-left: 50px;
  position: absolute;
  width:20px;
  color:white;
  text-align: center;
  border-radius: 5px;
  opacity:90%;
  transition-duration: 0.5s;
}
#timecontainer{
  margin-left: 80px;
  height: 100%;
  width: calc(100% - 80px);
}
#explanation{
  height:80px;
  text-align: left;
  padding-top: 50px;
	padding-left: 40px;
}
.names{
  position: absolute;
  box-sizing: content-box !important;
  font-weight: normal;
  z-index: 15;
  overflow-wrap: break-word;
  transition-duration: 0.5s;
}
.chosenidnames{
  width:150px;
}
.events{
  position: absolute;
  border-top: 2px dashed rgb(184, 0, 0, 0.5);
  z-index: 12;
  width: 100%;
  min-width: 1308px;
  color:rgb(184, 0, 0, 0.8);
  font-weight: lighter;
  padding-left:10px;
	font-size: 0.6 em;
  transition-duration: 0.5s;
}
.epochone{
  background-color: #00876c;
  z-index: 10;
}
.epochoneUncertainAge{
  background: linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(0, 135, 108) 20%, rgb(0, 135, 108) 80%, rgba(248, 248, 248, 0) 100%);
	z-index: 10;
}
.epochtwo{
  background-color: #639e6c;
  z-index: 9;
}
.epochtwoUncertainAge{
  background: linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(99, 158, 108) 20%, rgb(99, 158, 108) 80%, rgb(248, 248, 248, 0) 100%);
  z-index: 9;
}
.epochthree{
  background-color: #9eb376;
  z-index: 8;
}
.epochthreeUncertainAge{
  background: linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(158, 179, 118) 20%, rgb(158, 179, 118) 80%, rgb(248, 248, 248, 0) 100%);
  z-index: 8;
}
.epochfour{
  background-color: #d5c78d;
  z-index: 7;
}
.epochfourUncertainAge{
  background: linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(213, 199, 141) 20%, rgb(213, 199, 141) 80%, rgb(248, 248, 248, 0) 100%);
  z-index: 7;
}
.epochfive{
  background-color: #d7a062;
  z-index: 6;
}
.epochfiveUncertainAge{
  background: linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(215, 160, 98) 20%, rgb(215, 160, 98) 80%, rgb(248, 248, 248, 0) 100%);
  z-index: 6;
}
.epochsix{
  background-color: #d9744d;
  z-index: 5;
}
.epochsixUncertainAge{
  background: linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(217, 116, 77) 20%, rgb(217, 116, 77) 80%, rgb(248, 248, 248, 0) 100%);
  z-index: 5;
}
.epochseven{
  background-color: #d43d51;
  z-index: 4;
}
.epochsevenUncertainAge{
  background: linear-gradient(rgba(248, 248, 248, 0) 0%, rgb(212, 61, 81) 20%, rgb(212, 61, 81) 80%, rgb(248, 248, 248, 0) 100%);
  z-index: 4;
}
#navbutton{
  position: fixed;
  z-index: 450;
  top: 70px;
  left: 10px;
  color: #000;
  border: none; 
  background-color: #D3D3D3; 
  border-radius: 3px; 
  padding:5px;
  transition-duration: 1s;
}
a{
  cursor: pointer;
}
#caution{
  position: fixed;
  right:10px;
  z-index: 25;
  bottom:14px;
  font-size: 14px;
}
#zoomcontainer{
  position: fixed;
  right:10px;
  bottom:50px;
  height:51px;
  width:25px;
  border: 0px solid black;
  z-index: 24;
}
#zoomerin{
  position: fixed;
	width:25px;
  right:10px;
  z-index: 25;
  bottom:75px;
  font-size: 14px;
}
#zoomerout{
  position: fixed;
	width:25px;
  right:10px;
  z-index: 25;
  bottom:50px;
  font-size: 14px;
}
.tabledropdown{
  margin-left: 5px;
  margin-right: 5px;
  height:30px;
}
.one{
  color:#00876c;
}
.two{
  color:#639e6c;
}
.three{
  color:#9eb376;
}
.four{
  color:#d5c78d;
}
.five{
  color:#d7a062;
}
.six{
  color:#d9744d;
}
.seven{
  color:#d43d51;
}
#searchresults{
  float:right;
  position:absolute;
	text-align: right;
  right:25px;
  top:15px;
  width:130px;
  padding-left:5px;
}
.skbLink{
  color: #0074bd;
  text-decoration: underline;
}
.tooltiphover {
  position: relative;
  display: inline-block;
}
.tooltiphover .tooltiptexticon {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  padding: 6px;
	border-width:1px;
	border-style:solid;
	border-color:gray;
  border-radius: 4px;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: normal;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;

  top: 100%;
  left: 50%;
  margin-left: -60px;
}
.tooltiphover:hover .tooltiptexticon {
  visibility: visible;
}
.verserow{
  border-top: 1px solid #c0c0c0;
  margin-bottom: 10px;
  margin-right: -15px;
  margin-left: -15px;
}
.verserow::after{
  clear: both;
  display: table;
  content: " ";
}
@media (max-width: 386px){
  .verserow{
    margin-right: 0px;
    margin-left: 0px;
  }
}
.po-hidden, .kr-hidden, .bn-hidden{
  display: none !important;
}
.rightpadd{
  padding-right: 25px;
  width: max-content;
  display: inline;
}