:root {
	--correct-borderless-fill: #BFB;
	--incorrect-borderless-fill: #FBB;
	
	--correct-border: 2px solid #6F6;
	--correct-bordered-fill: #C0FFC0;
	--incorrect-border: 2px solid #F66;
	--incorrect-bordered-fill: #FFC0C0;	
}

/* ----- Pedigree Div/SVG ----- */

/* default; phone_P */
#id-pedigreeDiv {
	background-color: beige;
	
	width: 90vw;
	height: auto;
	
	margin: 20px auto;
	padding: 20px;
	
	box-sizing: border-box;
}

	#id-pedigreeSVG {
		display: block;
		background-color: white;
		
		width: 100%;
		/* height: calc(2 * numberOfGenerations * symbolLength); */
		
		border: 1px solid black;
		margin: 20px auto;
		padding: 0px;
	}
	
	#id-pedigreeButton {
		display: block;
		
		border: 1px solid black;
		margin: 20px auto;
		
		cursor: pointer;
	}

/* S >= 600px; phone_L < tablet_P */
@media screen and (min-width: 600px) {
	#id-pedigreeDiv {
		width: 80vw;
		max-width: 575px;
	}

		#id-pedigreeSVG {
			width: 90%;
			/* height: calc(2 * numberOfGenerations * symbolLength); */
		}
}

/* S >= 800px; tablet_L < monitor */
@media screen and (min-width: 800px) {
	#id-pedigreeDiv {
		width: 70vw;
		max-width: 1100px;
	}
}

/* ----- Trait Expression Div ----- */

/* default; phone_P */
#id-traitExpressionDiv {
	display: none;
	
	width: 80vw;
	margin: 20px auto;
	
	text-align: center;
}
		
	#id-traitExpressionForm {
		background-color: #AEF;
		
		width: calc(100% - 30px);
		height: auto;
		
		margin: 20px auto;
		padding: 15px;
	}
		
	#id-traitExpressionOutput {
		/* background-color: var(--correct-borderless-fill) || var(--incorrect-borderless-fill) */
		
		width: calc(100% - 30px);
		height: auto;
		
		margin: 20px auto;
		padding: 15px;
		
		font-size: 16px;
	}

/* S >= 600px; phone_L < tablet_P */
@media screen and (min-width: 600px) {
	#id-traitExpressionDiv {
		width: 70vw;
		max-width: 450px;
	}
			
		#id-traitExpressionOutput {
			font-size: 20px;
		}
}

/* S >= 800px; tablet_L < monitor */
@media screen and (min-width: 800px) {
	#id-traitExpressionDiv {
		width: 50vw;
		max-width: 675px;
	}
	
		#id-traitExpressionOutput {
			font-size: 22px;
		}
}

/* ----- ----- */

/* default; phone_P */
#id-traitAnalysisDiv {
	display: none;
	
	width: 90vw;
	height: auto;
	
	margin: 20px auto;
	padding: 0px;
}
	
	#id-traitInfo {
		background-color: #FDB;
		
		width: calc(100% - 30px);
		height: auto;
		
		margin: 0px;
		padding: 15px;
	}
		
		#id-traitDescription {
			background-color: #FED;
			
			margin: 15px auto 0px auto;
			padding: 10px;
			
			text-indent: 2em;
			text-align: left;
		}
		
	#id-traitAnalysisForm {
		background-color: #FF9;
		
		width: calc(100% - 30px);
		height: 100%;
		
		border-width: 0px;
		margin: 0px;
		padding: 15px;
	}
		
		#id-traitAnalysisOutput {
			/* background-color: var(--correct-bordered-fill) || var(--incorrect-bordered-fill); */
			
			width: 80%;
			height: auto;
		
			margin: 20px auto;
			padding: 15px;
			/* border: var(--correct-border) || var(--incorrect-border); */
			
			font-size: 16px;
		}
		
		#id-nextQuestion {
			display: block;
			margin: 10px auto;
		}

/* S >= 600px; phone_L < tablet_P */
@media screen and (min-width: 600px) {
	#id-traitAnalysisDiv {
		width: 80vw;
		max-width: 575px;
	}
			
			#id-traitAnalysisOutput {
				width: 70%;
				
				font-size: 22px;
			}
}

/* S >= 800px; tablet_L < monitor */
@media screen and (min-width: 800px) {
	#id-traitAnalysisDiv {
		width: 80vw;
		max-width: 1250px;
	}
	
		#id-traitInfo {
			width: calc(30% - 30px);
		}
			
			#id-traitDescription {			
				margin: 15px auto 0px auto;
				padding: 10px;
			}
			
		#id-traitAnalysisForm {
			width: calc(70% - 30px);
			height: 100%; /* set form to use content height instead of flexbox height equality */
		}
		
			#id-traitAnalysisOutput {
				width: 90%;
			}
}