body{
  background-color:black;
  color:white;
  font-family:roboto;
  text-align:center;
  overflow:hidden;
  user-select: none;
  font-size:16px;
}
@font-face {
  font-family:'roboto';
  src: url('fonts/roboto.ttf') format('truetype');
}
@font-face {
  font-family:'digital';
  src: url('fonts/DigitalDismay.otf') format('opentype');
}
@font-face {
  font-family:'codesaver';
  src: url('fonts/codesaver.otf') format('opentype');
}
@font-face {
    font-family: 'RenoMono';
    src: url('fonts/RenoMono.woff2') format('woff2'),
         url('fonts/RenoMono.ttf') format('truetype');
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
a:link{color:white;text-decoration:none;opacity:0.7;}
a:visited{color:white;text-decoration:none;opacity:0.7;}
a:active{color:white;text-decoration:none;opacity:0.7;}
a:hover{color:white;text-decoration:none;font-weight:bold;opacity:1;}
.entry{
  position:fixed;
  top:35px;
  width:600px;
  height:100%;
  padding-top:15px;
  left:calc(50% - 300px);
  line-height:30px;
  backdrop-filter:blur(3px);
  background-color:rgba(0,0,0,0.8);
  z-index:8;
}
main{
  position:fixed;
  bottom:10%;
  width:80%;
  max-width:600px;
}
header{
  position:fixed;
  top:0px;
  left:0px;
  text-align:center;
  background-color:rgba(0,0,0,0.8);
  padding-top:10px;
  width:100%;
}
.content{
  position:relative;
  text-align:center;
  top:0px;
}
td{
  vertical-align:top;
  padding:5px;
}
.state{
  position:fixed;
  right:10px;
  top:10px;
  height:14px;
  width:14px;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:8px;
}
@keyframes online_state{
  0%{background-color:#00BFFF;}
  99%{background-color:#00BFFF;}
  100%{background-color:transparent;}
}
@keyframes offline_state{
  0%{background-color:red;}
  99%{background-color:red;}
  100%{background-color:transparent;}
}
.audience_size{
  z-index:5;
  position:absolute;
  left:calc(50% - 110px);
  top:45px;
}
.tdstate{
  position:relative;
  top:40px;
}
.counter{
  position:relative;
  width:60px;
  z-index:3;
  font-family:digital;
  font-size:38px;
  background:transparent;
  color:#a4c639;
  padding-top:0px;
  padding-bottom:0px;
  padding-left:5px;
  padding-right:5px;
  border-radius:2px;
  margin-left:40px;
  text-align:center;
}
.full{
  opacity:1!important;
}
.peak{
  position:relative;
  color:#ffffff;
  font-family:digital;
  font-size: 22px;
}
.image_a{
  display:inline;
  width:75px;
  height:75px;
  position:relative;
  top:0px;
  left:0px;
  opacity:0.7;
  font-weight:bold;
  font-size:20px;
}
.image_b{
  display:inline;
  width:75px;
  height:75px;
  position:relative;
  top:0px;
  left:3px;
  opacity:0.7;
  font-weight:bold;
  font-size:20px;
}
.image_c{
  display:inline;
  width:75px;
  height:75px;
  position:relative;
  top:0px;
  left:3px;
  opacity:0.7;
  font-weight:bold;
  font-size:20px;
}
.level{
  width:90px;
  position:relative;
  top:18px;
  opacity:0.8;
}
footer{
  position:fixed;
  bottom:0px;
  width:100%;
  text-align:left;
  font-size:12px;
  padding:5px;
  background-color:rgba(0,0,0,0.8);
  z-index:2;
}

.link-to-host{
  position:absolute;
  right:10px;
}

.turn-on-audio{
  position:absolute;
  text-align:right;
  right:20px;
  top:20px;
}

.rules{
  border-left:2px solid white;
  padding-left:10px;
}

.settings{
  opacity:0.8;
  padding-left:30px;
}

.fader {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 5px;
  background: #ffffff;
  outline: none;
  opacity: 0.8;
  margin-top:10px;
  margin-bottom:12px;
  transform:rotate(270deg);
  z-index:5;
  border-radius:3px;
  cursor:pointer;
}

.fader:hover {
  opacity: 1;
  z-index:5;
}
.fader::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 40px;
background: white;
  border-radius:4px;
  cursor: pointer;
  z-index:5;
}

.fader::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 40px;
 background: white;
  border-radius:4px;
  cursor: pointer;
  z-index:5;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 5px;
  background: #ffffff;
  outline: none;
  opacity: 0.8;
  margin-top:10px;
  margin-bottom:12px;
  z-index:5;
  cursor:pointer;
}

.slider:hover {
  opacity: 1;
  z-index:5;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 22px;
  background: white;
  border-radius:2px;
  cursor: pointer;
  z-index:5;
}

.slider::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 23px;
  background: white;
  border-radius:2px;
  cursor: pointer;
  z-index:5;
}


.slider_breit {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 5px;
  background: #ffffff;
  outline: none;
  opacity: 0.8;
  margin-top:0px;
  margin-bottom:12px;
  z-index:5;
  cursor:pointer;
}

.slider_breit:hover {
  opacity: 1;
  z-index:5;
}
.slider_breit::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 22px;
  background: white;
  border-radius:2px;
  cursor: pointer;
  z-index:5;
}

.slider_breit::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 23px;
  background: white;
  border-radius:2px;
  cursor: pointer;
  z-index:5;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.input_number{
  width:37px;
  background:#000000;
  border:0;
  border-bottom:1px solid #000000;
  height:22px;
  color:#ffffff;
  opacity:0.8;
  padding:3px;
  z-index:4;
  font-size:16px;
  padding-right:50px;
  text-align:right;
  font-family:roboto;
}
.input_number:hover{
  opacity:1;
  border-bottom:1px solid #ffffff;
}
.input_number:focus{
  opacity:1;
  border-bottom:1px solid #ffffff;
}
.input_number_label{
  position:relative;
  opacity:0.8;
  padding-right:10px;
  font-size:16px;
  top:3px;
  pointer-events:none;
}
.input_select{
  cursor:pointer;
  background:#000000;
  border:0;
  border-bottom:1px solid #000000;
  height:30px;
  color:#ffffff;
  opacity:0.8;
  text-align:left;
  padding:3px;
  z-index:4;
  font-size:16px;
  font-family:roboto;
}
.input_select:hover{
  opacity:1;
  border-bottom:1px solid #ffffff;
}
.input_select:focus{
  opacity:1;
  border-bottom:1px solid #ffffff;
}
td.tdsettings{
  padding:0px;
  padding-bottom:5px;
  height:35px;
  vertical-align:middle;
  text-align:center;
  width:150px;
  z-index:5;
}
td.tdsettingsright{
  padding:0px;
  padding-bottom:5px;
  padding-left:0px;
  height:20px;
  width:80px;
  text-align:center;
  vertical-align:middle;
  z-index:5;
}
td.tdsettingsfader{
  padding:0px;
  padding-bottom:0px;
  padding-left:0px;
  width:150px;
  height:100px;
  padding-top:0px;
  text-align:center;
  vertical-align:middle;
  z-index:5;
}
.conf_character{
  position:absolute;
  top:45px;
  left:calc(50% - 90px);
  z-index:5;
}
.grenzwert_a{
  display:inline;
  position: absolute;
  top: 280px;
  left: calc(50% - 150px);
  text-align: right;
  opacity:0.8;
}
.grenzwert_a_0{
  display:inline;
  position: absolute;
  top: 220px;
  width:100px;
  left: calc(50% - 253px);
  text-align: right;
  opacity:0.8;
}
.grenzwert_a_1{
  display:inline;
  position: absolute;
  width:100px;
  top: 186px;
  left: calc(50% - 159px);
  text-align: center;
  opacity:0.8;
}
.grenzwert_a_2{
  display:inline;
  position: absolute;
  top: 219px;
  left: calc(50% - 66px);
  opacity:0.8;
}
.grenzwert_a_3{
  display:inline;
  position: absolute;
  top: 280px;
  left: calc(50% - 77px);
  opacity:0.8;
}
.grenzwert_b{
  display:inline;
  position: absolute;
  top: 280px;
  left: calc(50%);
  text-align: right;
  opacity:0.8;
}
.grenzwert_b_0{
  display:inline;
  position: absolute;
  top: 220px;
  width:100px;
  left: calc(50% - 103px);
  text-align: right;
  opacity:0.8;
}
.grenzwert_b_1{
  display:inline;
  position: absolute;
  top: 186px;
  width:100px;
  left: calc(50% - 9px);
  text-align: center;
  opacity:0.8;
}
.grenzwert_b_2{
  display:inline;
  position: absolute;
  top: 219px;
  left: calc(50% + 84px);
  opacity:0.8;
}
.grenzwert_b_3{
  display:inline;
  position: absolute;
  top: 280px;
  left: calc(50% + 74px);
  opacity:0.8;
}
.grenzwert_c{
  display:inline;
  position: absolute;
  top: 280px;
  left: calc(50% + 150px);
  text-align: right;
  opacity:0.8;
}
.grenzwert_c_0{
  display:inline;
  position: absolute;
  top: 219px;
  width:100px;
  left: calc(50% + 47px);
  text-align: right;
  opacity:0.8;
}
.grenzwert_c_1{
  display:inline;
  width:100px;
  position: absolute;
  top: 186px;
  left: calc(50% + 141px);
  text-align: center;
  opacity:0.8;
}
.grenzwert_c_2{
  display:inline;
  position: absolute;
  top: 219px;
  left: calc(50% + 234px);
  opacity:0.8;
}
.grenzwert_c_3{
  display:inline;
  position: absolute;
  top: 280px;
  left: calc(50% + 223px);
  opacity:0.8;
}
.flexbox{
  display:flex;
  flex-flow:row wrap;
}
@keyframes loadingAnimation {
0% {opacity:0;}
100% {opacity:1;}
}

.loadingButton{
  position:relative;
  z-index:5;
  background:black;
  color:white;
  border:1px solid white;
  cursor:progress;
  padding:5px;
  border-radius:2px;
  width:80%;
  font-size:14px;
  animation:loadingAnimation 1s infinite alternate;
  text-transform:uppercase;
  height:40px;
  font-weight:bold;
}
.initiateAudioButton{
  position:relative;
  z-index:5;
  font-size:14px;
  background:black;
  color:white;
  border:1px solid white;
  cursor:progress;
  padding:5px;
  border-radius:2px;
  width:80%;
  height:40px;
  text-transform:uppercase;
  font-weight:bold;
}
.initiateAudioButton:hover{
  border:1px solid red;
  color:red;
}
.initiateAudioButton:active{
  position:relative;
  z-index:5;
  background:red;
  color:black;
  border:1px solid red;
  padding:5px;
  border-radius:2px;
}
.display{
  display:none;
}
.supporthotline{
  position:fixed;
  bottom:10px;
  right:10px;
  text-align:right;
  opacity:0.8;
  font-size:14px;
  z-index:10;
}
.table_main{
  position:relative;
  left:calc(50% - 265px);
  top:100px;
  width:530px;
}
.table_row_under_level{
  height:15px;
}
.icon_info{
  height:20px;
  width:20px;
  opacity:0.8;
  z-index:10;
  cursor:pointer;
}
.icon_info:hover{
  opacity:1;
}
.info_container{
  position:fixed;
  top:10px;
  left:10px;
  z-index:10;
}
.kill_button{
  border:2px solid white;
  cursor:pointer;
  padding:10px;
  border-radius:2px;
  font-weight:bold;
  background-color:transparent;
  color:white;
  letter-spacing:1px;
  margin-top:5px;
}

.kill_button:hover{
  background-color:transparent;
  border:2px solid red;
}
.kill_button_active{
  background-color:red!important;
  border:2px solid white!important;
}
.ping{
    font-size: 14px;
    position: fixed;
    text-align:right;
    right: 30px;
    top: 10px;
}
.label{
  text-align:left!important;
  color:rgba(255,255,255,0.7)!important;
}
.copyright{
  position:fixed;
  bottom:10px;
  left:10px;
  opacity:0.8;
  font-size:14px;
}
.border_between{
  border-right:1px dashed rgba(255,255,255,0.2);
}
.line_between{
  height:20px;
}