:root {
  --display-width: 1280px; 
  --water-color: #00b2ff;
  --power-color: #f18c00;
  --water-color-darker: #285f76;
  --power-color-darker: #705329;
  --water-color-soft: #92deff;
  --power-color-soft: #ffeec0;
  --solar-color: #ffcb00;
  --messages-color: #ffffff;
  --message-color-background: #2e2d2d;
  --main-background-top-color: #4a4b4b;
  --main-background-bottom-color: #2e3131;
  --slider-color: #535353;
  --slider-active-color: white;
  --statistics-text-color: #c1c1c1;
  --warning-color: #d03f00;
  --font-size-1: 46px;
  --font-size-2: 24px;
  --font-size-3: 17px;
  --font-size-4: 14px;
  --font-size-5: 20px;
  --font-size-6: 32px;
  --top-bar-height: 40px;
  --bottom-bar-height: 80px;
  /* scrollbar-color: var(--main-background-top-color) var(--main-background-bottom-color); */
  scrollbar-color: dark;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-Ultralight.otf") format("opentype");
	font-weight: 100;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-Thin.otf") format("opentype");
	font-weight: 200;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-Light.otf") format("opentype");
	font-weight: 300;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-Regular.otf") format("opentype");
	font-weight: 400;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-Medium.otf") format("opentype");
	font-weight: 500;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-Semibold.otf") format("opentype");
	font-weight: 600;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-Bold.otf") format("opentype");
	font-weight: 700;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-Heavy.otf") format("opentype");
	font-weight: 800;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-Black.otf") format("opentype");
	font-weight: 900;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-UltralightItalic.otf") format("opentype");
	font-weight: 100;
	font-style: italic;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-ThinItalic.otf") format("opentype");
	font-weight: 200;
	font-style: italic;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-LightItalic.otf") format("opentype");
	font-weight: 300;
	font-style: italic;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-RegularItalic.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-MediumItalic.otf") format("opentype");
	font-weight: 500;
	font-style: italic;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-SemiboldItalic.otf") format("opentype");
	font-weight: 600;
	font-style: italic;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-BoldItalic.otf") format("opentype");
	font-weight: 700;
	font-style: italic;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-HeavyItalic.otf") format("opentype");
	font-weight: 800;
	font-style: italic;
}

@font-face {  
	font-family: "SF-DISPLAY";  
	src: url("../fonts/SF-Pro-Display-BlackItalic.otf") format("opentype");
	font-weight: 900;
	font-style: italic;
}

body {
	color: white;
	font-size: var(--font-size-4);
	font-family: SF-DISPLAY, Arial, sans-serif;
	line-height: normal;
	background-color: var(--main-background-top-color);
}

h1 {
	font-size: var(--font-size-1);
}

h2 {
	font-size: var(--font-size-6);
	font-weight: bold;
}

h3 {
	font-size: var(--font-size-5);
}

h4 {
	font-size: var(--font-size-3);
}

div {
	display: block;
}

table {
	display: block;
}

#container {
	background: -prefix-linear-gradient(top, var(--main-background-top-color), var(--main-background-bottom-color)); 
	background: linear-gradient(to bottom, var(--main-background-top-color), var(--main-background-bottom-color));
	width:100%;
	overflow: auto;
	position: absolute;
	top:0;
	bottom:0;
	height:auto;
}

#top-bar {
	background-color: black;
	width: 100%;
	height:  var(--top-bar-height);
	display: block;
	position: relative;
	top: 0;
	position: fixed;
	z-index: 10;
}

#top-bar-wrapper {
	width: var(--display-width);
	height:  var(--top-bar-height);
	display: block;
	padding-left: 12px;
	padding-right: 12px;
	padding-top: 9px;
	font-size: var(--font-size-3);
	margin: 0 auto;
	font-weight: bold;
}

#appartement, #passivhaus, #debug_hint {
	float: left;
	display: block;
}

#debug_hint {
	float: left;
    position: fixed;
    left: 50%;
}

#debug_hint div {
	background-color: red;
	color: white;
	padding: 1px 3px 1px 3px;
	position: relative;
	float: left;
	margin: auto;
	display: block;
	left: -50%;
	cursor: pointer;
}

#debug_hint div.hide_debug {
	color: #ffaaaa;
}

#appartement {
	width: 200px;
}

#passivhaus {
	width: 180px;
	margin-left: 344px;
}

#date {
	float: right;
	display: block;
	margin-right: 20px;
}

#language-select {
	width: 100px;
	float: right;
	display: block;
	top: -3px;
	position: relative;
}

#language-select img {
	width: 46px;
	height: 26px;
	margin-left: 4px;
	cursor: pointer;
	border: 1px solid white;
}

#language-select .not-active {
	-webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
	filter: grayscale(80%);
}


#bottom-bar {
	background-color: black;
	width: 100%;
	height:  var(--bottom-bar-height);
	display: block;
	position: relative;
	bottom: 0;
	padding-left: 12px;
	padding-right: 12px;
	position: fixed;
	z-index: 10;
}

#slider-control {
	width: 500px;
	height: 48px;
	margin: 0 auto;
	display: block;
	top: 16px;
	position: relative;
}

.carousel-inner {
	display: block;
	position: relative;
}

/* Anpassen der Geschwindigkeit der Slider-Animation */
.carousel-inner > .carousel-item {
	-webkit-transition: -webkit-transform 0.2s ease-in-out !important;
	-o-transition: -o-transform 0.2s ease-in-out !important;
	transition: transform 0.2s ease-in-out !important;
}

.carousel-inner-wrapper {
	width: var(--display-width);
	height: 690px;
	display: block;
	margin: var(--top-bar-height) auto 0 auto;
}

.carousel-indicators {
	position: relative;
	float: left;
	margin: 0 38px 0 38px;
}

.carousel-indicators > li {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	margin-left: 16px;
	margin-right: 16px;
	color: var(--slider-color); 
}

.carousel-control-prev-icon {
	background-image: url("../img/slider-left.png");
	background-repeat: no-repeat;
	color: var(--slider-color);
}

.carousel-control-next-icon {
	background-image: url("../img/slider-right.png");
	background-repeat: no-repeat;
	color: var(--slider-color);
}

.carousel-control-next-icon.active, .carousel-control-prev-icon.active {
	color: var(--slider-color);
}

.carousel-indicators .active {
	color: var(--slider-active-color);
}

.carousel-item > div > div {
	padding: 24px 12px 24px 12px;
}

.carousel-control-prev, .carousel-control-next {
	position: relative;
	float: left;
	width: 24px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
	width: 24px;
	height: 48px;
}


.single {
	width: 100%;
	height: 680px;
}

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


.dual {
	width: 100%;
	height: 690px;
}

.dual > div {
	width: 50%;
	height: 100%;
	float: left;
	display: block;
}

.dual > div:first-child {
	border-right: solid 5px #000000; 
}

.dual > div:nth-child(2) {
	border-left: solid 5px #000000;
}

.dual .solar, .dual .solar-image  {
	border: none !important;
}

.head {
	height: 56px;
}

.main > div > div:nth-child(2) {
	margin-top: 56px;
	height: 78px;
}
.main > div > div:nth-child(3) {
	margin-top: 56px;
	height: 78px;
}

.childdivs-float-left > div {
	float: left;
}

.horizontal-bar .text {
	height: 26px;
	font-size: var(--font-size-3);
	margin-bottom: 10px;
}

.horizontal-bar .bar > div > div {
	float:left;
}

.horizontal-bar .text > div:first-child {
	float:left;
}

.horizontal-bar .text > div:last-child {
	float:right;
}

.power .horizontal-bar .text > div:last-child {
	color: var(--power-color-soft);
}

.power .bar .bar-consumption  {
	background-color: var(--power-color);
}

.water .horizontal-bar .text > div:last-child {
	color: var(--water-color-soft);
}

.water .bar .bar-consumption  {
	background-color: var(--water-color);
}

.horizontal-bar  .bar {
	font-size: var(--font-size-3);
}

.horizontal-bar  .bar > div {
	display: table-cell;
	vertical-align: middle;
	position: absolute;
}

.bar .bar-rest  {
	background-color: #7a7a7a;
}

.horizontal-bar  .bar .text-consumption {
	padding-left: 24px;
	font-size: var(--font-size-2);
}

.horizontal-bar  .bar .marker {
	width: 13px;
	height: 41px;
	background-repeat: no-repeat;
}

.power .horizontal-bar .bar .marker {
	background-image: url("../img/marker_power.png");
}

.power .head .icon {
	width: 36px;
	height: 47px;
	background-image: url("../img/power.png");
	background-repeat: no-repeat;
}

.power .head .text {
	color: var(--power-color);
	font-size: var(--font-size-1);
	font-weight: lighter;
	margin-left: 20px;
}

.water .head .icon {
	width: 32px;
	height: 45px;
	background-image: url("../img/water.png");
	background-repeat: no-repeat;
}

.water .head .text {
	color: var(--water-color);
	font-size: var(--font-size-1);
	font-weight: lighter;
	margin-left: 20px;
}

.water .horizontal-bar .bar .marker {
	background-image: url("../img/marker_water.png");	
}

.solar .head .icon {
	width: 56px;
	height: 56px;
	background-image: url("../img/sun.png");
	background-repeat: no-repeat;
}

.solar .head .text {
	color: var(--solar-color);
	font-size: var(--font-size-1);
	font-weight: lighter;
	margin-left: 20px;
}

.solar table {
	padding-top: 130px;
}

.solar table tr {
	height: 110px;
}

.solar table td {
	font-size: var(--font-size-1);
	font-weight: lighter;
	vertical-align: text-bottom;
}

.solar table td:first-child {
	font-weight: normal; 
	font-size: var(--font-size-6);
	padding-right: 20px;
}

.solar-image img {
	width: 611px;
	display: block;
	padding-top: 151px;
}


.messages .head .icon {
	width: 47px;
	height: 35px;
	background-image: url("../img/messages.png");
	background-repeat: no-repeat;
	margin-top: 9px;
}

.messages .head .text {
	color: var(--messages-color);
	font-size: var(--font-size-1);
	font-weight: lighter;
	margin-left: 20px;
}

.messages {
	font-size: var(--font-size-2);
	padding-left: 66px;
	padding-bottom: calc(var(--bottom-bar-height) + 24px) !important;
}

.messages .messages-unread .message, .messages .messages-read .message {
	font-size: var(--font-size-3);
	width: 1090px;
	min-height: 79px;
	height: auto;
	padding: 10px 84px 10px 10px;
	background-color: var(--message-color-background);
	margin: 0 auto 8px auto;
	position: relative;
}

.messages .messages-read div:first-child {
	padding-top: 10px;
	padding-bottom: 8px;
}

.messages .messages-unread div:first-child {
	padding-bottom: 8px;
} 

.button-read {
	width: 63px;
	height: 59px;
	background-image: url("../img/button_read.png");
	background-repeat: no-repeat;
	position: absolute;
	right: 10px;
	text-align: center;
	cursor: pointer;
}

.message .text {
	font-weight: lighter;
}


.prognosis {
	height: 180px;
} 

.prognosis table {
	font-weight: 400; 
	font-size: var(--font-size-2);
	border: 0;
}

.prognosis table td.negative {
	color: red;
}

.prognosis table td.positive {
	color: green;
}

.prognosis table td {
	padding: 0;
	text-align: left;
	border-bottom: 2px solid white;
}
.prognosis table td:first-child, .prognosis table tr:first-child td {
	font-weight: 500;
}

.prognosis table td:first-child {
	width: 196px;
}

.prognosis table td:nth-child(2) {
	width: 300px;
}

.prognosis table td:nth-child(3) {
	width: 380px;
}

.prognosis table td:nth-child(4) {
	width: 222px;
}

.prognosis table td:nth-child(5) {
	text-align: right;
	width: 158px;
}


.vertical-bar { 
	width: 100%;
}

.vertical-bar .budget-marker {
	position: relative;
	height: 2px;
	background-color: white;
	z-index: 1;
}

.vertical-bar .bar-group {
	float: left;
}

.vertical-bar .bar-group .text {
	position: relative;
	top: -18px;
	font-size: var(--font-size-5);
	text-align: center;
}

.vertical-bar .bar-group .value {
	z-index: 2;
	font-size: var(--font-size-3);
	text-align: center;
	font-weight: bold;
}

.power .vertical-bar .bar {
	background-color: var(--power-color);
}

.power .with-average .bar-group:last-child .bar {
	background-color:  var(--power-color-darker);
}

.water .vertical-bar .bar {
	background-color: var(--water-color);
}

.water .with-average .bar-group:last-child .bar {
	background-color:  var(--water-color-darker);
}

.bar {
	z-index: 1;
	position: relative;
}

.budget-wrapper {
	width: 100%;
	height: 190px;
}

.budget-wrapper .marker-text {
	width: 190px;
	float: left;
	position: relative;
	text-align: left;
	font-size: var(--font-size-2);
}

.budget-wrapper .vertical-bar {
	float: left;
}


.statistics .head {
}

.statistics-rows {
	height: 156px;
	font-size: var(--font-size-2);
	font-weight: lighter;
	display: inline-block;
}

.statistics-rows > div {
	float: left;
}

.statistics-rows > div:first-child {
	float: none;
	height: 36px;
}

.statistics .bar-group > .value {
	font-size: var(--font-size-4);
	font-weight: 300;
}

.statistics .bar-group > .text {
	font-size: var(--font-size-3);
	top: -16px;
}

.statistics-averages {
	width: 91px;
	height: 136px;
	font-size: var(--font-size-3);
	padding-left: 10px;
	top: -20px;
	position: relative;
}

.statistics-averages > div:nth-child(even) {
	font-weight: 100;
	color: var(--statistics-text-color);
	padding-bottom:4px;
}

.darker {
	-webkit-filter: brightness(70%); /* Safari 6.0 - 9.0 */
	filter: brightness(70%);
}

.prognosis-field {
	padding: 16px 13px;
	width: 635px; 
	position: relative;
	left: -12px;
	min-height: 152px;
	margin-top: 70px;
	cursor: pointer;
}

.prognosis-field > .text {
	width: 471px;
	padding-left: 12px;
}

.prognosis-field > div {
	float: left;
	font-size: var(--font-size-5);
}

.prognosis-field > .text > div:first-child {
	font-size: var(--font-size-6);
}

.prognosis-field > .text > div:nth-child(2) {
	font-size: var(--font-size-2);
	font-weight: 900;
	margin-bottom: 4px;
}

.prognosis-attention .icon {
	width: 138px;
	height: 120px;
	background-image: url("../img/attention.png");
	background-repeat: no-repeat;
}

.prognosis-ok .icon {
	width: 120px;
	height: 120px;
	background-image: url("../img/ok.png");
	background-repeat: no-repeat;
}

.prognosis-ok > .text {
	padding-top: 24px;
}

.prognosis-warning .icon {
	width: 120px;
	height: 120px;
	background-image: url("../img/warning.png");
	background-repeat: no-repeat;
}

.prognosis-warning {
	background-color: var(--warning-color);
	min-height: 196px;
}

.prognosis-warning > .text {
	width: 489px;
}

.send-power-on, .send-water-on {
	min-height: 184px;
}

.send-power-on .text, .send-water-on .text {
	padding-left: 70px;
}

.send-power-on .text .switch, .send-water-on .text .switch {
	padding-top: 10px;
}

.send-power-on .text .switch div:first-child, .send-water-on .text .switch div:first-child {
	width: 100px;
	height: 66px;
	background-image: url("../img/on-switch.png");
	background-repeat: no-repeat;
	float: left;
	margin-right: 40px;
}

.send-power-on .text .switch div:nth-child(2), .send-water-on .text .switch div:nth-child(2) {
	font-size: var(--font-size-2);
	font-weight: 900;
	padding-top: 6px;
}

#message-indication {
	width: 60px;
	height: 45px;
	background-image: url("../img/mail.png");
	background-repeat: no-repeat;
	position: absolute;
	bottom: 16px;
	cursor: pointer;
}

#message-indication.selected {
	-webkit-filter: brightness(50%); /* Safari 6.0 - 9.0 */
	filter: brightness(50%);
}

#message-indication.unread-messages {
	width: 73px;
	height: 57px;
	background-image: url("../img/mail_point.png");
}

#message-indication > .number {
	position: relative;
	font-weight: 800;
	left: 52px;
	top: 4px;
	font-size: var(--font-size-3);
}

#message-indication > .number2 {
	position: relative;
	font-weight: 800;
	left: 47px;
	top: 4px;
	font-size: var(--font-size-3);
}

.error {
	font-size: var(--font-size-6);
	text-align: center;
	margin-top: 300px;
	font-weight: bolder;
}

#debug_output {
	position: fixed;
	display: none;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	z-index: 1000;
	background-color: white;
	border: 2px solid red;
	padding: 1%;
	color: red;
	cursor: text;
}

#debug_output #close_button {
	position: absolute;
	display: block;
	right: 1.2%;
	top:3%;
	width: 20px;
	height: 26px;
	padding: 5px;
	background-color: red;
	color: white;
	font-weight: bolder;
	cursor: pointer;
}

#debug_output #debug_text {
	overflow: auto;
	height: 94%;
	scrollbar-gutter: auto;
}