@import 'https://code.highcharts.com/css/highcharts.css';

#curator-feed-default-feed-layout {
	 z-index: 0;
}

:root { /* light mode */
	--background-color: #FFFFFF;
	--text-color: #292b2c;
	--hilight-color: #0275d8;
}

#content {
    position: absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
}

.spacer {
	height:16px;
}

.currentTime {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight:bold;
	margin-bottom: 3px;
}

.cardTopRounded {
	-webkit-border-top-left-radius: 8px;
	-moz-border-top-left-radius: 8px;
	border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
	font-weight:bold;
	text-align:center;
}

.currentWeather {
	width: 100%;
	height: 100%;
	/*min-width: 400px;*/
	/*margin-bottom: 10px;*/
	/*background-color: rgba(255, 255, 255, 0.9);*/
	/*background-color:#FFF9F2;*/
	background-color:#FFFDFB;
}

.currentWeather2 {
	width: 100%;
	/*min-width: 400px;*/
	/*margin-bottom: 10px;*/
}

.currentWeather tr {
	border: 1px black solid;
}

.currentWeather th {
	-webkit-border-top-left-radius: 8px;
	-moz-border-top-left-radius: 8px;
	border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border-top-right-radius: 8px;
	background-color:#FA8339;
	overflow:hidden;
	z-index:100;
	color: white;
	text-shadow:1px 1px rgba(0, 0, 0, 1.0);
	font-size: 16px;
	font-weight:bold;
	/*border: 1px black solid;*/
}

.currentWeather td {
	vertical-align:middle;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight:bold;
	padding: 3px;

}

.value,.extremeValue {
	font-size: 19px !important;
	font-weight:normal;
	/*font-family: 'Shippori Antique B1', sans-serif;*/
	/*font-family: serif;*/
	/*font-family: 'Covered By Your Grace', Arial, Helvetica, sans-serif !important;*/
	font-family: Arial, Helvetica, sans-serif !important;
}

/*
.extremeValue {
	font-size: 19px;
	font-weight:normal;
	font-family: 'Trykker', serif;
	font-family: 'Covered By Your Grace', Arial, Helvetica, sans-serif !important;
}
*/

.extremeTime {
	font-size: 14px !important;
	font-weight: normal !important;
	/*font-family: 'Covered By Your Grace', Arial, Helvetica, sans-serif !important;*/
}

.windHeightControl {
	height: 61px;
}

.aqiHeightControl {
	height:32px
}

.webcamCard {
	background-color:#FFFDFB;
}

.forecastPeriod {
	background-color:#FFFDFB;
}

.wwa {
	padding-left: 5px !important;
	padding-right: 5px !important;
	color: black !important;
	border: 1px solid;
	white-space: normal;
	font-weight:bold;
	/*font-family: Arial, Tahoma, sans-serif;
	font-size: 16px;*/
	padding-top: 2px;
	padding-bottom: 2px;

}

.wwa:hover {
	border: 1px solid black !important;
}

.wwa-minor {
	background-color:#fffec9;
	color: black !important;
}

.wwa-minor:hover {
	background-color:#fffec9E6 !important;
}

.wwa-moderate {
	background-color:#ffd6a8;
}

.wwa-moderate:hover {
	background-color:#ffd6a8E6 !important;
}

.wwa-severe {
	background-color:#ffb5b5;
}

.wwa-severe:hover {
	background-color:#ffb5b5E6 !important;
}

.wwa-extreme {
	background-color:#e9d4ff;
}

.wwa-extreme:hover {
	background-color:#e9d4ffE6 !important;
}

.wwa-other {
	background-color:#ffffff;
}

.wwa-details {
	background-color:#ffffff;
	padding-left: 5px;
	padding-right: 5px;
	border-left: 1px solid; 
	border-right: 1px solid; 
	border-bottom: 1px solid; 
	border-top: 0px;
}

.wwa-other:hover {
	background-color:#ffffffE6 !important;
}

.w3-row-padding-small:after,.w3-row-padding-small:before{content:"";display:table;clear:both}

.w3-row-padding-small,.w3-row-padding-small>.w3-half,.w3-row-padding-small>.w3-third,.w3-row-padding-small>.w3-twothird,.w3-row-padding-small>.w3-threequarter,.w3-row-padding-small>.w3-quarter,.w3-row-padding-small>.w3-col{padding:0 4px}

@media screen and (min-width: 992px) {
  .value {
    font-size: 19px;
  }
  .currentWeather td {
    font-size: 16px;
  }
  .extremeValue {
  	font-size: 19px;
  }

}
@media screen and (max-width: 991px) {
  .value {
    font-size: 17px;
  }
  .currentWeather td {
    font-size: 13px;
  }
  .extremeValue {
  	font-size: 16px;
  }
	.windHeightControl {
		height: 56px;
	}
	.aqiHeightControl {
		height:30px
	}

}
@media screen and (max-width: 602px) {
	.windHeightControl {
		height: 0px;
	}
	.aqiHeightControl {
		height:0px
	}

}

.chart {
	/*width:480px;*/
	height:300px;
	border-width:thin;
	border-color:black;
	border-style:solid;
	/*margin: 0px 10px;*/
	/*display: inline-block;*/
	/*padding: 5px;*/
	background-color: white;
}
.chart-blank {
	/*width:480px;*/
	height:300px;
	border-width:0;
	display: inline-block;
	/*margin: 5px;*/
}

.chart-big {
	/*width:480px;*/
	width:960px;
	height:600px;
	border-width:thin;
	border-color:black;
	border-style:solid;
	display: inline-block;
	margin: 0px;
}

.main {
	/*background-color:white;*/
	margin-top:0px
}

.footer-white {
	background-color: white;
	color:black;
}

.monthly-white {
	background-color: white;
	color:black;
	margin: 0;
	padding: 0;
	border-color: white;

}
.footer {
	/*width: 990px;*/
	width: 990px;
	margin-left: auto;
	margin-right: auto;

}

.footer-white {
	background-color: rgb(41, 47, 51);
	color:white;
}

html,body { 
/*background: #fff7ee;*/
/*background-color:#FF6600;*/
/*background-color:#FA8339;*/
/*background-color:#FFC986;*/
background-color:#FFECD5;
/*background-color:#FFC279;*/
height: 100%; 
/*font-family: Verdana, Geneva, Tahoma, sans-serif;*/
font-family: Arial, Tahoma, sans-serif;
font-size: 16px;
/*font-family: 'Covered By Your Grace', sans-serif !important;*/
/*font-size:40px;*/
/*background: #192b7c url("images/bg.png");
  background-repeat: repeat-y;
  background-position: center;*/
}

.tempChart {
	stroke: red;
}

.dewChart {
	stroke: #00ff00;
}

.humChart {
	stroke: blue;
}

.windChart {
	stroke: #ff0000;
}

.gustChart {
	stroke: #00ff00;
}

.barChart {
	stroke: #444444;
}

.dirChart {
	stroke: magenta;
}

.rainChart {
	stroke: blue;
}

.rainRateChart {
	stroke: blue;
}

.aqiChart {
	stroke: black
}

.precipRateLight {
	fill: #DDDDFF;
	fill-opacity: 1.0;
}

.precipRateModerate {
	fill: #DDFFDD;
	fill-opacity: 1.0;
}

.precipRateHeavy {
	fill: #FFDDDD;
	fill-opacity: 1.0;
}

.precipRateTorrential {
	fill: #FFDDFF;
	fill-opacity: 1.0;
}

.aqiGood {
	fill: #00e400;
	fill-opacity: 1.0;
}

.aqiModerate {
	fill: #ffff00;
	fill-opacity: 1.0;
}

.aqiUnhealthySensitive {
	fill: #ff7e00;
	fill-opacity: 1.0;
}

.aqiUnhealthy {
	fill: #ff0000;
	fill-opacity: 1.0;
}

.aqiVeryUnhealthy {
	fill: #8f3f97;
	fill-opacity: 1.0;
}

.aqiHazardous {
	fill: #7e0023;
	fill-opacity: 1.0;
}

.highcharts-plot-band-label {
	fill: black !important;
}

@media (prefers-color-scheme: dark) {
	:root {
        --background-color: #1F2227;
/*        --text-color: #c0c0c0;*/
        --text-color: #ffffff;
        --hilight-color: #8db4d6;
    }
	html,body {
		background-color: rgb(40, 40, 40);
		color:white;
	}
	.main {
		background-color: rgb(40, 40, 40);
	}
	.currentWeather {
		background-color: rgb(50, 50, 50);
	}
	.webcamCard {
		background-color: rgb(50, 50, 50);
	}
	.forecastPeriod {
		background-color: rgb(50, 50, 50);
	}
	.wwa {
		background-color: rgb(50, 50, 50);
	}
	
	.wwa:hover {
		border: 1px solid white !important;
		color: white !important;
	}

	.wwa-minor {
		background-color:#786e00;
		color: white !important;
	}

	.wwa-minor:hover {
		background-color:#786e00E6 !important;
		color: white !important;
	}

	.wwa-moderate {
		background-color:#966502;
		color: white !important;
	}

	.wwa-moderate:hover {
		background-color:#966502E6 !important;
		color: white !important;
	}

	.wwa-severe {
		background-color:#630000;
		color: white !important;
	}

	.wwa-severe:hover {
		background-color:#630000E6 !important;
		color: white !important;
	}

	.wwa-extreme {
		background-color:#630059;
		color: white !important;
	}

	.wwa-extreme:hover {
		background-color:#630059E6 !important;
		color: white !important;
	}

	.wwa-other {
		background-color:#ffffff;
		color: white !important;
	}

	.wwa-other:hover {
		background-color:#ffffffE6 !important;
		color: white !important;
	}

	.wwa-details {
		background-color:rgb(50, 50, 50);
	}
	
	.chart {
		border-color:white;
		border-style:solid;
		background-color: rgb(50, 50, 50);
	}

	.humChart {
		stroke: cyan;
	}
	.barChart {
		stroke: #CCCCCC;
	}


	/*
	.chart {
		background-color: rgb(50, 50, 50);
	}
	*/
	/*
	.footer-white {
		background-color: rgb(40, 40, 40);
		color:white;
	}
	*/
	.monthly-white {
		background-color: rgb(40, 40, 40);
		color:white;
		border-color: rgb(40, 40, 40);
	}
}

.highcharts-title {
	fill: var(--text-color);
	font-size: 13px;
	font-weight: bold;
}
.highcharts-background {
    fill: var(--background-color);
}
.highcharts-contextbutton {
	fill: var(--background-color);
	stroke: var(--text-color);
}
.highcharts-resetzoombutton {
	fill: yellow;
}
.highcharts-container text {
    fill: var(--text-color);
}
.highcharts-subtitle,
.highcharts-credits,
.highcharts-axis-title {
    fill-opacity: 0.7;
}
.highcharts-grid-line {
    stroke: var(--text-color);
    stroke-opacity: 0.2;
}
.highcharts-grid-line {
    stroke: var(--text-color);
}
.highcharts-tooltip-box {
    fill: var(--background-color);
}
.highcharts-column-series rect.highcharts-point {
    stroke: var(--background-color);
}

.banner {
	/*background-color:#FF7402;*/
	background: rgb(255,116,2);
	background: radial-gradient(circle, rgba(255,116,2,1) 50%, rgba(213,96,0,1) 100%);
}

ul {
    list-style-type: none;
    padding: 0;
    overflow:auto;
    /*width: 990px;*/
    margin-left:auto;
	margin-right:auto;
	margin-top: 3px;
	margin-bottom:0;
	/*background-color:black;*/

}

.navBar {
	text-align:center;
	background-color:black;
	width:990px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 4px;
}

.navButton {
	height: 25px;
	margin: 7px 7px 7px 7px;
    /*background-color: #fff7ee;
    border: 2px black solid;
	border-radius: 6px;*/
	text-decoration:none;
    color: #ffffff;
    font-size: 17px;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: middle;
	display: inline-block;
	line-height: 25px;
}

.navButton2 {
	font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
	font-weight: bold;

	
}

.navButton:hover {
    color: #FA8339;
}

.coolTable th {
	background-color: #FA8339;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.coolTable tr:nth-child(n+2) th {
	background-color:#FFBD75;

}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  vertical-align: middle;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #FA8339;
}

input:focus + .slider {
  box-shadow: 0 0 1px #FA8339;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 17px;
}

.slider.round:before {
  border-radius: 50%;
}

/*
.navButton {
	height: 30px;
	margin: 7px 1px 7px 1px;
    background-color: #fff7ee;
    border: 2px black solid;
	text-decoration:none;
    color: #FF6600;
    font-size: 16px;
	font-weight: bold;
	padding-left: 5px;
	padding-right: 5px;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: middle;
	display: inline-block;
	line-height: 30px;
	border-radius: 6px;
}

.navButton:hover {
    background-color: #FF6600;
    color: #fff7ee;
}
*/