﻿@media print {
	.review_buttons {
		display: none;
	}
	#review_header, #review_table, #review_intro {
		color: black !important;
	}
	#review_table tr {
		break-inside: avoid;
	}
}

@media (forced-colors: active) {
	.form-input:checked + .radiocheck {
		background-color: white;
	}
}

/*=== Mobile defines ==========================================================================*/
/* Responsive table. */
.rrow, .rcell {
	width: 100%;
	flex-shrink: 1;
	gap: 10px
}
.rcontents {
	padding-bottom: 5px;
}
.rcontents .form-tbox { width: 100%; }
.rrow.column { flex-direction: column; }

.contact .rrow { align-items: flex-end; }


@media only screen and (max-width: 500px) {
	.rrow, .rcell { display: inline; }
	.group { display: block; }
	.groupHeader { display: none; }
	.groupQHeader { display: block !important; }
	.rankTable .rcell { display: block; }
}
@media only screen and (min-width: 501px) {
	.rrow { display: flex; -ms-flex-negative: 1; flex-shrink: 1; }
	.rcell { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
}

/*=== Default stylings ========================================================================*/

body { margin: 20px; }

span.separator { font-size: 18pt; }
hr.separator { font-size: 24pt; }
ul { margin: 5px 0; }

.required-mark { margin-right: 0.2em; }
.required-mark:before { content: "*"; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.errorMessage {
	color: #EA1014;
	font-weight: bold;
	scroll-margin: 30px;
}

p, .form-qtext { display: block; margin: 0; }
font { display: block; }

input[type="text"], select, textarea {
	border: 1px solid darkgray;
}
input[type="submit"], button[type="submit"] {
	white-space: normal;
	-webkit-appearance: none;
}

select, option {
	color: black;
}
select {
	max-width: 100%;
}
	select.placeholder {
		color: gray;
	}

.radioTable, .checkboxTable {
	display: grid;
	grid-gap: 10px;
	list-style: none;
	width: fit-content;
	padding-left: 10px;
	margin-top: 10px;
}
	.radioTable label, .checkboxTable label {
		display: flex;
		align-items: flex-start;
		cursor: pointer;
	}
	.checkboxTable input {
		align-self: center;
		margin-right: 5px;
	}
	.radiocheck {
		display: none;
	}

.rankNum {
	width: 30px;
	margin-right: 5px;
	text-align: center;
}

.inputError {
	border-color: #EA1014 !important;
}

.file_attachment .fileName { margin-left: 5px; }
.file_attachment .fileLabel {
	display: none;
}
	.file_attachment.is-dragover .fileLabel {
		padding: 5px;
		border: 1px dashed black;
	}

.m-signature-pad--body canvas {
	background: white;
	left: 0;
	top: 0;
	width: 700px;
	height: 300px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
	border: 1px solid black;
}
#pnl_signature.error canvas {
	border-color: #EA1014;
	border-width: 2px;
}

#pnl_captcha {
	margin-bottom: 1em;
}
#pnl_captcha.error iframe {
	border: 2px solid #EA1014;
	border-radius: 3px;
}

.locationTable, .mapTextbox {
	width: 100%;
}

	.locationTable .map-setcurrent {
		padding: 0;
		border: 0;
		background: none;
	}
	.locationTable .map-setcurrent img {
		width: 28px;
		filter: drop-shadow(0 3px 0 rgba(0,0,0,.3));
	}
		.map-setcurrent:hover img, .map-setcurrent:focus-visible img {
			filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)) contrast(2);
		}
		.map-setcurrent:active img {
			vertical-align: -2px;
			filter: contrast(.6);
		}

.map-setcurrent.darkbg {
	filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)) invert(.8);
}
	.map-setcurrent.darkbg:hover, .map-setcurrent.darkbg:focus-visible {
		filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)) invert(1);
	}
	.map-setcurrent.darkbg:active {
		vertical-align: -2px;
		filter: invert(.5);
	}

#breadcrumbs {
	margin-bottom: 10px;
}
	#breadcrumbs div {
		display: inline-block;
	}
	#breadcrumbs div + div:before {
		content: "-";
		padding: 0 8px;
		color: black;
	}
	#breadcrumbs > div div {
		margin: 0 3px 5px;
		padding: 2px 6px;
		background-color: white;
		border: 1px solid gray;
		border-radius: 3px;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
	}
		#breadcrumbs > div div.unreached {
			opacity: 0.5;
			background-color: #DDD;
			cursor: not-allowed;
		}
		#breadcrumbs > div div.selected {
			font-weight: bold;
			background-color: #EEE;
		}
		#breadcrumbs > div div.reached:hover {
			background-color: #DDD;
			cursor: pointer;
		}
		#breadcrumbs > div div.reached:active {
			background-color: #BBB;
			box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
		}
		
#review_table {
	width: 100%;
	text-align: left;
	margin-top: 20px;
}
	#review_table td {
		vertical-align: top;
	}
	#review_table td:first-child {
		width: 50%;
		text-align: right;
		padding-right: 15px;
	}

/*=== Theme A - Classic =======================================================================*/
.classic input[type="text"]:focus, .classic select:focus, .classic textarea:focus {
	background-color: lightyellow;
}

/*=== Theme B - Modern ========================================================================*/

.modern .breakText { margin-bottom: 5px; }

.modern select,
.modern textarea,
.modern input,
.modern .radiocheck,
.modern .fileUpload {
	-moz-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px 0px,rgba(0, 0, 0, 0.25) 0 1px 1px inset;
	-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px 0px,rgba(0, 0, 0, 0.25) 0 1px 1px inset;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px 0px,rgba(0, 0, 0, 0.25) 0 1px 1px inset;
}
	.modern .radiocheck svg {
		display: block;
	}
	.modern input:disabled {
		opacity: 0.8;
		cursor: not-allowed !important;
	}

/* selects, textareas */
.modern select { padding: 7px 8px; cursor: pointer; }
.modern textarea { padding: 7px 12px; }
.modern input[type="text"] { padding: 8px 12px; }

.modern select,
.modern textarea,
.modern input[type="text"] {
	margin-top: 3px;
	font-size: 14px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	-o-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	-webkit-transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
	.modern .form-input:focus,
	.modern .form-input:focus + .radiocheck,
	.modern button:focus,
	.modern input[type="submit"]:focus,
	.modern input[type="file"]:focus + label .fileUpload {
		outline: 1px solid Highlight;
		outline-offset: -1px;
		-moz-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 1px inset, Highlight 0 0 5px 1px;
		-webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 1px inset, Highlight 0 0 5px 1px;
		box-shadow: rgba(0, 0, 0, 0.25) 0 1px 1px inset, Highlight 0 0 5px 1px;
		background-color: white;
	}
	.modern button:focus,
	.modern input[type="submit"]:focus {
		outline-width: 2px;
	}
	.modern .inputError:focus,
	.modern .inputError .form-input:focus + .radiocheck {
		outline-color: #EA1014;
	}

	.modern select, .modern input[type="text"]:not([size]) { width: 100%; }

	.modern .contact select,
	.modern .contact input[type="text"] {
		margin-top: 0;
	}

/* checkboxes, radio buttons */
.modern input[type="checkbox"],
.modern input[type="radio"] {
	position: absolute;
	left: -999em;
	right: auto;
}

.modern .radiocheck {
	display: inline;
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: calc(0.5em - 9px);
	margin-right: 6px;
	background-color: white;
	border: 1px solid gray;
	fill: black;
	fill-opacity: 0;
}
	.modern input[type="checkbox"]:checked + .radiocheck,
	.modern input[type="radio"]:checked + .radiocheck {
		background-color: Highlight;
		fill: white;
		fill-opacity: 1;
		border-color: transparent;
	}
	.modern input[type="checkbox"]:hover + .radiocheck,
	.modern input[type="radio"]:hover + .radiocheck {
		fill-opacity: 0.5;
	}

.modern input[type="checkbox"] + .radiocheck {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.modern input[type="radio"] + .radiocheck {
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

/* Rankings */
.modern .rankTable input.rankNum {
	width: 30px;
	padding: 2px 0;
	vertical-align: -2px;
}
.modern .rankNum + span {
	vertical-align: middle;
}

/* buttons */
.modern input[name^="GroupRemove"] { margin: 8px 5px 20px 0; }
.modern .fileUpload { margin-left: 5px; }

.modern .addt_contact_entry:not(:first-of-type),
.modern .udf.side .groupRow:not(:first-of-type) > .groupItem {
	margin-top: 15px;
}
@media only screen and (max-width: 500px) {
	.modern .udf.over .groupRow:not(:nth-child(2)) .rcell:first-child .rcontents { margin-top: 15px; }
}

.modern .file_attachment .fileLabel {
	display: block;
	cursor: pointer;
}
.modern input[type="file"] { /* hide the actual file input */
	line-height: 0;
	z-index: -1;
	opacity: 0;
	position: absolute;
}

.modern button,
.modern input[type="button"],
.modern input[name^="GroupRemove"],
.modern input[name^="remove"],
.modern input[name^="add"],
.modern .fileUpload {
	cursor: pointer;
	margin: 5px 5px 3px 0;
	padding: 3px 10px;
	background-color: white;
	border: 1px solid darkgray;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-size: 0.85em;
}
	.modern input:disabled,
	.modern button:hover,
	.modern input[type="button"]:hover,
	.modern input[name^="GroupRemove"]:hover,
	.modern input[name^="remove"]:hover,
	.modern input[name^="add"]:hover,
	.modern input[type="file"]:hover + label .fileUpload,
	.modern .file_attachment.is-dragover .fileUpload {
		background-color: #e4e4e4;
	}
	.modern button:active,
	.modern input[type="button"]:active,
	.modern input[name^="GroupRemove"]:active,
	.modern input[name^="remove"]:active,
	.modern input[name^="add"]:active,
	.modern input[type="file"]:active + label .fileUpload {
		background-color: #ccc;
	}
	.modern .fileLabel {
		padding-top: 5px;
	}

/* submit */
.modern .submitButton {
	padding: 8px 15px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border-width: 0;
	color: white;
	text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 2px;
	-moz-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.4);
	box-shadow: inset 0 -1px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}
	.modern .submitButton:hover, .modern .submitButton:focus-visible {
		-moz-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.5), inset 0 0 0 50px rgba(0, 0, 0, 0.15);
		-webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.5), inset 0 0 0 50px rgba(0, 0, 0, 0.15);
		box-shadow: inset 0 -1px rgba(0, 0, 0, 0.5), inset 0 0 0 50px rgba(0, 0, 0, 0.15);
	}
	.modern .submitButton:active {
		-moz-box-shadow: inset 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 50px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 50px rgba(0, 0, 0, 0.3);
		box-shadow: inset 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 50px rgba(0, 0, 0, 0.3);
	}

.modern .submitButton.lightbg {
	color: black;
	text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
	border: 1px solid gray;
	border: 1px solid rgba(0, 0, 0, 0.4);
}
.modern .submitButton.darkbg {
	border: 1px solid gray;
	-moz-box-shadow: inset 0 -1px rgba(128, 128, 128, 0.4);
	-webkit-box-shadow: inset 0 -1px rgba(128, 128, 128, 0.4);
	box-shadow: inset 0 -1px rgba(128, 128, 128, 0.4);
}
	.modern .submitButton.darkbg:hover, .modern .submitButton.darkbg:focus-visible {
		-moz-box-shadow: inset 0 -1px rgba(128, 128, 128,0.5), inset 0 0 0 50px rgba(128, 128, 128, 0.2);
		-webkit-box-shadow: inset 0 -1px rgba(128, 128, 128,0.5), inset 0 0 0 50px rgba(128, 128, 128, 0.2);
		box-shadow: inset 0 -1px rgba(128, 128, 128,0.5), inset 0 0 0 50px rgba(128, 128, 128, 0.2);
	}
	.modern .submitButton.darkbg:active {
		-moz-box-shadow: inset 0 1px rgba(128, 128, 128,0.6), inset 0 0 0 50px rgba(128, 128, 128, 0.35);
		-webkit-box-shadow: inset 0 1px rgba(128, 128, 128,0.6), inset 0 0 0 50px rgba(128, 128, 128, 0.35);
		box-shadow: inset 0 1px rgba(128, 128, 128,0.6), inset 0 0 0 50px rgba(128, 128, 128, 0.35);
	}

/* review */
.modern .review_buttons {
	margin-top: 15px;
}

@media (forced-colors: active) {
	.modern .form-input:focus,
	.modern .form-input:focus + .radiocheck,
	.modern button:focus,
	.modern input[type="submit"]:focus,
	.modern input[type="file"]:focus + label .fileUpload {
		outline-width: 2px;
		outline-offset: -2px;
	}
	.modern input[type="checkbox"]:checked + .radiocheck,
	.modern input[type="radio"]:checked + .radiocheck {
		background-color: ButtonFace;
		fill: ButtonText;
		fill-opacity: 1 !important;
	}
}


/*=== Theme C - USWDS ========================================================================*/

.uswds button:focus, .uswds input:focus, .uswds input:focus + .radiocheck, .uswds select:focus, .uswds textarea:focus {
	outline: 0.25rem solid #2491ff;
	outline-offset: 0;
}

/* selects, textareas */
.uswds select { cursor: pointer; }

.uswds input[type=text], .uswds select, .uswds textarea {
	border: 1px solid #5c5c5c;
	color: #1b1b1b;
	height: 2.5rem;
	margin-top: 0.25rem;
	padding: 0.5rem;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* checkboxes, radio buttons */
.uswds input[type="checkbox"],
.uswds input[type="radio"] {
	position: absolute;
	left: -999em;
	right: auto;
}

.uswds .checkboxTable label,
.uswds .radioTable label {
	display: inherit;
	font-weight: 400;
	margin-top: 0.75rem;
	padding-left: 2rem;
	position: relative;
	color: #1b1b1b;
}

.uswds .radiocheck {
	position: absolute;
	left: 0;
	margin-left: 2px;
	margin-top: 0.064rem;
	height: 1.25rem;
	width: 1.25rem;
	background-color: white;
	box-shadow: 0 0 0 2px #1b1b1b;
}

.uswds input[type="checkbox"] + .radiocheck {
	border-radius: 2px;
}
.uswds input[type="radio"] + .radiocheck {
	border-radius: 99rem;
}
.uswds input[type="checkbox"]:checked + .radiocheck {
	background-image: url(../images/icons/check-white.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #005ea2;
	box-shadow: 0 0 0 2px #005ea2;
}
.uswds input[type="radio"]:checked + .radiocheck {
	box-shadow: 0 0 0 2px #005ea2, inset 0 0 0 2px #fff;
	background-color: #005ea2;
}
