:root {
	--primaryColor: #ff7a15;
	--primaryColorHover: #f15a22;
	--accentColor: #d64202;
	--topBarColor: #4e4d4fe6; /* was #042740cc   7th and 8th character are hex opacity ff = solid, 00 = transparent */
	--topBarHeight: 28px;
	--menuColor: #e9e9e9;
	--menuHeight: 325px;
	--maxPrintPageWidth: 11in;
}

html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; -webkit-text-size-adjust: none; }
body {
	color: #082f4c;
	font-family: 'Oswald', sans-serif;
	font-size:14px;

	background-color: #fff;
	overflow: hidden;
	position:fixed;
	
	/* overscroll-behavior-y: contain; /* Disables pull-to-refresh but allows overscroll glow effects. */
	overflow-y: hidden;
	overscroll-behavior-y: contain; /* Disables pull-to-refresh and overscroll glow effect. Still keeps swipe navigations. */
	overscroll-behavior-x: contain; /* Disables swipe navigations. */
}

/* preload images used in printing */
body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; /* hide images */
   content:url('../images/print/print-header.svg') url('../images/print/print-background.svg') url('../images/print/print-footer-baseball.svg') url('../images/print/print-footer-outdoor.svg') url('../images/print/print-footer-gymnasium.svg') url('../images/print/print-footer-hockey.svg') url('../images/print/print-footer-swimming.svg'); /* load images */
}
.print { display: none; }

#viewport3D {
	width: 100%;
	height: calc(100% - var(--menuHeight)); /* was 65% */
}

#viewport3D.fullscreen {
	height: 100%;
}

#alert_top { position: absolute; z-index: 2000; }

#info { /* Info bar across the top of the page */
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 28px;
	height: var(--topBarHeight);
	padding: 3px;
	background-color: rgba(78, 77, 79, 0.9);
	background-color: var(--topBarColor);
	text-align:center;
	font-size: 18.5px;
	line-height: 18.5px;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
}
#info #logo { height: 20px; width: auto; vertical-align: bottom; position: relative; top: 1px; padding-right: .25em; }

#info i { /* help / full screen / reset camera - buttons */
  color:#ababab; position: absolute; top: 5px; font-size: 18.5px;
  z-index: 1004;
  cursor: pointer;
}
#info i:hover { color:#dedede; }
#info i.grow { transition: all .15s ease-in-out; }
#info i.grow:hover { font-size: 25px; }
#helpButton { left: 4px; }
#resetCamera { left: 38px; }

#overlay {
  opacity: 0.85;
  display: block;
  /*transition: visibility 0s 0.2s, opacity 0.5s linear;*/
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:#333;
  z-index:1003;
}

#navigation .btn.active.amber { background-color: #F7931E; }
#navigation .btn.active.white { background-color: white; color: black; }
#navigation .btn.active.red { background-color: red; }
#navigation .btn.active.mixed { background-image: linear-gradient(120deg, red 0%, red 40%, #F7931E 60%); }
#navigation nav a span.wordy { display: inline; }
#navigation nav a span.abbreviation { display: none; }

#floatingNav {
	text-align: right;
	position: absolute;
	right: 6px;
	top: 35px;
	z-index: 1;
}
.btn.orange {
	background-color: var(--primaryColor);
	border-color: var(--primaryColor);
}
.btn.orange:hover {
	background-color: var(--primaryColorHover);
	border-color: var(--primaryColorHover);
}

.modal-header, .modal-footer { background-color: var(--menuColor); }

#help #otz a.cubes i.fas { color: #bbb; font-size: 300%; display: block; line-height: 0.75; margin: 0; margin-left: auto; margin-right: auto; padding: 5px; }
#help #otz a { display: block; }
#help #otz:hover a { text-decoration: underline; color: #333; }
#help #otz:hover a.cubes { text-decoration: none!important; }
#help #otz:hover a.cubes i { color: #999; }

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#navigation {
	box-sizing: border-box;
	display: block;
	position: fixed;
	top: calc(100% - var(--menuHeight)); /* was 65% */
	bottom: 0%;
	width: 100%;
	border: 2px solid #a1a1a;
	padding: 12px;
	z-index: 1000;
	overflow-y: auto;	
	background-color: var(--menuColor);
	opacity: 1; /* was 0.85 */
	
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
#navigation::-webkit-scrollbar { width: 10px; } /* width */
#navigation::-webkit-scrollbar-track { background: #f1f1f1; } /* Track */
#navigation::-webkit-scrollbar-thumb { background: #888; } /* Handle */
#navigation::-webkit-scrollbar-thumb:hover { background: #555; } /* Handle on hover */

#navigation nav.nav-tabs { position: relative; z-index: 100; }
#navigationTabPages { position: relative; top: -1px; z-index: 99;}

#navigation select.form-control { cursor: pointer; }
#navigation select option:disabled { color: #cccccc; }


.instructions .card {
	overflow-y: auto;
	max-height: 215px;
}

.colorSwatch {
	display: inline-block;
	width: 65px;
	height: 65px;
	color: white;
	text-align: center;
	font-size: 12px;
	padding: 2px;
	margin: 2px;
	border-radius: 4px;
	position: relative;
	font-weight: bold;
	border: 1px solid #ccc;
}
.colorSwatch#White {  }
.colorSwatch:hover {
	color: white;
	border: 2px solid #ccc;
	border-color: black;
	text-decoration: none;
}
.colorSwatch.reverse { color: black; }
.colorSwatch.reverse:hover { color: black; }
.colorSwatch.active:not(.pms), .pmsBoardContainer.active .colorSwatch.pms, .pmsStripeContainer.active .colorSwatch.pms { border: 4px solid #007bff; box-shadow: 0 0 0 0.2rem #007bff99; }
.colorSwatch div {
	position: relative;
	float: left;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	word-spacing: 200px; /* force break/warp after each word */
	line-height: 1.1em;
}
.colorSwatch.pms {
	display: block;
	float: left;
	background: #ff00ff; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(-45deg, #c98d1d, #b3b319, #169c16, #19b3b3, #4c4ce6, #d279d2); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(-45deg, #c98d1d, #b3b319, #169c16, #19b3b3, #4c4ce6, #d279d2); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(-45deg, #c98d1d, #b3b319, #169c16, #19b3b3, #4c4ce6, #d279d2); /* For Firefox 3.6 to 15 */
	background: linear-gradient(135deg, #c98d1d, #b3b319, #169c16, #19b3b3, #4c4ce6, #d279d2); /* Standard syntax (must be last) */
}
.pmsColorInput {
	width: 85px!important;
	float: left;
	padding: initial;
	height: initial;
	line-height: initial;
	margin-top: 16px;
	margin-left: 4px;
	display: inline-block!important;
	visibility: hidden;
}
.pmsBoardContainer.active .pmsColorInput, .pmsStripeContainer.active .pmsColorInput { visibility: visible; }
.pmsBoardContainer, .pmsStripeContainer {
	display: inline-block;
	border-radius: 5px;
}
.pmsBoardContainer, .pmsStripeContainer { background-color: transparent; }
.pmsBoardContainer.active, .pmsStripeContainer.active { background: #eee; background: -webkit-linear-gradient(-45deg, #c98d1d66, #b3b31966, #169c1666, #19b3b366, #4c4ce666, #d279d266); background: -o-linear-gradient(-45deg, #c98d1d66, #b3b31966, #169c1666, #19b3b366, #4c4ce666, #d279d266); background: -moz-linear-gradient(-45deg, #c98d1d66, #b3b31966, #169c1666, #19b3b366, #4c4ce666, #d279d266); background: linear-gradient(135deg, #c98d1d66, #b3b31966, #169c1666, #19b3b366, #4c4ce666, #d279d266); }
.pmsBoardContainer.error.active, .pmsStripeContainer.error.active { background: #ff000099; }
.pmsBoardContainer.success, .pmsStripeContainer.success {  }
.pmsBoardContainer i.fas, .pmsStripeContainer i.fas {
	color: white;
	float: left;
	margin: 5px;
	margin-top: 18px;
	display: none;
}
.pmsColorInput {
	margin-right: 6px;
}
.error.active .pmsColorInput {
	border-color: pink;
	color: red;
	box-shadow: 0 0 0 0.2rem rgba(255,128,128,.5);
	background-color: #ffeeee;
}

.pmsBoardContainer::after, .pmsStripeContainer::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.5em;
	color: white;
	float: left;
	margin-right: 8px;
	margin-top: 18px;
	width: 25px;
}
.pmsBoardContainer.error.active::after, .pmsStripeContainer.error.active::after { content: "\f05e"; text-shadow: -3px 0px red, 0px 3px red, 3px 0px red, 0px -3px red; padding-left: 2px; }
.pmsBoardContainer.success.active::after, .pmsStripeContainer.success.active::after { content: "\f00c"; text-shadow: -3px 0px LimeGreen, 0px 3px LimeGreen, 3px 0px LimeGreen, 0px -3px LimeGreen; }

ul.pagination { /* fix for bootstrap 4 pagination UI elements to allow them to wrap and be responsive */
	display: -webkit-flex; /* Safari */
	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
	display: flex;
	flex-wrap: wrap;
}

#intelligentCaptionSportSelection label.btn { color: var(--primary); }
#intelligentCaptionSportSelection label.btn::before {
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	font-size: 30px;
	padding-right: 3px;
	vertical-align: middle;
	font-weight: 900;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	
	/* for custom icons */
	content: "";
	width: 100%;
	height: 100%;
	-webkit-mask-size: cover;
	mask-size: cover;
	-webkit-mask-size: 45px auto;
	mask-size: 45px auto;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
#intelligentCaptionSportSelection label.soccer::before		{ content: "\f1e3"; }
#intelligentCaptionSportSelection label.football::before	{ content: "\f44e"; }

#intelligentCaptionSportSelection label.lacrosse		{ width: 72px;}
#intelligentCaptionSportSelection label.lacrosse::before	{ background-color: var(--primary);	-webkit-mask-image: url(../fonts/icons/lacrosse.svg);	mask-image: url(../fonts/icons/lacrosse.svg); }

#intelligentCaptionSportSelection label.field-hockey		{ width: 72px;}
#intelligentCaptionSportSelection label.field-hockey::before	{ background-color: var(--primary);	-webkit-mask-image: url(../fonts/icons/field-hockey.svg);	mask-image: url(../fonts/icons/field-hockey.svg); } /* * */

#intelligentCaptionSportSelection label.baseball		{ width: 72px;}
#intelligentCaptionSportSelection label.baseball::before	{ background-color: var(--primary);	-webkit-mask-image: url(../fonts/icons/baseball.svg);	mask-image: url(../fonts/icons/baseball.svg); } /* * */

#intelligentCaptionSportSelection label.softball::before	{ content: "\f433"; }
#intelligentCaptionSportSelection label.track::before		{ content: "\f70c"; }

#intelligentCaptionSportSelection label.cricket			{ width: 72px;}
#intelligentCaptionSportSelection label.cricket::before		{ background-color: var(--primary);	-webkit-mask-image: url(../fonts/icons/cricket.svg);	mask-image: url(../fonts/icons/cricket.svg); } /* * */

#intelligentCaptionSportSelection label.basketball::before	{ content: "\f434"; }

#intelligentCaptionSportSelection label.wrestling		{ width: 72px;}
#intelligentCaptionSportSelection label.wrestling::before	{ background-color: var(--primary);	-webkit-mask-image: url(../fonts/icons/wrestling.svg);	mask-image: url(../fonts/icons/wrestling.svg); } /* * */

#intelligentCaptionSportSelection label.volleyball::before	{ content: "\f45f"; }
#intelligentCaptionSportSelection label.hockey::before		{ content: "\f453"; }
#intelligentCaptionSportSelection label.swimming::before	{ content: "\f5c4"; }

#intelligentCaptionSportSelection label.btn.active {
	background-color: var(--primary);
	color: white;
}
#intelligentCaptionSportSelection label.btn.active.lacrosse::before	{ background-color: white; }
#intelligentCaptionSportSelection label.btn.active.field-hockey::before	{ background-color: white; }
#intelligentCaptionSportSelection label.btn.active.baseball::before	{ background-color: white; }
#intelligentCaptionSportSelection label.btn.active.cricket::before	{ background-color: white; }
#intelligentCaptionSportSelection label.btn.active.wrestling::before	{ background-color: white; }

#signAboveTypeButtonGroup {
	margin-bottom: 1em;
}
#signAboveTypeButtonGroup label:not(.disabled) {
	cursor: pointer;
}

#signLocationButtonGroup .btn-outline-primary:hover:not(.active) {
	color: var(--primary);
	background-color: var(--light);
}

.dropzone {
	font-size: 14px;
	font-weight: bold;
	color: #a7a7a7;
	border-radius: 15px;
	border: 2px solid #a7a7a7!important;
	border-style: dashed!important;
	/*max-width: 150px!important;*/
	max-width: 100%!important;
	width: 100%!important;
	min-height: 75px!important;
	height: 75px!important;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px!important;
	box-sizing: border-box!important;
	margin: 1em;
	background-color:#efefef!important;
}
.dz-preview, .dz-processing, .dz-image-preview, .dz-success, .dz-complete, .dropzone > *{
	box-sizing: border-box!important;
	position: absolute!important;
	min-height: auto!important;
	max-height: 100%;
	height: 100%!important;
	max-width: 100%;
	width: 100%;
	margin: 0!important;
	padding: 0!important;
}
.dz-message, .dz-details, .dz-error-message {
	position: absolute!important;
	top: 50%!important;
	transform: translateY(-50%);
	height: auto!important;
}
.dz-error-message {
	left: auto!important;
	top: 90px!important;
	width: 100%!important;
	max-width: calc(100% - 85px)!important;
	min-width: 65%!important;
}
.dz-error-message:after { left: calc(50% - 6px)!important; }
.dz-error .dz-image { background: #ff000022!important; }
.dz-details { margin: 0!important; padding: 0!important; }
.dz-preview.dz-image-preview { background: none!important; width: 100%!important; height: 100%!important; }
.dropzone .dz-preview .dz-image { width: 100%!important; height: 100%!important; border-radius: 15px!important; }
.dropzone .dz-preview .dz-image img { width: 100%; }
.dropzone .dz-remove {
	width: 80px;
	right: 0;
	position: absolute;
}
.dropzone .dz-message span.size {
	display: block;
	font-weight: normal;
}

ul.pagination .active { background-color: var(--primaryColor); }

/* ### Forms ### */
.modal form label.error { color: red; font-size: 15px!important; line-height: initial; margin-bottom: 0; padding-bottom: 0; margin-top: 0; }
.modal form input.error, div.modal form select.error { background-color: #ffcccc!important; }
.modal div.messages.error { color: red; background-color: #ffcccc; border-top: 2px solid #ff9999; border-bottom: 2px solid #ff9999; text-align: center; font-weight: bold; }

/* Narrow screen styles */
@media only screen and (max-width : 1440px) {
	div#navigation nav a span.wordy { display: none; }
	div#navigation nav a span.abbreviation { display: inline; }
}
@media only screen and (max-width : 1100px) {
	div#navigation nav a { padding: .5rem .5rem; }
}
@media only screen and (max-width : 920px) {
	div#navigation nav a { font-size: 0; padding: .5rem .7rem; }
	div#navigation nav a.active, div#navigation nav a i { font-size: initial; }
	div#navigation nav a span.wordy { display: none; }
	div#navigation nav a span.abbreviation { display: inline; }
}
/* Mobile only styles */
@media only screen and (max-width : 640px) {
	i#resetCamera { top: 40px; left: 5px; }
}
/* Screens that are taller than they are wide */
@media (orientation: portrait), (max-width:640px) {
	#viewport3D { height: calc(35% - 28px); height: calc(35% - var(--topBarHeight)); position: relative; top: 28px; top: var(--topBarHeight); min-height: 100px; }
	#navigation { top: 35%; }
}


@media print {
	html, body { margin: 0; padding: 0; -webkit-print-color-adjust: exact !important; min-height: 7.5in; min-width: 7.5in; max-height: 11in; max-width: 11in; width: 100%; height: 100%; position: relative; margin-left: auto; margin-right: auto;}

	body * { display: none!important; }
	.print, .print * { display: block!important; font-family: Oswald; }
	
	div.print.page { width: 100%; height: 100%; }
	
	div.print.header {
		background: url('../images/print/print-header.svg') no-repeat center top;
		background-size: auto 100%;
		height: 0.75in; /* was 1.75in */
	}
	#print div.print.footer {
		background-size: auto 100%;
		height: 2.0in; /* was 2.5in */
	}
	#print.baseball .footer {
		background: url('../images/print/print-footer-baseball.svg') no-repeat center bottom;
	}
	#print.outdoor .footer {
		background: url('../images/print/print-footer-outdoor.svg') no-repeat center bottom;
	}
	#print.gymnasium .footer {
		background: url('../images/print/print-footer-gymnasium.svg') no-repeat center bottom;
	}
	#print.hockey .footer {
		background: url('../images/print/print-footer-hockey.svg') no-repeat center bottom;
	}
	#print.swimming .footer {
		background: url('../images/print/print-footer-swimming.svg') no-repeat center bottom;
	}
	
	div.print.content {
		background: url('../images/print/print-background.svg') no-repeat right top;
		height: calc(100% - 2.75in); /* calc(100% - 4.25in) */
		box-sizing: border-box;
		overflow: hidden;
	}
	
	div.print.header, div.print.content, div.print.footer {
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	.print-content-image, .print-content-text {
		width: 50%;
		height: 100%;
		box-sizing: border-box;
		float: left;
		padding: 0.25in;
	}
	.print-content-image { padding-right: 0.1in; }
	.print-content-text { padding-left: 0.1in; }
	
	.print-content-image img {
		width: auto;
		height: 100%;
		max-width: 100%;
		margin: 0 auto;
		border: 1px solid black;
		box-sizing: border-box;
		object-fit: cover; /* This will not squish the width altering the aspect ratio for prints, but it may crop the left and right sides of the image. Alternatively removng this line as well as removing the height:100% line will ensure the image always fits but will shrink the vertical height it occupies when necessary while mantaining appropraite aspect ratio */
	}
	
	div.print.content h3 {
		text-align: center;
		font-size: .2in;
		text-transform: uppercase;
		margin-bottom: .15in;
		line-height: .1in;
	}
	
	#printText {
		padding-bottom: 0.25in;
		box-sizing: border-box;
		height: 100%;
		display: flex!important;
		flex-direction: column;
		flex-wrap: wrap;
		align-items:flex-start;
		align-content:flex-start;
	}
	
	#printText .item {
		display:initial!important;
		box-sizing: border-box;
		align-self:stretch;
		width: 50%;
		padding-left: 5%;
	}
	
	#printText span { display:initial!important; }
	div#printText span.label { color: var(--primaryColor); }
	div#printText span.value { color: black; }
	
	.sign-box, .truss-box {
		box-sizing: border-box;
		/*background-color: #ffffff66;
		border:1px solid var(--primaryColor);
		border-radius: 4px;*/
		padding: .025in;
		margin: .05in .2in;
		padding-bottom: .07in;
		width: 30%!important;
		padding-left: 2%!important;
	}
	
	/*@media (orientation: landscape) and (min-width:600px) {
		#printText div {
			
		}
	}*/
	/*@media (orientation: portrait), (max-width:601px) {*/
		.print-content-image {
			width: 100%;
			height: 4in; /* was 2.5in */
			padding: 0.25in;
			padding-bottom: 0;
		}
		.print-content-text {
			width: 100%;
			height: calc(100% - 2.5in);
			padding: 0.25in;
			padding-top: 0;
			padding-bottom: 0.5in;
		}
		#printText .item {
			width: 33.5%;
			padding-left: 5%;
		}
		div.print.content h3 {
		    line-height: 0.25in;
		}
	/*}*/
}