myChart.css

.form-check-inline {
	font-weight: bold;
	border-radius: 0.5rem;
}

#areaChartContainer {
    position: absolute;
	top: 305px;
    left: 210px;
    width: 800px;
	height:400px;
	visibility: hidden;
}

#singleChartContainer {
    position: absolute;
    top: 15px;
	right: 500px;
    width: 500px;
	height:250px;
	visibility: hidden;
}

.container {	
	padding: 2rem 0rem;
  }
  
.c-container {
	position: absolute;
	top: 10px;
	right: 5%;
	width: 200px;
	height: 120px;
	background-color: #c0c0c0;
	border-radius: 0.5rem;
	padding: 1.2rem 1.2rem;
	margin: 1rem 0rem;
}

.myChart{
	background: rgb(255, 255, 255);
	border-radius: 0.5rem;
}

#cesiumContainer {
	top: 0px;
	left: 0px;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: -1;
}

#sidebar {
	position:absolute;
	top:0px;
	left:-200px;
	width:200px;
	height:100%;
	background:#151719;
  transition:all 300ms linear;
}

#sidebar.active {
	left:0px;
}

#sidebar .toggle-btn {
	position:absolute;
	left:220px;
	top:10px;
}

#sidebar .toggle-btn span {
	display:block;
	width:30px;
	height:5px;
	background:#ffffff;
	margin:5px 0px;
	cursor:pointer;
}

#sidebar div.list div.item{
	padding:15px 10px;
	border-bottom:1px solid #444;
	color:#fcfcfc;
	text-transform:uppercase;
	font-size:15px;
}

#sidebar div.list div.button {
	padding:15px 10px;
	border-bottom:1px solid #444;
	color:#fcfcfc;
	text-transform:uppercase;
	font-size:15px;
	cursor:pointer;
}

#sidebar div.list {
  width:200px;
	height:100%;
	overflow-y: auto;
}

.dropdown-btn {
	padding: 15px 10px;
	text-decoration: none;
	font-size: 15px;
	color:#fcfcfc;
	display: block;
	border-bottom:1px solid #444;
	background: none;
	width:100%;
	text-align: left;
	cursor: pointer;
	outline: none;
  }
/* Add an active class to the active dropdown button */
.active {
	background-color: royalblue;
	color: white;
  }
  
  /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
  .dropdown-container {
	display: none;
	background-color: #262626;
	padding-left: 8px;
  }
  
  /* Optional: Style the caret down icon */
  .fa-caret-down {
	float: right;
	padding-right: 8px;
  }

  .buttonBlue1{
    border-radius: 0.5rem;
    margin-left: 5px;
	margin: 6px;
	width: 120px;
}

.buttonBlue2 {
    border-radius: 0.5rem;
    margin-left: 5px;
}

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.building{background-image:url(../Images/building.png);text-align: right;}
.surface{background-image:url(../Images/surface.png);text-align: right;}

.cc-selector input:active + div +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked + div +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:list-item;
    width:50px;height:50px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

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

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(190, 190, 190);
    -webkit-transition: .4s;
    transition: .4s;
  }

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

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

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

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

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

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

  input:checked + div + label{
    color: lime;
    margin-left: 15px;
    font-weight: 1000;
  }

  .credit {
    width: 100px;
    height: 100px;
    position: absolute;
    background: url(../Images/HFT_logo.svg);
    background-size: 110px;
    bottom: 50px;
    left: 30px;
    border-radius: 5px;
    box-shadow: 0 0 10px 1px rgb(255, 255, 255);
}

/*Heating Legende*/


.legends {
transform: translate(0, 0);
display: none;
bottom: 35px;
right: 10px;
width: 70%;
max-width: 480px;
color: #edffff;
border: 1px solid #444;
border-right: none;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
box-shadow: 0 0 10px 1px #000;
opacity: 0.9;
transition: visibility 0s 0.3s, opacity 0.3s ease-in, transform 0.3s ease-in;
background: rgba(42, 42, 42, 0.9);
position: absolute;
padding: 8px;
border-radius: 10px;
}

#heat-demand-legend {
  visibility: hidden;
}

.heat-demand-legend-container {
	background: rgba(42, 42, 42, 0.9);
	padding: 8px;
	border-radius: 4px;
	text-align: center;
}

#heat-demand-legend-title {
	margin: 0px;
	padding-bottom: 10px;
}

.Heat-Demand-Bar {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 30px;
	background: linear-gradient(to right, #00ff00 0%, #ffff00 50%, #800000 100%);
	color: #000;
	font-size: 14px;
	font-weight: bold;
	opacity: 1;
}
#top {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

#bottom {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	font-size: 145%;
}

#arrow-slider {
	display: block;
	width: 100%;
	height: 25px;
}

#arrow {
	position: absolute;
	top: 66%;
	left: 0px;
	visibility: hidden;
	color: #000;
	font-size: 35px;
	font-weight: bold;
}

#bottom-round {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}

.line {
	font-size: 145%;
}

.values {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	height: 25px;
	color: #edffff;
	font-size: 14px;
	font-weight: bold;
}

#languagebuttons{
	float:right;
}

.hilfe {
	float:right;
}

.loader {
	border: 10px solid #f3f3f3; /* Light grey */
	border-top: 10px solid #2196F3; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;

	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
}


@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
}

/* The Close Button */
.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}