* {box-sizing: border-box;}
html {font-family:Helvetica, Arial, Verdana, sans-serif;font-size: 100%;}
body { margin:0;background-color: rgb(18, 87, 142);color: rgb(255, 255, 255);}

/* TopNavig */
.header {background: rgb(16,80,130);background: linear-gradient(121deg, rgba(16,80,130,1) 1%, rgba(10,56,92,1) 66%, rgba(10,56,92,1) 100%);box-shadow: 0 4px 8px 0 rgba(0,0,0,.16),0 0 8px 0 rgba(0,0,0,.08);padding: 8px 32px 0;}
.h1_not_selected {
    display: inline-block;
    padding: 16px 14px 10px;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 1.1rem;
    letter-spacing: .4px;
    line-height: 1.25;
    border-radius: 2px;
    transition: background-color .2s ease-in-out;
    color: #ffffff;
	cursor: pointer;
	}
.h1_selected {
    display: inline-block;
    padding: 16px 14px 10px;
    border-bottom: 2px solid white;
    font-family: inherit;
    font-size: 1.1rem;
    letter-spacing: .4px;
    line-height: 1.25;
    border-radius: 2px;
    transition: background-color .2s ease-in-out;
    color: #ffffff;
	font-weight:bold;
	cursor: pointer;
	}
.navig{overflow-x: auto; overflow-y: hidden; white-space: nowrap}
/** SubNavig **/
.parameter_navig{ margin-left:auto; margin-right:auto; width:100%; padding:7px;background-color: #0d446f;}
.datasection{color:#ffffff;text-align:center}
.datasection_h2{width:60px;color:#ffffff;background-color:transparent;font-size:1.2rem;font-weight:bold;text-align:center;padding:10px;border-radius: 2px;}
.datasection_h2_selected{width:60px;color:#ffffff;background-color:#1a7ac5;font-size:1.2rem;font-weight:bold;text-align:center;padding:10px;border-radius: 2px;}
button {
	position: relative;
	margin: 0 0.5rem 0 0.5rem;
	padding: 0.5rem 0.5rem 0 0.5rem;
	width: 35px;height: 35px;
	background: transparent;
	color: white;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 3px;
	cursor: pointer;
	transition: all ease 2s;
	background-size: 25px;background-repeat: no-repeat;background-position: center;
}
button:active {background-color: #1a7ac5;}

.ritter_temp {background-image: url(img/navig/temperatur.png);}
.ritter_temp_active {background-image: url(img/navig/temperatur_selected.png);background-color: #1a7ac5;}
.ritter_hum {background-image: url(img/navig/luftfeuchtigkeit.png);}
.ritter_hum_active {background-image: url(img/navig/luftfeuchtigkeit_selected.png);background-color: #1a7ac5;}
.ritter_pcp {background-image: url(img/navig/regen.png);}
.ritter_pcp_active {background-image: url(img/navig/regen_selected.png);background-color: #1a7ac5;}
.ritter_snow {background-image: url(img/navig/snow.png);}
.ritter_snow_active {background-image: url(img/navig/snow_selected.png);background-color: #1a7ac5;}
.ritter_sun {background-image: url(img/navig/sonne.png);}
.ritter_sun_active {background-image: url(img/navig/sonne_selected.png);background-color: #1a7ac5;}
.ritter_wind {background-image: url(img/navig/wind.png);}
.ritter_wind_active {background-image: url(img/navig/wind_selected.png);background-color: #1a7ac5;}
.ritter_windrose {background-image: url(img/navig/windrose.png);}
.ritter_windrose_active {background-image: url(img/navig/windrose_selected.png);background-color: #1a7ac5;}
.ritter_druck {background-image: url(img/navig/druck.png);}
.ritter_druck_active {background-image: url(img/navig/druck_selected.png);background-color: #1a7ac5;}
.ritter_scatter {background-image: url(img/navig/charakter.png);}
.ritter_scatter_active {background-image: url(img/navig/charakter_selected.png);background-color: #1a7ac5;}
.ritter_heatmap {background-image: url(img/navig/heatmap.png);}
.ritter_heatmap_active {background-image: url(img/navig/heatmap_selected.png);background-color: #1a7ac5;}


/** Timemachine **/
.time_not_selected{color:#ffffff;font-size:0.8rem;padding:0.2rem; border-right: 1px solid rgba(255,255,25,0.4); cursor: pointer;}
.time_selected{color:#c91024;background-color:#ffffff;font-weight:bold;font-size:0.8rem; border-right: 1px solid transparent;cursor: pointer;}
.time_not_selected2{color:#ffffff;font-size:0.8rem;padding:0.1rem; border-right: 1px solid rgba(255,255,25,0.4);cursor: pointer; }
.time_selected2{color:#c91024;background-color:#ffffff;font-weight:bold;font-size:0.8rem; border-right: 1px solid transparent;cursor: pointer;}

.card {max-width: 100%;margin: 0 auto;}
.card {
	display: grid;
    grid-template-columns: 75% 25%;
    grid-template-areas: 
      "header header"
      "media sidebar"
	  "mediawide mediawide"
	  "sidebarwide sidebarwide";
   }

/** Größere Monitore **/
.header {grid-area: header; position: sticky;top: 0;z-index:5}
.media {grid-area: media; background: rgb(18, 87, 142);height:509.5px}
.mediawide {grid-area: mediawide; background: rgb(18, 87, 142);height:509.5px;width:100%}
.content {grid-area: sidebar; background: rgb(18, 87, 142)}
.contenthell {grid-area: sidebarwide; padding-left:0rem; padding-right:0rem; padding-top:2rem; padding-bottom:2rem; background: #1871b6}
.container{width: 100%; height: 100%; margin: 0 auto}
.textweiss{color:#ffffff;font-size:3rem;}

/** Tabelle bei 24 Stunden **/
.datatable {background-color:#1871b6; width:100%; align-items: center; justify-content: center;padding-bottom:5px}
.datatable_title{color:#ffffff;font-size:2rem;font-weight:bold;padding-left: 15px}
.datatable_subtitle{color:#ffffff;font-size:1rem;}
.datatable_head{color:#ffffff;font-size:1.1rem;font-weight:bold;padding-left: 15px;padding-right: 25px;}
.datatable_data{color:#ffffff;font-size:0.9rem;padding-left: 25px;padding-right: 15px;}
.datatable_data_center{color:#ffffff;font-size:0.9rem;padding-left: 5px;padding-right: 5px; text-align:center}
.datatable_datafix{color:#ffffff;font-size:0.9rem;width:5rem;padding-left: 15px;padding-right: 15px;white-space: nowrap;}

.datatable tr:nth-child(odd){ background-color: #1871b6;}
/*  Define the background color for all the EVEN background rows  */
.datatable tr:nth-child(even){background-color: rgb(18, 87, 142)}

.tablescrollable {
  overflow-x: auto; overflow-y: hidden; position: absolute;margin:0;left:0;width:100%; background: #1871b6
}

/** FORECAST **/
.fcstdiv{width:100%;overflow-x: auto; overflow-y: hidden; white-space: nowrap;padding: 8px 42px 0;}
.fcsttable{width:1440px;border;0}
.fcsttd{width:50%;}
.title { color: #ffffff;font-size: 2rem;font-weight: bold;height: 0.7cm;	}
.subtitle {color: #ffffff;font-size: 0.9rem;}
.forecast-icons {height: 70px;margin: 0;padding: 0;}
.forecast-temp {height: 110px;margin: 0; }
.forecast-glo {height: 80px;margin: 0;}
.forecast-tw { height: 80px;margin: 0;}
.forecast-winddir {height: 25px;margin: 0;}
.forecast-wind {height: 80px;margin: 0;}
.forecast-sunshine {height: 80px;margin: 0;}
.forecast-precip { height: 80px;margin: 0;}


.forecast-newicons {height: 280px;margin: 0;padding: 0;}
.forecast-newtemp {height: 180px;margin: 0; }
.forecast-newwinddir {height: 25px;margin: 0;}
.forecast-newwind {height: 120px;margin: 0;}
.forecast-newsunshine {height: 80px;margin: 0;}




@media screen and (min-device-width: 768px) and (max-device-width: 1023px){
  .h1_not_selected { font-size: 1.6rem; color:#ffffff }
  .h1_selected { font-size: 1.6rem; color:#ffffff }
  .datasection_h2{font-size:1.1rem;padding:10px;}
  .datasection_h2_selected{font-size:1.1rem;padding:10px;}
  .time_not_selected{font-size:1.3rem;padding:0.3rem;line-height: 1.2;}
  .time_selected{font-size:1.3rem;padding:0.3rem;line-height: 1.2;}
  .time_not_selected2{font-size:1.1rem;padding:0.2rem;line-height:1.2;}
  .time_selected2{font-size:1.1rem;padding:0.2rem;line-height:1.2;}
  .card {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 0px;
  grid-template-areas: 
    "header"
    "media"
    "sidebar"
	"mediawide"
	"sidebarwide";
		}
  .media { background: rgb(18, 87, 142); height: 500px; width: 100%; }
  .mediawide {height:700px}
  .content { height: 100%;position: relative;top: 70px;background-color: #1871b6; }
  .contenthell { height: 100%;position: relative;top: 70px;background-color: #1871b6; }
  .datatable_head{font-size:1.3rem;}
  .datatable_data{font-size:1.1rem;padding-left: 25px;}
  .datatable_datafix{font-size:1.1rem;width:10rem;}
  }
@media screen and (min-device-width: 480px) and (max-device-width: 767px) {
  .h1_not_selected { font-size: 2rem; color:#ffffff }
  .h1_selected { font-size: 2rem; color:#ffffff }
  .datasection_h2{font-size:1.3rem;padding:10px;}
  .datasection_h2_selected{font-size:1.3rem;padding:10px;}
  .time_not_selected{font-size:1.3rem;padding:0.3rem;line-height: 1.1;}
  .time_selected{font-size:1.3rem;padding:0.3rem;line-height: 1.1;}
  .time_not_selected2{font-size:1.1rem;padding:0.3rem;line-height: 1.1;}
  .time_selected2{font-size:1.1rem;padding:0.3rem;line-height: 1.1;}
  .card {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 0px;
  grid-template-areas: 
    "header"
    "media"
    "sidebar"
	"mediawide"
	"sidebarwide";
		}
  .media { background: rgb(18, 87, 142); height: 500px; width: 100%; }
  .mediawide {height:700px}
  .content { height: 100%;position: relative;top: 70px;background-color: #1871b6; }
  .contenthell { height: 100%;position: relative;top: 70px;background-color: #1871b6; }
  .datatable_head{font-size:1.3rem;}
  .datatable_data{font-size:1.1rem;padding-left: 25px;}
  .datatable_datafix{font-size:1.1rem;width:10rem;}
  }
@media screen and (min-device-width: 320px) and (max-device-width: 479px) {
  .h1_not_selected { font-size: 3rem; color:#ffffff; }
  .h1_selected { font-size: 3rem; color:#ffffff }
  .datasection_h2{font-size:1.5rem;padding:10px;}
  .datasection_h2_selected{font-size:1.5rem;padding:10px;}
  .time_not_selected{font-size:2.2rem;padding:0.8rem;line-height: 1; }
  .time_selected{font-size:2.5rem;line-height: 1;}
  .time_not_selected2{font-size:2rem;padding:0.4rem;line-height: 1; }
  .time_selected2{font-size:2rem;padding:0.4rem;line-height: 1;}
  .card {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 0px;
  grid-template-areas: 
    "header"
    "media"
    "sidebar"
	"mediawide"
	"sidebarwide";}
  .media { background: rgb(18, 87, 142); height: 500px; width: 100%; }
  .mediawide {height:700px}
  .content { height: 100%; position: relative;top: 75px;background-color: #1871b6;}
  .contenthell {  height: 100%; position: relative;top: 75px;background-color: #1871b6;}
  .datatable_head{font-size:1.4rem;}
  .datatable_data{font-size:1.2rem;padding-left: 25px;}
  .datatable_datafix{font-size:1.2rem;width:10rem;}
  }
 
@media screen and (max-device-width: 1000px) { 
  .fcsttable{width:2880px;}
  .forecast-gradient {height: 380px;}
  .forecast-icons {height: 180px;}
  .forecast-temp {height: 200px; }
  .forecast-winddir {height: 50px;}
  .forecast-wind {height: 160px;}
  .forecast-precip {height: 160px;}
  .forecast-glo {height: 160px;}
  .forecast-tw { height: 160px;}
  }
 /*   320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
*/


/** Admin interface **/
.status_red{color:#000000;background-color:#FF8453;border-color:#FF8453;border-width:1px;border-style:solid; font-size:10px;font-family:Helvetica, Arial, Verdana, sans-serif;}
.status_yellow{color:#000000;background-color:#FFFF00;border-color:#FFFF00;border-width:1px;border-style:solid; font-size:10px;font-family:Helvetica, Arial, Verdana, sans-serif;}
.status_green{color:#000000;background-color:#7ece00;border-color:#D0D0D0;border-width:1px;border-style:solid;font-size:10px;font-family:Helvetica, Arial, Verdana, sans-serif;}
.status_grey{color:#000000;background-color:#808080;border-color:#D0D0D0;border-width:1px;border-style:solid;font-size:10px;font-family:Helvetica, Arial, Verdana, sans-serif;}
.status_lightgrey{color:#000000;background-color:#CCCCCC;border-color:#D0D0D0;border-width:1px;border-style:solid;font-size:10px;font-family:Helvetica, Arial, Verdana, sans-serif;}
.systemmessage{color:#000000;font-size:11px;font-family:monospace;}