﻿
#navheader {
    max-width: 92%;
	padding: 0px 0px 0px 0px !important; /*ECY NEW*/
}

.leftFilter{
	background:#455818;
}

.kmlListMonitors {
    width: 146px;
    top: 82px;
}

#appheader #title {
display:none;	
}/* ecy*/

.page .titlePageH1 {
	background: #81b5cf !important;
	}

h1 span{
	display:none;
}

p, ul {
	line-height: 16px !important;
}

.k-content .k-state-active #indexValueBox{
	visibility: hidden !important;
}

#content .ListPages .SitemapList a[href^="/Account/LogOn"] {
	display: none !important
}/* remove Login from Web Site Map page ECY 2022/11/22 */

.k-animation-container .k-list-container[id="pageNavigationMenuSelect-list"] .k-list-scroller ul.k-list li.k-item:nth-child(13){
	display:none !important;	
}/* remove Login from Accessibility Menu ECY 2022/11/22 */

.k-primary[value="Clear Filters"], .k-primary.k-state-hover, .k-primary:hover[value="Clear Filters"] , .k-primary.k-state-focus, .k-primary:focus[value="Clear Filters"], .k-primary.k-state-active, .k-primary:active[value="Clear Filters"]{
	border-color: #b5b5b5;
    background-color: #757575;
	box-shadow: 0 0 3px 0 #b5b5b5;
}/* ECY Remove orange button color for the AQI Index report 5/10/2022*/

.coverMonitors {
    float: left;
	width: auto;
	overflow: -moz-hidden-unscrollable !important;
}

.map .logo-med:hover {
	border-radius: 6px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#mapDiv #mapDiv_root .esriControlsBR .esriAttribution, 
#mapDiv #mapDiv_root .esriControlsBR .esriAttribution .esriAttributionList .esriAttributionLastItem {
	background: transparent !important;
	visibility: hidden !important;
}

#mapDiv {
	height:70vh !important;
}

.map .esriMapContainer {
   cursor: pointer !important;
}/*ECY*/

.aqi-#000000 {
    background-color: #00E400;
}

.aqi-yellow {
    background-color: #FFFF00;
}

.aqi-orange {
    background-color: #FF7E00;
    color: #FFFFFF;
}

.aqi-red {
    background-color: #FF0000;
    color: #FFFFFF;
}

.aqi-purple {
    background-color: rgb(143, 63, 151);
    color: #FFFFFF;
}

.aqi-maroon {
    background-color: #7E0023;
    color: #FFFFFF;
}

table.gridtable th {
    border-width: 1px;
    padding: 10px;
    border-style: solid;
    border-color: #FFF;
    background-color: #E1EBF4;
    color: #005E9E;
}

#accessContainerWrapper{
right:-432px;
left:auto !important;	

}

body {
    background:#ffffff !important;
	overflow-x:hidden;
}

ul.ulClass {
    padding: 17px;
    list-style: thai;
}

ul.ulClass li{
	list-style:inside !important;
	padding:2px;
}

a[href^="mailto:"] {
    padding-right: 20px!important;
    background: transparent url(../img/icon_mailto.gif) no-repeat center right;
}

#masthead{
    border-bottom:none;
    min-height:39px !important;
	background-color: #234F78!important;
}

#Noise_Monitoring_Program{
	display:None;
    text-align: center;
    font-size: 25px;
    padding: 8px;
}

#originalZoom{
	top:5px !important;
}

#originalZoom  img{
	width:45px !important;
}

#originalZoom  img:hover{
	opacity: 0.7 !important;
	background-color:#ffffff !important;
	border-radius: 6px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#agZoomToolbar #agZoomIn-button:focus, #agZoomIn-button:hover, #agZoomOut-button:focus, #agZoomOut-button:hover {
	background-color: #ffffff !important;
	color: #000000 !important;
	border-radius: 6px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#floatingMenuContainer {
	position: absolute !important;
    top: 5px !important;
}

#openCloseStationListIcon{
right:-33px;
	left:auto !important;
}

.stationNameItem:focus{
	font-weight:bold
}

#stationsPageContainerWrapper{
	right:33px;
	top:20px !important;
	left:auto !important;
}

#openCloseStationListIcon:hover{
	opacity: 0.6 !important;
	background: #ffffff !important;
	color: #000000 !important;
	border-radius: 6px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#stationsPageContainerWrapper img{
	width:45px !important;
	height:45px !important;
}

#childPageLink ul{
	display: none;
}

#childPageLink a{
	display: none;
}

#stationsPageContainerWrapper .stationNameAndIndexValueBox  {
	color: #000000 !important;
	padding-top: 10px;
	padding-bottom: 10px;
}

#stationsPageContainerWrapper .stationNameAndIndexValueBox .indexValueItem{
	font-size: 14px !important;
	font-weight: 600 !important;
}

#stationsPageContainerWrapper .stationNameAndIndexValueBox span[style="background-color: rgb(0, 136, 204); color: black;"]{
	color: #ffffff !important;
}

#mapDiv_layers #stations_layer circle[fill="rgb(0, 136, 204)"] ~text{
	font-size: 12px !important;
}


#mapDiv_layers #stations_layer circle[fill="rgb(0, 136, 204)"]{
	background: url(../img/MobileMonitor.svg) !important;	
}

#stationsPageContainerWrapper .stationNameAndIndexValueBox .stationNameItem:focus, .stationNameItem:hover{
	border-radius: 3px !important;
	font-weight:bold;
	border: 1px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 1px !important;
}

#stationsPageContainerWrapper #stationsPageContainer #stationsBody #stationsheader #stationsPanel-heading {
	font-size: 18px;
	font-weight:bold;
	padding-left: 20px;
}

body .page #main form .Content {
	background: none repeat scroll 0 0 #DCDBDE !important; /* ECY */
}

.contentPane table tr:nth-child(2n+1) {
    background: none repeat scroll 0 0 #f7f7f7;  /* ECY */
}

.footerDiv a:link,.footerDiv a:visited{
	color: #000000 !important; /* ECY */
}

.footerDiv .UpdateDate{
	visibility: hidden !important; /* ECY */
}

.footerDiv a:link{
	color: #000000 !important; /* ECY */
}

.logOnOfli.lengInMenu { /* ECY */
  float: right;
  position: absolute;
  top: 50px;
  font-size: 14px;
  right: 100px;
}

.subres {
    background: none repeat scroll 0 0 rgb(255, 255, 255);  /* ECY */
}

ul.slimmenu li .sub-collapser > i{
	display:none !important;
}

#navheader ul.slimmenu > li.menuLi.rightInMenu  {
    border-left: 0;
    display: none !important;
}/*ECY NEW Login option*/

  ul#menu li div {
    font-size: 16px;  /* ECY */
}

/*#navheader{
    padding:0px 4px 0px 3px !important;
}*/ /*ECY NEW Remove*/

#select-reportview {
	margin-left: 35px !important;
    margin-right: 35px !important;
}/*ECY NEW*/

.classicReportStyle #selectReportPresentation {
    margin-left: 25px !important;
    margin-right: 25px !important;
}/*ECY NEW*/

.classicReportStyle .k-state-active{
	background-color: #e9e9e9 !important;
}

#stationFilter {
	width: 40% !important; 
}

/*#wrapper3 {
	width: 50% !important; 
}*/ /*ECY NEW Remove*/

#wrapper3 .LinedArea{
	width: 100% !important; 
}

#wrapperImage {
	display: none; 
}

.k-button-group .k-button {
    color: black !important;
	border-radius: inherit !important; /*ECY NEW*/
}

#select-reporttime-period {
	display: none;
}

.stationFiltesLabel[for="select-reporttime-period"]{
	display: none !important;
}

#ButtonsIndexesArea:hover {
    border-radius: 6px !important;
	border: 1px solid transparent !important;
    border-top-color: transparent !important;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-right-color: transparent !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-bottom-color: transparent !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-left-color: transparent !important;
    border-left-style: solid !important;
    border-left-width: 1px !important;
}

#ButtonsIndexesArea span {
    border-width: 8px 14px 6px !important;
	height: 2px !important;
}	

.Content .DataTable[role="grid"] tbody tr td:nth-child(2)[style] {
	background: none !important;
}/*ECY background color for AQI background color to none in AQI 24 HR Index report*/

#grid table[role="grid"] tbody[role="rowgroup"] td[role="gridcell"] div{
	background: none !important;
}/*ECY background color for AQI background color to none in AQI current Index report*/

#LastDataTable tbody[role="rowgroup"] td[role="gridcell"] span{
	background: none !important;
}/*ECY background color for polution band column when selected is the state for StaionInfo popup, Go to Site Info, "Last Data" tab*/

#ButtonsIndexesArea  {
	top: 200px !important;
	width: 210px;
	padding-top: 10px !important;	
}

#reportFormContainer .k-button{
background:#e9e9e9;
}

.reportContainerWrapper #reportFormContainer .k-button.k-state-active{
color: #000000 !important;
box-shadow: inset 0 0 4px 4px #9f9f9f
}

.k-button:hover{
	background-color: #e9e9e9 !important;
	box-shadow: inset 0 0 2px 2px #9f9f9f
}

#singleStationReportFormContainer .k-button{
color:black !important;
}

.LeftArrow{
	display:none !important;
}

.RightArrow{
	display:none !important;
}

#indexes {
    padding: 2px 0px;  
    width: 210px; 
    margin-left: 15px; 
}/* ECY */

.IndexListDiv .IndexListName{
	margin-top: 86px !important;
	margin-left: -15px !important;
}

#IndexList{
     margin-left: 10px;  /* ECY */
}

.liValList .colorName {
	width: 150px;
	font-size: 12px;
	line-height: 1.1;
}

#IndexList li:nth-child(7){
	display: none !important;
}

#IndexList li:nth-child(1) .colorName:after{
	content: " (0-50)";
}

#IndexList li:nth-child(2) .colorName:after{
	content: " (51-100)";
}

#IndexList li:nth-child(3) .colorName:after{
	content: " (101-150)";
}

#IndexList li:nth-child(4) .colorName:after{
	content: " (151-200)";
}

#IndexList li:nth-child(5) .colorName:after{
	content: " (201-300)";
}

#IndexList li:nth-child(6) .colorName:after{
	content: " (301-500)";
}

#IndexList li:nth-child(8) .colorName:after{
	content: " (----)";
}

#IndexList li:nth-child(1) .ColorVal[title="Current Data"] + div.colorName:after{
	content: " (0-200)";
}

#IndexList li:nth-child(2) .ColorVal[title="No Current Data"] + div.colorName:after{
	content: " (----)";
}

#IndexList li:nth-child(1) .ColorVal[title="Site(s) available"] + div.colorName:after{
	display: none !important;
}

#appheader{
    height: 100%; /* ECY */
	padding: 0.0em; /* ECY */
	display: none;  /* ECY */
}

.EnvelopeDiv{
	height: 100%;
}

.EnvelopeDiv #title{ 
	display:none;	/* ECY */ 
}

#LogoSystemNameLeft {
    max-height: 100%; /* ECY */
	width: 100%;
	padding: 0px 0px;
}

 #LogoSystemNameLeft:hover { 
	 background-color: #ffffff; 
	 opacity: .7; 
	 z-index:10; 
	 padding: 0px 4px 0px 4px;	 
     border-top-color: white !important; 
     border-top-style: solid !important; 
     border-right-color: white !important; 
     border-right-style: solid !important; 
     border-bottom-color: white !important; 
     border-bottom-style: solid !important; 
     border-left-color: white !important; 
     border-left-style: solid !important; 
} /* ECY */

#AqBanner:hover{
	background-color: #ffffff;
	opacity: .7;
	z-index:10;
	padding: 0px 4px 0px 4px;
    border-top-color: white !important;
    border-top-style: solid !important;
    border-right-color: white !important;
    border-right-style: solid !important;
    border-bottom-color: white !important;
    border-bottom-style: solid !important;
    border-left-color: white !important;
    border-left-style: solid !important;
}/* ECY */

#LogoSystemNameRight:hover {
	background-color: #ffffff;
	opacity: .7;
	z-index:9;
	padding: 0px 4px 0px 4px;
    border-top-color: white !important;
    border-top-style: solid !important;
    border-right-color: white !important;
    border-right-style: solid !important;
    border-bottom-color: white !important;
    border-bottom-style: solid !important;
    border-left-color: white !important;
    border-left-style: solid !important;
} /* ECY */

#Noise_Monitoring_Program:before { 
		content: "Air Quality Telemetry System";
}/*ECY*/

#topPageTitle {/* ECY */
    background: #FFFFFF none repeat scroll 0 0 !important;  
}
  
footer {
    background:#ffffff; /* ECY */
    color:white;
}/* ECY */

input[type="submit"] {
    background-color: white; /* ECY */
}/* ECY */

.footerDiv {
    padding: 0px;
}/* ECY */

.labels {
    margin-top:-32px !important;
}/* ECY */

#ListMeterology li.IndexClicked, .theList input.IndexClicked, .theList li:hover, .theList li:focus {
	background: #0080ff !important;
	color: #ffffff !important;
	border: 1px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 1px !important;
}

#stationsBox ul li.k-item.k-state-selected {
	background-color:#0066cc; border-color: #66ccff;
}/* ECY */

.theList input:hover, .theList input:focus{
	background-color: #ffffff !important;
	color: #000000 !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}/* ECY */

 .theList input:hover, .theList input:focus, .IndexClicked {
	border-radius: 6px !important;
}/* ECY */

#ListMonitors {
    margin-top: 2px;
}/* ECY */

#ListMonitors #buttons {
   margin-left: 10px !important;
   color: transparent !important;
}/* ECY */

#stationInfoPopup.k-widget.k-window.focusable-element{
	min-width: 900px !important;
}

#ListMonitors #buttons select:hover, select:focus {
	border: 2px solid black !important;
	border-radius: 6px !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}/* ECY */

#ListMonitors #buttons select{
	background-color: #ffffff !important;
	color: #000000 !important;
	width: 150px !important;
}/* ECY */
	
#stationsLayer > text{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight:600;
}

#stationsPageContainer #sortButtons button {
    background: #234F78  !important;
	font-weight: bold;
}/* ECY */

#sectionsContainerBody #section_WindDirectionGauge {
	overflow-x: auto !important;
    overflow-y: auto !important;
	touch-action: auto !important;
}

#sectionsContainerBody #section_WindSpeedGauge {
	overflow-x: auto !important;
    overflow-y: auto !important;
	touch-action: auto !important;
}

#sectionsContainerBody #section_StationInfo {
	overflow-x: auto !important;
    overflow-y: auto !important;
	touch-action: auto !important;
}

#sectionsContainerBody #section_IndexGauge {
	overflow-x: auto !important;
    overflow-y: auto !important;
	touch-action: auto !important;
	padding-top: 0px !important;/*NEW*/
}

#sectionsContainerBody #indexLevelContainer #IndexLevelDateTimeBox {
   	position: static;
}/*NEW*/

#sectionsContainerBody #indexLevelContainer {
	margin-top: 20px !important; 
}/*NEW*/

#sectionsContainerBody #section_StationInfo {
    height: 290px !important;
}/*NEW edit 10/28/2020*/ 	

#section_MonitorGraph_70 {
	overflow-x: auto !important;
    overflow-y: auto !important;
	touch-action: auto !important;
}

#section_MonitorGraph_71 {
	overflow-x: auto !important;
    overflow-y: auto !important;
	touch-action: auto !important;
}

#section_MonitorGraph_72 {
	overflow-x: auto !important;
    overflow-y: auto !important;
	touch-action: auto !important;
}

#sectionsContainerBody #monitorGraphContainer70 #monitorGraph70 {
	touch-action: auto !important;
}

#sectionsContainerBody #monitorGraphContainer71 #monitorGraph71 {
	touch-action: auto !important;
}

#sectionsContainerBody #monitorGraphContainer72 #monitorGraph72 {
	touch-action: auto !important;
}

@media only screen and (max-width:785px) {
	#stationsPageContainer {
    width: 200px !important;
	}
	#stationsPageContainerWrapper {
    z-index: 2 !important;
	}
	#stationsPageContainerWrapper .stationNameAndIndexValueBox {
    padding-top: 0.8em !important;
    padding-bottom: 0.8em !important;
	}/* Added for IOS formating */
	#navheader > div.menu-collapser {
    font-size: 0px;
	padding-left: 0px;
	text-align: right !important;
	} /* ECY fix to remove "topTitle" from hamburger menu bar */ 
	#navheader > div.menu-collapser:after {
    font-size: 14px;
	padding-right:4px;
	content: "Menu"; 
	} 
	#navheader > div.menu-collapser > div.collapse-button .icon-bar {
	height: 5px !important;
	} 
	#indexes {
    width: 210px !important;
	}
	.liValList .colorName {
    width: 150px !important;
	}
	#ButtonsIndexesArea {
    /*top: 120px !important;*/
	z-index: 1 !important;
	}
	#ButtonsIndexesArea span {
	z-index: 1 !important;
	}
	#agZoomToolbar{
 	z-index: 1 !important;
	}
}/* ECY*/

.k-content #chart {
    touch-action: auto !important;
}

.k-content #chart svg g path[fill="#99004C"]{
    fill: #8F3F97! important;
}

#stationInfoBox #InfoCover #chart svg g path[fill="#99004C"]{
    fill: #8F3F97 !important;
}

#chart_All.k-chart.k-content.k-state-active {
    touch-action: auto !important;
}

#chart_All svg{
	height: 620px !important;
}

input#DateMax.k-input {
    padding: 1.18em 0;
}

#searchStationInput {
    -webkit-user-select: text; /* iOS Safari */
		-webkit-user-select: text; /* Safari */
			-khtml-user-select: text; /* Konqueror HTML */
				-moz-user-select: text; /* Old versions of Firefox */
					-ms-user-select: text; /* Internet Explorer/Edge */
	user-select: text;/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
} /*ECY fix for IOS text inputs */

#stationsPageContainer #stationsheader input#searchStationInput:focus, input#searchStationInput:hover {
	background-color: #ffffff !important;
	color: #000000 !important;
	border-radius: 4px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
	font-weight: bold;
} /*ECY */

#stationsPageContainer #sortButtons button.sortStationButton:focus, #stationsPageContainer #sortButtons button.sortStationButton:hover {
	background-color: #ffffff !important;
	color: #000000 !important;
	border-radius: 6px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
	font-weight: bold;
} /*ECY */

ul.slimmenu li ul li {
    background: #234F78 !important;
    font-weight:600;
}/* ECY */

ul#menu li.menuLi a:hover, ul#menu ul li.menuLi a:hover, ul#menu li.menuLi .nameMenu:hover, ul#menu li.menuLi a:focus, ul#menu ul li.menuLi a:focus, ul#menu li.menuLi .nameMenu:focus {
    background: #ffffff !important;
    color: #000000 !important;
    outline: 1px solid black;
	border-radius: 6px !important;
}/* ECY */

#Top_Content {
    background: #81b5cf !important;
    padding: 10px;
    color: #000000 !important;
    font-weight: 600 !important;
    letter-spacing: 0.6pt;
}/* ECY */

h2 {
    background: #81b5cf !important;
    color: #000 !important;
	padding-bottom: 10px;
}

@media (max-width:785px) {
  ul#menu > li.menuLi:nth-child(1), ul#menu > li.menuLi:nth-child(5) {
    display:none !important;
  }
}

.display {
    display: table !important;
  }/*NEW*/

#menu > li.menuLi.selected > a, 
#menu > li:nth-child(3) > div, 
#menu > li:nth-child(3) > ul > li:nth-child(1) > a,
#menu > li:nth-child(3) > ul > li:nth-child(2) > a,
#menu > li:nth-child(3) > ul > li:nth-child(3) > a,
#menu > li:nth-child(3) > ul > li:nth-child(4) > a,
#menu > li:nth-child(3) > ul > li:nth-child(5) > a,
#menu > li:nth-child(3) > ul > li:nth-child(6) > a,
#menu > li:nth-child(3) > ul > li:nth-child(7) > a,
#menu > li:nth-child(3) > ul > li:nth-child(8) > a,
#menu > li:nth-child(3) > ul > li:nth-child(9) > a,
#menu > li:nth-child(3) > ul > li:nth-child(10) > a,
#menu > li:nth-child(3) > ul > li:nth-child(11) > a,
#menu > li:nth-child(3) > ul > li:nth-child(12) > a,
#menu > li:nth-child(3) > ul > li:nth-child(13) > a,
#menu > li:nth-child(3) > ul > li:nth-child(14) > a,
#menu > li:nth-child(3) > ul > li:nth-child(15) > a,
#menu > li:nth-child(3) > ul > li:nth-child(16) > a,
#menu > li:nth-child(3) > ul > li:nth-child(17) > a,
#menu > li:nth-child(4) > a,
#menu > li:nth-child(5) > a,
#menu > li:nth-child(6) > a,
#menu > li:nth-child(5) > ul > li:nth-child(1) > a,
#menu > li:nth-child(5) > ul > li:nth-child(2) > a,
#menu > li:nth-child(5) > ul > li:nth-child(3) > a,
#menu > li:nth-child(5) > ul > li:nth-child(4) > a,
#menu > li:nth-child(5) > ul > li:nth-child(5) > a,
#menu > li:nth-child(5) > ul > li:nth-child(6) > a,
#menu > li:nth-child(5) > div,
#menu > li:nth-child(2) > a,
#menu > li.menuLi.rightInMenu > a, 
#menu > li:nth-child(3) > ul > li:nth-child(3) > a{
    font-size: 16px !important;
}/* ECY */

#menu > li:nth-child(3) > ul > li:nth-child(2) > a:hover, 
#menu > li:nth-child(3) > ul > li:nth-child(2) > a:hover,
#menu > li.menuLi.selected > a:hover, 
#menu > li:nth-child(3) > div:hover, 
#menu > li:nth-child(3) > ul > li:nth-child(1) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(2) > a:hover
#menu > li:nth-child(3) > ul > li:nth-child(3) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(4) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(5) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(6) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(7) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(8) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(9) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(10) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(11) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(12) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(13) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(14) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(15) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(16) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(17) > a:hover,
#menu > li:nth-child(4) > a:hover,
#menu > li:nth-child(5) > a:hover,
#menu > li:nth-child(6) > a:hover,
#menu > li:nth-child(5) > ul > li:nth-child(1) > a:hover,
#menu > li:nth-child(5) > ul > li:nth-child(2) > a:hover,
#menu > li:nth-child(5) > ul > li:nth-child(3) > a:hover,
#menu > li:nth-child(5) > ul > li:nth-child(4) > a:hover,
#menu > li:nth-child(5) > ul > li:nth-child(5) > a:hover,
#menu > li:nth-child(5) > ul > li:nth-child(6) > a:hover, 
#menu > li.menuLi.selected > a:hover,
#menu > li.menuLi.HaveChild.selected > ul > li:nth-child(3) > a:hover, 
#menu > li:nth-child(2) > a:hover, #menu > li.menuLi.HaveChild.selected > div,
#menu > li.menuLi.selected > a,
#menu > li.menuLi.rightInMenu > a:hover, #menu > li:nth-child(3) > ul > li:nth-child(3) > a:hover,
#menu > li:nth-child(3) > ul > li:nth-child(2) > a:focus, 
#menu > li:nth-child(3) > ul > li:nth-child(2) > a:focus,
#menu > li.menuLi.selected > a:focus, 
#menu > li:nth-child(3) > div:focus, 
#menu > li:nth-child(3) > ul > li:nth-child(1) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(2) > a:focus
#menu > li:nth-child(3) > ul > li:nth-child(3) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(4) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(5) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(6) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(7) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(8) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(9) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(10) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(11) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(12) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(13) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(14) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(15) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(16) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(17) > a:focus,
#menu > li:nth-child(4) > a:focus,
#menu > li:nth-child(5) > a:focus,
#menu > li:nth-child(6) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(1) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(2) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(3) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(4) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(5) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(6) > a:focus, 
#menu > li.menuLi.selected > a:focus,
#menu > li.menuLi.HaveChild.selected > ul > li:nth-child(3) > a:focus, #menu > li:nth-child(2) > a:focus, 
#menu > li.menuLi.HaveChild.selected > div:focus,
#menu > li.menuLi.selected > a:focus,
#menu > li.menuLi.rightInMenu > a:focus, #menu > li:nth-child(3) > ul > li:nth-child(3) > a:focus
#menu > li:nth-child(3) > ul > li:nth-child(2) > a:focus, 
#menu > li:nth-child(3) > ul > li:nth-child(2) > a:focus,
#menu > li.menuLi.selected > a:focus, 
#menu > li:nth-child(3) > div:focus, 
#menu > li:nth-child(3) > ul > li:nth-child(1) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(2) > a:focus
#menu > li:nth-child(3) > ul > li:nth-child(3) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(4) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(5) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(6) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(7) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(8) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(9) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(10) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(11) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(12) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(13) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(14) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(15) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(16) > a:focus,
#menu > li:nth-child(3) > ul > li:nth-child(17) > a:focus,
#menu > li:nth-child(4) > a:focus,
#menu > li:nth-child(5) > a:focus,
#menu > li:nth-child(6) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(1) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(2) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(3) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(4) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(5) > a:focus,
#menu > li:nth-child(5) > ul > li:nth-child(6) > a:focus, 
#menu > li.menuLi.selected > a:focus,
#menu > li.menuLi.HaveChild.selected > ul > li:nth-child(3) > a:focus, 
#menu > li:nth-child(2) > a:focus, 
#menu > li.menuLi.HaveChild.selected > div:focus,
#menu > li.menuLi.selected > a:focus,
#menu > li.menuLi.rightInMenu > a:focus, 
#menu > li:nth-child(3) > ul > li:nth-child(3) > a:focus,
#menu > li:nth-child(5) > div:focus,
#LogoSystemNameRightDiv > div > a:focus,
#LogoSystemNameLeftDiv > div > a:focus,
#LogoSystemNameLeftDiv > a:focus,
#LogoSystemNameRightDiv > a:focus, #LogoSystemNameRightDiv > a > div:focus

#ListPollutant, #ListMeterology, #List2Index{
    height: auto !important;
}/* ECY */

#pollutantList #ListPollutant {
    height: 45px !important;
}
	
.k-panelbar>li.k-state-default>.k-link, .k-tabstrip-items .k-state-default .k-link {
    font-weight: 500;
}/* ECY */

.k-window-titlebar, .k-button {
    border-color: #234f78 !important;
    font-weight: 400 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    color: #ffffff !important;
}/* ECY */

.k-window-titlebar{
   background-color: #113f80 !important;
}/* ECY */

.CostumGraphReport .k-button{
    background: #234f78 !important;
}

.CostumGraphReport .k-button:hover, .CostumGraphReport .k-button:focus{
    background: #3673dd !important;
} 

button.export-svg.k-button:focus, button.export-img.k-button:focus {
    border-color: #000000 !important;
}/* ECY */

#accessContainer {
	z-index:12;
	min-height: 565px;
}

#accessibilityIcon:hover, #accessibilityIcon:focus {
    opacity: 0.6 !important;
	z-index:12;
	background: #ffffff !important;
	color: #000000 !important;
	border-radius: 6px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#topPageTitle #Top_Content .serchDiv input:focus-within{/* ECY */
	border: 2px solid #000000 !important;
}/* ECY */

#wrapper2 #selectWrapper #buttonsWrapper input {
	border-color: #000000 !important;
    background-color: #c5c5c5 !important;
	color: #000000 !important;
}/* ECY */

#leftFilter .LinedArea .k-checkbox-label::before{
	color: #000000 !important;
}

#wrapper3 #selectWrapper #buttonsWrapper input {
	border-color: #000000 !important;
    background-color: #c5c5c5 !important;
	color: #000000 !important;
}/* ECY */

#wrapper3 #selectWrapper #buttonsWrapper input[value=Cancel] {
    background-color: #e9e9e9 !important;
}/* ECY */

#wrapper3 #selectWrapper #buttonsWrapper input[value=Cancel]:hover {
    background-color: #c5c5c5 !important;
	box-shadow: inset 0 0 2px 2px #9f9f9f
}/* ECY */

#wrapper3 #selectWrapper #buttonsWrapper input[value=Display] {
	background-color: #e9e9e9 !important;
	color: #000000 !important;
	box-shadow: inset 0 0 4px 4px #9f9f9f
}/* ECY */

#wrapper4 #buttonsWrapper input {
	border-color: #000000 !important;
    background-color: #e9e9e9 !important;
	color: #000000 !important;
}/* ECY */

#wrapper4 #buttonsWrapper input[value=Display] {
	box-shadow: inset 0 0 4px 4px #9f9f9f
}/* ECY */

ul#menu li.selected .nameMenu, ul#menu li.selected a, #menu > li.menuLi.selected{
    border-color: #000000 !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	background-color: #0080ff !important;
}/* ECY */

.Content #leftFilter .inputsfilter input {
	color: #ffffff !important;
	border-color: #000000 !important;
    background-color: #0088cc !important;
}

.Content #leftFilter input[type=button] {
	border-color: #000000 !important;
    background-color: #c5c5c5 !important;
	color: #000000 !important;
}

.Content .CostumGraphReport #leftFilter .inputsfilter #MonitorSel {
	color: #000000 !important;
}

.Content .CostumGraphReport h2 {
	    margin: 0 !important;
        margin-top: 2px  !important;
        margin-right: 0px  !important;
        margin-bottom: 2px  !important;
        margin-left: 0px  !important;
}

#content.haveMenu {
	    margin: 0 !important;
        margin-top: 2px  !important;
        margin-right: 0px  !important;
        margin-bottom: 2px  !important;
        margin-left: 0px  !important;
}

.reportContainerWrapper {
	margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.reportContainerWrapper #reportContentContainer {
	min-height: 665px !important;
	height: 665px !important;
}	

#singleStationReportContainer #leftFilter {
	top: 12px !important;
}

h2.ReportH2 {
	    margin: 0 !important;
        margin-top: 2px  !important;
        margin-right: 0px  !important;
        margin-bottom: 0px  !important;
        margin-left: 0px  !important;
}

h2#headingPage {
	    margin: 0 !important;
        margin-top: 0px  !important;
        margin-right: 0px  !important;
        margin-bottom: 0px  !important;
        margin-left: 0px  !important;
}

#stationsPageContainer h2#headingPage {
	    margin: 0 !important;
        margin-top: 0px  !important;
        margin-right: 0px  !important;
        margin-bottom: 0px  !important;
        margin-left: 0px  !important;
		min-width: 1090px !important;
}

#stationsPageContainer #stationInfoBox #InfoCover {
	min-width: 800px !important;
}

.Content .CostumGraphReport #leftFilter .inputsfilter #StationMonitor {
	color: #000000 !important;
}

.Content .CostumGraphReport #leftFilter .inputsfilter #StatisticType {
	color: #000000 !important;
}

ul#menu li.selected a, ul#menu li.selected a {
    background-color: initial !important;
    font-weight:600;
}/* ECY */

.grapsButton, .grapsButtonExcel {
    margin: 0px !important;
    width: 30px !important;
    padding: 5px;
    border-radius: 3px;
} /*ECY */

.grapsButton:hover, .grapsButtonExcel:hover {
	background: url(../img/pdf31.png);
    cursor: pointer; 
}/* ECY */

.excelReport{
    margin-top: 0px !important;
    /*margin-left: -29px !important;
	visibility: hidden;*/ /* ECY NEW Remove*/
}/* ECY */

#ControlsWrapper #ClearFilters {
	color: #000000 !important;
}/* ECY */

#LogoSystemNameLeftDiv {
    width: 200px !important;
    padding: 10px;
}/* ECY */

#floatingMenuContainer .searchArea {
	background: #FFFFFF !important;
	border: none !important;
}

#LogoSystemNameRight {
    float: left !important;
    position: absolute !important;
    left: calc(45% - 150px)!important;
    max-height: none !important;
    height: 100%;
	
}/* ECY */


/*ECY NT 4/2022*/
#LogoSystemNameRight:focus {
	background-color: inherit;
	opacity:inherit;
	z-index: inherit;
	padding: inherit;
    border-width: inherit;
	outline: inherit;
}

#AqBanner:focus {
	background-color: #ffffff;
	opacity: .5;
	z-index:9;
	padding: 0px 4px 0px 4px;
    border-width: 0px !important;
	outline: none;
}

#AqLogoBanner:focus{
	background-color: #ffffff;
	opacity: .7;
	z-index:9;
	padding: 0px 4px 0px 4px;
    border-width: 2px !important;
	outline: none;
}

#LogoSystemNameRightDiv{
    width:800px !important;
    overflow: hidden !important;
} /* ECY */

@media only screen and (max-width: 1316px) {
    #LogoSystemNameRightDiv {
        width: 15% !important;
    }
}/* ECY */

@media only screen and (max-width: 925px) {
    #LogoSystemNameLeft {
        width: 170px !important;
    }
	
    #LogoSystemNameLeftDiv {
        width: 150px !important;
    } 

    #LogoSystemNameRight{
        left: calc(50% - 170px)!important;
    }
}/* ECY */

@media only screen and (max-width: 720px) {
        #LogoSystemNameRight{
        left: calc(50% - 110px)!important;
    }
}/* ECY */

@media only screen and (min-width: 551px) and (max-width: 719px) {
    #LogoSystemNameRight{
        left: 30% !important;
        width: 700px !important;
        top: 0px;
    }

    #LogoSystemNameRightDiv {
        width: 700px !important;
    }
}/* ECY */

@media only screen and (max-width: 550px) {
    
    #LogoSystemNameLeft {
        height: 30px;
        width: 120px !important;
        position: absolute;
        clip: rect(0px,45px,55px,0px);
        left: 10px;
    }

    #LogoSystemNameRightDiv {
        width: 700px !important;
    }

    #LogoSystemNameLeftDiv {
        height: 30px;
    }

    #LogoSystemNameRight {
        left: 120px !important;
        height: 50px !important;
        top: 0px !important;
        width: 700px !important;
    }
}/* ECY */

@media only screen and (max-width: 400px) {
    #LogoSystemNameRight{
        left: 70px !important;
    }
}/* ECY */

#CoverPathLinkWithUserName {
    margin: initial !important;
    margin-bottom: 20px !important;
    margin-left: 50px !important;
	display: none;
}/* ECY */

body {
    font-family: 'Segoe UI', 'Arial' !important;
    font-weight: normal !important;
}/* ECY */

.LinkName {
    font-weight:500 !important;
	padding-left: 5px;
}/* ECY */

.k-draghandle.k-state-selected:hover, .k-ghost-splitbar-horizontal, .k-ghost-splitbar-vertical, .k-list>.k-state-highlight, .k-list>.k-state-selected, .k-marquee-color, .k-panel>.k-state-selected, .k-scheduler .k-scheduler-toolbar .k-state-selected, 
.k-scheduler .k-today.k-state-selected, .k-state-selected, .k-state-selected:link, .k-state-selected:visited, .k-tool.k-state-selected{
    background-color: #bababa !important;
    border-color: #bababa !important;
}/* ECY */

#stationsPageContainer #stationsListBox .k-listbox .k-list-scroller:focus-within {
	border-color: #000000 !important;
	border: 2px solid black!important;
	box-shadow: inset 0 0 3px 3px #9f9f9f;
}

#InfoCover > div > div.chartOptions > div.box-col > button:nth-child(1) {
    padding-right: 35px !important;
}

#InfoCover .chartOptions #fullscaleAndMeteogramButtons button#fullScaleButton.k-button:focus, button#fullScaleButton.k-button:hover{
    border-color: #000000 !important;
	background-color: #d0cbcb !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#InfoCover .chartOptions #fullscaleAndMeteogramButtons button#openMeteogramButton:focus, button#openMeteogramButton:hover{
    border-color: #000000 !important;
	background-color: #3895D3 !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#InfoCover .chartOptions .k-widget .k-picker-wrap .k-select{
	background: #ffffff;
} /* ECY Remove green background*/

.k-widget.k-window.focusable-element[grayscale_done="true"]{
	filter: grayscale(100);
}/*ECY Add gray scale to Dashboard for GrayScale option */

#InfoCover[grayscale_done="true"] .chartOptions #datepicker_ .ArrowDays{
	filter: grayscale(100);
} /* ECY Add gray scale to arrows for GrayScale option */

#ContactUs[grayscale_done="true"]{
	filter: grayscale(100);
}
#information[grayscale_done="true"]{
	filter: grayscale(100);
}

#FAQ[grayscale_done="true"]{
	filter: grayscale(100);
}

#AboutUs[grayscale_done="true"]{
	filter: grayscale(100);
}

#ReportHelp[grayscale_done="true"]{
	filter: grayscale(100);
}

#BurnBans[grayscale_done="true"]{
	filter: grayscale(100);
}

#agZoomOut-button[grayscale_done="true"]{
	filter: grayscale(100);
}

#agZoomIn-button[grayscale_done="true"]{
	filter: grayscale(100);
}			

 #InfoCover[grayscale_done="true"] .chartOptions #datePickerBoxWrapper #datePickerBox input.ArrowDays{
	filter: grayscale(100);
}/*ECY Add gray scale to arrows for GrayScale option  */

#InfoCover .chartOptions #datePickerBoxWrapper #datePickerBox span.k-picker-wrap{
	background-color: #ffffff;
} /*ECY Changed background for calendar */

#InfoCover .chartOptions #datePickerBoxWrapper #datePickerBox input.MinusDays:focus, #datePickerBox input.MinusDays:hover, input.AddDays:focus, #datePickerBox input.AddDays:hover,
#datePickerBox #datepicker input#DateMax:focus, #datepicker input#DateMax:hover, #datePickerBox #datepicker span.k-select:focus, #datepicker span.k-select:hover {
	border-color: #000000 !important;
	border-radius: 6px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}/* ECY border for access to daily values  */

#InfoCover .k-tabstrip-wrapper #tabstrip .k-content .chartOptions #datepicker_ input.MinusDays:focus, #datepicker_ input.MinusDays:hover, 
#datepicker_ input.AddDays:focus, #datepicker_ input.AddDays:hover, #datepicker_ input.k-input:focus, #datepicker_ input.k-input:hover,
#datepicker_ span.k-select:focus, #datepicker_ span.k-select:hover  {
	border-color: #000000 !important;
	border-radius: 6px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#InfoCover .chartOptions .box-col button.k-button:hover, button.k-button:focus {
	border-color: #000000 !important;
	background-color: #3895D3 !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#InfoCover .chartOptions .box-col button.export-svg:hover, button.export-svg:focus {
	border-color: #000000 !important;
	background-color: transparent !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#InfoCover .chartOptions .box-col button.export-img:hover, button.export-img:focus {
	border-color: #000000 !important;
	background-color: transparent !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#indexLevelContainer #indexLevelGaugeWrapper .labelInsideGaugeCap {
	width: auto !important;
	margin-top: -114.625px !important /*NEW*/
}

#windDirMeterContainer #indexLevelGaugeWrapper .labelBelowGaugeCap {
	width: auto !important;
}

#section_WindDirectionGauge #windDirMeterContainer .labelBelowGaugeCap {
	top: 260px !important;
}

#section_WindSpeedGauge #windSpeedMeterContainer label.labelBelowGaugeCap {
	margin-top: 240px !important;
}

.Content #RightFilter {
	color: #ffffff !important;
}

.page #main #content {
	color: #ffffff !important;
} /*ECY */

.page #main {
	padding: inherit;
}/* ECY */

#singleStationReportContainer #leftFilter #wrapper2 ul li {
	background: ##ff5e0 !important;
	color: #000000 !important;
}

#leftFilter #wrapper2 .LinedArea ul li {
	background: ##ff5e0 !important;
	color: #000000 !important;
}

#leftFilter #wrapper3 .LinedArea ul li {
	color: #000000 !important;
	border-radius: 4px !important;
}

#leftFilter #wrapper3 .LinedArea ul li.k-button.k-state-active {
	background-color: #e9e9e9 !important;
	color: #000000 !important;
	box-shadow: inset 0 0 4px 4px #9f9f9f
}

.k-button.k-state-active, .k-button:active{
	background-color: #e9e9e9 !important;
	color: #000000 !important;
	box-shadow: inset 0 0 4px 4px #9f9f9f
}

.k-button.k-state-active:hover{
	box-shadow: inset 0 0 2px 2px #9f9f9f
}

.k-button-group .k-button.k-state-active, .k-button-group .k-button:active{
	box-shadow: inset 0 0 4px 4px #9f9f9f
}

#leftFilter #wrapper2 ul li {
	background: #e9e9e9 !important;
	color: #000000 !important;
}

#leftFilter #stationFilter #buttonsWrapper input {
	border-color: #000000 !important;
	background-color: #c5c5c5 !important;
	color: #000000 !important;
}

.k-chart-tooltip td {
	background-color: #ffffff !important;
}

.pagesescrip.description_2 {
	top: 60px !important;
	width: 220px !important;
	font-size: 18px;
	font-weight: bold !important;
	color: #000000 !important;
	background: transparent !important;
	z-index: 1 !important;
}

.pagesescrip.description_2 a:visited {
	color: #034af3 !important;
	font-weight: bold !important;
}

.pagesescrip.description_2 a:link {
	color: #034af3 !important;
	font-weight: bold !important;
}

.pagesescrip.description_2 a:focus, .pagesescrip.description_2 a:hover {
	opacity: 0.7 !important;
	background-color:#ffffff !important;
	border-radius: 6px !important;
	border: 2px solid black !important;
    border-top-color: black !important;
    border-top-style: solid !important;
    border-top-width: 2px !important;
    border-right-color: black !important;
    border-right-style: solid !important;
    border-right-width: 2px !important;
    border-bottom-color: black !important;
    border-bottom-style: solid !important;
    border-bottom-width: 2px !important;
    border-left-color: black !important;
    border-left-style: solid !important;
    border-left-width: 2px !important;
}

#toolbarContainer .actionIcon{
	padding-right: 4px !important;
}

#toolbarWrapper .imagechart, #toolbarWrapper .tablechart, #toolbarWrapper .diagramchart, #toolbarWrapper .Excel {
    width: 32px !important;
    margin-right:3px !important;
}

#toolbarWrapper .imagechart:hover, #toolbarWrapper .tablechart:hover, #toolbarWrapper .diagramchart:hover, #toolbarWrapper .Excel:hover {
   cursor:pointer;
   opacity:0.5;
}

#reportResultGridContainer #detailedReportGrid .k-grid-content-locked, #reportResultGridContainer #detailedReportGrid .k-grid-content {
    height: 480px !important;
}	

#reportResultGridContainer #detailedReportGrid .k-grid-content table tbody tr td .indexReportGridCell[style="background-color:#99004C;"] {
    background-color:#8F3F97 !important;
	color:#ffffff !important;
}/*ECY*/

#reportResultGridContainer #detailedReportGrid .k-grid-content table tbody tr td .indexReportGridCell[style="background-color:#FF0000;"], 
.indexReportGridCell[style="background-color:#7E0023;"]{
	color:#ffffff !important;
}/*ECY*/

ul#menu li.HaveChild a, ul#menu li.HaveChild div, .nameMenu, ul#menu li a {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

.PDF {
    margin-right: 3px;
}

#toolbarWrapper .imagechart:hover, #toolbarWrapper .tablechart:hover, #toolbarWrapper .diagramchart:hover, #toolbarWrapper .PDF:hover {
    cursor: pointer !important;
    opacity: 0.5 !important;
}

/* .page.PageMap #mapDiv #mapDiv_root:after{
	visibility: visible !important;
	color:#000000 !important;
	background-color: #ffffff !important;
	margin-left: 28%; 
	font-size: 18px;
	font-weight: bold !important;
	position: absolute;
	border-radius: 6px !important;
	border: 2px solid black !important;
	padding: 5px 5px !important;
	content:" This map now displays EPA's Air Quality Index (AQI). Ecology no longer uses WAQA " !important; 
} */  /* ECY notice to remove WAQA and replace with AQI */

@media only screen  and (max-width: 1600px){ /*ECY NT 3/2/2022*/
	.page.PageMap #mapDiv #mapDiv_root:after{
		margin-left: 20%; 
		width: 33%;
		font-size: 80%;
	}
}

@media only screen  and (max-width: 600px){ /*ECY NT 3/2/2022*/
	.page.PageMap #mapDiv #mapDiv_root:after{
		margin-left: 20%; 
		width: 60%;
		font-size: 70%;
	line-height: 1em;
	}
}

#mapDiv #mapDiv_root .esriControlsBR span.esriAttribution {
	padding: 8px 8px !important;
	max-width: none !important;
}

	/*mobile app button NT ECY 3/2022*/
	
	.mobile-icons{
	float: right;
	display: inline;
	margin-left: 10px;
	}
	
	.app{
	display: inline;
	}
	.app:focus-within{
	filter: invert(100);
	background-color: #7b7b7b;
	opacity: .8;
	z-index:10;
	padding: 4px 0px 9px 7px;
	border-radius: 6px !important;
    /*border-top-color: #7b7b7b !important;
    border-top-style: solid !important;
    border-right-color: #7b7b7b !important;
    border-right-style: solid !important;
    border-bottom-color: #7b7b7b !important;
    border-bottom-style: solid !important;
    border-left-color: #7b7b7b !important;
    border-left-style: solid !important;*/
	}
	
	.app:hover{
	filter: invert(100); 
	background-color: #7b7b7b;
	opacity: .8;
	z-index:10;
	padding: 4px 0px 9px 7px;
	border-radius: 6px !important;
   /* border-top-color: #7b7b7b !important;
    border-top-style: solid !important;
    border-right-color: #7b7b7b !important;
    border-right-style: solid !important;
    border-bottom-color: #7b7b7b !important;
    border-bottom-style: solid !important;
    border-left-color: #7b7b7b !important;
    border-left-style: solid !important;*/
	}
	
	.google-icon{
	height: 30px;
	display: inline;
	margin-right:5px;
	}
	
	.apple-icon{
	height: 30px;
	display: inline;
	margin-right:5px;
	}
	
	.ecology-icon{
	height: 30px;
	display: inline;
	margin-right:5px;
	image-rendering: -webkit-optimize-contrast;
	/*image-rendering: pixelated;*/
	}

@media only screen  and (max-width: 1665px){ /*ECY NT 3/15/2022*/

	.google-icon{
		object-fit: cover;
		object-position: 0% 30%;
		border-radius: 10px;
		width: 40px;
		height: 40px;
		margin-bottom: 5px;
		margin-right: -1px;
	}
	
		.apple-icon{
		object-fit: cover;
		object-position: 2% 30%;
		border-radius: 10px;
		width: 33px !important;
		height: 40px !important;
		margin-bottom: 5px;
	}
	
		.ecology-icon{
		object-fit: cover;
		object-position: 2% 35%;
		border-radius: 10px;
		width: 42px !important;
		height: 40px !important;
		margin-bottom: 5px;
		margin-right: -1px;
	}
		.app:focus-within{ /*ECY NT 3/23/2022*/
	padding: 11px 0px 11px 6px;
	}
	
	.app:hover{ /*ECY NT 4/2022*/
	padding: 11x 0px 11px 6px;
	}
}

@media only screen  and (max-width: 800px){ /*ECY NT 3/15/2022*/

	.mobile-icons{
		margin-top: 0px !important;
	}
	
	.google-icon{
		margin-left: 5px;
	}
	

}

@media only screen  and (max-width: 785px){ /*ECY NT 3/15/2022*/

	.mobile-icons{
		float: left;
		margin-left: -30px;
	}
	
	.PollutantSelect{/* ECY NT 3/23/2022*/
	width: 65px !important;
	margin-top:9px;
	}

}
@media only screen  and (max-width: 425px){ /*ECY NT 3/30/2022*/

	
	#ListMonitors #buttons select{/* ECY CP */
	width: 21px !important;
	display: inline;
	}
	
	.app{
		position: absolute;
		height: 20px;
		width: 50px;
	}
	
	#eco-link{
		width: 40px;
		height: 50px;
		
	 }
	
	 #google-link{
		margin-left: 46px;
		width: 40px;
		height: 50px;
		
	 }
	 
	 	 #apple-link{
		margin-left: 100px;
		width: 40px;
		height: 50px;
		
	 }
	 
	 .app:focus-within{ /*ECY NT 3/23/2022*/
	padding: 6px 2px 6px 6px;
	}
	
	
}
/* Start ECY Gray Scale accessibility edits ------------------------------------------------------- */

#grid table[role="grid"] tbody[role="rowgroup"] .k-state-selected [grayscale_done="true"]  {
	color: #ffffff !important;
}/*ECY font color for WAQA background color when selected is the state in WAQA Index report*/

#grid .k-selectable tbody[role="rowgroup"] tr[role="row"] td[role="gridcell"] div[grayscale_done="true"] {
	background: none !important;
	background-color: none !important;
}/*ECY color for WAQA background color using grayscale when selected is the state in WAQA Index report*/

#LastDataTable tbody[role="rowgroup"] td[role="gridcell"] span[grayscale_done="true"] {
	background: none !important;
	background-color: none !important;
}/*ECY background color when selected is the state for StaionInfo popup using gray scale, Go to Site Info, Last data tab*/

ul#menu li.menuLi a.access_focusable.grayscaleOnHover:hover, ul#menu ul li.menuLi a.access_focusable.grayscaleOnHover:hover, ul#menu li.menuLi.HaveChild div[grayscale_done="true"]:hover, 
ul#menu li.menuLi.HaveChild ul.subMenuParent a.grayscaleOnHover:hover, 
ul#menu li.menuLi a.access_focusable.grayscaleOnHover:focus, ul#menu ul li.menuLi a.access_focusable.grayscaleOnHover:focus, ul#menu li.menuLi.HaveChild div[grayscale_done="true"]:focus,
ul#menu li.menuLi.HaveChild ul.subMenuParent a.grayscaleOnHover:focus {
    background: #a9a9a9 !important;
    border-radius: 6px !important;
}

.theList input.allOptionItemInMonitorsContainer.ListIndex.grayscaleOnHover:hover, .theList input.ListIndex.grayscaleOnHover:hover, .theList input.monitors.grayscaleOnHover:hover,
.theList input.allOptionItemInMonitorsContainer.ListIndex.grayscaleOnHover:focus, .theList input.ListIndex.grayscaleOnHover:focus, .theList input.monitors.grayscaleOnHover:focus{
    filter: opacity(0.6) !important;
	border-radius: 6px !important;
}

.liValList .ColorVal[grayscale_done="true"]{
    filter: opacity(0);
}

 #ButtonsIndexesArea span[grayscale_done="true"] {
    filter: opacity(0.7) !important;
}	

#stationsPageContainerWrapper .stationNameAndIndexValueBox span[style="background-color: rgb(76, 76, 76) !important; color: rgb(0, 0, 0) !important; border-color: rgb(0, 0, 0) !important; fill: rgb(0, 0, 0) !important;"]{
   filter: invert(100) !important;
}

#stationsPageContainerWrapper .stationNameAndIndexValueBox span[grayscale_done="true"]{
	font-weight: 900 !important;
}

 .map .esriMapContainer .esriMapLayers svg g circle[style="color: rgb(40, 40, 40) !important; border-color: rgb(40, 40, 40) !important; fill: rgb(76, 76, 76) !important; stroke: rgb(112, 112, 112) !important;"],
  svg g circle[style="color: rgb(40, 40, 40) !important; border-color: rgb(40, 40, 40) !important; fill: rgb(85, 85, 85) !important; stroke: rgb(112, 112, 112) !important;"],
  svg g circle[style="color: rgb(40, 40, 40) !important; border-color: rgb(40, 40, 40) !important; fill: rgb(127, 127, 127) !important; stroke: rgb(112, 112, 112) !important;"],
  svg g circle[style="color: rgb(40, 40, 40) !important; border-color: rgb(40, 40, 40) !important; fill: rgb(119, 119, 119) !important; stroke: rgb(112, 112, 112) !important;"],
  svg g circle[style="color: rgb(40, 40, 40) !important; border-color: rgb(40, 40, 40) !important; fill: rgb(54, 54, 54) !important; stroke: rgb(112, 112, 112) !important;"]  {
    filter: invert(100) !important;
}

/* End ECY Gray Scale accessibility edits --------------------------------------------------------*/

/* ------------------------------------Setup all items below before moving to production -------------------------------------------------------------------- */

.footerDiv .UpdateDate:before{
	visibility: visible !important;
	padding-left: 70px !important;
	position: absolute;
	content:" Version 2.73.4.19 " !important; /* ECY update version number with each release */
}

#mapDiv #mapDiv_root .esriControlsBR .esriAttribution .esriAttributionList .esriAttributionLastItem:before{
	visibility: visible !important; /* Set this to hidden before releaseing to production */
	color:#000000 !important;
	background-color: #ffffff !important;
	font-size: 18px;
	font-weight: bold !important;
	border-radius: 6px !important;
	border: 1px solid black !important;
	padding: 2px 2px !important;
	content:"This website is for testing only and information provided on this website is not VALID " /* Visability has to be set to "hidden" before release to production */
}

#mapDiv #mapDiv_root .esriControlsBR .esriAttribution .esriAttributionList .esriAttributionLastItem:after{
	color: #000000 !important;
	visibility: visible;
	font-size: 8px !important; 
	content:"0" /* Dev AD01 = 0, Prod AP01 = 1, Prod AP02 = 2 Prod AP04 = 3 Prod AP05 = 4 ECY update prod servers with each release */