@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
	
	
	@font-face {
    font-family: "flaticon";
    src: url("fonts/Flaticon.woff") format('woff');
	}
	
	body {
		font-family: 'Roboto Condensed', sans-serif;
		background-color: rgb(80,80,80);
		width: 100vw;
		height: 100vh;
		margin: 0;
	}
	
	span {
		display: inline-block;
		vertical-align: middle;
		line-height: normal;
	}
	
	#main {
		width: 100vw;
		height: 100vh;
		/* Firefox */
		display: -moz-box;
		-moz-box-pack: center;
		-moz-box-align: center;
		/* Safari and Chrome */
		display: -webkit-box;
		-webkit-box-pack: center;
		-webkit-box-align: center;
		/* W3C */
		display: block;
		box-pack: center;
		box-align: center;
	}
	
	
	
	/* Overlay and Pop-up layers */
	
	#overlay {
		position: fixed;
		background: url("../images/backgroundpx.png");
		background-repeat: repeat;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 50;
		display: inline-block;
	}
	
	#popups {
		z-index: 60;
	}
	
	.headline {
		font-weight: 400;
		font-size: 30px;
	}
	
	.bodytext {
		font-weight: 100;
	}
	
	#consent {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 400px;
		height: 400px;
		background-color: white;
		padding: 60px;
		z-index: 70;
	}
	
	#help_panel {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 400px;
		height: 400px;
		background-color: white;
		padding: 60px;
		display: none;
		z-index: 70;
	}
	
	
	
	/* Menus and controls */
	
	#controls {
		width: 1890px;
		position: absolute;
		padding-top: 10px;
		left: 0;
		margin: auto;
		display: block;
		align-content: center;
		text-align: center;
		z-index: 50;
	}
	
	#switches {
		width: 350px;
		margin: 0 auto;
		margin-left: auto;
		margin-right: auto;
		display: inline-block;
	}
	
	#menu {
		width: 100px;
		margin: 0 auto;
		font-size: 14px;
		line-height: 21px;
		display: inline-block;
		vertical-align: top;
		margin-left: 4px;
		margin-right: 4px;
		color: white;
	}
	
	#help_button {
		cursor: pointer;
	}
	
	
	/* Contents */
	
	#canvas {
		width: 1890px;
		height: 1160px;
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	.person {
		width: 90px;
		height: 90px;
		position: absolute;
	}
	
	.holder {
		background-size: contain;
		cursor: pointer;
		border-radius: 50%;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		font-weight: 100;
		z-index: 1;
	}
	
	.holder:hover {
		width: 74px;
		height: 74px;
		border: solid 3px rgb(255,255,255);
	}
	
	.dead_male {
		background-image: url('../images/RIPstone2.png');
		background-position: center;
		float: left;
	}
	
	.dead_female {
		background-image: url('../images/RIPstone2.png');
		background-position: center;
		float: right;
	}
	
	.alive_male {
		background-image: url('../images/male.svg');
		background-color: lightblue;
		float: left;
	}
	
	.alive_female {
		background-image: url('../images/female.svg');
		background-color: pink;
		float: right;
	}
	
	.me {
		width: 74px;
		height: 74px;
		border: solid 3px rgb(255,255,255);
		font-weight: 900;
		background-color: lightgreen;
	}
	
	
	
	
	
	.husband_line {
		width: 50px;
		height: 10px;
		border-bottom: solid 1px rgb(255,255,255);
		border-left: solid 1px rgb(255,255,255);
		float: right;
	}
	
	.wife_line {
		width: 50px;
		height: 10px;
		border-bottom: solid 1px rgb(255,255,255);
		border-right: solid 1px rgb(255,255,255);
		float: left;
	}
	
	.male_sibling_line {
		width: 50px;
		height: 10px;
		border-top: solid 1px rgb(255,255,255);
		border-left: solid 1px rgb(255,255,255);
		float: right;
	}
	
	.female_sibling_line {
		width: 50px;
		height: 10px;
		border-top: solid 1px rgb(255,255,255);
		border-right: solid 1px rgb(255,255,255);
		float: left;
	}
	
	
	
	
	.level_male {
		width: 37px;
		float: left;
		color: white;
		font-size: 10px;
		text-align: left;
	}
	
	.level_female {
		width: 37px;
		float: right;
		color: white;
		font-size: 10px;
		text-align: right;
	}
	
	.circle_button {
		background-color: rgb(256,256,256);
		border-radius: 50%;
		width: 20px;
		height: 20px;
		line-height: 20px;
		position: absolute;
		text-align: center;
		z-index: 2;
		display: inline;
		font-family: "flaticon";
		font-size: 13px;
		cursor: pointer;
	}
	
	.death_male {
		top: 10px;
		left: -5px;
		float: feft;
	}
	
	.death_female {
		top: 10px;
		right: -5px;
		float: right;
	}
	
	/* Tooltip text */
	.circle_button .tooltiptext {
		visibility: hidden;
		font-family: "Exo 2";
		font-weight: 300;
		font-size: 12px;
		width: 90px;
		height: 20px;
		background-color: rgb(200,200,200);
		color: rgb(0,0,0);
		text-align: center;
		padding: 2px 0;
		border-radius: 6px;
		bottom: 100%;
		left: 50%;
		margin-left: -45px; /* Use half of the width (120/2 = 60), to center the tooltip */
	 
		/* Position the tooltip text - see examples below! */
		position: absolute;
		z-index: 9;
	}
	
	.circle_button_ .tooltiptext::after {
		content: " ";
		position: absolute;
		top: 100%; /* At the bottom of the tooltip */
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: black transparent transparent transparent;
	}
	
	/* Show the tooltip text when you mouse over the tooltip container */
	.circle_button:hover .tooltiptext {
		visibility: visible;
		z-index: 10;
	}
	
	.circle_button:hover {
		background: rgb(30,30,30);
		color: rgb(255,255,255);
	}
	
	
	
	/* svg Line Layers */
	
	#GPP {
		position: absolute;
		top: 190px;
	}
	
	#PN {
		position: absolute;
		top: 430px;
	}
	
	#NC {
		position: absolute;
		top: 670px;
	}
	
	#CGC {
		position: absolute;
		top: 910px;
	}
	
	
	/* Persons positions */
	
	/* GrandParent generation positions */
	
	#GP11 {
		position: absolute;
		left: 510px;
		top: 100px;
	}
	
	#GP12 {
		position: absolute;
		left: 600px;
		top: 100px;
	}
	
	#GP21 {
		position: absolute;
		left: 740px;
		top: 100px;
	}
	
	#GP22 {
		position: absolute;
		left: 830px;
		top: 100px;
	}
	
	#GP31 {
		position: absolute;
		left: 970px;
		top: 100px;
	}
	
	#GP32 {
		position: absolute;
		left: 1060px;
		top: 100px;
	}
	
	#GP41 {
		position: absolute;
		left: 1200px;
		top: 100px;
	}
	
	#GP42 {
		position: absolute;
		left: 1290px;
		top: 100px;
	}
	
	
	/* Parent generation positions */
	
	#P11 {
		position: absolute;
		left: 280px;
		top: 340px;
	}
	
	#P12 {
		position: absolute;
		left: 370px;
		top: 340px;
	}
	
	#P21 {
		position: absolute;
		left: 510px;
		top: 340px;
	}
	
	#P22 {
		position: absolute;
		left: 600px;
		top: 340px;
	}
	
	#P31 {
		position: absolute;
		left: 740px;
		top: 340px;
	}
	
	#P32 {
		position: absolute;
		left: 830px;
		top: 340px;
	}
	
	#P41 {
		position: absolute;
		left: 970px;
		top: 340px;
	}
	
	#P42 {
		position: absolute;
		left: 1060px;
		top: 340px;
	}
	
	#P51 {
		position: absolute;
		left: 1200px;
		top: 340px;
	}
	
	#P52 {
		position: absolute;
		left: 1290px;
		top: 340px;
	}
	
	#P61 {
		position: absolute;
		left: 1430px;
		top: 340px;
	}
	
	#P62 {
		position: absolute;
		left: 1520px;
		top: 340px;
	}
	
	/* Current (norma) generation positions */
	
	#N11 {
		position: absolute;
		left: 280px;
		top: 580px;
	}
	
	#N12 {
		position: absolute;
		left: 370px;
		top: 580px;
	}
	
	#N21 {
		position: absolute;
		left: 510px;
		top: 580px;
	}
	
	#N22 {
		position: absolute;
		left: 600px;
		top: 580px;
	}
	
	#N31 {
		position: absolute;
		left: 855px;
		top: 580px;
	}
	
	#N32 {
		position: absolute;
		left: 945px;
		top: 580px;
	}
	
	#N41 {
		position: absolute;
		left: 1200px;
		top: 580px;
	}
	
	#N42 {
		position: absolute;
		left: 1290px;
		top: 580px;
	}
	
	#N51 {
		position: absolute;
		left: 1430px;
		top: 580px;
	}
	
	#N52 {
		position: absolute;
		left: 1520px;
		top: 580px;
	}
	
	
	/* Children generation positions */
	
	#C11 {
		position: absolute;
		left: 50px;
		top: 820px;
	}
	
	#C12 {
		position: absolute;
		left: 140px;
		top: 820px;
	}
	
	#C21 {
		position: absolute;
		left: 280px;
		top: 820px;
	}
	
	#C22 {
		position: absolute;
		left: 370px;
		top: 820px;
	}
	
	#C31 {
		position: absolute;
		left: 510px;
		top: 820px;
	}
	
	#C32 {
		position: absolute;
		left: 600px;
		top: 820px;
	}
	
	#C41 {
		position: absolute;
		left: 740px;
		top: 820px;
	}
	
	#C42 {
		position: absolute;
		left: 830px;
		top: 820px;
	}
	
	#C51 {
		position: absolute;
		left: 970px;
		top: 820px;
	}
	
	#C52 {
		position: absolute;
		left: 1060px;
		top: 820px;
	}
	
	#C61 {
		position: absolute;
		left: 1200px;
		top: 820px;
	}
	
	#C62 {
		position: absolute;
		left: 1290px;
		top: 820px;
	}
	
	#C71 {
		position: absolute;
		left: 1430px;
		top: 820px;
	}
	
	#C72 {
		position: absolute;
		left: 1520px;
		top: 820px;
	}
	
	#C81 {
		position: absolute;
		left: 1660px;
		top: 820px;
	}
	
	#C82 {
		position: absolute;
		left: 1750px;
		top: 820px;
	}
	
	
	/* GrandChild generation positions */
	
	#GC11 {
		position: absolute;
		left: 280px;
		top: 1060px;
	}
	
	#GC12 {
		position: absolute;
		left: 370px;
		top: 1060px;
	}
	
	#GC21 {
		position: absolute;
		left: 510px;
		top: 1060px;
	}
	
	#GC22 {
		position: absolute;
		left: 600px;
		top: 1060px;
	}
	
	#GC31 {
		position: absolute;
		left: 740px;
		top: 1060px;
	}
	
	#GC32 {
		position: absolute;
		left: 830px;
		top: 1060px;
	}
	
	#GC41 {
		position: absolute;
		left: 970px;
		top: 1060px;
	}
	
	#GC42 {
		position: absolute;
		left: 1060px;
		top: 1060px;
	}
	
	#GC51 {
		position: absolute;
		left: 1430px;
		top: 1060px;
	}
	
	#GC52 {
		position: absolute;
		left: 1520px;
		top: 1060px;
	}
	
	#GC61 {
		position: absolute;
		left: 1660px;
		top: 1060px;
	}
	
	#GC62 {
		position: absolute;
		left: 1750px;
		top: 1060px;
	}