/*Loader*/
.loader{
	z-index: 289;
	position: fixed; /* Positionierung an Viewport */
	width: 100%; /* Volle Breite */
	height: 100%; /* Volle Hoehe */
	display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsla(0, 0%, 50%, 0.4);
	
	
}
	.lds-dual-ring {
  display: inline-block;
  width: 64px;
  height: 64px;
  
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 46px;
  height: 46px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #91c091;
  border-color: #91c091 transparent #91c091 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
	
/*Loader-END*/	
body {
    text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #f2e6d9;
	hyphens: auto;
	color: black;
}
.vl {
  border-left: 200px solid white;
  height: 5000px;
  position: absolute;
  left: 20%;
  margin-left: -3px;
  top: 90;
}


hr {
  background-color: black;
  color: black;
  border:#FFFFFF;
  height:1px;
}

#website {
    width:900px;
    margin:auto;
    text-align:left;
}
/*Änderung Hervorheben*/
.aenderung {
  animation: aenderung-animation 1s 1;
}
@keyframes aenderung-animation {
  to {
    background-color: hsla(52, 100%, 51%, 0.3);
  }
}
/* unvisited link */
a:link {
  color: black;
}
/* visited link */
a:visited {
  color: black;
}
/* mouse over link */
a:hover {
  color: hotpink;
}
/* selected link */
a:active {
  color: black;
}
#dahoam {
  color: black;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}
h2 {
  color: black;
  font-size: 16px;
  text-align:left;
}

h3 {
  color: black;
  font-size: 12px;
  text-align:center;
}
h2_c {
  color: black;
  font-size: 20px;
  text-align:center;
  padding-top:40px;
  padding-bottom:40px;
  font-weight: bold;
}

.blink-two {
  animation: blinker-two 1.4s linear infinite;
}
@keyframes blinker-two {  
  100% { opacity: 0; }
}

.icon{
	padding-top:20px;
	width:40px;
	height:40px;
	border:0;
}


.iconBG {
	background-color: rgba(56, 56, 54, 0.9);
    width: 80px;
    height: 80px;
	margin-left: 15px;
    border: 0px solid black;
    text-align: center;
	border-radius: 100px;
}
.iconBG2 {
	background-color: rgba(56, 56, 54, 0.9);
    width: 80px;
    height: 80px;
    border: 0px solid black;
    text-align: center;
	border-radius: 100px;
}
.K_icon{
	padding-top:10px;
	width:30px;
	height:30px;
	border:0;
}

.K_iconBG {
	background-color: rgba(56, 56, 54, 0.9);
    width: 50px;
    height: 50px;
	margin-left: 5px;
    border: 0px solid black;
    text-align: center;
	border-radius: 100px;
}
.textK{
	color: white;
	font-size: 12px;	
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 5px;
	white-space: nowrap;
    overflow: hidden;
    width: 160px;
    text-overflow: ellipsis;
}
.textB{
	color: white;
	font-size: 14px;	
	font-weight: bold;
	margin-top: 5px;
	margin-left: 10px;
	margin-bottom: 5px;
	white-space: nowrap;
    overflow: hidden;
    width: 160px;
    text-overflow: ellipsis;
}
.textS{
	color: black;
	font-size: 14px;	
	font-weight: bold;
	align: center;
}

.textSb{
	color: black;
	font-size: 12px;	
	font-weight: bold;
	align: center;
	text-align: center;
	max-width:100%;   
	-webkit-hyphens: auto; 
	hyphens: auto; 
}

.textSk{
	color: black;
	font-size: 11px;	
	align: center;
}

.textSbk{
	color: black;
	font-size: 11px;	
	align: center;
	text-align: center;
	max-width:100%;   
	-webkit-hyphens: auto; 
	hyphens: auto; 
}




.textSa{
	color: black;
	font-size: 14px;	
	font-weight: bold;
	align: center;
}
.textBb{
	color: black;
	font-size: 14px;	
	font-weight: bold;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.textV{
	color: black;
	font-size: 12px;
	margin-top: 5px;
	margin-left: 10px;
	margin-bottom: 5px;	
	white-space: nowrap;
    overflow: hidden;
    width: 160px;
    text-overflow: ellipsis;
}
.button_mehr {
	background-color: rgba(209, 207, 201, 1);
    border: 0px solid black;
    text-align: center;
	color: black;
	font-size: 12px;
	width:45px;
	height:45px;
	border-radius: 40px;
	font-weight: bold;
}
.button_ea_aktiv{
	background-color: rgba(95, 173, 117, 0.9);
    border: 0px solid black;
    text-align: center;
	color: black;
	font-size: 16px;
	width:120px;
	height:45px;
	border-radius: 40px;
	font-weight: bold;
}
.button_ea {
	background-color: rgba(209, 207, 201, 0.9);
    border: 0px solid black;
    text-align: center;
	color: black;
	font-size: 11px;
	width:40px;
	height:20px;
	border-radius: 40px;
}

.button_rot_ea {
	background-color: #FF0000;
    border: 0px solid black;
    text-align: center;
	color: black;
	font-size: 11px;
	width:40px;
	height:20px;
	border-radius: 40px;
}

.button_groß {
	background-color: rgba(209, 207, 201, 1);
    border: 0px solid black;
    text-align: center;
	color: #8A2908;
	font-size: 11px;
	width:150px;
	height:25px;
	border-radius: 40px;
	font-weight: bold;
}

.button {
	background-color: rgba(209, 207, 201, 1);
    border: 0px solid black;
    text-align: center;
	color: #8A2908;
	font-size: 11px;
	width:100px;
	height:25px;
	border-radius: 40px;
	font-weight: bold;
}


.button_groß_rot {
	background-color: #FF0000;
    border: 0px solid black;
    text-align: center;
	color: black;
	font-size: 11px;
	width:150px;
	height:25px;
	border-radius: 40px;
	font-weight: bold;
}
.button_rot {
	background-color: #FF0000;
    border: 0px solid black;
    text-align: center;
	color: black;
	font-size: 11px;
	width:100px;
	height:25px;
	border-radius: 40px;
	font-weight: bold;
}
#HP{
	margin-bottom: 70px;
}
footer {
	position: fixed;
	padding: 10px;
	bottom: 0;
	left: 0;
	right: 0;
    color: black;
	background-color: rgba(77, 76, 73, 0.9);
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 0;
  background: #0A9A11;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 0;
  background: #0A9A11;
  cursor: pointer;
}

.slider_a:{
	background: #FFC400;
	animation: blinker-two 1.4s linear infinite;
}

.looper { animation: perspect 4s infinite linear }
@keyframes perspect {
   0% {transform:perspective(300px) rotateY(0deg)}
   25% {transform:perspective(300px) rotateY(90deg)}
   50% {transform:perspective(300px) rotateY(180deg)}
   75% {transform:perspective(300px) rotateY(270deg)}
   100% {transform:perspective(300px) rotateY(360deg)}
}
.chartWrapper {
    position: relative;            
}

.chartWrapper > canvas {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events:none;
}
.chartAreaWrapper {
    overflow-x: scroll;
    position: relative;
    width: 100%;
}

.chartAreaWrapper2 {
    position: relative;
    height: 300px;
}

select::-ms-expand {
  display: none;
}

.custom-select {
	-webkit-appearance:none;
  background-color: #d3d3d3;
  border-radius: 40px;
  width: 100%;
  height: 35px;
  display: flex; 
  align-items: center;
  justify-content: center;
  border: 6px solid transparent;
  text-align: center;
  color: #ffffff;
  padding-left: 10px;

}
.select-wrapper {
  /* ... */
  position: relative;
}


.select-wrapper::before {
  font-family: fontello;
  content: "\f107";
  font-size: 20px;
  position: absolute;
  right: 15px;
  top: 10px;
  color: #fff;
}


/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #d3d3d3;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 40px;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 40px;
}

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  font-size: 10px;
  color: black;
  text-align: center;
  table-layout: fixed;
}

#customers td {
  border: 1px solid #ddd;
  padding: 8px;
}


#customers th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  background-color: #FFFFFF;
  color: black;
}