@charset "UTF-8";

a, p {
	-webkit-user-select: none;  
	user-select: none;
}

a {
	color: #202945;
}

#page-content {
	text-align: left;
	height: 100%;
	display: flex;
	flex-flow: column;
}

h1 {
	line-height: 1;
	margin-bottom: 1em;
}

/*
h2 {
	color: #202945;
	margin: .5em 0 0 0;
}

.row {
	margin: 0 auto;
}
*/

.form-container {
	display: none;
	padding-bottom: 60px;
}

label {
	color: #202945;
}

input {
	border: 2px solid #fff !important;
	font-size: 1.5em !important;
	background-color: #eee;
	border-radius: 0 !important;
}

#lastinitial {
	text-transform: uppercase;
}

input[type=checkbox] {
	height: 50px;
	width: 50px;
	margin: 0;
	border: 0;
}

/*
input {
	font-size: 1.75em !important;
	text-align: left;
	padding: 1.5rem 1rem !important;
	border: 6px solid #fff !important;
	border-radius: 6px !important;
}
*/

.fakecheckbox {
	background-color: #eee;
	border: 0;
	margin-right: 10px;
	border-radius: 0;
	height: 48px;
	width: 48px;
	display: inline-block;
	vertical-align: middle;
	float: left;
}

.fakecheckbox.checked {
	background-color: var(--adp-red);
	font-size: 29px;
	text-align: center;
}

.fakecheckbox.checked::after {
	content: '●';
	color: #fff;
	font-family: var(--font-family-sans);
	line-height: 1;
}


label.checkbox {
	width: 70%;
	float: right;
	float: left;
	line-height: 1.4;
}

/*
input.dob {
	text-align: center;
}
*/

.error {
	border: 2px solid #FF0000 !important;
}

.generation {
	width: 48%;
	margin: 1% 1%;
	padding: 1em;
	background-color: #eee;
	border: 2px solid #eee;
/* 	border-radius: 4px; */
	display: inline-block;
	text-align: center;
	font-size: var(--font-size);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}

.generation.selected {
	background-color: var(--adp-red);
	color: #fff;
	border: 2px solid var(--adp-red);
}

.tooltip {
	color: #FFF;
	left: 50%;
	bottom: calc(80%);
	font-size: 80%;
	position: absolute;
	padding: 0.5em 1em;
	background-color: #54566A;
	transform: translateX(-50%);
	border-radius: 0;
	border: 0;
	opacity: 0;
	transition: opacity .15s ease-in;
}

.tooltip.show {
	opacity: 1;
}

.tooltip::after {
	content: '';
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 1.3em 1em 1.3em;
	border-color: transparent transparent #54566A transparent;
	top: 100%;
	left: 50%;
	position: absolute;
	transform: rotate(180deg) translateX(50%);
}