/* Common (shared between pages: register, upcoming, live, archive, etc.) */

	/* Generic classes */
		.ellipsis {
			width: 18px;
			position: relative;
			top: 2px;
			opacity: 0.5;
		}

		.iconBadge {
			display: none;
			position: absolute;
			top: 0px; right: 0px;
		}

	/* Modals */
		.modal.fade .modal-content {
			transform: scale(0.7);
			transition: all 0.2s;
		}

		.modal.fade.in .modal-content, .modal.fade.show .modal-content {
			transform: scale(1);
		}

		#setup.modal-open #mainWrapper {
			filter: blur(1px);
			transition: all 0.2s ease-in-out;
		}

		.modal .modal-header.alert {
			margin-bottom: 0;
		}

		/* Warning Modal */
			#warningModal #warningsList {
				list-style: disc;
			}

	/* Loading */
		#loading {
			position: fixed;
			top: 0; right: 0; bottom: 0; left: 0;
			z-index: 9999;
			background: #FFF url(../../images/icons/loading.svg) no-repeat center;
			background-size: 100px;
		}

	/* Wrapper & Constrainment  */
		#mainWrapper {
			width: 100%; min-width: 320px; /*max-width: 1920px;*/
			min-height: 100%;
			position: relative;
			overflow: hidden;
			background: #F6F6F6;
			background: -webkit-linear-gradient(top, #F6F6F6 0%,#EEEEEE 100%) fixed;
			background: -moz-linear-gradient(top, #F6F6F6 0%, #EEEEEE 100%) fixed;
			background: linear-gradient(to bottom, #F6F6F6 0%,#EEEEEE 100%) fixed;
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F6F6F6', endColorstr='#EEEEEE',GradientType=0);
		}

		@media (min-width: 1921px) {
			#mainWrapper {
				border-left: 1px solid #CCC;
				border-right: 1px solid #CCC;
			}
		}

		.constrainment {
			max-width: 100%;
			position: relative;
			margin-left: auto;
			margin-right: auto;
		}

	/* Header */
		#header { /* Note: Do not set width. Doing so will interfere with the negative margins needed for this div. */
			min-height: 100px; /* Using min-height because images may not strictly be 100px in height, and I don't want to warp/down-scale the image. */
			position: relative;
			background-repeat: no-repeat;
			margin-left: -15px; margin-right: -15px;
			padding-left: 12px; padding-right: 12px;
		}

		@media (min-width: 768px) {
			#header {
				padding-left: 15px;
				padding-right: 15px;
			}
		}

		#header.centered { /* JavaScript adds/removes this class based on the image's width. So, the image will only be centered if there's enough room for it. */
			background-position-x: center;
		}

		#accountImage {
			max-width: 320px;
			height: 100px;
			display: block;
		}

		@media (min-width: 768px) {
			#accountImage {
				margin-left: 30px;
				margin-right: 30px;
			}
		}

	/* Navigation */
		/* Notes:
			- This section's CSS is complex. It depends on mobile-first bootstrap patterns, scoped CSS via custom attributes and javascript, and floats. See JS function 'handleMenu'.
			- The following CSS mostly applies to just the "frame" view, but it's also needed for the registration view.
		*/

		/* Base styles */
			#navigation {
				position: relative;
				z-index: 1; /* Needed because .light may overlay this. */
				background-color: #FFF;
				border-top: 1px solid #CCC;
				border-bottom: 1px solid #CCC;
				margin-left: -15px; margin-right: -15px;
				padding-left: 12px; padding-right: 12px;
			}

			@media (min-width: 768px) {
				#navigation {
					padding-left: 15px;
					padding-right: 15px;
				}
			}

			#navigationConstrainment {
				line-height: 0; /* Removing white-space. Another option here would be display: flex; but it's more prone to cross-browser issues */
			}

			#menusWrapper {
				width: 100%;
				position: relative;
				display: inline-block;
				line-height: 1.42857143; /* Restoring line-height to bootstrap spec */
			}

			#menusWrapper form {
				display: block;
			}

			#navigation ul {
				margin-bottom: 0;
				padding-left: 0;
			}

			#navigation li {
				float: left;
			}

			#navigation a, #navigation button {
				display: inline-block;
				position: relative;
				color: #333;
				font-size: 17px;
				padding: 8px 12px;
			}

			#navigation a:hover, #navigation button:hover {
				cursor: pointer;
				text-decoration: none;
			}

			#navigation a:focus {
				background-color: rgba(0,0,0,0.05);
			}

			#mainMenu, #sideMenu {
				display: inline-block;
				float: left;
			}

			#sideMenu {
				position: absolute;
				top: 0; right: 0;
			}

			#mainMenuList, #settingsList {
				width: 100%;
				display: none;
				float: left;
			}

			#mainMenuList li, #mainMenuList li a, #mainMenuList li button, #otherSubMenu li, #otherSubMenu li a, #otherSubMenu li button {
				width: 100%;
			}

			#mainMenuList a, #mainMenuList button, #otherSubMenu a, #otherSubMenu button {
				opacity: 0;
				transition: opacity .2s ease-in-out;
			}

		/* Settings */
			#settingsList .settingLabel {
				display: inline;
				margin: 0 18px 0 0;
			}

			#settingsList .settingToggle {
				float: right;
				pointer-events: none; /* Prevents the on click event from firing more than once (on child elements). */
				margin-top: 3px;
			}

			#fullScreenSwitch .fa-expand {
				top: 2px;
			}

			#lightsSwitch .fa-lightbulb {
				margin-left: 3px;
			}

		/* Toggles */
			.onOffToggle {
				width: 32px;
				position: relative;
			}

			.onOffToggle-checkbox {
				display: none;
			}

			.onOffToggle-label {
				height: 18px;
				line-height: 18px;
				display: block;
				overflow: hidden;
				background-color: #666;
				border: 1px solid #CCC;
				border-radius: 22px;
				transition: background-color 0.2s ease-in-out;
				cursor: pointer;
				margin: 0;
				padding: 0;
			}

			.onOffToggle-label:before {
				content: "";
				width: 22px;
				display: block;
				position: absolute;
				top: 0; right: 18px; bottom: 0;
				background-color: #FFF;
				border: 1px solid #CCC;
				border-radius: 22px;
				transition: all 0.2s ease-in-out 0s;
				margin: -2px;
			}

			.onOffToggle-checkbox:checked + .onOffToggle-label:before {
				right: 0;
			}

		/* Return button */
			#navigation #returnButton {
				width: 300px;
				display: none;
				clear: both;
				font-size: 13px;
			}

		/* State-dependent styles */
			/* Hamburger */
				#navigation[mode="hamburger"] #mainMenu {
					width: 100%;
				}

				#navigation[mode="hamburger"] #mainMenuList[expansion="expanded"] {
					display: block;
				}

				#navigation[mode="hamburger"] #mainMenuList[expansion="expanded"] a {
					opacity: 1;
				}

			/* Inline (auto-collapsed by JS) */
				#navigation.rendering { /* See handleNavItems() in eventsProcessor */
					width: 2500px;
				}

				#navigation.rendering #menusWrapper {
					visibility: hidden;
				}

				#navigation[mode="inline"] #mainMenuExpansionButton, #navigation[mode="inline"] #returnButton {
					display: none;
				}

				#navigation[mode="inline"] #mainMenuList {
					display: inline-block;
				}

				#navigation[mode="inline"] #mainMenuList li, #navigation[mode="inline"] #mainMenuList a {
					width: auto;
				}

				/* Main menu hover animations */
				#navigation[mode="inline"] #mainMenuList a {
					opacity: 1;
					vertical-align: middle;
					transform: perspective(1px) translateZ(0);
					transition-property: color;
					transition-duration: 0.2s;
				}

				#navigation[mode="inline"] #mainMenuList a::before {
					width: 0;
					height: 2px;
					content: "";
					position: absolute;
					right: 50%; bottom: 0; left: 50%;
					z-index: -1;
					transition-property: left, right;
					transition-duration: 0.2s;
					transition-timing-function: ease-in-out;
				}

				#navigation[mode="inline"] #mainMenuList a:hover::before, #navigation[mode="inline"] #mainMenuList a:focus::before, #navigation[mode="inline"] #mainMenuList a:active::before, #navigation[mode="inline"] #mainMenuList li.active a::before {
					width: auto;
					right: 0; left: 0;
				}

			/* Other sub-menus */
				#settingsList[expansion="expanded"] {
					display: inline-block;
				}

				#settingsList[expansion="expanded"] a {
					opacity: 1;
				}

				#navigation[mode="inline"] #otherSubMenu {
					width: auto;
					position: absolute;
					top: 100%; right: 0;
					box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.33);
					z-index: 1;
					margin-top: 1px; /* Correcting for 1px border */
				}

				#navigation[mode="inline"] #otherSubMenu li {
					float: none; /* Helps with width: auto; above */
				}

				#navigation[mode="inline"] #settingsList[expansion="expanded"] {
					background-color: #FFF;
					border: 1px solid #CCC;
					border-top: none;
				}

	/* Content */
		#content {
			position: relative;
			margin-bottom: 116px; /* Making room for footer (height of footer + 6px). */
			padding-left: 12px; padding-right: 12px;
			margin-left: -15px; margin-right: -15px;
		}

		@media (min-width: 992px) {
			#content {
				margin-bottom: 86px; /* Making room for footer (height of footer + 6px). */
				padding-left: 15px; padding-right: 15px;
			}
		}

		#content a {
			cursor: pointer;
		}

		#content a:focus {
			text-decoration: underline;
		}

		#contentCanvas {
			position: relative;
			background-color: #FFF;
			border: 1px solid #CCC;
			border-top: none;
			padding: 6px 9px 28px 9px;
		}

		#setup:not([activeTabPaneID='presentationContent']) #contentCanvas {
			min-height: 360px; /* Fallback */
			min-height: 60vh;
		}

		#splashContentWrapper {
			overflow-x: hidden;
		}

		#splashContentWrapper, #registrationForms, #contentCanvas .userDefinedContent, #supportContent {
			min-height: 360px;
		}

		@media (min-width: 768px) {
			#setup:not([activeTabPaneID='presentationContent']) #contentCanvas {
				min-height: 540px; /* Fallback */
				min-height: 70vh;
			}

			#splashContentWrapper, #registrationForms, #contentCanvas .userDefinedContent, #supportContent {
				min-height: 540px;
			}
		}

		/* Related to splash and registration pages. */
			#content .eventTitle {
				font-size: 24px;
			}

			#content .eventDate {
				display: inline-block;
			}

			.eventDate .conversionButton {
				width: 25px;
				height: 25px;
				position: relative;
				color: #666;
				margin-left: 0.33rem;
			}

			#content .eventSubHeading .eventDate .conversionButton {
				display: none;
			}

			#content .eventDate.conversionHighlight {
				background-color: transparent;
				animation: pulseBgColor 0.67s;
			}

			@keyframes pulseBgColor {
				0%   {background-color: transparent;}
				50%  {background-color: #CCC;}
				100% {background-color: transparent;}
			}

			.conversionButton > .fas {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
			}

			.eventSubHeading {
				color: #666;
				margin-bottom: 24px;
			}

		/* check boxes and radio buttons (shared by Registration and Live Feedback - Moderator View) */
			.checkboxWrapper, .radioWrapper {
				min-height: 36px;
				height: auto;
				position: relative;
				display: inline-block;
				background-color: #FFF;
				border: 1px solid #CCC;
				padding: 6px 12px;
			}

			.checkboxWrapper .checkbox-inline, .radioWrapper .radio-inline {
				color: #333;
				vertical-align: initial;
			}

			.has-success .checkboxWrapper, .has-success .radioWrapper {
				border-color: #3C763D;
			}

			.has-error .checkboxWrapper, .has-error .radioWrapper {
				border-color: #A94442;
			}

		/* Tab content */
			#contentCanvas > .tab-pane {
				width: 100%;
				position: relative;
			}

			#contentCanvas > .tab-pane.active {
				display: inline-block;
			}

		/* Components */
			.component {
				position: relative;
			}

			/* System test table */
				#tests  {
					margin-bottom: 6px;
				}

				#tests .testsHeading {
					text-align: center;
					margin: 1rem auto;
				}

				#tests .ellipsis {
					width: 1rem;
					position: relative;
					top: 0.2rem;
					margin-right: 0.33rem;
				}

				#testsTable {
					background-color: #FFF;
					margin-bottom: 0;
				}

				#testsTable tr.testFail {
					color: #A94442;
				}

				#testsTable td {
					white-space: normal;
				}

				#testsTable .testStatus {
					width: 62px;
					text-align: center;
				}

				#testsTable .testRecommendation {
					display: none;
					width: 50%;
				}

				@media (min-width: 768px) {
					#testsTable .testRecommendation {
						display: table-cell;
					}
				}

				#testsTable .statusIcon {
					width: 28px;
				}

				#testsTable .resultIcon {
					display: none;
					width: 28px;
					margin-right: 0.33rem;
				}

				@media (min-width: 768px) {
					#testsTable .resultIcon {
						display: inline-block;
					}
				}

		/* Bottom Text (User Guide | Copyright) */
			#bottomText {
				position: absolute;
				bottom: 0; right: 0;
				font-size: 13px;
				opacity: 0.67;
				margin: 6px 12px;
			}

	/* Footer */
		#footer {
			height: 110px;
			display: inline-block;
			position: absolute;
			right: 0; bottom: 0; left: 0;
			background-color: #FFF;
			border-top: 1px solid #CCC;
			padding-left: 12px;
			padding-right: 12px;
		}

		@media (min-width: 992px) {
			#footer {
				height: 80px;
				padding-left: 1rem;
				padding-right: 1rem;
			}
		}

		#footerConstrainment {
			overflow: visible !important;
		}

		#footerCanvas {
			width: 100%; min-height: 50px;
			display: inline-block;
			position: relative;
			font-size: 0;
			margin-top: 6px;
			margin-bottom: 6px;
		}

		#footerWrapperLeft, #footerWrapperRight {
			width: 100%;
			display: inline-block;
			text-align: center;
			vertical-align: top;
			margin-top: 3px;
			margin-bottom: 3px;
		}

		#footerWrapperRight {
			white-space: nowrap;
		}

		@media (min-width: 992px) {
			#footerWrapperLeft {
				width: 60%;
			}

			#footerWrapperRight {
				width: 40%;
			}
		}

		#footerSupportButtonWrapper, #footerLightsButtonWrapper, #footerMediaryWrapper {
			display: none;
		}

		#footerCeceButtonWrapper {
			display: inline-block;
		}

		#languageWrapper, #footerSupportButtonWrapper, #footerLightsButtonWrapper {
			margin-right: 0.33rem;
		}

		#footerMediaryWrapper {
			margin-left: 6px;
			margin-right: 6px;
		}

		@media (min-width: 360px) {
			#footerMediaryWrapper {
				display: inline-block;
			}
		}

		@media (min-width: 992px) {
			#footerSupportButtonWrapper, #footerLightsButtonWrapper {
				display: inline-block;
			}

			#footerMediaryWrapper.CeceEnabled {
				position: relative;
				left: 1rem;
			}
		}

		#mediaryLink {
			display: inline-block;
		}

		#mediaryImage {
			height: 36px;
		}

		#footerCeceButtonWrapper {
			position: relative;
		}

		@media (min-width: 992px) {
			#footerCeceButtonWrapper {
				float: right;
				position: relative;
				top: -6px;
			}
		}


	/* Other */
		/* Beta Elements */
			.betaElement.hiddenBetaElement {
				display: none !important;
			}

		/* Enabled attribute */
			[enabled="false"] {
				display: none !important;
			}

		/* User selection */
			#header, #navigation, #footer {
				-webkit-user-select: none;
				-moz-user-select: none;
				user-select: none;
			}