:root {
	--primary-900: #030209;
	--primary-800: #0f0827;
	--primary-700: #1a0f44;
	--primary-600: #1e114e;
	--primary-500: #261662;
	--primary-400: #514481;
	--primary-300: #d3d0df;
	--primary-200: #f1f0f5;
	--primary-100: #fafafb;

	--neutral-900: #0C0C0B;
	--neutral-800: #181916;
	--neutral-700: #3E3F39;
	--neutral-600: #A2A595;
	--neutral-500: #B0B2A9;
	--neutral-400: #D6D8D0;
	--neutral-300: #F0F2EA;
	--neutral-200: #FBFCF7;
	--neutral-100: #FEFFFC;

	--green-light: #1b772e;
	--green-dark: #166226;

	--red-light: #a03e24;

	--blue-100: #e5eefc;
	--blue-500: #0057e7;
	--blue-900: #00112e;


	--alert-green-100: #e8f2ed;
	--alert-green-500: #1E824C;
	--alert-green-900: #030d07;


	--alert-red-100: #fae5e7;	
	--alert-red-500: #cf000f;
	--alert-red-900: #140001;

	--alert-yellow-100: #fbf7e7;
	--alert-yellow-500: #deb515;
	--alert-yellow-900: #161202;

	--alert-orange-100: #fde7c5;
	--alert-orange-500: #FBB040;
	--alert-orange-900: #4b3413;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	font-family: "Open Sans", sans-serif;
	font-weight: 300;
	background-color: var(--neutral-200);
	color: var(--neutral-800);
	font-size: 1em;
	letter-spacing: 0.03em;
}

input, textarea {
	letter-spacing: 0.03em;
}

ul {
	list-style: none;
}

a:link, a:visited {
	text-decoration: none;
	color: var(--neutral-800);
}

video {
    display: block;
    margin: 50px auto 200px auto;
}

/***
	Utility Classes
***/

.container {
	position: relative;
	max-width: 1300px;
	margin: 0 auto;
}

.heading-font {
	font-family: "Ubuntu", sans-serif;
	font-weight: 300;
}

.main {
	background-color: var(--neutral-100);
}

.sub {
	background-color: var(--neutral-300);
}

.hours-day-list {
	display: flex;
}

.hours-day-list-item {
	padding: 0 15px 0 0;
}

.text-center {
	text-align: center;
}

/***
	Header Classes
***/

.header {
	color: var(--primary-800);
	background-color: var(--primary-200);
}

.header a:link, .header a:visited {
	color: var(--primary-800);
}

.header-logo-wrapper {
	display: inline-block;
	/*text-align: center;*/
}

.header-logo-link {
	display: block;
	width: 100%;
	height: 100%;
}

.header-logo {
	display: inline-block;
	width: 100px;
	margin: 0;
	padding: 10px;
}

.header-h1 {
	position: absolute;
	top: 0;
	left: -9999px;
}

.header-h2 {
	display: inline-block;
	position: relative;
	top: -33px;
	font-size: 1.8em;
	font-weight: 300;
}

.header-nav-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 10px;
	position: absolute;
	top: 50px;
	right: 0;
	font-size: 1.1em;
	font-weight: 300;
}

.header-nav-list-item {
	display: inline-block;
	margin: 0 0 0 40px;
}

.header-nav-link {
	display: block;
	padding: 10px 20px;
	white-space: nowrap;
}


/***
	Main
***/

.main, .sub {
	padding: 30px 0;
}

/*.main a:link, .main a:visited {
	color: var(--neutral-800);
}*/


/***
	SUPPORT HOME PAGE
***/

.support-home-main-heading-wrapper {
	display: block;
	width: 100%;
	text-align: center;
}

.support-home-main-heading {
	display: inline-block;
	padding: 15px 15px 5px 15px;
	font-size: 1.6em;
	letter-spacing: 0.05em;
	border-bottom: 3px solid var(--primary-500);
}

.support-home-action-list {
	display: flex;
	flex-wrap: wrap;
	width: 70%;
	margin: 40px auto;
	justify-content: space-between;
}

.support-home-action-list-item {
	display: inline-block;
	margin: 0 15px 15px 0;
	padding: 10px 20px;
}

.support-home-action-link:link {
	width: 100%;
	height: 100%;
	padding: 10px 20px;
	color: var(--primary-800);
	border: 2px solid var(--primary-500);
	border-radius: 3px;
	font-size: 1.1em;
	transition: 0.2s;
	white-space: nowrap;
}

.support-home-action-link:hover {
	background-color: var(--primary-500);
	color: var(--primary-200);
	border: 2px solid var(--primary-500);
}

.support-smartsbroadcast-link-wrapper {
	display: block;
	width: 100%;
	margin: 0 0 5px 0;
	text-align: center;
}

a:link.support-smartsbroadcast-link, a:visited.support-smartsbroadcast-link {
	display: inline-block;
	margin: 0 auto;
	padding: 3px;
	color: var(--blue-500);
	text-align: center;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--blue-500);
	font-weight: 400;
	font-size: 1.1em;
}

.support-home-about-heading-wrapper {
	display: block;
	width: 100%;
	text-align: center;
}

.support-home-about-heading {
	display: inline-block;
	padding: 10px 10px 3px 10px;
	border-bottom: 2px solid var(--primary-500);
	font-size: 1.4em;
}

.support-home-about-para {
	display: block;
	width: 60%;
	margin: 10px auto 10px auto;
	line-height: 1.8em;
}

.support-home-about-sub-heading {
	display: inline-block;
	padding: 5px 15px 2px 0;
	border-bottom: 2px solid var(--neutral-500);
	font-size: 1.2em;
}

.support-home-about-info-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 80%;
	margin: 40px auto;
}

.support-home-about-info-list-item {
	margin: 0 10px;
}

.support-home-about-info-contact-list-item,
.support-home-about-info-hours-list-item {
	margin: 5px 0 0 0;
}

.support-home-about-info-contact-list-item a:hover {
	color: var(--neutral-900);
	text-decoration: underline;
}

.support-home-about-info-hours-list {
	margin: 0 0 25px 0;
}

/***
	Report a Problem Page / Contact Form
***/

.form-field-error-message {
	display: inline-block;
	margin: 0 0 0 5px;
	padding: 0 5px;
	color: var(--alert-orange-900);
	background-color: var(--alert-orange-100);
	vertical-align: middle;
	font-size: 0.8em;
	border: 1px solid var(--alert-orange-500);
	border-radius: 2px;
}

.visible {
	visibility: visible;
}

.hidden {
	visibility: hidden;
}

.contact-form {
	max-width: 800px;
	margin: 0 auto;
	padding: 15px;
	margin-bottom: 50px;
	background-color: var(--neutral-100);
	box-shadow: 5px 5px 50px -5px rgba(0,0,0,0.5);
}

.ui-widget {
	font-family: "Open Sans", sans-serif;
	font-size: 1.1em;
}

.contact-form-heading {
	display: block;
	width: 100%;
	margin: 10px 0 20px 0;
	text-align: center;
	font-size: 1.5em;
}

.contact-form-intro {
	padding: 0 0 20px 0;
}

.text-inputs {
	margin: 0 0 10px 0;
}

.label-input {
	/*margin: 0 0 15px 0;*/
}

.text-input-label {
	display: block;
	/*margin: 0 0 5px 0;*/
	padding: 10px 0 2px 5px;
	font-size: 1.1em;
}

.text-input {
	display: block;
	width: 70%;
	padding: 5px;
	font-size: 1.1em;
	border: 2px solid var(--neutral-300);
	border-radius: 3px;
	background-color: var(--neutral-300);
	font-family: "Open Sans", sans-serif;
	color: var(--neutral-800);
}

input:-webkit-autofill,
input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 30px var(--neutral-300) inset !important;
}

input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px var(--neutral-100) inset !important;	
}


.text-input:focus {
	/* these outline rules eliminate the user agent stylesheet blue border on focus */
	outline: none;
	outline-offset: 0;
	outline-width: 0;

	background-color: var(--neutral-100);
}

.fieldset-section {
	margin: 0 0 30px 0;
}

.form-fieldset {
	border: none;
	/*margin: 0 0 15px 0;*/
}

.form-fieldset-legend {
	display: block;
	margin: 0 0 5px 0;
	padding: 3px;
	font-size: 1.1em;
}

.emergency-contact-notification {
	display: none;
	width: 80%;
	margin: 10px auto 10px 0;
	padding: 5px 15px;
	line-height: 1.5em;
	background-color: var(--alert-red-500);
	color: var(--alert-red-100);
	font-size: 1.1em;
	border-radius: 3px;
}

.emergency-contact-notification a:link,
.emergency-contact-notification a:visited {
	color: var(--alert-red-100);
	text-decoration: none;
}

.emergency-contact-notification a:hover {
	text-decoration: underline;
}

/* TEMP span for alternate product selectmenu*/

.alt-selectmenu-heading-span {
	color: var(--alert-red-500);
}

.form-gray {
	color: var(--neutral-400);
	color: red;
}

.ui-button,
.ui-button:active,
.ui-button:focus,
.ui-button:hover {
	margin: 0 10px 0 0;
	background-color: var(--neutral-100);
	border: 2px solid var(--neutral-300);
	color: var(--neutral-800);
}

.ui-state-active,
.ui-state-active:active,
.ui-button.ui-state-active:hover {
	background: var(--primary-500);
	border: 2px solid var(--primary-500);
	color: var(--primary-200);
}

.urgency-triangle {
	font-size: 1.3em;
	padding: 0 0 0 0;
}

.low-urgency-triangle {
	color: var(--alert-green-500);
}

.moderate-urgency-triangle {
	color: var(--alert-yellow-500);
}

.high-urgency-triangle {
	color: var(--alert-red-500);
}

.ui-button#low-urgency-label {
	background-color: var(--alert-green-100);
	color: var(--alert-green-900);
	border: 2px solid var(--alert-green-500);
}

.ui-state-active#low-urgency-label,
.ui-state-active .low-urgency-triangle {
	background-color: var(--alert-green-500);
	color: var(--alert-green-100);
}


.ui-button#moderate-urgency-label {
	background-color: var(--alert-yellow-100);
	color: var(--alert-yellow-900);
	border: 2px solid var(--alert-yellow-500);
}

.ui-state-active#moderate-urgency-label,
.ui-state-active .moderate-urgency-triangle {
	background-color: var(--alert-yellow-500);
	color: var(--alert-yellow-100);
}

.ui-button#high-urgency-label {
	background-color: var(--alert-red-100);
	color: var(--alert-red-900);
	border: 2px solid var(--alert-red-500);
}

.ui-state-active#high-urgency-label,
.ui-state-active .high-urgency-triangle {
	background-color: var(--alert-red-500);
	color: var(--alert-red-100);
}

.textarea-label {
	display: block;
	width: 100%;
	font-size: 1.1em;
	margin: 0 0 8px 0;
}

.textarea {
	width: 100%;
	height: 250px;
	margin: 0;
	padding: 5px;
	background-color: var(--neutral-300);
	border: 2px solid var(--neutral-300);
	border-radius: 3px;
	font-family: "Open Sans", sans-serif;
	font-size: 1.1em;
}

.textarea:focus {
	/* these outline rules eliminate the user agent stylesheet blue border on focus */
	outline: none;
	outline-offset: 0;
	outline-width: 0;

	background-color: var(--neutral-100);
}

.text-field-error {
	border: 2px solid var(--alert-orange-500);
	box-shadow: 0 0 5px var(--alert-orange-500);
}

.form-submit {
	padding: 15px;
	color: var(--primary-200);
	background-color: var(--primary-500);
	font-family: "Ubuntu", sans-serif;
	font-size: 1.3em;
	border: none;
	border-bottom: 2px solid var(--primary-300);
	border-right: 2px solid var(--primary-300);
	border-radius: 3px;
	cursor: pointer;
}

.form-message {
	display: block;
	position: relative;
	height: 60px;
	margin: 5px 0 5px 5px;
}

.spinner {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 0;
	right: 0;
	bottom: 40px;
	left: 0;
	margin: auto;
}

.form-spinner {
	display: none;
	margin: 0 auto 0 50px;
	width: 30px;
}

.sk-chasing-dots {
	margin: 0px auto;
	width: 40px;
	height: 40px;
	position: relative;
	text-align: center;
	-webkit-animation: sk-chasingDotsRotate 2s infinite linear;
	animation: sk-chasingDotsRotate 2s infinite linear; 
}

.sk-chasing-dots .sk-child {
	width: 60%;
	height: 60%;
	display: inline-block;
	position: absolute;
	top: 0;
	background-color: var(--primary-300);
	border-radius: 100%;
	-webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
	animation: sk-chasingDotsBounce 2s infinite ease-in-out; 
}

.sk-chasing-dots .sk-dot2 {
	top: auto;
	bottom: 0;
	-webkit-animation-delay: -1s;
	animation-delay: -1s; }
	@-webkit-keyframes sk-chasingDotsRotate {
	100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg); } }
	@keyframes sk-chasingDotsRotate {
	100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg); } }
	@-webkit-keyframes sk-chasingDotsBounce {
	0%, 100% {
	-webkit-transform: scale(0);
	transform: scale(0); }
	50% {
	-webkit-transform: scale(1);
	transform: scale(1); } }
	@keyframes sk-chasingDotsBounce {
	0%, 100% {
	-webkit-transform: scale(0);
	transform: scale(0); }
	50% {
	-webkit-transform: scale(1);
	transform: scale(1); }
}

.error-message {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 3px 10px;
	color: var(--alert-red-500);
	background-color: var(--alert-red-100);
	border: 1px solid var(--alert-red-500);
	border-radius: 2px;
}

.error-message a:link,
.error-message a:visited {
	color: var(--alert-red-500);
}

.result-message {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 3px 10px;
	color: var(--alert-green-500);
	background-color: var(--alert-green-100);
	border: 1px solid var(--alert-green-500);
	border-radius: 2px;
}

/***
	Documentation Page
***/

.docs-main-heading-wrapper {
	display: block;
	width: 100%;
	text-align: center;
}

.docs-main-heading {
	display: inline-block;
	padding: 10px 10px 2px 10px;
	border-bottom: solid 3px var(--primary-500);
}

.docs-nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 20px auto 80px auto;
	width: 60%;
}

.docs-nav-list-item {
	margin: 0 30px;
}

a:link.docs-nav-link {
	padding: 5px 10px 2px 10px;
	font-family: "Ubuntu", sans-serif;
	font-size: 1.2em;
}

a:link.docs-nav-link:hover {
	border-bottom: 2px solid var(--primary-300);
}

.docs-group-heading {
	display: block;
	width: 100%;
	padding: 4px 0 5px 3px;
	font-size: 1.2em;
	border-bottom: 3px solid var(--primary-500);
	border-top: 1px solid var(--primary-300);
	letter-spacing: 0.05em;
}

.docs-group-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 50px 0;
}

.docs-group-list-item {
	position: relative;
	width: 210px;
	height: 270px;
	margin: 20px 20px 30px 0;
	padding: 15px;
	background-color: var(--neutral-400);
	/*border: 2px solid var(--neutral-300);*/
	border-radius: 10px;
	box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.5);
	transition: 0.2s;
}

.docs-group-list-item:hover {
	background-color: var(--primary-200);
	background-color: var(--primary-500);
}

.docs-group-list-item:hover > .docs-group-icon {
	color: var(--primary-500);
	color: var(--primary-200);
}

.docs-group-icon {
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 15em;
	color: var(--neutral-100);
}

.docs-group-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 110px 15px 15px 15px;
	text-align: center;
	vertical-align: middle;
	font-size: 1.1em;
	z-index: 100;
}

.docs-group-link {
	display: block;
	width: 100%;
	height: 100%;
}

.legacy-files-list-heading {
	display: inline-block;
	font-size: 1.2em;
	border-bottom: 3px solid var(--primary-300);
}

.legacy-files-list {
	margin: 0 0 15px 0;
	padding: 0 15px;
}

.legacy-files-list-item {
	padding: 2px 0;
}

a.legacy-files-link:link,
a.legacy-files-link:visited {
	color: var(--blue-500);
	text-decoration: underline;
}

/***
	IP address
***/

#ip-address-main {
	height: 90vh;
	padding: 100px 150px;
}

.ip-address-heading {
	font-size: 2.4em;
	font-family: "Ubuntu", sans-serif;
	color: var(--neutral-800);
}

.ip-address-sub-heading {
	font-size: 1.5em;
	font-family: "Open Sans", sans-serif;
	color: var(--neutral-700);
}


/***
	Footer
***/

.footer {
	padding: 10px 0;
	background-color: var(--primary-500);
	text-align: center;
	color: var(--primary-200);
}

@media (max-width: 1300px) {
	.docs-group-heading {
		width: 97%;
		margin: 0 auto;
	}

	.docs-group-list {
		width: 97%;
		margin: 0 auto;
	}
}

@media (max-width: 1200px) {
	.support-home-action-list {
		width: 100%;
		flex-direction: column;
		margin: 20px 0 10px 0;
		padding: 0;
		text-align: center;
	}

	.support-home-action-list-item {
		display: inline-block;
		margin: 0 0 15px 0;
	}

	.docs-nav-list {
		width: 100%;
	}
}

@media (max-width: 900px) {
	.header-logo-wrapper {
		display: block;
		text-align: center;
	}

	.header-nav-list {
		justify-content: space-around;
		position: relative;
		top: initial;
		right: inherit;
		width: 100%;
	}
}

@media (max-width: 700px) {
	.header-nav-list {
		flex-direction: column;
	}

	.header-nav-list-item {
		margin: 0 0 0 150px
	}

	.support-home-about-para {
		margin: 10px auto 30px auto;
	}

	.support-home-about-info-list {
		flex-direction: column;
		justify-content: space-between;
		margin: 0 auto;
	}

	.support-home-about-info-list-item {
		margin: 0 0 30px 0;
	}

	.ui-button,
	.ui-button:active,
	.ui-button:focus,
	.ui-button:hover {
		margin: 0 10px 10px 0;
	}

	.docs-nav-list {
		flex-direction: column;
		width: initial;
		margin: 10px 0 30px 150px;
	}

	.docs-nav-list-item {
		margin: 0 0 15px 0;
	}
}

@media (max-width: 600px) {
	#ip-address-main {
		padding: 70px 25px;
	}
}

@media (max-width: 450px) {
	.header-nav-list {
		margin: 0;
	}

	.header-nav-list-item {
		margin: 0 0 0 100px;
	}

	.support-home-about-para {
		width: 80%;
	}

	.text-input {
		width: 100%;
	}

	.docs-nav-list {	
		margin: 10px 0 30px 75px;
	}

	.form-message {
		height: 80px;
	}

	.docs-group-list {
		justify-content: space-around;
		text-align: center;
	}

	.docs-group-list-item {
		margin: 15px auto 20px auto;
	}

}

@media (max-width: 350px) {
	.header-nav-list-item {
		margin: 0 0 0 60px;
	}

	.support-home-action-link {
		max-width: 95%
		padding: 10px;
		white-space: initial;
	}

	.support-home-action-list-item {
		max-width: 95%;
		padding: 10px;
	}

	.docs-nav-list {	
		margin: 10px 0 30px 50px;
	}
}