* {
		 box-sizing: border-box;
	}
	
	.background {
		background-color: #eff3f8;
		display: flex;
		flex-direction: column;
		justify-content: stretch;
		background-image: url("images/background1.jpg");
	}

	.background.img2 {
		background-image: url("images/background2.jpg");
	}
	.background.img3 {
		background-image: url("images/background3.jpg");
	}
	
	body, textarea { 
	    font-family: arial;
		font-size: 16px;
	}
    body { 
		margin:0;
		/*position:fixed;*/
		top:0;
		right:0;
		bottom:0;
		left:0;
		
		
	}
	
	.tooManyRows {
		padding: 20px;
		background-color: #f2f2f2;
		color: #2b2a2a;
		min-height: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		flex: 1;
		flex-direction: column;
	}
	.displaynone {
		display:none;
	}
	.startup .mainview {
		opacity:0;
		pointer-events:none;
		-webkit-transition: 0.5s;
		transition: 0.5s;
		flex: 0;
	}
	.startupview {
		opacity: 0;
		flex: 0;
		-webkit-transition: 0.5s;
		transition: 0.5s;
		align-items: stretch;
		
	}
	.startup .startupview {
		opacity:1;
		flex:1;
	}
	.startupview.background {
		/*background-image: url("images/background1.jpg");
		background-color:grey;*/
	}
	.active {
		pointer-events: all;
		cursor: pointer;
		border-radius: 5px;
		border: 0.5px solid #a6aaad;
		padding: 5px;
		white-space: nowrap;
	}

	.active:hover {
		background-color: #ededed;
	}

	
	.popupContainer {
		width:100%;
		height:100%;
		/*z-index:1;*/
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events:none;
		
	}
	.viewContainer {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		flex: 1;
		overflow: auto;
		
	}

	.summaryPanel .widget {
		padding: 10px;
		max-width: 175px;
	}
	.widget.large {
		max-width: 550px;
	}
	.summaryPanel .widget .value {
		font-size: 2em;
		text-align: center;
	}
	.summaryPanel .widget .value.s {
		font-size: 1.2em;
		text-align: center;
	}
	.summaryPanel .widget .kpititle {
		padding: 0px 0px 0px 0px;
	}
	
	.kpititle {
		color: #a6aaad;
		font-size: 0.7em;
	}
	.sfont {
		font-size: 0.8em;
	}
	.xsfont {
		font-size: 0.6em;
	}
	.xxsfont {
		font-size: 0.4em;
	}
	.lfont {
		font-size: 1.4em;
	}
	.kpi .title {
		color: #a6aaad;
		font-size: 0.8em;
	}
	.kpi .value {
		
	}
	
	.kpi.sm .title, .kpi.sm .value {
		font-size: 0.6em;
	}
	.contentPanelContainer {
		flex:1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		margin: 10px;
		min-width: 0;
		overflow: hidden;
	}
	.contentPanel {
		flex:0;
		display: none;
		
	}
	
	.navBar {
	    margin: 0px 0px 0px 0px;
		padding: 5px 30px 5px 30px;
		display: flex;
		flex-direction: row;
		background-color: #4387af;
		color: #ffffff;
		align-items: flex-end;
		height: 50px;
		justify-content: center;
		align-items: center;
	}
	
	
	
	.titleBar {
		margin: 0px 0px 0px 0px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: end;
		background-color: #045a8d;
		margin: 0px 0px 0px 0px;
		 padding: 0px 30px 0px 30px; 
		display: flex;
		flex-direction: row;
		color: #ffffff;
		flex-wrap: wrap;
		overflow: auto;

	}
	.titleBar .title {
		font-size: 1.6em;
		padding: 5px;
	}
	.titleBar .datevalue {
		
	}
	.titleBar .titlebox {
		cursor: pointer;
		padding: 5px 5px 0px 5px;

		border: 1px solid rgba(255, 255, 255, 0.46);
		border-radius: 4px;
		margin: 5px;
		font-size: 1.6em;
		/*
		
		
		margin: 0px 0px 5px 0px;
*/
	}
	.titleBar .titlebox:hover {

		border: 1px solid rgba(255, 255, 255, 1);

	}

	.titleBar .locationname {
		font-weight: bold;
		padding-right: 10px;
	}
	

	.contentPanelContainer .controlBar {
		margin: 0px 0px 0px 0px;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		min-width: 0;
		overflow: hidden;
	}
	.contentPanelContainer  .active:hover {
		background-color: #ededed4d;
	}
	
	.contentPanelContainer .toolbar {
		flex: 1;
		margin: 0px 40px 0px 20px;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.contentPanelContainer .toolbar>div {
		margin: 0px 40px 0px 0px;
	}
	
	
	
	.contentPanelContainer .contentPanel.selected {
		flex:1;
		padding:0px 0px 20px 0px;
		display: flex;
		flex-direction: column;
		min-width: 0;
		overflow: hidden;
	}
	
	.tablink {
	    color: #ffffff;
		cursor: pointer;
		/* border-radius: 3px; */
		border: 0px none #ffffff;
		border-bottom: 1px dotted #ffffff;
		padding: 5px 5px 1px 5px;
		margin: 0px 10px 0px 10px;
	}
	 
	.contentPanelButton {
		
	}
	.tabllinkhover {
		border-bottom:1px solid #ffffff;
	}
	.tabllink.selected {
		font-weight:bolder;
		border-bottom: 3px solid #ffffff;
	}
	.popup {
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1001;
		border-radius: 5px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		position: absolute;
		overflow: hidden;
		padding: 20px;
		background-color: #ffffff;
		pointer-events:all;
	}
	.tooltip {
		position: absolute;
		opacity: 0;
		z-index: 1000;
		padding: 10px;
		pointer-events: none;
		display: flex;
		flex-direction: column;
		justify-content: stretch;
		align-items: center;
		min-width:200px;
	}
	.tooltip div {
		padding:3px 5px 1px 5px;
		text-align: center;
		width:100%;
	}
	.tooltip .title {
		font-size:1.1em;
		font-weight:normal;
		padding:3px 5px 1px 5px;
		
	}
	.tooltip .kpi {
		font-size:1.4em;
		font-weight:bold;
		padding:0px 5px 5px 5px;
		
	}
	.tooltip .kpititle {
		text-align: left;
		padding:0px 5px 0px 5px;
	}
	.errorPopup {
		width: 370px;
		max-height: 325px;
		flex-direction: column;
		justify-content: start;
		align-items: stretch;
		z-index:1010;
	}
	.feedbackPopup {
		max-width: 600px;
		z-index:1005;
	}
	.configDisplay {
		width: 350px;
		/*height: 325px;*/
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		
	}
	.welcomeScreen {
		width: 350px;
		height: 325px;
	}
		
	.weatherapiinfo {
		width: 350px;
		height: 275px;
	}
	.datetimeshortcuts {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 15px 0px 0px 0px;
	}

	.shortcut {
		margin: 0px 10px 0px 10px;
		cursor: pointer;
		padding:3px;
	}
	
	.loadingScreen {
		width: 250px;
		height: 100px;
	}
	
	

	.minimized, .minimized *  {
		pointer-events:none;
		opacity:0;
	}
	textarea {
		resize: none;
		width: 100%;
		height: 60px;
	}
	input[type=text] {
		width: 100%;
	}
	input[type=text],textarea, select {
		padding: 6px 14px;
		margin: 2px 3px;
		box-sizing: border-box;
		border: 3px solid #ccc;
		-webkit-transition: 0.5s;
		transition: 0.5s;
		outline: none;
		font-size: 16px;
	}
	select.thinborder {
		padding: 3px 7px;
		margin: 2px 3px;
		border: 1px solid #ccc;
	}
	
	.outlinebutton:hover {
		border: 1px solid rgba(255, 255, 255, 1);
	}
	.outlinebutton {
		cursor: pointer;
		padding: 5px 5px 0px 5px;
		border: 1px solid rgba(255, 255, 255, 0.46);
		border-radius: 4px;
		margin: 5px;
		font-size: 1.6em;
		color: #ffffff;
	}
	
	
	button, .button {
		background-color: #4CAF50;
		border: none;
		color: white;
		padding: 8px 12px;
		text-decoration: none;
		margin: 4px 2px;
		cursor: pointer;
		border-radius: 4px;
	}
	button:hover, .button:hover {
		background-color: #5acc5f;
	}
	button.selected, .button.selected {
		background-color: #216d24;
	}
	button.primary, a.button.primary{
		font-size:1.1em;
		min-width: 90px;
		background-color: #f69220;
	}
	button.primary:hover, .button.primary:hover {
		background-color: #f9a84b;
	}
	button:disabled {
		background-color:#c1c3c1;
	
	}
	h3 {
		margin:0px;
	
	}
	text {
		user-select: none;
	}
	.uparrow {
		font-size:50px;
		color:#d7191c;
	}
	.downarrow {
		font-size:50px;
		color:#4caf50;
	}
	.showscrollbars {
		overflow: auto; 
		
	}
	.horizontalslide {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		flex-wrap: wrap;
	
	}
	
	.nowrap {
		flex-wrap: nowrap;
	}
	.blurbackground {
   
		background-color: hsla(0, 0%, 100%, 0.4);

	}
	.verticalslide {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: stretch;
		/*flex-wrap: wrap;*/
	}
	.floatRight {
		float:right;
	}
	
	.evenspacerow {
		display: flex;
		justify-content: space-between;
		padding:0px 10px 0px 10px;
	}
	.spacebetween {
		justify-content: space-between;
	}
	.spacearound {
		justify-content: space-around;
	}
	.flexend {
		display: flex;
		justify-content: flex-end;
	}
	.margintop {
		margin-top:20px;
	}
	.margintopsmall {
		margin-top:10px;
	}
	.marginbottomsmall {
		margin-bottom:10px;
	}
	.marginsmall {
		margin:10px;
	}
	.marginxsmall {
		margin:5px;
	}
	.fillremaining {
		flex:1;
	}
	
	.aligncenter {
		align-items: center;
	}
	
	.rawdata .rawcontent {
		width:100%;
		width:100%;
		height:100%;
		overflow: auto;
		margin: 0px;
	}
	
	.start {
		justify-content: start;
	}
	.flexone {
		flex:1;
	}
	.flexfourth {
		flex:0.25;
	}
    .flexhalf {
		flex:0.5; 
	}
	.push {
		margin-left: auto;
	}
	.aligncenter {
		align-items: center;
	}
	.smargin {
		margin:3px;
	}
	.mmargin {
		margin:10px;
	}
	.spadding {
		padding:3px;
	}
	.mpadding {
		padding:10px;
	}
	.lpadding {
		padding:20px;
	}
	.smallfont {
		font-size:0.9em;
		
	}
	.xsmallfont {
		font-size:0.7em;
		
	}
	.xxsmallfont {
		font-size:0.5em;
		
	}
	.link, a {
		cursor: pointer;
		color: rgba(1, 98, 138,1);
		text-decoration:none;
	}
	.horizontalslide .chartContainer, .verticalslide .chartContainer  {
		flex:1;
		/*flex-basis:50%;*/
	}
	.containerSvg {
		width: 100%;
		height: 100%;
	}
	.containerSvg.small {
		max-width:200px;
		max-height:300px;
	}
	@media all and (max-width: 1200px) {
		.hideless1200 { 
		display: none;
		}
		
	}
	@media all and (max-width: 800px) {
		.hideless800 { 
		display: none;
		}
		
	}
	
	
	
	.popup span.close {
		color: rgba(1, 98, 138,1);
		font-size: 28px;
		font-weight: bold;
		z-index: 1010;
		top: 10px;
		right: 10px;
		position: absolute;
		height: 1px;
		overflow: visible;
	}

	.popup .close:hover,
	.popup .close:focus {
	  color: rgba(1, 98, 138,0.6);
	  text-decoration: none;
	  cursor: pointer;
	}

	.summaryPanel .icon {
		width: 86px;
		padding-right:20px;
	}
	.widget {
		padding: 20px;
		overflow:hidden;
		margin: 10px;
		background-color: #ffffff;
		border-radius: 3px;
		box-shadow: 0px 0px 1px 0 rgba(0, 0, 0, 0.2), 0px 2px 4px 0 rgba(0, 0, 0, 0.2);
	}
	.widget.noborder {
		background-color: unset;
		border-radius: unset;
		box-shadow: none;
	}
	.width125 {
		width:125px;
		overflow:hidden;
	}
	
	.widget .title {
		font-size:1.2em;
		font-weight:bold;
	}
	
	
	
	.widget .value {
		flex: 1;
		font-size:0.9em;
		white-space: normal;
		padding: 0px 1px 5px 1px;
	}
	.chartContainer {
		display: flex;
		flex-direction: column;
		padding: 20px;
		min-width:300px;
		min-height:500px;
	}
	.chartContainer.sm {
		min-height:300px;
	}
	.keyitem text {
		font-size: 0.8em;
		dominant-baseline: middle;
	}
	text.s {
		font-size: 12px;
	}
	text.m {
		font-size: 16px;
	}
	.hang {
		dominant-baseline: hanging;
	}
	.hideaxis  path, .hideaxis line {
		opacity:0;
	}

	.white text, text.white {
		fill: #ffffff;
	}
	.tempChart .actualbar, .key_tempChart .actualbarkey {
		fill:#6b6767;
	}
	
	.tempChart .normalbar,.key_tempChart .normalbarkey, .normaltemp {
		fill:#a1d76a;
	}
	
	.tempChart .maxbar,.key_tempChart .maxbarkey, .hitemp {
		fill:#ef8a62;
	}
	.tempChart .minbar,.key_tempChart .minbarkey, .lotemp {
		fill:#67a9cf;
	}
	
	.mean.line.mean {
		stroke:#969696;
		stroke-width:1px;
		stroke-dasharray:5;
		fill: none;
	}

	.line.mean {
		stroke:#a1d76a;
		stroke-width:2px;
		fill: none;
	}
	.line.meanmaxt {
		stroke:#ef8a62;
		stroke-width:2px;
		fill: none;
	}
	.line.meanmint {
		stroke:#67a9cf;
		stroke-width:2px;
		fill: none;
	}
	.regression.line {
		stroke-width: 3px;
		stroke: #636363;
	}
	
	.precipline {
		fill: none;
		stroke: #3690c0;
		stroke-width: 3;
	}
	.templine {
		fill: rgb(253, 141, 60);
		stroke: rgb(253, 141, 60);
		stroke-width: 3;
	}
	.precipChart .bar, .barkey, .precip {
		fill:#045a8d;
	}
	.precipChart .normalbar, .normalbarkey {
		fill:#d0d1e6;
	}
	.precipChart .preciparea, .precipareakey {
		fill:#ccebc5;
	}
	
	.wgustbar,.wgustbarkey {
		fill:#fd8d3c;
	}
	
	.wspdbar,.wspdbarkey {
		fill:#fed976;
	}
	.slpline {
		fill:none;
		stroke:#636363;
		stroke-width: 3;
	}
	.slplinekey {
		fill:#636363;
	}
	.contentPanel.grid {
		overflow:auto;
	}
	.charttitle {
		text-anchor:start;
		dominant-baseline:hanging;
		font-size:1.2em;
		font-weight:bold;
	}
	.annotation {
		text-anchor:end;
		alignment-baseline: baseline;
		font-size:1.2em;
	}
	.annotation.start {
		text-anchor: start;
	}
	.contentPanel.grid table {
	  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	  border-collapse: collapse;

	}
	.rangeline {
		fill:none;
		stroke:#636363;
		stroke-width: 2;
	}
	.contentPanel.grid .tableContainer {
		width:100%;
		height:100%;
		overflow:auto;
	}
	.contentPanel.grid table td, .contentPanel.grid th {
	  border: 1px solid #ddd;
	  padding: 6px;
	}
	.contentPanel.grid table td {
	  white-space: nowrap;
	}

	.contentPanel.grid table tr:nth-child(even){background-color: #f2f2f2;}

	.contentPanel.grid table tr:hover {background-color: #ddd;}

	.contentPanel.grid table th {
	  padding-top: 12px;
	  padding-bottom: 12px;
	  text-align: left;
	  background-color: #78aad5;
	  color: white;
	}
	
	.adsbygoogle {
		/*height:50px;
		width:100%;
		height:100%;*/
		text-align: center;
	}
	
	.horizontalAd {
		height: 100px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 5px;
		
	}
	.verticalAd {
		display: flex;
		flex-direction: row;
		justify-content: center;
		padding: 5px;
		
	}
	
	.hidden {
		display:none !important;
	}
	.hideads .adcontainer {
		display:none;
		flex:0;
	}
	
	.adsbygoogle.horizontal {
		/*height:50px;*/
	}

	.responsive100px { width: 320px; height: 100px; }
	@media(min-width: 500px) { .responsive100px { width: 468px; height: 50px; } }
	@media(min-width: 800px) { .responsive100px { width: 728px; height: 90px; } }
	
	
	#mapContainer {
		flex:1;
		position: relative;
	}
	
	/* width */
	::-webkit-scrollbar {
	  width: 10px;
	}

	/* Track */
	::-webkit-scrollbar-track {
	  background: #f1f1f1; 
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
	  background: #888; 
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
	  background: #555; 
	}

	.height40 {
		height:40px;
	}
	.eventplanner {
		color:#ffffff;
		background-color: hsla(0, 0%, 0%, 0.4);
		border-radius:5px;
	}
	.eventplanner .icon {
		fill: #ffffff;
		stroke: #ffffff;
		min-width: 150px;
		min-height: 150px;
		position: relative;
	}

	.icon img {
		position:absolute;
		width:100%;
		opacity: 0;
		transition: opacity .25s ease-in-out;
	}
	.icon img.visible {
		opacity: 1;
	}

	.eventplanner .heading {
		color:#ffffff;
	}
	.eventplanner .clickable {
		cursor: pointer;
	}
	.eventplanner .clickable:hover {
		color: #c2c3c3;
	}
	.eventplanner .title {
		color: #c2c3c3;
	}
	.eventplanner .elementdetail {
		border-radius:5px;
		border: 1px solid #ffffff;
		margin:15px;
		padding:15px;
	}
	.eventplanner .axis line{
	  stroke:  #ffffff;
	}

	.eventplanner .axis path{
	  stroke:  #ffffff;
	}

	.eventplanner .axis text{
	  fill:  #ffffff;
	}