arial* {
	outline: none;
}

#testtt {
	width: 100%;
	color: green;
}

.crVar {
	font-size: 9px;
	padding-left: 20px;
	//display:inline-block;
}

.assetID {
	clear: both;
	font-size: 9px;
	padding-left: 20px;
}

hr {
	clear: both;
	margin: 0;
	display: block;
}

.dataContainer {
	float: left;
	width: 33%;
	font-family: "Montserrat", sans-serif;;
	font-size: 10pt;
	border-top: 1px solid black;
}

.dataContainer:nth-child(2),
.dataContainerRawTwo:nth-child(2) {
	border: 1px solid black;
	border-bottom: 0;
}

.windVerticalDiv {
	float: left;
	width: 100%;
}

.rainDivClass {
	float: left;
}

.dataContainerRawTwo {
	float: left;
	width: 33%;
}

.columnStyle {
	float: right;
	width: 65%;
	position: relative;
	clear: top;
}

.rainInfoClass {
	float: right;
	width: 53%;
	position: relative;
	clear: top;
}

.ctb {
	float: left;
	margin-left: 0px;
}

.actb {
	float: right;
	margin-right: 0px;
}

.ctb2 {
	float: right;
	text-align: right;
}

.fleft {
	float: left;
}

.tableSim {
	clear: both;
	width: 100%;
}

.tableSim div:nth-child(1) {
	width: 20%;
	Float: left;
	text-align: right;
}

.tableSim div:nth-child(2) {
	width: 24%;
	float: left;
}

.tableSim div:nth-child(3) {
	width: 24%;
	float: left;
}

.tableSim div:nth-child(4) {
	width: 32%;
	float: left;
}

.selectQuickDates {
	float: left;
	width: 58%;
}

.selectmapcontentCont {
	clear: both;
	width: 40%;
	float: left;
}

.startDateCont,
.endDateCont {
	width: 49%;
	float: left;
	text-align: right;
}

.datesCont {
	float: left;
	width: 61%;
}


.removingButtonCont {
	position: relative;
	float: right
}

#map {
	float: right !important;
}

.toStationDivCont {
	height: 100%;
	width: 80%;
	float: right;
	padding: 0;
	margin: 0;
	font-size: .8em;
}

div#holder #stationlist {
	width: 20%;
	float: left;
}

div#ss div#tabrow1 {
	margin-top: 10px;
}

li#newsitem {
	min-height: 25px;
}

/*buttons*/
input[type=button],
input[type=submit],
input.newbutton {
	font-family: inherit;
	font-size: 100%;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 6px;
	padding-right: 6px;
	color: linear-gradient(transparent, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .1));
	border: 0 rgba(0, 0, 0, 0);
	background-color: #E6E6E6;
	cursor: pointer;
	margin: 1px;
	border-radius: 2px;
}

input[type=button]:hover,
input[type=submit]:hover,
.newbutton:hover {
	background: rgba(202, 202, 202, 0.8);
}

.noprint {
	padding: 0px;
}

/* All spine overriding code goes here */
.divclass {
	width: inherit !important;
	max-width: none !important;
}

ul#tabsul,
ul.ui-tabs-nav {
	border-radius: 1px;
	background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 10% repeat-x;
}

li.ui-state-default {
	background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 10% repeat-x !important;
}

li.ui-state-active {
	background: white !important;
}

ul.ui-tabs-nav li,
ul#tabsul li {
	border-radius: 1px;
	margin-bottom: 5px;
	border-bottom: 1px solid #aaaaaa !important;
}

ul#tabsul li:hover,
ul.ui-tabs-nav li:hover {
	background: rgba(202, 202, 202, 0.8);
}

/* End of spine overriding code*/

/*MyAgweatherNet Page*/
div.settingsWrapper {
	width: 100%;
	margin: 10px 0pt 15px;
	float: left;
}

div.settingsWrapper div {
	float: left;
	width: 100%;
	/*
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	*/
}

div.settingsWrapper div.settings {
	border: 1px solid #CDCDCD;
	padding-right: 0px;
}

div.settingsWrapper div.settings div.accHedr {
	background-color: #E6E6E6;
	border: 1px solid #FFF;
	color: #000;
	width: 100%;
	padding: 4px 0 24px 0;
	/* font-size: 8pt;*/
}

div.settingsWrapper div.settings div.accHedr div.accTitl {
	padding-left: 5px;
	width: 98%;
}



div.settingsWrapper div.settings div.accBody>div {
	width: 49%;
	height: 100%;
}

div.settingsWrapper div.settings div.accBody>div:nth-child(2) {
	border-left: 1px solid #CDCDCD;
}

ul.ulWidg {
	float: left;
	width: 100%;
	text-align: center;
	/* background-color:blue; */
}

ul.ulWidg li {
	list-style-type: none;
	/* background-color:red; */
	/* width: 300px;*/
	margin: auto;
}

ul.spcs {
	float: left;
	width: 100%;
	margin-left: 5px;
	width: 95%;
}

ul.spcs li {
	list-style-type: none;
	float: left;
	width: 100%;
	margin: 0px;
}

ul.spcs li * {
	float: left;
	width: 100%;
	font-weight: 200;
}

ul.spcs li select {
	float: left;
	width: 75%;
	font-weight: 200;
}

ul.spcs li input {
	float: left;
	width: 75%;
	font-weight: 200;
}

div.settingsWrapper div.accPasw>div {
	width: 49% !important;
}

div.settingsWrapper .accHelp {
	margin-left: 5px;
}

div.accTip {
	text-align: right;
}

ul.spcs li.propCont>div:first-child {
	margin-left: 0px;
}

ul.spcs li.propCont>div {
	margin-left: 3%;
}

ul.spcs li.propCont>div:first-child {
	width: 42%;
}

ul.spcs li.propCont>div {
	width: 26%;
}

ul.spcs input[type=submit] {
	width: 100%;
	font-size: 0.7em !important;
}

ul.cont select {
	/*max-width: 200px;*/
}

div#NewPassError,
div#CurPassError,
div#RepeatPassError,
div#PasswordChanged {
	color: red;
	float: left;
	width: 100% !important;
	margin-left: 5px;
}

#tabsul li {
	display: inline;
}

.title {
	text-align: center;
	padding: 0;
	margin: 0;
	font-weight: bold;
}



div.signInDiv {
	width: 100%;
}

div.authContainer {
	float: left;
	width: 100%;
}

div.authContainer div {
	float: left;
	width: 99%;
}

div.forgotPass>a {
	float: left;
	width: 100%;
}


td.norisk {
	font-weight: bold;
	background-color: #CCFFCC
}

td.lowrisk {
	font-weight: bold;
	background-color: #FFE860
}

td.mediumrisk {
	font-weight: bold;
	background-color: #FFB020
}

td.highrisk {
	font-weight: bold;
	background-color: #FF6860
}

.norisk {
	background-color: #CCFFCC
}

.lowrisk {
	background-color: #FFE860
}

.mediumrisk {
	background-color: #FFB020
}

.highrisk {
	background-color: #FF6860
}

.currentRow {
	background-color: #d5e9b9;
}

.healthyCol {
	background-color: #acd473;
}

.warningCol {
	background-color: #fff899;
}

.dangerCol {
	background-color: #ffcccc;
}

.forageCut {
	border-style: solid;
	border-color: #ffffff;
	border-width: 1px;
}

#toolbar {
	top: 0px;
	/* font-size:x-small; */
}

#AWNContent {
	margin-top: 45px;
	/* font-size:x-small; */
}

/*For iPhone*/
@media only screen and (min-width : 120px) and (max-width : 480px) {
	#toolbar {
		display: none;
	}

	#AWNContent {
		margin-top: 0px;
		/* font-size:x-small; */
	}

	.dataContainer,
	.dataContainerRawTwo {
		width: 100%;
	}

	#ui-tabs-1 {
		padding: 0;
	}

	input[name=unittype],
	select#stationList,
	input[name=removestationbutton],
	.stationselect div:last-child {
		float: right;
		width: 100%;
	}

	#tabsul li {
		width: 100%;
	}


	/*Quick dates*/
	.selectQuickDates .dateSetter {
		width: 100%;
		float: left;
		margin-left: 30%;
	}

	.selectQuickDates .dateSetter:hover {
		background-color: rgb(247, 247, 247);
	}

	#ss {
		overflow: hidden;
	}

	.formActs {
		float: left;
		width: 100%;
	}

	.formActs input,
	#downloadbutton {
		float: left;
		width: 100%;
	}

	.noprint {
		padding: 0px !important;
	}

	#ui-tabs-2 {
		padding: 0px;
	}

	.selectQuickDates {
		width: 100%;
	}

	.selectmapcontentCont {
		width: 100%;
	}

	.datesCont {
		width: 100%;
	}

	.startDateCont,
	.endDateCont {
		width: 100%;
		text-align: left;
	}

	#holder {
		float: left !important;
	}

	#holder div:first-child {
		width: 97% !important;
	}

	#holder div#map {
		float: none !important;
		margin: 0 auto !important;
	}

	div.toStationDivCont #toStation {
		width: 99%;
	}

	div.toStationDivCont #zip {
		width: 98%;
	}

	div.toStationDivCont #submit {
		width: 98%;
	}

	div.toStationDivCont {
		float: none;
		margin: 0 auto;
		margin: 10px auto 10px auto;
		background-color: whitesmoke;
		border-radius: 5px;
		padding: 5px;
	}

	#mainheader ul.ulclass,
	li#newsitem {
		max-height: 30px !important;
		overflow: hidden;
	}

	div.settingsWrapper div.settings div.accBody>div {
		width: 99%;
		border-bottom: 1px solid #E6E6E6;
	}

	/*authorize.page.class.php*/
	div.signInDiv {
		width: 100%;
	}

	div.authContainer {
		float: left;
		width: 99%;
	}

	div.authContainer>div {
		float: left;
		width: 100%;
	}

	div.forgotPass>a {
		float: left;
		width: 100%
	}
}


@media only screen and (min-width : 480px) and (max-width : 980px) {
	#toolbar {
		display: none;
	}

	#AWNContent {
		margin-top: 0px;
		/* font-size:x-small; */
	}

	.dataContainer,
	.dataContainerRawTwo {
		width: 49%;
		border: 1px solid black !important;
	}

	.dataContainer:nth-child(3),
	.dataContainerRawTwo:nth-child(3) {
		width: 100%;
	}

	#downloadbutton {
		/*		width: 50%;
		margin-left: -10px; */
	}

	.removingButtonCont {
		width: 49%;
	}

	input[name=removestationbutton] {
		width: 100.5%;
		margin-left: -3.5%;
	}

	.formActs {
		width: 100%;
	}

	.formActs input,
	#downloadbutton {
		/* width: 49%; */
	}

	div.accTip {
		font-size: 0.7em !important;
	}

	div.settingsWrapper div.accPasw>div {
		margin-left: 0px;
	}
}



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

	.dataContainer,
	.dataContainerRawTwo {
		width: 49%;
		border: 1px solid black !important;
	}

	.dataContainer:nth-child(3),
	.dataContainerRawTwo:nth-child(3) {
		width: 100%;
	}
}

/*
 Theme Name:     WSU Brand
 Theme URI:      http://brand.wsu.edu
 Description:    A set of standard, customizable templates for official Washington State University websites
 Author:         WSU University Communications
 Author URI:     http://ucomm.wsu.edu
 Template:       spine
 Version:        0.0.1
*/



#AWNContent {
	background-color: rgba(255, 255, 255, 0.91);
	height: 100%;
	padding-left: 10px;
	padding-right: 20px;
	margin-left: 0px;
	margin-right: 0px;
}

#spine::before {

	background-image: url(/images/s4.png);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(/images/s4.png), -webkit-gradient(linear, left top, left bottom, from(#981e32), to(#490e18));
	background-image: url(/images/s4.png), -webkit-linear-gradient(#981e32, #490e18);
	background-image: url(/images/s4.png), -moz-linear-gradient(#981e32, #490e18);
	background-image: url(/images/s4.png), -ms-linear-gradient(#981e32, #490e18);
	background-image: url(/images/s4.png), -o-linear-gradient(#981e32, #490e18);
	background-image: url(/images/s4.png), linear-gradient(to bottom, #981e32, #490e18);
	background-position: 50px;
	left: -198px;
	width: 198px;
	display: block;
	content: " ";
	min-height: 100%;
	height: 100%;
	position: absolute;
	/*width: 198px;*/
	visibility: visible;

}

.brand-header {
	left: 0;
	height: 1.5em;
	overflow: hidden;
	padding: 0px;
	position: relative;
	z-index: 99164;
}

.brand-header hgroup {
	bottom: -5px;
	bottom: 0px;
	position: absolute;
	text-align: center;
	width: 100%;
	display: block;
	border-top: 5px #5e6a71 solid;
}

.brand-header2 {
	left: 0;
	height: 1.5em;
	overflow: hidden;
	padding: 0px;
	position: relative;
	z-index: 99164;
}

.brand-header2 hgroup {
	bottom: -5px;
	bottom: 0px;
	position: absolute;
	text-align: center;
	width: 100%;
	display: block;
	border-top: 5px #5e6a71 solid;
}


.print #spine::before {
	background-image: none;
}

.print #toolbar {
	display: none;
}

.print .brand-header {
	display: none;
}

.print .brand-header hgroup {
	display: none;
}

.brand-header ul {
	display: inline;
	list-style-image: none;
	padding-right: 0px;
}

.brand-header li {
	display: inline;
	padding: 0px 0px 0px 12px;
}

.print .brand-header2 {
	display: none;
}

.print .brand-header2 hgroup {
	display: none;
}

.brand-header2 ul {
	display: inline;
	list-style-image: none;
	padding-right: 0px;
}

.brand-header2 li {
	display: inline;
	padding: 0px 0px 0px 12px;
}

#outlook ul {
	padding-bottom: 2px;
	padding-left: 15px !important;
}

#outlook li {
	margin: 0 5px;
	padding: 0;
	!important;
}

#outlook {
	margin: 0 auto;
	display: block;
	width: 80%;
	max-width: 1000px;
}

#outlook ul {
	padding-bottom: 2px;
	padding-left: 15px !important;
}

#outlook li {
	margin: 0 5px;
	padding: 0;
	!important;
}

#links ul {
	list-style-type: none;
	padding-bottom: 0px;
	padding-left: 0px !important;
}

#links li {
	margin: 0 0px;
	padding: 0;
	!important;
}

/*
#awnnews.white {color:#E0E0E0}
#awnnews.white:hover {color:#981e32}

#awnnews.lightest {color:#5e6a71}
#awnnews.lightest:hover {color:#981e32}

#awnnews.lighter {color:#384044}
#awnnews.lighter:hover {color:#981e32}

#awnnews.light {color:#e6e8e9}
#awnnews.light:hover {color:white}

#awnnews.gray {color:#e6e8e9}
#awnnews.gray:hover {color:white}

#awnnews.dark {color:#e6e8e9}
#awnnews.dark:hover {color:white}

#awnnews.darker {color:#babfc2}
#awnnews.darker:hover {color:white}

#awnnews.darkest {color:#babfc2}
#awnnews.darkest:hover {color:#981e32}

#awnnews.crimson {color:#b6bcbf}
#awnnews.crimson:hover {color:white}

#awnnews.transparent {color:#5e6a71}
#awnnews.transparent:hover {color:#981e32}

*/

/**/

#awnnews2.white {
	color: #5e6a71
}

#awnnews2.white:hover {
	color: #981e32
}

#awnnews2.lightest {
	color: #5e6a71
}

#awnnews2.lightest:hover {
	color: #981e32
}

#awnnews2.lighter {
	color: #384044
}

#awnnews2.lighter:hover {
	color: #981e32
}

#awnnews2.light {
	color: #e6e8e9
}

#awnnews2.light:hover {
	color: white
}

#awnnews2.gray {
	color: #e6e8e9
}

#awnnews2.gray:hover {
	color: white
}

#awnnews2.dark {
	color: #e6e8e9
}

#awnnews2.dark:hover {
	color: white
}

#awnnews2.darker {
	color: #babfc2
}

#awnnews2.darker:hover {
	color: white
}

#awnnews2.darkest {
	color: #babfc2
}

#awnnews2.darkest:hover {
	color: #981e32
}

#awnnews2.crimson {
	color: #b6bcbf
}

#awnnews2.crimson:hover {
	color: white
}

#awnnews2.transparent {
	color: #5e6a71
}

#awnnews2.transparent:hover {
	color: #981e32
}

/**/

.awnTopLink.white {
	color: #E0E0E0
}

.awnTopLink.white:hover {
	color: #981e32
}

.awnTopLink.lightest {
	color: #5e6a71
}

.awnTopLink.lightest:hover {
	color: #981e32
}

.awnTopLink.lighter {
	color: #384044
}

.awnTopLink.lighter:hover {
	color: #981e32
}

.awnTopLink.light {
	color: #e6e8e9
}

.awnTopLink.light:hover {
	color: white
}

.awnTopLink.gray {
	color: #e6e8e9
}

.awnTopLink.gray:hover {
	color: white
}

.awnTopLink.dark {
	color: #e6e8e9
}

.awnTopLink.dark:hover {
	color: white
}

.awnTopLink.darker {
	color: #babfc2
}

.awnTopLink.darker:hover {
	color: white
}

.awnTopLink.darkest {
	color: #babfc2
}

.awnTopLink.darkest:hover {
	color: #981e32
}

.awnTopLink.crimson {
	color: #b6bcbf
}

.awnTopLink.crimson:hover {
	color: white
}

.awnTopLink.transparent {
	color: #5e6a71
}

.awnTopLink.transparent:hover {
	color: #981e32
}

/*
white lightest lighter light gray dark darker darkest crimson transparent
*/
/*
#mainhgroup.darkest-text a { color:#5e6a71; }
#mainhgroup.darkest-text a:hover { color:#981e32; }

#mainhgroup.gray-text a { color:#5e6a71; }
#mainhgroup.gray-text a:hover { color:#981e32; }

#mainhgroup.lightly-text a { color:#e6e8e9; }
#mainhgroup.lightly-text a:hover { color:white; }

#mainhgroup.lighter-text a { color:#e6e8e9; }
#mainhgroup.lighter-text a:hover { color:white; }

#mainhgroup.light-text a { color:#babfc2; }
#mainhgroup.light-text a:hover { color:white; }

#mainhgroup.lightest-text a { color:#babfc2; }
#mainhgroup.lightest-text a:hover { color:#981e32; }
*/


/*
Theme Name: WSU Tree Fruit
Theme URI: http://cahnrs.wsu.edu
Author: CAHNRS Communication, Danial Bleile
Author URI:
Description: Developement Theme for Tree Fruit Website
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: tree fruit
Text Domain: wsutreefruit
*/

/* TOOLS RIGHT */
nav.site-tools-right {
	position: fixed;
	right: 0;
	top: 140px;
	z-index: 900;
	width: 110px;
}

nav.site-tools-right a {
	display: block;
	background: #333;
	padding: 2px 20px 2px 10px;
	margin-bottom: 12px;
	color: #ccc;
	;
	border-bottom: 4px solid #222;
	border-left: 4px solid #555;
	border-top: 4px solid #666;
	border-radius: 4px 0 0 4px;
}

nav.site-tools-right a:hover {
	background: #444;
	padding-right: 10px;
}

nav.site-tools-right a .icon {
	display: block;
	padding: 4px 30px 0 0;
	background: url(images/arrow-icon.png) no-repeat center right;
}

nav.site-tools-right a .icon img {
	width: 50px;
	height: 50px;
	display: block;
}

nav.site-tools-right a .title {
	font-size: 0.7em;
	font-weight: bold;
	padding: 0;
	display: block;
}


/* TOOLS RIGHT */
nav.site-tools-left {
	position: fixed;
	left: 0;
	top: 140px;
	z-index: 11111900;
	width: 110px;
}

nav.site-tools-left a {
	display: block;
	background: #333;
	padding: 2px 10px 2px 20px;
	margin-bottom: 12px;
	color: #ccc;
	;
	border-bottom: 4px solid #222;
	border-right: 4px solid #555;
	border-top: 4px solid #666;
	border-radius: 0 4px 4px 0;
}

nav.site-tools-left a:hover {
	background: #444;
	padding-left: 30px;
}

nav.site-tools-left a .icon {
	display: block;
	padding: 4px 30px 0 0;
	background: url(images/arrow-icon.png) no-repeat center left;
}

nav.site-tools-left a .icon img {
	width: 50px;
	height: 50px;
	display: block;
}

nav.site-tools-left a .title {
	font-size: 0.7em;
	font-weight: bold;
	padding: 0;
	display: block;
}




@media print {
	.noprint {
		display: none;
	}
}

.tableBackground {
	background-color: #C8D6E9;
}

.rowTitle {
	background-color: #C8D6E9;
	font-weight: bold;
	vertical-align: top;
	text-align: left;
}

.rowTitleBottom {
	background-color: #C8D6E9;
	font-weight: bold;
	vertical-align: bottom;
	text-align: center;
}

.rowTitleTop {
	background-color: #C8D6E9;
	font-weight: bold;
	vertical-align: top;
	text-align: center;
}

.rowOne {
	background-color: #FFFFFF;
	text-align: left;
}

.rowTwo {
	background-color: #EEEEEE;
	text-align: left;
}

.rowOneCen {
	background-color: #FFFFFF;
	text-align: center;
}

.rowTwoCen {
	background-color: #EEEEEE;
	text-align: center;
}

.rowCounty {
	background-color: #FFFFFF;
	font-weight: bold;
	vertical-align: top;
	text-align: left;
}

.rowForecast {
	background-color: #FFFFDD;
	text-align: left;
	color: #000000;
}

.rowRed1 {
	background-color: #FFFFFF;
	text-align: left;
	color: #ff0000;
}

.rowRed2 {
	background-color: #EEEEEE;
	text-align: left;
	color: #ff0000;
}

.tdRed {
	color: red;
}

.tdRight {
	text-align: right;
}

.modal-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
	opacity: .75;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	z-index: 101;
}

.modal-window {
	position: fixed;
	top: 40%;
	left: 50%;
	margin: 0;
	padding-top: 40px;
	z-index: 102;

}

.close-window {
	position: absolute;
	width: 32px;
	height: 32px;
	right: 8px;
	top: 48px;
	background: transparent url('/images/close-button.png') no-repeat scroll right top;
	text-indent: -99999px;
	overflow: hidden;
	cursor: pointer;
	opacity: .5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
}

.close-window:hover {
	opacity: .99;
	filter: alpha(opacity=99);
	-moz-opacity: 0.99;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	background: none;
	background-color: #b6bcbf;
}

table.dataTable thead th,
table.dataTable thead td {
	/* padding: 1px 1px 1px 1px; */
	text-align: center;
	vertical-align: bottom !important;
	background-color: #b6bcbf;
	border: 1px solid #FFF;
	color: #000;
	font-size: 9pt;
	padding: 4px
}

table.dataTable tbody th,
table.dataTable tbody td {
	padding: 2px 2px 2px 2px;
	/* border: 1px solid; */
}

/*
 Theme Name:     WSU Brand
 Theme URI:      http://brand.wsu.edu
 Description:    A set of standard, customizable templates for official Washington State University websites
 Author:         WSU University Communications
 Author URI:     http://ucomm.wsu.edu
 Template:       spine
 Version:        0.0.1
*/

.divclass {
	display: block;
	height: auto;
	width: 100%;
	float: right;
	top: auto;
	bottom: auto;
	vertical-align: top;
	position: fixed;
	z-index: 1000;
}

.headerclass {
	width: 100%;
	top: 0px;
	height: auto;
	bottom: auto;
	left: 0px;
	right: auto;
	overflow: hidden;
	padding: 0px;
	position: relative;
	z-index: 19916344;
	float: left;
}


.hgroupclass {
	bottom: 0px;
	text-align: center;
	width: 100%;
	display: table;
	float: left;
	margin: 0 auto;
	position: relative !important;
}

.hgroupImgclass {
	bottom: 0px;
	text-align: left;
	width: 100%;
	display: table;
	float: left;
	margin: 0 auto;
	position: relative !important;
}

.ulclass {
	display: block;
	list-style-image: none;
	padding: 0;
	margin: 0 auto;
	overflow: auto;
}

.liImgclass {
	padding: 0px 11px 0px 0px;
	overflow: auto;
	float: none !important;
	display: inline !important;
	vertical-align: text-top;
}

.liclass {
	padding: 0px 11px 0px 0px;
	overflow: auto;
	float: none !important;
	display: inline !important;
}

.liclass a {
	display: inline-block;
}

.group {
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
}

table.dataTable tbody tr td {
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	padding: 4px;
}

table.dataTable tbody tr.group td {
	padding: 4px;
}

table.dataTable tbody tr.group2 td {
	padding: 4px;
}

table.fixedHeader-floating {
	position: fixed;
	background-color: white
}

table.fixedHeader-floating.no-footer {
	border-bottom-width: 0
}

table.fixedHeader-locked {
	position: absolute;
	background-color: white
}

table.fixedHeader-locked {
	position: absolute;
	background-color: white
}

.awnEven td {
	overflow: hidden;
	background-color: #f0f0f0;
}

.awnEven:hover {
	background: #fff !important;
}

.awnEven:hover td {
	background: transparent;
	border-bottom: 1pt solid black;
	border-top: 1pt solid black;
}

.awnOdd td {
	overflow: hidden;
}

.awnOdd:hover {
	background: #fff !important;
}

.awnOdd:hover td {
	background: transparent;
	border-bottom: 1pt solid black;
	border-top: 1pt solid black;
}

.group td {
	text-align: center;
	vertical-align: bottom !important;
	background-color: #b6bcbf;
	border: 1px solid #FFF;
	color: #000;
	font-size: 9pt;
	padding: 4px
}


button.ui-button-icon-only {
	width: 22px !important;
	height: 22px !important;
}

button.mobile-button {
	width: 14px !important;
	height: 14px !important;
}

button.spine-move-up {
	width: 12px !important;
	height: 12px !important;
}

button.spine-move-down {
	width: 12px !important;
	height: 12px !important;
}

.editable {
	display: inline-block;
	min-width: 20px;
}

.editinplace {
	display: inline-block;
	size: 45;
}

.editinplaceSpineLabel {
	display: inline-block;
	size: 45;
}

.editinplaceSpineParent {
	display: inline-block;
	size: 45;
}

.editinplaceSpineSort {
	display: inline-block;
	size: 45;
}

.editinplaceSpineFunction {
	display: inline-block;
	size: 45;
}
.editinplaceSpineFilename {
	display: inline-block;
	size: 45;
}

.editinplaceSpineStatus {
	display: inline-block;
	size: 45;
}


.editNotesInPlace {}

.ui-icon-red {
	background-image: url("/images/ui-icons-800000-256x240.png") !important;
}

.ui-icon-blue {
	background-image: url("/images/ui-icons_2e83ff_256x240.png") !important;
}

.hover_img a>div {
	display: none;
}

.hover_img a:hover>div {
	display: inline-block;
}

span.dataTablesLink a {
	color: blue;
	text-decoration: underline;
}

span.dataTablesLink a:hover {
	color: red;
	text-decoration: none;
}

.inventoryInput {
	height: 22px;
	font-size: 13px;
	width: 100%;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

#modal-background {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: .50;
	-webkit-opacity: .5;
	-moz-opacity: .5;
	filter: alpha(opacity=50);
	z-index: 1000;
}

#modal-content {
	background-color: white;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 0 0 20px 0 #222;
	-webkit-box-shadow: 0 0 20px 0 #222;
	-moz-box-shadow: 0 0 20px 0 #222;
	display: none;
	height: 240px;
	left: 50%;
	margin: -120px 0 0 -160px;
	padding: 10px;
	position: fixed;
	top: 50%;
	width: 320px;
	z-index: 1000;
}

#modal-background.active,
#modal-content.active {
	display: block;
}


.highcharts-figure,
.highcharts-data-table table {
	min-width: 100%;
	max-width: 100%;
	margin: 1em auto;
}

.highcharts-data-table table {
	font-family: "Montserrat", sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}

.highcharts-data-table caption {
	padding: 1em 0;
	font-size: 1.2em;
	color: #555;
}

.highcharts-data-table th {
	font-weight: 600;
	padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
	padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
	background: #f8f8f8;
}

.highcharts-data-table tr:hover {
	background: #f1f7ff;
}


.addt3Station div.t3input {
	float: left;
	margin-right: 20px;
	/* background-color:yellow; */
}

.addt3Station div.t3section {
	clear: both;
}

.addt3Station label,
.addt3Station input[type=text] {
	display: block;
}

.addt3Station div.myerror {
	display: block;
	color: red;
	/* background-color: blue; */
}

.myinline label,
.addt3Station input[type=checkbox] {
	display: inline;
}

.addt3Station div.myinline {
	float: left;
	margin-right: 20px;
}

.wsu-container {
	margin: 0;
	padding: 20px;
	box-sizing: border-box;
	flex: 1;
	display: flex;
	flex-direction: column;
}


.wsu-wrapper-site {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 100vh;
}

.wsu-footer {
	background-color: #333;
	color: #fff;
	padding: 10px;
}

.body-container {
	flex: 1;
	height: 100%;
	display: flex;
	justify-content: center;
}

.body-content {
	width: 100%;
	max-width: 1500px;
}

.login-container {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
}
.login-content {
	width: 100%;
	max-width: 1500px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.row-container {
	display: flex;
	flex-wrap: wrap;
}

.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

.column {
	padding: 10px;
	margin: 0 20px 20px 20px;
	text-align: left;
}

.column-1 {
	flex: 1;
}

.column-2 {
	flex: 20%;
}

.column-4 {
	flex: 35%;
}

.column-5 {
	flex: 40%;
}

.column-6 {
	flex: 55%;
}

.column-10 {
	flex: 55%;
}
.date-buttons{
	display: flex;
	align-items: flex-end;
}
.date-buttons a{
	width: 100%;
	text-align: center;
}

.date-buttons{
	display: flex;
	align-items: flex-end;
}
.date-buttons a{
	width: 100%;
	text-align: center;
}


.vertical-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

.bottom-content {
	align-self: flex-end;
	align-items: center;
}

.bg-color-off {
	background-color: #FAFAFA;
}
.bg-color-white {
	background-color: #FFFFFF;
}
.vendors {
	margin-top: 50px;
	text-align: center;
}

.logos {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
}


.image-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center !important;
}

.tier3 {
	max-height: 450px;
	width: auto;
}

.image-caption {
	text-align: center;
	padding-top: 20px;
	margin-top: 20px;
}

.paragraph {
	font-size: 18px;
	padding-bottom: 10px;
	padding-right: 10px;
}


.unordered-list {
	list-style-position: inside;
}

.lists {
	clear: both;
	position: relative;
}

.tag {
	float: right;
	background-color: #f0f0f0;
	padding: 2px 8px;
	border-radius: 5px;
}

.required-tag {
	color: red;
	font-weight: bold;
}

.recommended-tag {
	color: green;
	font-style: italic;
}

.access-message {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.access-message p {
	font-size: 18px;
	color: #333;
	margin: 0;
}

.logo {
	margin: 20px;
	padding: 20px;
	height: auto;
	width: 200px;
}

.add-stations {
	display: flex;
}


.modal-overlay-container {
	background: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1100;
	backdrop-filter: blur(5px);
	display: none;
	justify-content: center;
	align-items: center;
}


.modal-container {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px;
	background: white;
	width: min(1000px, 100%);
	height: min(1000px, auto);
	max-height: min(1000px, 100%);
	box-sizing: border-box;
	transition: box-shadow 300ms cubic-bezier(0, 0, 0.03, 1);
	box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.03), 0 9px 46px 8px rgba(0, 0, 0, 0.03), 0 11px 15px 0 rgba(0, 0, 0, 0.02);

}

/* Style for the modal header */
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.header-title h2::after {
	display: block;
	content: "";
	height: 0.25rem;
	background-color: #a60f2d;
	width: 3rem;
	max-width: 33%;
}

.modal-body {
	/* overflow-x: hidden; */
	overflow: auto;
	padding: 20x;
}

.modal-footer {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	align-items: right;
	gap: 20px;
}

.hidden-form {
	display: none;
}

.form-container {
	display: flex;
	justify-content: center;
	align-content: center;
}

.form {
	width: 100%;
	max-width: 1000px;
}
.control-form {
	width: 100%;
}
.form-section {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 50px;
}

.form-section-margin-top {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-top: 50px;
}

.control-form-section {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.form-section-content {
	display: flex;
	row-gap: 20px;
	flex-direction: column;
	justify-content: space-between;
}

.form-section-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	column-gap: 20px;
}

.form-section-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.form-label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	margin: 5px;
	display: inline-block;
	width: 100%;
	cursor: pointer;
}
.Drip{
	display:none;
}
.Sprinkler{
	display:none;
}
.General{
	display:none;
}
.form-input {
	font-weight: 400;
	font-family: inherit;
	width: 100%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}

.form-input70 {
	font-weight: 400;
	font-family: inherit;
	width: 70% !important;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}
.form-input50 {
	font-weight: 400;
	font-family: inherit;
	width: 50% !important;
	min-width: 50% !important;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}
.form-input35 {
	font-weight: 400;
	font-family: inherit;
	width: 35% !important;
	min-width: 35% !important;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}
.form-input35right {
	font-weight: 400;
	font-family: inherit;
	width: 35% !important;
	float:right;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}
.form-input50right {
	font-weight: 400;
	font-family: inherit;
	width: 50% !important;
	float:right;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}

.form-input60right {
	font-weight: 400;
	font-family: inherit;
	width: 60% !important;
	float:right;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}

.form-input60 {
	font-weight: 400;
	font-family: inherit;
	width: 60% !important;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}

.form-inputNW {
	font-weight: 400;
	font-family: inherit;
	min-width:80%;
	width:80%;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}

.form-input45 {
	font-weight: 400;
	font-family: inherit;
	width: 45% !important;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}

.form-input25 {
	font-weight: 400;
	font-family: inherit;
	width: 25% !important;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}

.form-input25right {
	font-weight: 400;
	font-family: inherit;
	width: 25% !important;
	float:right;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.03), 0 0 0 0 rgba(0, 0, 0, 0.02);
}

.input {
	text-rendering: auto;
	color: fieldtext;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	display: inline-block;
	text-align: start;
	appearance: auto;
	-webkit-rtl-ordering: logical;
	cursor: text;
	margin: 0em;
	border-image: initial !important;
	padding-block: 1px;
	padding-inline: 2px;
}

.input-inline{
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #b2b2b2;
	outline: 0;
	transition: box-shadow .3s cubic-bezier(0, 0, .03, 1);
	font-size: inherit;
	padding: 0.5rem 0.5rem;
	box-sizing: border-box;
}

.input-select {
	height: 56.8px;
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #b2b2b2;
	outline: 0;
	transition: box-shadow .3s cubic-bezier(0, 0, .03, 1);
	font-size: inherit;
	padding: 1.125rem 1.125rem;
	box-sizing: border-box;
}
.input-slider{
	height: 56.8px;
}

.input-date {
	height: 56.8px;
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #b2b2b2;
	outline: 0;
	transition: box-shadow .3s cubic-bezier(0, 0, .03, 1);
	font-size: inherit;
	padding: 1.125rem 1.125rem;
	box-sizing: border-box;
	vertical-align: middle;
}
.select-multiple{
	height: auto;
}

.input-checkbox {
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    transition: border 300ms cubic-bezier(0, 0, 0.03, 1);
    position: relative;
    display: block;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0;
    padding: 0;
    background-color: #fff;
    height: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    transition: background-color 100ms cubic-bezier(0, 0, 0.03, 1), border-color 100ms cubic-bezier(0, 0, 0.03, 1);
    appearance: none;
}
.input-checkbox::before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "\F110";
    transform: translate(-50%, -50%);
    font-family: "wsu-icons";
    font-size: 0;
    color: #fff;
    transition: font-size 100ms ease;
}
.input-checkbox:checked {
    background-color: #ca1237;
    border-color: transparent;
    border-width: 2px;
}
.input-checkbox:checked::before {
    font-size: 10px;
}
.input-checkbox:hover,
.input-checkbox:focus {
    transition: box-shadow 300ms cubic-bezier(0, 0, 0.03, 1);
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.03), 0 3px 14px 2px rgba(0, 0, 0, 0.03), 0 4px 15px 0 rgba(0, 0, 0, 0.02);
    outline: none;
    cursor: pointer;
    border-color: #333;
}

.input-textarea {
	border-radius: 4px;
	background-color: #fff;
	border: 1px solid #b2b2b2;
	outline: 0;
	transition: box-shadow .3s cubic-bezier(0, 0, .03, 1);
	font-size: inherit;
	padding: 1.125rem 1.125rem;
	box-sizing: border-box;
}


.input-required {
	border-left-width: 2px !important;
	border-left-color: #A60F2D !important;
}

.form-button {
	width: 100% !important;
	text-align: center;
}

.error-message {
	color: #A60F2D;
	display: inline-block;
	font-size: 12px;
	line-height: 15px;
	margin: 5px 0 0;
}

.input-group .error-message {
	display: none;
}

.error label {
	color: #cc0033;
}

.error .input {
	background-color: #fce4e4;
	border: 1px solid #A60F2D;
	outline: none;
}
.error .icon-input {
	background-color: #fce4e4;
	border: 1px solid #A60F2D;
	outline: none;
}


.error .error-message {
	display: inline-block;
}


.connection-status {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10px;
	border-radius: 10px;
}

.connection-status-sucessful {
	display: none;
	border-left: 5px solid #2ecc71;
	border-right: 5px solid #2ecc71;
}

.connection-status-unsucessful {
	display: none;
	border-left: 5px solid #ccc;
	border-right: 5px solid #ccc;
}

#connection {
	display: none;
	animation: fade_in_show 0.5s
}


@keyframes fade_in_show {
	0% {
		opacity: 0;
		transform: scale(0)
	}

	100% {
		opacity: 1;
		transform: scale(1)
	}
}


/* Media query for screens up to 768px */
@media (max-width: 900px) {

	.row-container,
	.row {
		flex-direction: column;
	}

	.form-section-row {
		flex-direction: column;
		flex-wrap: wrap;
		row-gap: 20px;
	}

	.column-1 {
		flex: 100%
	}

	.column-2,
	.column-4,
	.column-5,
	.column-6,
	.column-10 {
		flex: 100%;
	}

	.form {
		width: 100%;
	}
}

/* Media query for screens between 768px and 1500px */
@media (min-width: 901px) and (max-width: 1500px) {
	.column-1 {
		flex: 20%
	}

	.column-2 {
		flex: 40%
	}

	.column-4,
	.column-5,
	.column-6,
	.column-10 {
		flex: 100%;
	}
}

/* Media query for screens between 768px and 1500px */
@media (min-width: 1500px) and (max-width: 2000px) {
	.column-2 {
		flex: 40%
	}
}


:root {
	--white: #ffffff;
	--light: #efefef;
	--success: #0ABF30;
	--error: #E24D4C;
	--warning: #E9BD0C;
	--info: #3498DB;
	--wsu-color: #A60F2D;
}


.toast-notifications {
	position: fixed;
	top: 30px;
	right: 20px;
	z-index: 99999;
}

.toast-notifications :where(.toast-notification) {
	display: flex;
	align-items: center;
}

.toast-notifications .toast-notification {
	width: 400px;
	display: flex;
	column-gap: 15px;
	overflow: hidden;
	list-style: none;
	padding: 16px 17px;
	margin-bottom: 10px;
	background: var(--light);
	border-radius: 4px;
	justify-content: space-between;
	animation: show_toast 0.3s ease forwards;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
	font-size: 13px;
}

.toast-notifications .toast-notification.hide {
	animation: hide_toast 0.3s ease forwards;
}

.toast-notification::before {
	position: absolute;
	content: "";
	height: 3px;
	width: 100%;
	bottom: 0px;
	left: 0px;
	animation: progress 5s linear forwards;
}

@keyframes show_toast {
	0% {
		transform: translateX(100%);
	}

	40% {
		transform: translateX(-5%);
	}

	80% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-10px);
	}
}

@keyframes hide_toast {
	0% {
		transform: translateX(-10px);
	}

	40% {
		transform: translateX(0%);
	}

	80% {
		transform: translateX(-5%);
	}

	100% {
		transform: translateX(calc(100% + 20px));
	}
}

@keyframes progress {
	100% {
		width: 0%;
	}
}

@media screen and (max-width: 530px) {
	.toast-notification {
		width: 95%;
	}

	.toast-notifications .toast-notification {
		width: 100%;
		margin-left: 10px;
	}
}


.toast-notification-success {
	border-left: 8px solid var(--success);
}

.toast-notification-error {
	border-left: 8px solid var(--error);
}

.toast-notification-warning {
	border-left: 8px solid var(--warning);
}

.toast-notification-info {
	border-left: 8px solid var(--success);
}

.toast-notification.success::before,
.btn#success {
	background: var(--success);
}

.toast-notification.error::before,
.btn#error {
	background: var(--error);

}

.toast-notification.warning::before,
.btn#warning {
	background: var(--warning);

}

.toast-notification.info::before,
.btn#info {
	background: var(--info);

}

.toast-notification i:last-child {
	color: #aeb0d7;
	cursor: pointer;
}

.toast-notification i:last-child:hover {
	color: var(--dark);
}

.toast-icon-container {
	display: flex;
	gap: 20px;
}

.toast-icon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.toast-success-icon {
	background-color: var(--success);
	color: #ffffff;
}

.toast-error-icon {
	background-color: var(--error);
	;
	color: #ffffff;
}

.toast-warning-icon {
	background-color: var(--warning);
	;
	color: #000000;
}

.-toast-info-icon {
	background-color: var(--info);
	;
	color: #ffffff;
}

.collapsible-head {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.collapsible-icon:hover,
.collapsible-head:hover {
	cursor: pointer;
}

.collapsible-content {
	padding: 0 18px;
	overflow: hidden;
	width: 100%;
	height: auto !important;
}

.collapsible-content-expanded {
	display: block;
}

.collapsible-content-hidden {
	display: none;
}

.station-top-content {
	width: 100%;
}

.loading-icon-container {
	background: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	backdrop-filter: blur(5px);
	display: none;
	justify-content: center;
	align-items: center;
}

.loading-icon-container-active {
	display: flex;
}

.loading-icon svg {
	overflow: visible;
}

.loading-icon path {
	fill: rgba(0, 0, 0, 0);
	stroke: #A60F2D;
	stroke-width: 4px;
	transform-origin: center;
}

.loading-icon .butch__hair {
	animation: dash-hair 4s infinite;
	stroke-dasharray: 1360;
	stroke-dashoffset: 1360;
}

.loading-icon .butch__face {
	animation: dash-face 4s infinite;
	stroke-dasharray: 1835;
	stroke-dashoffset: 1835;
}

.loading-icon .butch__jaw {
	animation: dash-jaw 4s infinite;
	stroke-dasharray: 480;
	stroke-dashoffset: 480;
}

.loading-icon .butch__chest {
	animation: dash-chest 4s infinite;
	stroke-dasharray: 135;
	stroke-dashoffset: 135;
}

@keyframes dash-hair {
	0% {
		stroke-dashoffset: 1360;
	}

	20% {
		stroke-dashoffset: 0;
	}

	70% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 1360;
	}
}

@keyframes dash-face {
	0% {
		stroke-dashoffset: 1835;
	}

	15% {
		stroke-dashoffset: 1835;
	}

	60% {
		stroke-dashoffset: 0;
	}

	70% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 1835;
	}
}

@keyframes dash-chest {
	0% {
		stroke-dashoffset: 135;
	}

	15% {
		stroke-dashoffset: 135;
	}

	60% {
		stroke-dashoffset: 0;
	}

	70% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 135;
	}
}

@keyframes dash-jaw {
	0% {
		stroke-dashoffset: 480;
	}

	45% {
		stroke-dashoffset: 480;
	}

	70% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 480;
	}
}

.wsu-c-heading--callout,
h1.wsu-c-heading--callout,
h2.wsu-c-heading--callout,
h3.wsu-c-heading--callout,
h4.wsu-c-heading--callout,
h5.wsu-c-heading--callout,
h6.wsu-c-heading--callout {
	font-family: "Montserrat", sans-serif;
	margin-top: 2.5rem;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
}

.wsu-c-heading--full {
	max-width: auto;
}

.wsu-c-heading--callout::after,
h1.wsu-c-heading--callout::after,
h2.wsu-c-heading--callout::after,
h3.wsu-c-heading--callout::after,
h4.wsu-c-heading--callout::after,
h5.wsu-c-heading--callout::after,
h6.wsu-c-heading--callout::after {
	margin-top: 2px;
	position: absolute;
	left: 0;
	display: block;
	width: 1em;
	height: 0.25em;
	content: "";
	background-color: #CA1237;
}


.wsu-c-cards__wrapper {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #262626;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-flow: row wrap;
	padding: 0
}

.wsu-c-cards__wrapper .wsu-c-card__wrapper:first-child {
	padding-top: 15px
}

.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--1 .wsu-c-card__container,
.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--2 .wsu-c-card__container,
.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--3 .wsu-c-card__container,
.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--4 .wsu-c-card__container,
.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--5 .wsu-c-card__container {
	padding: 20px 0
}

.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--1 .wsu-c-card__wrapper {
	width: 100%
}

.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--2 .wsu-c-card__wrapper {
	width: 100%
}

.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--3 .wsu-c-card__wrapper {
	width: 100%
}

.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--4 .wsu-c-card__wrapper {
	width: 100%
}

.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--5 .wsu-c-card__wrapper {
	width: 100%
}

.wsu-c-card__wrapper {
	font-family: "Montserrat", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: #262626;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: flex;
	padding: 0
}

.wsu-c-card__container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto
}

.wsu-c-card__content {
	border-radius: 5px;
	margin: 0 auto;
	padding: 0;
	max-width: 600px;
	width: 100%;
	overflow: hidden;
	color: #404040;
	transition: box-shadow 300ms cubic-bezier(0, 0, 0.03, 1);
	transition: all 300ms cubic-bezier(0, 0, 0.03, 1);
	background-color: white;
	box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.125)
}

.wsu-c-card__content:hover {
	box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3)
}

.wsu-c-card__photo-frame {
	position: relative;
	padding-bottom: 56.25%;
	width: 100%
}

.wsu-c-card__photo-wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	height: auto;
	width: auto
}

.wsu-c-card__photo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100% !important;
	width: 100%;
	object-fit: cover;
	object-position: center
}

.wsu-c-card__copy {
	margin: 25px
}

.wsu-c-card__content-footer {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	border-top: 2px solid #f7f7f7;
	margin: 1.5em 0 0 0
}

.wsu-c-card__categories {
	margin: 10px 0 10px 0
}

.wsu-c-card__categories-label {
	transform: scale(0.85) translate(-5px, 1px);
	display: inline-block;
	text-transform: uppercase
}

.wsu-c-card__tags {
	margin: 10px 0 10px 0;
	vertical-align: bottom;
	line-height: 1
}

.wsu-c-card__tags-label .wsu-icon {
	margin-right: 10px
}

.wsu-c-card__tags-more {
	padding-right: 5px;
	padding-left: 5px;
	text-decoration: none;
	color: inherit
}

.wsu-c-card__tags-more .wsu-icon::before {
	display: inline-block;
	margin-top: 4px
}

.wsu-c-card__byline-container {
	position: relative;
	margin: 1em 0;
	transition: 300ms cubic-bezier(0, 0, 0.03, 1) background-color
}

.wsu-c-card__byline-meta {
	margin: 0
}

.wsu-c-card__author {
	margin: 0
}

.wsu-c-card__author::before {
	content: "";
	display: inline;
	margin-right: 0.5em;
	font-family: 'wsu-icons';
	font-size: 0.8em
}

.wsu-c-card__description {
	margin: 0;
	padding: 0
}

.wsu-c-card__heading {
	margin: 0;
	margin-bottom: 0.5em;
	padding: 0;
	font-size: 1em;
	line-height: 1.3;
	font-weight: 600
}

.wsu-c-card__heading-link:visited,
.wsu-c-card__heading-link {
	text-decoration: none;
	color: #262626
}

.wsu-c-card__heading-link:visited::after,
.wsu-c-card__heading-link::after {
	content: "\F126";
	display: inline-block;
	padding-left: 5px;
	text-decoration: none;
	font-family: "wsu-icons";
	font-size: 0.7em;
	font-weight: 400;
	transition: 300ms ease all
}

.wsu-c-card__heading-link:hover {
	border-bottom: 3px solid #CA1237;
	transition: border-width 100ms ease-in
}

.wsu-c-card__subtitle {
	padding: 0
}

.wsu-c-card__position-title {
	padding: 0
}

.wsu-c-card__caption {
	padding: 0;
	font-size: 0.8em;
	line-height: 1.3;
	color: #666
}

.wsu-c-card__address {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
	position: relative;
	margin: 0;
	padding: 10px 35px
}

.wsu-c-card__address::before {
	font-family: "wsu-icons";
	content: "";
	position: absolute;
	left: 10px;
	color: #CA1237
}

.wsu-c-card__address-line-1,
.wsu-c-card__address-line-2 {
	display: block
}

.wsu-c-card__phone-link,
.wsu-c-card__email-link,
.wsu-c-card__website-link {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.5;
	position: relative;
	display: block;
	margin: 0;
	padding: 10px 25px 10px 35px;
	text-decoration: none;
	color: #CA1237;
	transition: background-color 400ms ease
}

.wsu-c-card__phone-link:hover,
.wsu-c-card__email-link:hover,
.wsu-c-card__website-link:hover {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	border-radius: 5px;
	background-color: #f7f7f7
}

.wsu-c-card__phone-link:active,
.wsu-c-card__phone-link:visited,
.wsu-c-card__email-link:active,
.wsu-c-card__email-link:visited,
.wsu-c-card__website-link:active,
.wsu-c-card__website-link:visited {
	color: #CA1237
}

.wsu-c-card__phone-link::before,
.wsu-c-card__email-link::before,
.wsu-c-card__website-link::before {
	position: absolute;
	left: 10px
}

.wsu-c-card__phone-link::before {
	font-family: "wsu-icons";
	content: ""
}

.wsu-c-card__email-link {
	word-break: break-word
}

.wsu-c-card__email-link::before {
	font-family: "wsu-icons";
	content: ""
}

.wsu-c-card__website-link::before {
	font-family: "wsu-icons";
	content: ""
}

@media only screen and (min-width: 576px) {
	.wsu-c-cards__wrapper {
		padding: 20px 0
	}

	.wsu-c-cards__wrapper .wsu-c-card__wrapper:first-child {
		padding-top: 0
	}

	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--1 .wsu-c-card__container,
	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--2 .wsu-c-card__container,
	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--3 .wsu-c-card__container,
	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--4 .wsu-c-card__container,
	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--5 .wsu-c-card__container {
		padding: 10px 10px
	}

	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--2 .wsu-c-card__wrapper,
	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--3 .wsu-c-card__wrapper,
	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--4 .wsu-c-card__wrapper,
	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--5 .wsu-c-card__wrapper {
		width: 50%
	}
}

@media only screen and (min-width: 992px) {
	.wsu-c-cards__wrapper {
		margin: 20px 0;
		padding: 0
	}

	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--3 .wsu-c-card__wrapper,
	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--4 .wsu-c-card__wrapper,
	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--5 .wsu-c-card__wrapper {
		width: 33.33%
	}

	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--4 .wsu-c-card__wrapper {
		width: 25%
	}

	.wsu-c-cards__wrapper.wsu-c-cards__items-per-row--5 .wsu-c-card__wrapper {
		width: 20%
	}
}

@media only screen and (min-width: 1360px) {
	.wsu-c-cards__wrapper {
		padding: 0
	}
}

.wsu-c-table-container {
	overflow-x: auto;
}

.wsu-c-table {
	border-spacing: 0;
	width: 100%;
	margin: 40px 0;
}

.wsu-c-table-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.wsu-c-table-control {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.wsu-c-table-bot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.wsu-c-table-page-rows {
	width: 100px;
}

.icon-no-margin {
	margin: 0;
}

.icon-margin-left{
	margin-left: 10px;
}

.pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75em;

}

.page-nav {
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-nav.active {
	border-radius: 4px;
	border: 1px solid #A60F2D;
}

.page-nav.disabled {
	cursor: none;

}

.page-nav-link {
	all: unset;
	cursor: pointer;
}

.wsu-c-table caption {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #262626;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	padding: 10px;
	caption-side: bottom
}

.wsu-c-table--captionTop caption {
	caption-side: top
}

.wsu-c-table td,
.wsu-c-table th {
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	color: #262626;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-align: left;
	padding: calc(10px + 2px) 10px 10px;
	margin: 0;
	line-height: 1;
	border-bottom: 1px solid #e6e6e6;
	border-left: none;
	border-right: none;
}

.wsu-c-table th {
	font-size: 16px;
	font-weight: 600;
}

.wsu-c-table tbody tr:last-child td,
.wsu-c-table tbody tr:last-child th {
	border-top: 1px solid #e6e6e6;
	border-bottom: 2px solid #A60F2D;
}

.wsu-c-table thead th,
.wsu-c-table thead td,
.wsu-c-table tfoot th,
.wsu-c-table tfoot td {
	font-size: 16px;
	font-weight: 700;
	line-height: 1
}

.wsu-c-table thead th,
.wsu-c-table thead td {
	border-top: 2px solid #A60F2D;
	border-bottom: 1px solid #e6e6e6;
	font-size: 16px;
	font-weight: 700;
	line-height: 1
}
.wsu-c-table-bordered thead th{
	border: 2px solid #A60F2D !important;
}

.wsu-c-table--striped tbody tr:nth-child(even) {
	background: #f2f2f2
}

.wsu-c-table--spacingCompressed td,
.wsu-c-table--spacingCompressed th {
	padding: calc(5px + 2px) 10px 5px
}

.wsu-c-table--spacingExpanded td,
.wsu-c-table--spacingExpanded th {
	padding: calc(20px + 2px) 10px 20px
}

.wsu-c-table--alignleft td,
.wsu-c-table--alignleft th {
	text-align: left
}

.wsu-c-table--alignCenter td,
.wsu-c-table--alignCenter th {
	text-align: center
}

.wsu-c-table--alignRight td,
.wsu-c-table--alignRight th {
	text-align: right
}

.table-actions {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
}

.asc:after {
	content: '  ▲';
}

.desc:after {
	content: '  ▼';
}

/* Media query for screens up to 768px */
@media (max-width: 786px) {

	.wsu-c-table-top,
	.wsu-c-table-bot {
		flex-direction: column;
	}
}

.wsu-tab-controls {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
}

.wsu-tab-controls i {
	margin-left: auto;
}

.wsu-tab-control {
	min-width: 50px;
}

.wsu-tabs {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 5px;
	/* border-radius: 5px; */
	padding-top: 10px;
}

.wsu-tab-headers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	/* margin: 5px; */
	gap: 10px;
	/* border-radius: 5px; */
	background-color: #f2f2f2;
	border: 0px solid var(--wsu-color);
	min-height: 54px;
	/* box-shadow: 0 5px 14px rgba(166, 15, 45,.6); */

}
.wsu-tab-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	box-sizing: border-box;
	background-color: var(--wsu-color);
	color: var(--white);
	padding-right: 15px;
	/* border-radius: 6px; */
	border: none;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	text-decoration: none;
	transition: box-shadow .2s cubic-bezier(0, 0, .03, 1);
	gap: 10px;
}

.wsu-tab-header:focus,
.wsu-tab-header:hover {
	box-shadow: 0 5px 14px rgba(0, 0, 0, .8);
	background-color: #ca1237;
}

.wsu-tab-header-active {
	box-shadow: 0 5px 14px rgba(0, 0, 0, .5);
	background-color: #ca1237;
}

.wsu-tab-header-title{
	margin: 15px;
}

.wsu-tab-contents {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 20px;
}

.wsu-tab-content {
	display: none;
	/* padding: 5px; */
	/* border-radius: 5px; */
	width: 100%;
}

.wsu-tab-content-active {
	display: flex;
}

.title-case {
	font-variant: small-caps;
}

.button-inverse {
	color: var(--wsu-color);
	background-color: var(--white);
}

.button-inverse:focus,
.button-inverse:hover {
	box-shadow: 0 5px 14px rgba(255, 255, 255, .4);
	background-color: #efefef;
}

.widget-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

.widget-info {
	width: 100%;
	flex: 100%;
	min-height: 50px;
	background-color: #4d4d4d;
	display: flex;
	align-items: center;
	color: var(--white);
	padding: 5px;
	/* box-shadow: 0 5px 14px rgba(166, 15, 45,.6); */
	/* border-radius: 5px; */
	gap: 5px;
}

.widget-title-date {
	flex: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	font-size: 20px;
}

.widget-control {
	flex: 50%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}


.widget {
	display: flex;
	flex-direction: column;
	flex: calc(50% - 5px);
	/* box-shadow: 0 5px 14px rgba(166, 15, 45,.6); */
	/* border-radius: 5px; */
	max-width: calc(50% - 5px);
}


.widget-full {
	display: flex;
	flex-direction: column;
	flex: 100%;
	width: 100%;
	/* box-shadow: 0 5px 14px rgba(166, 15, 45,.6); */
	/* border-radius: 5px; */
}
/* Media query for screens between 768px and 1500px */


.widget-header {
	/* border-top-left-radius: 5px; */
	/* border-top-right-radius: 5px; */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #4d4d4d;
	color: var(--white);
	font-size: 20px;
	min-height: 54px;
	font-variant: small-caps;
	padding: 5px;
	gap: 5px;
}
.chart-only{
	display: flex;
	flex-direction: column;
	flex: 1;
	background-color: var(--light);
	padding: 10px;
	width: calc(100% -20px);
}
.widget-body {
	display: flex;
	flex-direction: column;
	background-color: var(--light);
	padding: 10px;
	gap: 20px;
	flex: 100%;
	/* border-bottom-left-radius: 5px; */
	/* border-bottom-right-radius: 5px; */
}

.current-info {
	display: flex;
	gap: 5px;
	flex-direction: row;
	flex: 100%;
	justify-content: space-around;
}

.indicator-widget-full {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
	flex: 100%;
	width: 100%;
}

.indicator-widget {
	display: flex;
	max-height: 150px;
	justify-content: center;
	align-self: center;
}

.wind-condition-now {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.condition-now {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 35px;
}

.condition-now-info {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	height: 100%;
}

.condition-now-data {
	display: flex;
	flex: 50%;
	height: 100%;
	justify-content: flex-end;
	align-items: center;
	font-size: 18px;
}
.weather-summary-container{
	align-items: center;
	justify-content: center;
	margin: 10px;
	display: grid;
	--min: 45%;
	column-gap: 20px; /* Gap between grid items */
	row-gap: 5px; /* Gap between grid items */
	grid-template-columns:  repeat(auto-fit, minmax(min(100%, var(--min)), 300px));
}
@media screen and (max-width: 600px) {
	.container {
		grid-template-columns: 1fr; /* Single column layout */
	}
}


.weather-summary-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.summary-value{
	font-weight: bold;
}

.dewpoint::after {
	content: 'Dewpoint';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-top;
}

.heatindex::after {
	content: 'Heat Index';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-top;
}

.windchill::after {
	content: 'Wind Chill';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-top;
}

.max::after {
	content: 'Max';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-top;
}
.current::after {
	content: 'Now';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-top;
}
.high::after {
	content: 'High';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-top;
}

.low::after {
	content: 'Low';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-top;
}

.avg::after {
	content: 'Avg';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-top;
}

.sum::after {
	content: 'Sum';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-bottom;
}

.fifteenago::after {
	content: '15m Avg';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-bottom;
}

.sixtyago::after {
	content: '60m Avg';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-bottom;
}

.twentyfourago::after {
	content: '24h Avg';
	margin-left: 10px;
	font-size: x-small;
	font-variant: small-caps;
	vertical-align: text-bottom;
}

.forecast {
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	flex: 100%;
	gap: 10px;
}

.forecast-column {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap: 5px;
}

.forecast-column-item {
	display: flex;
	align-items: center;
}

.forecast-title {
	font-variant: small-caps;
	text-transform: capitalize;
}

.forecast-item-title,
.forecast-title,
.current-condition-info-title {
	font-variant: small-caps;
	font-size: 20px;
}

.forecast-item-title {
	font-size: 18px;
	font-weight: normal;
}

.current-condition-info-title {
	margin-bottom: 5px;
}

.underline-red::after {
	display: block;
	content: "";
	height: 0.175rem;
	background-color: #a60f2d;
	width: 2rem;
	max-width: 33%;

}

.percent::after {
	margin-left: 5px;
	content: "\0025";
}

.degree-us::after {
	margin-left: 5px;
	content: "\00b0 F"
}

.degree-english::after {
	margin-left: 5px;
	content: "\00b0 C"
}

.speed-us::after {
	margin-left: 5px;
	content: "mph"
}

.speed-english::after {
	margin-left: 5px;
	content: "m/s"
}

.length-us::after {
	margin-left: 5px;
	content: "in"
}

.length-english::after {
	margin-left: 5px;
	content: "mm"
}

.radiation-us::after {
	margin-left: 5px;
	content: "W/m²";
}

.pressure-us::after {
	content: "inHg";
	margin-left: 5px;
}

.pressure-english::after {
	content: "hPa";
	margin-left: 5px;
}

.radiation-sum::after {
	margin-left: 5px;
	content: "MJ/m²"
}

.val-up::before {
	margin-left: 5px;
	content: "\F10A";
	font-family: wsu-icons !important;
	font-size: 70%;
	vertical-align: text-top;
}

.val-down::before {
	margin-left: 5px;
	content: "\F104";
	font-family: wsu-icons !important;
	font-size: 70%;
	vertical-align: text-top;
}

.time::after {
	font-family: wsu-icons !important;
	font-style: normal;
	font-weight: normal !important;
	vertical-align: top;
	content: "\F14E";
	margin-left: 5px;
	font-size: 80%;
	vertical-align: middle;

}

.date::after {
	font-family: wsu-icons !important;
	font-style: small;
	font-weight: normal !important;
	content: "\F10E";
	margin-left: 5px;
	font-size: 80%;
	vertical-align: text-top;
}

.search-station-map {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.search-map-controls {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}

.g-map {
	height: 400px;
	width: 100%;
	display: flex;
}

.search-results {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	border: 0px solid var(--wsu-color);

}

.search-header {
	width: auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	box-sizing: border-box;
	background-color: var(--wsu-color);
	color: var(--white);
	border: none;
	padding: 15px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	text-decoration: none;
	transition: box-shadow .2s cubic-bezier(0, 0, .03, 1);
	gap: 10px;
}

@media (max-width: 1100px) {
	.current-info {
		flex-direction: column;
	}

	.condition-now-data {
		justify-content: center;
	}

	.widget {
		flex: 100%;
		max-width: 100%;
	}

	.widget-header {
		word-wrap: break-word;
		text-align: center;
	}

	.forecast {
		flex-wrap: wrap;
	}

	.widget-info {
		flex-direction: column;
	}

	.forecast-column-item {
		justify-content: center;
	}
}

.nws-outlooks-container {
	margin: 0 auto;
	max-width: 1000px;
}

.nws-outlooks-title {
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: 10px;
}

.nws-outlooks {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 50px;
	flex-wrap: wrap;
}

.nws-outlook {
	flex: 40%;
	gap: 20px;
}

.nws-outlook-img {
	display: flex;
	justify-content: center;
	align-items: center;
}

.nws-outlook-img img {
	max-width: 400px;
	height: auto;
	width: 100%;
}

.date-select-container {
	max-width: 1500px;
	--min: 240px;
	--gap: 10px;
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 240px));
	padding-bottom: 10px;
	justify-items: center;
	align-items: end;

}

.date-select-container {
	max-width: 1500px;
	--min: 240px;
	--gap: 10px;
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 240px));
	padding-bottom: 10px;
	justify-items: center;
	align-items: end;
}
.date-select {
	width: 100%;
	height:auto;
}
.date-select input {
	width: 100%;
	height:auto;
}

.date-select70 {
	width: 70%;
	height:auto;
}
.date-select70 input {
	width: 70%;
	height:auto;
}

.mobile-station-select-container {
	max-width: 1500px;
	--min: 300px;
	--gap: 10px;
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 400px));
	padding-bottom: 10px;
}

.mobile-station-select {
	width: 100%;
}

.mobile-station-select select {
	width: 100%;
}

.mobile-view {
	max-width: 1500px;
	--min: 400px;
	--gap: 10px;
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

.section-table {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	align-items: flex-start;
}

@media (max-width: 500px) {
	.section-table {
		flex-direction: column;
	}

}

.section-container {
	display: flex;
	flex-direction: column;
}

.section-detail {
	border: 2px solid var(--light);
	padding: 10px;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	color: white;
	background-color: #5e6a71;
	padding: 10px;
	overflow: hidden;
	line-height: 1;
}

.section-info {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap: 3px;
}

.section-info div {
	font-size: 12px;
}

.section-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: row;
}

.section-action-button span {
	cursor: pointer;
	font-size: 15px;

}

.section-action-button button {
	border: none;
	background-color: #5e6a71;
	color: white;
}

.section-action-button button:focus,
.section-action-button button:hover {
	text-shadow: 1px 1px 5px var(--wsu-color);
}

#current-table td,
#summary-table td {
	text-align: right !important;
}

#current-table,
#summary-table {
	margin: 0px !important;
}

.forecast-summary {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	flex-direction: column;
}


.forecast-values {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-evenly;
}

.forecast-value {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.station-pics-carousel {
	text-align: center;
}

.station-pics {
	height: 400px;
	width: auto !important;
}

.disabled {
	pointer-events: none;
	cursor: not-allowed;
	opacity: 0.8;
}

.MyChartTooltip {
	display: flex;
	flex-direction: column;
}


.wsu-u-visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	clip-path: inset(50%)
}

.wsu-u-spacer {
	display: flex;
	align-items: center;
	flex-flow: column wrap;
	justify-content: space-between;
	height: 200px;
	margin: 20px 0;
	padding: 20px 40px;
	background: linear-gradient(-195deg, #fff, #e6e6e6)
}

@media only screen and (min-width: 768px) {
	.wsu-u-spacer {
		flex-flow: row nowrap
	}
}

.wsu-u-title {
	font-family: "Montserrat", sans-serif;;
	display: flex;
	align-items: center;
	justify-content: center
}

.wsu-u-toc {
	display: block;
	max-width: 400px;
	margin: 15px auto;
	padding: 10px 20px;
	color: #fff;
	background: linear-gradient(-195deg, gray, #4d4d4d);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	transition: box-shadow 300ms cubic-bezier(0, 0, 0.03, 1);
	box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.03), 0 3px 14px 2px rgba(0, 0, 0, 0.03), 0 4px 15px 0 rgba(0, 0, 0, 0.02)
}

.wsu-u-toc p {
	margin: 0
}

.wsu-u-toc a,
.wsu-u-toc .wsu-c-content a:not([class^="wsu-c-"]):not([class*=" wsu-c-"]):visited,
.wsu-c-content .wsu-u-toc a:not([class^="wsu-c-"]):not([class*=" wsu-c-"]):visited,
.wsu-u-toc a.wsu-c-link:visited,
.wsu-u-toc a.wsu-c-link--motion:visited {
	transition: color 300ms cubic-bezier(0, 0, 0.03, 1);
	color: #fff
}

.wsu-u-toc a:hover,
.wsu-u-toc .wsu-c-content a:hover:not([class^="wsu-c-"]):not([class*=" wsu-c-"]):visited,
.wsu-c-content .wsu-u-toc a:hover:not([class^="wsu-c-"]):not([class*=" wsu-c-"]):visited,
.wsu-u-toc a.wsu-c-link.wsu-c-link--a11y:hover:visited {
	color: #ccc
}

.wsu-u-requirements {
	width: 400px
}

.wsu-u-pad--none {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0
}

.wsu-u-pad--less {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0
}

.wsu-u-pad--more {
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0
}

.wsu-u-pad-bottom--none {
	padding-bottom: 0
}

.wsu-u-pad-top--none {
	padding-top: 0
}

.wsu-u-pad-left--none {
	padding-left: 0
}

.wsu-u-pad-right--none {
	padding-right: 0
}

.wsu-u-textalign--left {
	text-align: left
}

.wsu-u-textalign--right {
	text-align: right
}

.wsu-u-textalign--center {
	text-align: center
}

.wsu-u-background--gray-0 {
	background-color: #f2f2f2
}

.wsu-u-background--gray-5 {
	background-color: #f2f2f2
}

.wsu-u-background--gray-10 {
	background-color: #e6e6e6
}

.wsu-u-background--gray-15 {
	background-color: #d9d9d9
}

.wsu-u-background--gray-20 {
	background-color: #ccc
}

.wsu-u-background--gray-25 {
	background-color: #bfbfbf
}

a.wsu-c-link,
a.wsu-c-link:visited
{
	transition: border-bottom-width 100ms cubic-bezier(0, 0, 0.03, 1);
	text-decoration: none;
	color: #A60F2D;
	border-bottom-width: .05em;
	border-bottom-style: solid;
	border-bottom-color: #CA1237
}

a.wsu-c-link:hover,
a.wsu-c-link:focus {
	border-bottom-width: .2em
}

a.wsu-c-link:focus{
	text-decoration: none;
	border-bottom: 2px solid #ca1237;
	outline: 1px solid #A60F2D;
	outline-width: 3px;
	outline-style: solid;
	outline-color: #797979
}
.correlation{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.no-data{
	display: flex;
	width: 100;
	align-items: center;
	justify-content: center;
	height: 200px;
	font-size: 24px;
}
.graph-note{
	list-style: none;
	margin: 0;
}
.graph-note li{
	margin: 0;
	font-size: small;
}

.box{
	height:15px;
	width:15px;
	display: inline-block;
	vertical-align: top;
}
.good{
	background-color:rgba(0, 255, 0, 0.4);
}
.worse{
	background-color:rgba(255, 0, 0, 0.4);
}
.warn{
	background-color:rgba(255, 165, 0, 0.4);;
}

.inversion-legends{
	display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 5px;
}

.tooltip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.tooltip-row{
	display: flex;
	justify-content: space-around;
	align-items: center;
}


.tooltip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.tooltip-row{
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.display-none{
	display: none;
}
.dropdown {
    position: relative;
}
@keyframes growDown {
    0% {
        transform: scaleY(0)
    }
	25% {
        transform: scaleY(0.25)
    }
	50% {
        transform: scaleY(0.5)
    }
	75% {
        transform: scaleY(0.75)
    }

    100% {
        transform: scaleY(1)
    }
}
@keyframes growUp{
    0% {
        transform: scaleY(1)
    }
	25% {
        transform: scaleY(0.75)
    }
	50% {
        transform: scaleY(0.5)
    }
	75% {
        transform: scaleY(0.25)
    }

    100% {
        transform: scaleY(0);
		max-height: 0 !important;
    }
}
.dropdown-content {
	position: absolute;
	background-color: #ffffff;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 20;
	right: 0;
	padding: 10px;
	margin-top: 20px;
	height: auto;
	animation: growDown 300ms ease-in-out forwards;
    transform-origin: top center;
	overflow: hidden;
}

.dropdown-lists{
	max-height: 200px;
	overflow-y: auto;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 5px;
	padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /
}
.dropdown-list{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	white-space: nowrap;
}
.add-station-dropdown{
	min-width: 150px;
	cursor: pointer;
}
.dropdown-content-display{
	display: none;
}

.login-form-container{
	display: flex;
	height: 100%;
	width: 1000px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius: 5px;

}
.registration-form-container{
	display: flex;
	height: 100%;
	width: 1300px;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius: 5px;

}

.registration-image{
	flex: 35%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 100%;
	background-image: url("/images/register.jpg");
	background-repeat: no-repeat;
	background-position-x: center;
	background-size: cover;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.registration-form{
	flex: 65%
}

.login-image{
	flex: 50%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	height: 100%;
	background-image: url("/images/s2.png");
	background-repeat: no-repeat;
	background-position-x: center;
	background-size: cover;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.login-form{
	flex: 50%
}
.login-links{
	text-align: center;
}
.icon-input{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1px;
	justify-content: space-between;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #b2b2b2;
}
.icon-input2{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1px;
	justify-content: start;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #b2b2b2;
}
.icon-input input{
	border: none !important;
	border-radius: 0;
}
.icon-input input:focus{
	box-shadow: none !important;
	border-radius: 0;
}
.icon-input select{
	border: none !important;
	border-radius: 0;
}
.icon-input select:focus{
	box-shadow: none !important;
	border-radius: 0;
}
.icon-input i{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56.8px;
	height: 56.8px;
	z-index: 2;
}
.login-note{
	text-align: justify;
}
.input-helps:hover{
	box-shadow: 0 0 7px rgba(0,0,0,.4);
    border-color: #333;
	cursor: pointer;
}
.form-logo{
	height: auto;
	width: 400px;
}
#disclaimer{
	display: none;
}
.profile-title-heading{
	padding-left: 10px;
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: flex-end;
	font-size: 24px;
	font-weight: bold;
}
.profile-title{
	background-color: #f2f2f2;
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
	/* color: white; */
	padding: 10px;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}
.profile-settings{
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.profile-body{
	padding: 10px;
	margin-bottom: 10px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}
.station-tag-lists{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}

.station-tag {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	box-sizing: border-box;
	background-color: var(--wsu-color);
	color: var(--white);
	/* border-radius: 6px; */
	border: none;
	padding: 15px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: box-shadow .2s cubic-bezier(0, 0, .03, 1);
	gap: 10px;
}
.station-tag i{
	cursor: pointer;

}

.photo-reivew{
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.photo-approvals{
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
@media (max-width: 700px) {
	.login-form-container{
		flex-direction: column-reverse;
	}
	.login-image{
		border-top-left-radius: 0px;
		border-bottom-right-radius: 5px;
		flex: 100%;
		width: 100%;
		height: 200px;
	}
	.login-form{
		flex: 100%;
	}
	.registration-form-container{
		flex-direction: column;
	}
	.registration-image{
		border-top-right-radius: 0px;
		border-bottom-left-radius: 5px;
		flex: 100%;
		width: 100%;
		height: 200px;
	}
	.registration-form{
		flex: 100%;
	}
}

.page-controls-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.block-control{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
@media (max-width: 700px) {
	.block-control, .page-controls-top{
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
}

.alert-widgets{
	margin-top: 20px;
	--gap: 10px;
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(calc(50% - var(--gap)), 1fr));
	padding-bottom: 10px;
}
.alert-widget{
	padding: 10px;
	background-color: var(--light);
	display: flex;
    flex-direction: column;
    gap: 20px;
	border-radius: 5px;
}
.alert-widget-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.alert-widget-title{
	margin-left: 5px;
	font-size: x-large;
	font-weight: bold;
}
.alert-widget-body{
	height: 100%;
	width: 100%;
}
#no-alerts{
	min-height: 200px;
}
#no-alerts .alert-widget-body{
	font-size: x-large;
	display: flex;
    justify-content: center;
    align-items: center;
}
.input-hide{
	display: none;
}
.clickable{
	cursor: pointer;
}
.float-right{
	float: right;
}

.event{
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 10px;
}
.event-title{
	font-size: 2.725rem;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 1.125rem;
}
.event-title::after{
	display: block;
    content: "";
    height: .375rem;
    background-color: #a60f2d;
    width: 6.87rem;
    margin-top: 1.125rem;
}
.event-subtitle{
	font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}
.event-date-time{
	font-size: 1.225rem;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 0.75rem;
}
.event-export{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}
.event-details{
	padding: 15px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px;
}

.event-detail-title{
	font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.upcoming-events{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 50px;
}

.upcoming-event{
	display: flex;
	gap: 20px;
	align-items: flex-start;
	justify-content: flex-start;
}

.upcoming-event-date{
	min-width: 120px;
	min-height: 120px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.upcoming-event-month{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 40%;
	height: 100%;
	width: 100%;
	color: white;
	font-size: large;
	background-color: var(--wsu-color);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.upcoming-event-day{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size:xx-large;
	flex: 60%;
	height: 100%;
	width: 100%;
	color: var(--wsu-color);
	background-color: #f2f2f2;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.upcoming-event-title{
	font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35em;
    padding-bottom: 0.5em;
    color: #1a1a1a;
	display: flex;
	gap: 10px;
}
.upcoming-event-title::after{
	content: '';
    background-color: #021414;
    width: 25px;
    height: 5px;
    display: block;
    position: absolute;
    bottom: -5px;
    left: 0;
}
.upcoming-event-title{
	cursor: pointer;
}
.upcoming-event-subtitle{
    font-weight: 600;
	display: flex;
	gap: 10px;
}
.events-container{
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	justify-content: flex-start;
}
.search-events{
	display: flex;
	gap: 20px;
	align-items: flex-start;
	justify-content: flex-start;
}
.events-pagination{
	width: 100%;
	display: flex;
	gap: 50px;
	align-items: flex-start;
	justify-content: flex-start;
}

.pollen-model-summaries{
	align-items: flex-start;
	margin-top: 20px;
	margin-bottom: 20px;
	display: grid;
	max-width: 1500px;
	--min: 500px;
	column-gap: 10px; /* Gap between grid items */
	row-gap: 30px; /* Gap between grid items */
	grid-template-columns:  repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));

}

.pollen-model-summary{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	background-color: var(--light);
	padding: 10px;
	border-radius:  5px;
	height: 100%;
}
.pollen-model-summary-info{
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	gap: 10px
}
.pollen-model-summary-indicator, .pollen-model-summary-infos{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 100%;
}
.pollen-model-summary-infos{
	flex: 70%;
	justify-content: space-between;
	align-items: flex-start;
}

.key-values {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: row;
	width: 100%;
}


.key-values .key {
	font-weight: bold;
}

.key-values .value {
}

.page-controls-top-multiple-buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.block-control-multiple-buttons{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}
@media (max-width: 700px) {
	.page-controls-top-multiple-buttons{
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.block-control-multiple-buttons{
		align-items: flex-start;
		justify-content: flex-start;
	}
}

.pollen-model-block{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	width: 100%;
	gap: 30px;
}
.pollen-model-block-overview, .pollen-model-block-growth-rate, .pollen-model-block-gdd{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.pollen-model-block-overview{
	margin-top: 30px;
}

/* Media query for screens up to 768px */
@media (max-width: 786px) {
	.pollen-model-block-overview {
		flex-direction: column;
		padding: 10px;
	}
}


.pollen-model-block-growth-rate, .pollen-model-block-gdd{
	background-color: var(--light);
	display: flex;
	border-radius:  5px;
	padding: 10px;
	flex-direction: column;
	justify-content: flex-start;
}
.pollen-model-block-overview-info, .pollen-model-block-overview-map{
	display: flex;
	justify-content: center;
	align-items: center;
	flex:50%;
	padding: 10px;
	background-color: var(--light);
	border-radius:  5px;
	height: 100%;
	width: 100%;
}
.pollen-model-block-overview-info{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	height: 100%;

}

.pollen-model-block-select{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 50px;
	width: 100%;
}
.pollen-model-block-select-dropdown{
	width: 150px;
}
.pollen-model-block-display{
	display: flex;
	flex-direction: column;
	width: 100%;
}


.select2-selection, .select2-selection__rendered {
    height: 56.8px !important;
    line-height: 56.8px !important;
}
.select-refresh-block{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.NMScontainer{
  width: 85px; 
  z-index: 1; 
  margin: 5px;
  cursor: pointer;
  text-align: left;
  z-index: 0;
}

.NMSdropDownControl{
    direction: ltr; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    text-align: left; 
    position: relative; 
    -webkit-user-select: none; 
    font-family: Roboto,Arial,sans-serif; 
    font-size: 16px; 
  /*  padding-top: 1px; 
    padding-right: 6px; 
    padding-bottom: 1px; 
    */
    border-top-width: 1px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-top-style: solid; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-top-color: rgb(113, 123, 135); 
    border-right-color: rgb(113, 123, 135); 
    border-bottom-color: rgb(113, 123, 135); 
    border-left-color: rgb(113, 123, 135); 
    border-image: initial; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    color: rgb(0, 0, 0); 
    padding-left: 6px; 
    background-image: initial; 
    background-attachment: initial; 
    background-origin: initial; 
    background-clip: initial; 
    background-color: rgb(255, 255, 255); 
    background-position: initial initial; 
    background-repeat: initial initial;     
    z-index: 2;
 	 	padding : 0 5px;
    /*
  backgroundColor : #fff;
  border : 2px solid #fff;
  borderRadius : 3px;
  boxShadow : 0 2px 6px rgba(0,0,0,.3);
  color : rgb(25,25,25);
  cursor : pointer;
  lineHeight : 38px;
  margin : 8px 0 22px;
  textAlign : center;
*/
}   

.NMSdropDownArrow{
    -webkit-user-select: none; 
    border-width: 0px; 
    border-style: initial; 
    border-color: initial; 
    border-image: initial; 
    padding: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    position: absolute; 
    right: 6px; 
    top: 50%;
    margin-top: -2px; 
    width: 7px; 
    height: 4px; 
}

.NMSdropDownOptionsDiv{
    background-color: white; 
    z-index: 0; 
    padding-top: 2px; 
    border-right-width: 1px; 
    border-bottom-width: 1px; 
    border-left-width: 1px; 
    border-right-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-right-color: rgb(113, 123, 135); 
    border-bottom-color: rgb(113, 123, 135); 
    border-left-color: rgb(113, 123, 135); 
    border-image: initial; 
    border-top-width: 0px; 
    border-top-style: initial; 
    border-top-color: initial; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px; 
    position: relative; 
    text-align: left; 
    display: none;
}

.NMSdropDownItemDiv{
    font-family: Arial, sans-serif; 
    -webkit-user-select: none; 
    font-size: 13px; 
    padding-top: 2px; 
    padding-right: 5px; 
    padding-bottom: 3px; 
    padding-left: 5px; 
    background-color: rgb(255, 255, 255); 
    color: black;       
}
.NMSdropDownItemDiv:hover, .checkboxContainer:hover{
    background-color: rgb(235, 235, 235);       

}
.NMSdropDownControl:hover{
    background: -webkit-linear-gradient(top,rgb(255,255,255),rgb(230,230,230));


}
.NMSseparatorDiv{
    margin-top: 1px; 
    margin-right: 0px; 
    margin-bottom: 1px; 
    margin-left: 0px; 
    border-top-width: 1px; 
    border-top-style: solid; 
    border-top-color: rgb(235, 235, 235); 
}
.NMScheckboxContainer{
    font-family: Arial, sans-serif; 
    -webkit-user-select: none; 
    font-size: 11px; 
    padding-top: 1px; 
    padding-bottom: 3px; 
    padding-left: 5px; 
    direction: ltr; 
    text-align: left; 
    background-color: rgb(255, 255, 255); 
    white-space: nowrap; 
    padding-right: 8px; 
    color: rgb(0, 0, 0); 
}       
.NMScheckboxSpan{
    box-sizing: border-box; 
    position: relative; 
    line-height: 0; 
    font-size: 0px; 
    margin-top: 0px; 
    margin-right: 5px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    display: inline-block; 
    background-color: rgb(255, 255, 255); 
    border-width: 1px; 
    border-style: solid; 
    border-color: initial; 
    border-image: initial; 
    border-top-left-radius: 1px; 
    border-top-right-radius: 1px; 
    border-bottom-right-radius: 1px; 
    border-bottom-left-radius: 1px; 
    width: 13px; 
    height: 13px; 
    vertical-align: middle; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    border-color: rgb(198, 198, 198);       
}


.NMSblankDiv{
    position: absolute; 
    left: 1px; 
    top: -2px; 
    width: 13px; 
    height: 11px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    display: none; /*when = block -> this is the "check" symbol*/ 
}

.NMSblankImg{
    position: absolute; 
    left: -52px; 
    top: -44px; 
    -webkit-user-select: none; 
    border-width: 0px; 
    border-style: initial; 
    border-color: initial; 
    border-image: initial; 
    padding: 0px; 
    margin: 0px; 
    -webkit-user-drag: none; 
    width: 68px; 
    height: 67px; 
}

.NMScheckboxLabel{
    vertical-align: middle; 
    cursor: pointer;
}

/* The Modal (background) */
.NMSmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 4222; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.NMSmodal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.NMSclose {
  color: rgb(255,255,255);
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.NMSclose:hover,
.NMSclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* Modal Header */
.NMSmodal-header {
  padding: 2px 16px;
  background-color: rgb(166, 15, 45);
  color: white;
	font-size:28px;
}

/* Modal Body */
.NMSmodal-body {padding: 2px 16px;}

/* Modal Footer */
.NMSmodal-footer {
  padding: 2px 16px;
  background-color: rgb(166, 15, 45);
  color: white;
}

/* Modal Content */
.NMSmodal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

#googleMap_container{
min-height: 300px;
height:600px;
max-height:90%;
width: auto;
margin-right: 10px;
position: relative;
overflow: hidden;
}

.nms-body-content{
	/* height:90vh; */
}
#NMSgoogleMap_container{
min-height: 300px;
height:80vh;
width: 99%;
margin-right: 0px;
position: relative;
overflow: hidden;
}

.NMScontent_container{
min-height: 300px;
height:100%;
width: 100%;
margin-right: 0px;
position: relative;
}
.nmsMap{
position:absolute;
width:100%;
height:100%;
min-height: 300px;
max-height:100%;
}