@media print {
				html, body {
					height: 100%;
				}
				
				.pagebreak { page-break-after: always; }
				
				.noprint { display: none; }
				.print-only { display: block; }
				button { display: none; }
				.salasilah {
					/*
					overflow-y: visible;
					*/
					height: 100%;
				}
				#silsilah {
					/*
					overflow-y: visible;
					*/
					height: 100%;
				}
				.family-container {
					padding-top: 1rem;
					padding-bottom: 1rem;
					height: 100%;
					break-inside: avoid;
				}
				
				footer { 
					position: fixed; 
					bottom: 0; 
					left: 0; 
					right: 0; 
					height: 1em;
					border-top: 1px solid grey;
					text-align: right;
				} 
			}
			/*
			@media print and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
				.family-container {
					border: 10px solid red;
					zoom: 80%;
				}
			}
			*/
			@media only screen {
				.print-only { display: none; }
			}
			
			/*
			  .person.asancestor[gender="Male"]::before
			, .person.aschildren[gender="Male"]::before
			, .person.asgrandchildren[gender="Male"]::before
			{
				content: "\1F468\1F3FD\200D\1F4BC";
				
			}
			*/
			
			/*
			  .person.asancestorspouse[gender="Male"]::after
			, .person.aschildrenspouse[gender="Male"]::after
			, .person.asgrandchildrenspouse[gender="Male"]::after
			{
				content: "\1F468\1F3FD\200D\1F4BC";
			}
			*/
				/* 
				content: "\1F468\1F3FD\200D\1F9B1";
				content: "👨🏻";
				*/

			/*
			  .person.asancestor[gender="Female"]::before
			, .person.aschildren[gender="Female"]::before
			, .person.asgrandchildren[gender="Female"]::before
			{
				content: "🧕";
			}
			*/
			
			/*
			  .person.asancestorspouse[gender="Female"]::after
			, .person.aschildrenspouse[gender="Female"]::after
			, .person.asgrandchildrenspouse[gender="Female"]::after
			{
				content: "🧕";
			}
			*/
				/* content: "\1F9D5" */
			
			html, body {
			  height: 100%;
			  margin: 0;
			  padding: 0;
			}    		
			
			body {
    		  font-family: Calibri, Segoe, "Segoe UI", "Gill Sans", "Gill Sans MT", sans-serif;
    		  font-size: 16px;
			  text-size-adjust: none;
			  //counter-reset: section;
    		}
			
			.headertitle {
				text-align: left;				
			}
			
			.headerbuttons {
				text-align: right;				
			}
			
			.footerbuttons {
				text-align: right;		
				background: #ccc;
				margin-top: 10px;
			}
			
			.content {
				height: calc(85vh - 6em);
				width: calc(100% - 10px);
				overflow-y: auto;
				overflow-x: clip;
				padding-left: 10px;
			}
			
			#popup-pilih-jalur
			{
				position: fixed;
				min-width: 400px;
				max-width: 85vw;
				width: fit-content;
				height: fit-content;
				min-height: 30vh;
				max-height: 85vh;
				/*
				height: fit-content;
				height: max-content;
				min-height: 30vh;
				max-height: 85vh;
				overflow: auto;
				*/
				background: #eee;
				border: 1px solid black;
				padding: 10px;
				margin: auto;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 10;
				display: none;
				resize: both;
				overflow: auto;
			} 
			
			#ancestriesAndRelationshipContent {
				grid-row: 4;
				display: grid;
				/*
				grid-template-rows: 1em auto 1em auto 1em auto;
				*/
				grid-template-rows: auto;
				width: 100%;
				overflow-y: auto;
				max-height: 70vh;
				margin: 10px auto;
			}
			
			.ancestries1 {
				grid-row: 1;
			}
			
			.personAncestries {
				grid-row: 2;
				overflow-y: auto;
				width: 100%;
				/*
				display: flex;
				justify-content: flex-start;
				*/
				max-height: 20vh;
				margin: 10px auto;
			}
			
			.ancestries2 {
				grid-row: 3;
				border-top: 1px solid black;
			}
			
			.theOtherPersonAncestries {
				grid-row: 4;
				overflow-y: auto;
				width: 100%;
				/*
				*/
				max-height: 20vh;
				margin: 10px auto;
			}
			
			.relationshipLabel {
				grid-row: 5;
				border-top: 1px solid black;
			}
			
			.theirRelationship {
				/*
				border: 1px dotted blue;
				*/
				grid-row: 6;
				overflow-y: auto;
				width: 100%;
				/*
				*/
				max-height: 20vh;
				margin: 10px auto;
			}
			
			#relationshipWithSelectDatalistInput {
				width: 98%;
			}
			
			#selectChildAddChildDatalistInput {
				width: 98%;
			}
			
			#selectSpouseAddSpouseDatalistInput {
				width: 98%;
			}

			.family-container {
				position: relative;
				border: 1px solid #666;		
			    //border: 3px solid #555;
			    padding-top: 4rem; 
			    padding-bottom: 4rem;
			    padding-left: 1rem;
			    padding-right: 1rem;
			    //height: 99vh;
			}
			
			.family-counter-total {
				font-size: 1.5em;
				color: #444;
				/* width: 3rem; */
				/* height: 1rem; */
				width: fit-content;
				background: #ddd;
				border: 1px solid #222;
				text-align: right;
				padding-left: 0.5em;
				padding-right: 0.5em;
			}
			
			.family-counter {
				position: absolute;
				top: 5rem;
				right: 20px;
				font-size: 1.5em;
				color: #444;
				/* width: 3rem; */
				/* height: 1rem; */
				background: #ddd;
				border: 1px solid #222;
				text-align: right;
				padding-left: 0.5em;
				padding-right: 0.5em;
			}
			
			.family-counter::before {
			}
			
			.family-counter::after {
				//counter-increment: section;
				//content: counter(section);
			}

			.family-container:nth-child(4n-2) {
				background: #eff;
			}

			.family-container:nth-child(4n) {
				background: #fee;
			}

            .filler {
                font-size: 15px; //1rem;
            }
            
			h1, h2 { text-decoration-line: underline overline; text-align: center; max-height: 999999px; }

			a { color: black; }
			a[href] { text-decoration-line: underline; }
			
			.NameDescendant { font-weight: bold; text-decoration-style: solid; }
			.DescendantMale, .DescendantMale a { color: default; //0070C0 }
			.DescendantFemale, .DescendantFemale a { color: default; //FF1493 }
			
			.Spouse1, 
			.ChildrenSpouse1, 
			.ChildrenSpouse1 a, 
			.GrandchildrenSpouse1, 
			.GrandchildrenSpouse1 a, 
			.SpouseOfChildren1, 
			.SpouseOfChildren1 a,  
            .SpanSpouseOfChildren1,
            .SpanGrandchildrenSpouse1,
            .SpanSpouse1
			{ color: default; }
			
			.Spouse2, 
            .SpanSpouse2,
			.ChildrenSpouse2, 
			.ChildrenSpouse2 a 
			{ color: red; }

			.Grandchildren2, 
			.Grandchildren2 a, 
			.SpouseOfChildren2, 
            .SpanSpouseOfChildren2
			{ color: blue; }

			.GrandchildrenSpouse2, 
			.GrandchildrenSpouse2 a, 
            .SpanGrandchildrenSpouse2
			{ color: darkgreen; }
			
			.Spouse3, 
			.ChildrenSpouse3, 
			.ChildrenSpouse3 a, 
			.Grandchildren3, 
			.Grandchildren3 a, 
			.GrandchildrenSpouse3, 
			.GrandchildrenSpouse3 a, 
			.SpouseOfChildren3, 
			.SpouseOfChildren3 a, 
            .SpanSpouseOfChildren3,
            .SpanGrandchildrenSpouse3,
            .SpanSpouse3
			{ color: green; }
			
			.Spouse4, 
			.ChildrenSpouse4, 
			.ChildrenSpouse4 a, 
			.Grandchildren4, 
			.Grandchildren4 a, 
			.GrandchildrenSpouse4, 
			.GrandchildrenSpouse4 a, 
			.SpouseOfChildren4, 
			.SpouseOfChildren4 a, 
            .SpanSpouseOfChildren4,
            .SpanGrandchildrenSpouse4,
            .SpanSpouse4
			{ color: blue; }
			
			.Spouse5, 
			.ChildrenSpouse5, 
			.ChildrenSpouse5 a, 
			.Grandchildren5, 
			.Grandchildren5 a, 
			.GrandchildrenSpouse5, 
			.GrandchildrenSpouse5 a, 
			.SpouseOfChildren5, 
			.SpouseOfChildren5 a, 
            .SpanSpouseOfChildren5,
            .SpanGrandchildrenSpouse5,
            .SpanSpouse5
			{ color: red; }
			
			.Spouse6, 
			.ChildrenSpouse6, 
			.ChildrenSpouse6 a, 
			.Grandchildren6, 
			.Grandchildren6 a, 
			.GrandchildrenSpouse6, 
			.GrandchildrenSpouse6 a, 
			.SpouseOfChildren6, 
			.SpouseOfChildren6 a, 
            .SpanSpouseOfChildren6,
            .SpanGrandchildrenSpouse6,
            .SpanSpouse6
			{ color: green; }
			
			.Spouse7, 
			.ChildrenSpouse7, 
			.ChildrenSpouse7 a, 
			.Grandchildren7, 
			.Grandchildren7 a, 
			.GrandchildrenSpouse7, 
			.GrandchildrenSpouse7 a, 
			.SpouseOfChildren7, 
			.SpouseOfChildren7 a, 
            .SpanSpouseOfChildren7,
            .SpanGrandchildrenSpouse7,
            .SpanSpouse7
			{ color: blue; }
			
			.Spouse8, 
			.ChildrenSpouse8, 
			.ChildrenSpouse8 a, 
			.Grandchildren8, 
			.Grandchildren8 a, 
			.GrandchildrenSpouse8, 
			.GrandchildrenSpouse8 a, 
			.SpouseOfChildren8, 
			.SpouseOfChildren8 a, 
            .SpanSpouseOfChildren8,
            .SpanGrandchildrenSpouse8,
            .SpanSpouse8
			{ color: red; }
			
			.Spouse9, 
			.ChildrenSpouse9, 
			.ChildrenSpouse9 a, 
			.Grandchildren9, 
			.Grandchildren9 a, 
			.GrandchildrenSpouse9, 
			.GrandchildrenSpouse9 a, 
			.SpouseOfChildren9, 
			.SpouseOfChildren9 a, 
            .SpanSpouseOfChildren9,
            .SpanGrandchildrenSpouse9,
            .SpanSpouse9
			{ color: green; }
			
			.Spouse10, 
			.ChildrenSpouse10, 
			.ChildrenSpouse10 a, 
			.Grandchildren10, 
			.Grandchildren10 a, 
			.GrandchildrenSpouse10, 
			.GrandchildrenSpouse10 a, 
			.SpouseOfChildren10, 
			.SpouseOfChildren10 a, 
            .SpanSpouseOfChildren10,
            .SpanGrandchildrenSpouse10,
            .SpanSpouse10
			{ color: blue; }
			
			.Spouse11, 
			.ChildrenSpouse11, 
			.ChildrenSpouse11 a, 
			.Grandchildren11, 
			.Grandchildren11 a, 
			.GrandchildrenSpouse11, 
			.GrandchildrenSpouse11 a, 
			.SpouseOfChildren11, 
			.SpouseOfChildren11 a, 
            .SpanSpouseOfChildren11,
            .SpanGrandchildrenSpouse11,
            .SpanSpouse11
			{ color: red; }
			
			.Spouse12, 
			.ChildrenSpouse12, 
			.ChildrenSpouse12 a, 
			.Grandchildren12, 
			.Grandchildren12 a, 
			.GrandchildrenSpouse12, 
			.GrandchildrenSpouse12 a, 
			.SpouseOfChildren12, 
			.SpouseOfChildren12 a, 
            .SpanSpouseOfChildren12,
            .SpanGrandchildrenSpouse12,
            .SpanSpouse12
			{ color: green; }
			
			.Spouse13, 
			.ChildrenSpouse13, 
			.ChildrenSpouse13 a, 
			.Grandchildren13, 
			.Grandchildren13 a, 
			.GrandchildrenSpouse13, 
			.GrandchildrenSpouse13 a, 
			.SpouseOfChildren13, 
			.SpouseOfChildren13 a, 
            .SpanSpouseOfChildren13,
            .SpanGrandchildrenSpouse13,
            .SpanSpouse13
			{ color: blue; }
			
			.Spouse14, 
			.ChildrenSpouse14, 
			.ChildrenSpouse14 a, 
			.Grandchildren14, 
			.Grandchildren14 a, 
			.GrandchildrenSpouse14, 
			.GrandchildrenSpouse14 a, 
			.SpouseOfChildren14, 
			.SpouseOfChildren14 a, 
            .SpanSpouseOfChildren14,
            .SpanGrandchildrenSpouse14,
            .SpanSpouse14
			{ color: red; }
			
			.Spouse15, 
			.ChildrenSpouse15, 
			.ChildrenSpouse15 a, 
			.Grandchildren15, 
			.Grandchildren15 a, 
			.GrandchildrenSpouse15, 
			.GrandchildrenSpouse15 a, 
			.SpouseOfChildren15, 
			.SpouseOfChildren15 a, 
            .SpanSpouseOfChildren15,
            .SpanGrandchildrenSpouse15,
            .SpanSpouse15
			{ color: green; }
			
			.binbintiayah { display: none; }
			
            .binbintiayah:before, .binbintiayahkandung:before {
                content: "\00a0";
            }
            
            .Spouse1::before {
                content: "\00a0+ ";
            }
            .SpouseOfChildren1::before {
                content: "\00a0+ ";
            }
            .GrandchildrenSpouse1::before {
                content: "+ ";
            }
            
            .Spouse2:before {
                content: "\00a0+ \00B2";
            }
            .ChildrenSpouse2:before {
                content: "\00B2";
            }
            .SpouseOfChildren2:before {
                content: "\00a0+ \2082";
            }
            .Grandchildren2:before {
                content: "\2082";
            }
            .GrandchildrenSpouse2:before {
                content: "+ ";
            }
            
            .Spouse3:before {
                content: "\00a0+ \00B3";
            }
            .ChildrenSpouse3:before {
                content: "\00B3";
            }
            .SpouseOfChildren3:before {
                content: "\00a0+ \2083";
            }
            .Grandchildren3:before {
                content: "\2083";
            }
            .GrandchildrenSpouse3:before {
                content: "+ ";
            }
            
            .Spouse4:before {
                content: "\00a0+ \2074";
            }
            .ChildrenSpouse4:before {
                content: "\2074";
            }
            .SpouseOfChildren4:before {
                content: "\00a0+ \2084";
            }
            .Grandchildren4:before {
                content: "\2084";
            }
            .GrandchildrenSpouse4:before {
                content: "+ ";
            }
            
            .Spouse5:before {
                content: "\00a0+ \2075";
            }
            .ChildrenSpouse5:before {
                content: "\2075";
            }
            .SpouseOfChildren5:before {
                content: "\00a0+ \2085";
            }
            .Grandchildren5:before {
                content: "\2085";
            }
            .GrandchildrenSpouse5:before {
                content: "+ ";
            }
            
            .Spouse6:before {
                content: "\00a0+ \2076";
            }
            .ChildrenSpouse6:before {
                content: "\2076";
            }
            .SpouseOfChildren6:before {
                content: "\00a0+ \2086";
            }
            .Grandchildren6:before {
                content: "\2086";
            }
            .GrandchildrenSpouse6:before {
                content: "+ ";
            }
            
            .Spouse7:before {
                content: "\00a0+ \2077";
            }
            .ChildrenSpouse7:before {
                content: "\2077";
            }
            .SpouseOfChildren7:before {
                content: "\00a0+ \2087";
            }
            .Grandchildren7:before {
                content: "\2087";
            }
            .GrandchildrenSpouse7:before {
                content: "+ ";
            }
            
            .Spouse8:before {
                content: "\00a0+ \2078";
            }
            .ChildrenSpouse8:before {
                content: "\2078";
            }
            .SpouseOfChildren8:before {
                content: "\00a0+ \2088";
            }
            .Grandchildren8:before {
                content: "\2088";
            }
            .GrandchildrenSpouse8:before {
                content: "+ ";
            }
            
            .Spouse9:before {
                content: "\00a0+ \2079";
            }
            .ChildrenSpouse9:before {
                content: "\2079";
            }
            .SpouseOfChildren9:before {
                content: "\00a0+ \2089";
            }
            .Grandchildren9:before {
                content: "\2089";
            }
            .GrandchildrenSpouse9:before {
                content: "+ ";
            }
            
            .Spouse10:before {
                content: "\00a0+ \00B9\2070";
            }
            .ChildrenSpouse10:before {
                content: "\00B9\2070";
            }
            .SpouseOfChildren10:before {
                content: "\00a0+ \2081\2080";
            }
            .Grandchildren10:before {
                content: "\2081\2080";
            }
            .GrandchildrenSpouse10:before {
                content: "+ ";
            }
            
            .Spouse11:before {
                content: "\00a0+ \00B9\00B9";
            }
            .ChildrenSpouse11:before {
                content: "\00B9\00B9";
            }
            .SpouseOfChildren11:before {
                content: "\00a0+ \2081\2081";
            }
            .Grandchildren11:before {
                content: "\2081\2081";
            }
            .GrandchildrenSpouse11:before {
                content: "+ ";
            }
            
            .Spouse12:before {
                content: "\00a0+ \00B9\00B2";
            }
            .ChildrenSpouse12:before {
                content: "\00B9\00B2";
            }
            .SpouseOfChildren12:before {
                content: "\00a0+ \2081\2082";
            }
            .Grandchildren12:before {
                content: "\2081\2082";
            }
            .GrandchildrenSpouse12:before {
                content: "+ ";
            }
            
            .Spouse13:before {
                content: "\00a0+ \00B9\00B3";
            }
            .ChildrenSpouse13:before {
                content: "\00B9\00B3";
            }
            .SpouseOfChildren13:before {
                content: "\00a0+ \2081\2083";
            }
            .Grandchildren13:before {
                content: "\2081\2083";
            }
            .GrandchildrenSpouse13:before {
                content: "+ ";
            }
            
            .Spouse14:before {
                content: "\00a0+ \00B9\00B4";
            }
            .ChildrenSpouse14:before {
                content: "\00B9\00B4";
            }
            .SpouseOfChildren14:before {
                content: "\00a0+ \2081\2084";
            }
            .Grandchildren14:before {
                content: "\2081\2084";
            }
            .GrandchildrenSpouse14:before {
                content: "+ ";
            }
            
            .Spouse15:before {
                content: "\00a0+ \00B9\00B3";
            }
            .ChildrenSpouse15:before {
                content: "\00B9\00B3";
            }
            .SpouseOfChildren15:before {
                content: "\00a0+ \2081\2083";
            }
            .Grandchildren15:before {
                content: "\2081\2083";
            }
            .GrandchildrenSpouse15:before {
                content: "+ ";
            }
            
            /*
            .dashedborder { border: 1px dashed blue; }
            */
            
			.gennotalwaysvisible { display: none; }
			.genalwaysvisible { border: 1px solid red; }
			
            .notsaved { border: 2px solid red; background-color: yellow; }

			.notvisible { display: none; }
			.gen { border: 1px solid red; }
			
			ol {
				margin: 0 0 0 0.5em;
				padding: 0 0 0 0.5em;
			}
			
			.grid-container {
				display: grid;
				grid-template-columns:  1rem 1rem auto repeat(2, minmax(0, 1fr)) 1rem 1rem; //auto auto auto;			
				background-color: white;
				border: 1px solid #ccc;
			}

			.child1 {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
			}

			.child2 {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
			}

			.child3 {
				display: grid;
				grid-template-columns: repeat(6, 1fr);
			}
			
			.child4 {
				display: grid;
				grid-template-columns: repeat(8, 1fr);
			}
			
			.child5 {
				display: grid;
				grid-template-columns: repeat(10, 1fr);
			}
			
			.child6 {
				display: grid;
				grid-template-columns: repeat(12, 1fr);
			}
			
			.child7 {
				display: grid;
				grid-template-columns: repeat(14, 1fr);
			}

			.grid-item {
                background-color: rgba(255, 255, 255, 0.8);
                text-align: center;
				//align-items: start;
                max-height: 999999px; 
			  //padding: 20px;
			  //border: 1px solid lightblue;
			}
			
			.topgens {
				text-align: center;
				height: max-content;
			}
			
			.span2 {
				grid-area: auto / auto / auto / span 2
			}
			
			.aparent {
				grid-area: auto / auto / auto / span 2;
				//align-self: end;
				//border: 2px dashed blue;
				align-self: stretch;
			}
			
			.children {
				grid-area: auto / auto / auto / span 2;
			}

			.firstgen, .level2gen, .level3gen {
				border-radius: .2em;
				display: inline-block;
				padding: .5em .5em 0 .5em;
				position: relative;
				background: white;
				/*
				border: solid .1em #666;
				margin: 0 .2em .5em;
                vertical-align: middle;
                line-height: 1em;
				*/
            }	

            .firstgen {
				border: solid 2px blue;
				text-align: left;
				height: 100%;
				padding-bottom: 0.5em;
            }
            .firstgen .binbintiayah {
                display: inline;
            }

            .level2gen {
				border: solid 2px green;
				height: 100%;
				margin: 0 .5em 0 0;
            }
            
            .level3gen {
				border: solid 2px magenta;
				text-align: left;
				padding: .5em .5em .5em .5em;
				margin: 0 .5em 0 0;
            }
            
			/*
			.firstgen:before {
				outline: solid 1px #0f0; //#666;
				content: "";
				height: 1.3rem;
				top: 105%;
				left: 50%;
				position: absolute;
			}
			
			.level2gen:before {
				outline: solid 1px #f00; //#666;
				content: "";
				height: 1.3rem;
				top: 105%;
				left: 50%;
				position: absolute;
			}
			*/

			.top-dashed {
				border-top: 1px dashed #888;
			}

			.bottom-dashed {
				border-bottom: 1px dashed #888;
			}
			
			.level2 {
				background: #ffc;
			}
			
			.level3 {
				background: #ddd;
			}

			.child-first-mid-lastleft {
				border-top: 2px solid blue; //#666;
				border-left: 2px solid blue; //#666;
				text-align: left;
				font-size: 75%;
				//margin-left: -1px;
				//border-image: linear-gradient(to left, #f66 50%, transparent 50%) 100% 1;
			}
			
			.border-top {
				border-top: 2px solid blue; //#666;
			}

			.child-lastright, .child-vertline {
				border-left: 2px solid blue; //#666;
				text-align: left;
				font-size: 75%;
				//margin-left: -1px;
			}

			.border-left-top {
				border-left: 2px solid blue; //#666;
				border-top: 2px solid blue; //#666;
			}
			
			.numbering {
				text-align: left;
				font-size: 75%;
			}
			
			.border-left {
				border-left: 2px solid blue; //#666;
			}
			
			.border-left-grandchild {
				border-left: 2px solid green; //#666;
			}
			
			.border-left-2 {
				border-left: 2px solid blue; //#666;
				margin-left: -2px;
			}

            /*
            */
			.child-vertline-right {
				border-right: 2px solid blue; //#666;
				//margin-right: -1px;
			}
            
			.inputdate:invalid {
				border: 2px dashed red;
			}
			.grandchild-vertline {
				border-left: 2px solid green; //#666;
				//margin-left: -1px;
			}
			
			.addbutton {
			    /*display: none; */
			    visibility: hidden;
			}
			
			.buttons, .buttonSpan {
			    display: none;
			}
			
			.showbox {
				display: block;
			}
			
			.hidebox {
				display: none;
			}
			
			.lds-spinner {
				color: official;
				display: inline-block;
				position: absolute;
				top: 50%;
				left: 50%;
				width: 80px;
				height: 80px;
				background: #888;
				border-radius: 20px;
				z-index: 9999;
			}
			.lds-spinner div {
				transform-origin: 40px 40px;
				animation: lds-spinner 1.2s linear infinite;
			}
			.lds-spinner div:after {
				content: " ";
				display: block;
				position: absolute;
				top: 3px;
				left: 37px;
				width: 6px;
				height: 18px;
				border-radius: 20%;
				background: #fff;
			}
			.lds-spinner div:nth-child(1) {
				transform: rotate(0deg);
				animation-delay: -1.1s;
			}
			.lds-spinner div:nth-child(2) {
				transform: rotate(30deg);
				animation-delay: -1s;
			}
			.lds-spinner div:nth-child(3) {
				transform: rotate(60deg);
				animation-delay: -0.9s;
			}
			.lds-spinner div:nth-child(4) {
				transform: rotate(90deg);
				animation-delay: -0.8s;
			}
			.lds-spinner div:nth-child(5) {
				transform: rotate(120deg);
				animation-delay: -0.7s;
			}
			.lds-spinner div:nth-child(6) {
				transform: rotate(150deg);
				animation-delay: -0.6s;
			}
			.lds-spinner div:nth-child(7) {
				transform: rotate(180deg);
				animation-delay: -0.5s;
			}
			.lds-spinner div:nth-child(8) {
				transform: rotate(210deg);
				animation-delay: -0.4s;
			}
			.lds-spinner div:nth-child(9) {
				transform: rotate(240deg);
				animation-delay: -0.3s;
			}
			.lds-spinner div:nth-child(10) {
				transform: rotate(270deg);
				animation-delay: -0.2s;
			}
			.lds-spinner div:nth-child(15) {
				transform: rotate(300deg);
				animation-delay: -0.1s;
			}
			.lds-spinner div:nth-child(12) {
				transform: rotate(330deg);
				animation-delay: 0s;
			}
			@keyframes lds-spinner {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			
			.editable {
				display: none;
			}

			.inputtable tr td {
				padding-top: 5px;
				padding-bottom: 5px;
			}
			.inputtable tr:nth-child(odd) {
				background-color: #e0e0e0;
			}
			
			.viewtable .odd {
				background-color: #e0e0e0;
			}
			
			.menuitems {
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				z-index: 1;
			}
			
			.menuitems div {
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
			}
			
			.menuitems div:hover {background-color: #ddd;}
			
			/* .:hover .menu {display: block;}
			*/
			
			.menuicon {
				width: 1.5em;
				display: inline-block;
			}
			
			.menu-disabled {
				color: #ccc;
			}
			
			.personSpan, .theOtherPersonSpan {
				font-weight: bold;
			}
			
			.thegrandchildrenlist li + li {
				margin-top: 2px;
			}
			
			.ancestorsList {
				margin-left: 1.5em;
			}
			.ancestorsListItem:nth-child(odd) {
				background: #ccc;
			}
			.ancestorsListItem:nth-child(even) {
			}

			.relationshipsList {
				margin-left: 1.5em;
			}
			
			/* Tooltip container */
			.tooltip {
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
			}
			
			/* Tooltip text */
			.tooltip .tooltiptext {
				/*
				visibility: hidden;
				*/
				display: none;
				width: max-content;
				background-color: black;
				color: #fff;
				text-align: left;
				padding: 5px 0;
				border-radius: 6px;

				/* Position the tooltip text - see examples below! */
				position: absolute;
				z-index: 1;
			}

			/* Show the tooltip text when you mouse over the tooltip container */
			.tooltip:hover .tooltiptext {
				/*
				visibility: visible;
				*/
				display: block;
			}

			/* Tooltip container */
			.tooltipright {
				position: relative;
				display: inline-block;
				border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
			}
			
			/* Tooltip text */
			.tooltipright .tooltiptext {
				/*
				visibility: hidden;
				*/
				display: none;
				width: max-content;
				right: 1.5em;
				background-color: black;
				color: #fff;
				text-align: left;
				padding: 5px 0;
				border-radius: 6px;

				/* Position the tooltip text - see examples below! */
				position: absolute;
				z-index: 1;
			}

			/* Show the tooltip text when you mouse over the tooltip container */
			.tooltipright:hover .tooltiptext {
				/*
				visibility: visible;
				*/
				display: block;
			}

			.ancestriesMale {
				background: #cdf;
			}

			.ancestriesFemale {
				background: #edf;
			}

			.ancestriesCouple1 {
				background: #cfa;
				/*
				border-left: 1px solid #cfa;
				border-right: 1px solid #cfa;
				*/
				/*
				border-left: 1px solid;
				border-right: 1px solid;
				*/
			}

			.ancestriesCouple2 {
				background: #fca;
			}

			.ancestriesCouple3 {
				background: #adf;
			}

			.ancestriesCouple4 {
				background: #cda;
			}

			.ancestriesCouple5 {
				background: #afb;
			}
			
			.ancestriesTableFirst {
				border-collapse: collapse;
				border-spacing: 0;
				/*
				border: 1px dashed blue;
				margin: -3 -5;
				*/
			}
			
			.ancestriesTable {
				border-collapse: collapse;
				border-spacing: 0;
				margin: -3 -5;
			}
			
			.ancestriesPerson {
				border-top: 2px solid black;
				border-bottom: 2px solid black;
				border-left: 2px solid black;
				/*
				border-right: 1px dotted red;
				*/
				vertical-align: top;
				padding: 2 2 2 10;
			}
			
			.ancestriesPlus {
				border-top: 2px solid black;
				border-bottom: 2px solid black;
				border-right: 2px solid black;
				border-left: 0px;
				/*
				margin: -15;
				*/
				/*
				padding-top: -10;
				padding-bottom: -10;
				*/
				text-align: center;
				background: #777; 
				font-weight: bold; 
				color: #fff;
			}
			
			.ancestriesBetween {
				border-top: 2px solid black;
				border-bottom: 2px solid black;
				background: #777; 
				border-right: 0px;
				border-left: 2px solid #777;
				/*
				border-left: 1px dashed blue;
				border-left: 1px solid #777;
				*/
			}
			
			.ancestriesFirst {
				border-top: 2px solid black;
				border-bottom: 2px solid black;
				border-left: 2px solid black;
				border-right: 0px;
				background: #777; 
				/*
				border-left: 1px solid #777;
				*/
			}
			
			.ancestriesTableCell {
				padding: 0;
				/*
				border: 1px dashed green;
				*/
			}
			
			.ancestriesLast {
				border-left: 1px solid black;
			}
			
    /* The Modal (background) */
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content/Box */
    .modal-content {
      background-color: #fefefe;
      margin: 2% auto; /* 15% from the top and centered */
      padding: 2px;
      border: 1px solid #888;
      width: 80%; /* Could be more or less, depending on screen size */
	  height: 85vh;
      resize: both; /* Enable resizing */
      overflow: auto; /* Enable scroll if needed */
      position: absolute; /* Position the modal content */
      top: 50%; /* Center vertically */
      left: 50%; /* Center horizontally */
      transform: translate(-50%, -50%); /* Translate the modal content */
    }

    /* The Close Button */
    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }

    /* The Header */
    .modalHeader {
      padding: 2px 2px;
      background-color: #aaaaaa;
      height: 2em;
    }

    .modalHeaderButton {
	  height: 1.9em;
	  text-align: center;
	  vertical-align: middle;
	}
	
    /* The Middle Content Area */
    .modalMiddle {
      padding: 2px 2px;
      height: calc(75vh - 100px);
      overflow-y: auto;
    }

    /* The Footer */
    .modalFooter {
      padding: 10px 5px 0px 5px;
      background-color: #bbbbbb;
      color: white;
      height: 2em;
	  text-align: right;
	  vertical-align: middle;
    }

    .modalFooterButton {
	  height: 1.9em;
	  text-align: center;
	  vertical-align: middle;
	}

	#modalContentAlert {
		height: fit-content;
		width: 30em;
	}
	#modalMiddleAlert {
		height: 10em;
	}
	
	#modalContentSelectLineage {
		height: 25em;
	}
	#modalMiddleSelectLineage {
		height: fit-content;
	}
	#modalContentSelectLineage::backdrop {
		background: rgba(3, 138, 255, 0.4);
	}
	
	#modalContentRelationship {
		height: 35em;
	}
	#modalMiddleRelationship {
		height: fit-content;
	}
	#modalContentRelationship::backdrop {
		background: rgba(3, 138, 255, 0.4);
	}
	
	#modalContentEditPerson {
		height: fit-content;
	}
	#modalMiddleEditPerson {
		height: fit-content;
	}
	#modalContentEditPerson::backdrop {
		background: rgba(3, 138, 255, 0.4);
	}
	
	#modalContentPersonDetails {
		height: fit-content;
	}
	#modalMiddlePersonDetails {
		height: fit-content;
	}
	#modalContentPersonDetails::backdrop {
		background: rgba(3, 138, 255, 0.4);
	}
	
	#modalContentAddChild {
		height: fit-content;
		width: 30em;
	}
	#modalMiddleAddChild {
		height: fit-content;
	}
	#modalContentAddChild::backdrop {
		background: rgba(63, 195, 128, 0.4);
	}
	
	#modalContentAddSpouse {
		height: fit-content;
		width: 30em;
	}
	#modalMiddleAddSpouse {
		height: fit-content;
	}
	#modalContentAddSpouse::backdrop {
		background: rgba(63, 195, 128, 0.4);
	}
	
	#modalContentDeleteChild {
		height: fit-content;
		width: 25em;
	}
	#modalMiddleDeleteChild {
		height: auto;
	}
	#modalContentDeleteChild::backdrop {
		background: rgba(207, 0, 15, 0.4);
	}
	
	#modalContentAddPhoto {
		height: fit-content;
		width: 25em;
	}
	#modalMiddleAddPhoto {
		height: fit-content;
	}
	#modalContentAddPhoto::backdrop {
		background: rgba(63, 195, 128, 0.4);
	}
	
	#modalContentTakePhoto {
		height: fit-content;
		width: 40em;
	}
	#modalMiddleTakePhoto {
		height: fit-content;
	}
	#modalContentTakePhoto::backdrop {
		background: rgba(63, 195, 128, 0.4);
	}
	
	.tablesideheader {
		vertical-align: top;
	}
	
	.birthdeath {
		font-style: italic;
		font-size: 70%;
	}
	
	.marriage {
		font-style: italic;
		font-size: 70%;
	}
	
	.photo {
		height: 100px;
		border: 2px solid black;
	}
	
	.family-photo {
		height: 6em;
		border: 5px solid;
		/*
		border-bottom-color:#ffe;
		border-left-color:#eed;
		border-right-color:#eed;
		border-top-color:#ccb;
		*/
		/*
		border-bottom-color:#AAFFFF;
		border-left-color:#CCFFFF;
		border-right-color:#CCFFFF;
		border-top-color:#22FFFF;
		*/
		border-bottom-color:#9A2A2A;
		border-left-color:#954535;
		border-right-color:#954535;
		border-top-color:#6E260E;
	}
	
	.span-family {
		width: 100%;
		background: #CCFFFF;
	}
	
	.selectedperson {
		background: lightgreen;
	}
	
	input:read-only {
		background-color: lightgrey;
	}
	
	#changebutton {
        display: block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        bottom: -5px;
        padding: 15px;
        background-color: #8481da;
        border: 1px solid rgba(0, 0, 0, 0.7);
        font-size: 14px;
        color: rgba(255, 255, 255, 1.0);
        cursor: pointer;
    }
    #startbutton {
        display: block;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        bottom: -5px;
        padding: 15px;
        background-color: #8481da;
        border: 1px solid rgba(0, 0, 0, 0.7);
        font-size: 14px;
        color: rgba(255, 255, 255, 1.0);
        cursor: pointer;
    }