/* um css-files einbinden zu können, muss mittels bottle befehl static files gearbeitet werden. Siehe bottle.com doku
*/

#divarea {
    position: absolute;
    top: 340px; left: 247px;
    width:  75px;
    border: 2px dotted;
    border-color: #17141f; /*schwaches grau für Swipebereich * /
}

#unit40 {margin-bottom: -0.0cm;}
#lowspac2 {margin-bottom: -0.8cm;}
#mleft {margin-left: 4em;}
#posi {float: left; }
#t1 {-moz-tab-size: 4; /* Firefox */}
#t2 {-moz-tab-size: 12; /* Firefox */}
#fs20 {font-size: 20px;}
#fs15 {font-size: 15px;}
#fs18 {font-size: 18px;}
#Tblack {background-color: black; }
#Tcenter1{margin: 0 auto;
          background-color:black;
          border-color: black;
          border: 0px;
          font-size:10vw; 
          text-align: center;
          color:yellow; 
          display: block;}

#Tcenter {margin: 0 auto; 
          background-color:black; 
          border-color: yellow;
          /* border: 2px; */
          font-size:10vw; 
          text-align: center;
          color:yellow; 
          display: block;}

.unicode ::after{
          content: "\00A0\2668";
}
.TbClass {
          margin: 0 auto; 
          background-color:black; 
          border-color: yellow;
          /* border: 2px; */
          font-size:10vw; 
          text-align: center;
          color:yellow; 
          display: block;
}
/* black */
html {background-color: black;
      color: white;
	}

/*
button {
	margin: 1em;
        background-color: #FFFF00;
        color: #000000;
    } */
input:autofill {
  background: green; /* saved password autofill vom Browser übersteuern */
  filter: none;
}
button, input, textarea {
        /*margin: 1em;*/
        /* background-color: #5a9900; */
        /* color: black; */
        background-color: green;
        color: white;
        border-radius: 5px 5px;
    }

#login {
   background-color: green;
}
.login {
   background-color: green;
}

/* für settings */
 
table, th, td { border: 0.01px solid black; 
            border-color: #424242;
            font-family: Arial;
            padding: 3px;
          }

#coll {border-collapse: collapse;
       /* border-color: white; */
      }
p {font: 1.2em/1.5 serif;}
a {font-size: 0.4cm;
   color: yellow;
  }

/* main {
  background: red;
} */

.toggle label {
  position: relative;
  display: inline-block;
  width: 10em;
  height: 3.5em;
  }

.toggle input {
  display: none;
  }

.toggle  .slider {    /* Grundfläche */
  position: absolute;
  cursor: pointer;
  top: -0.1em; /*hier Positionierung des Sliders */
  left: +8.5em;
  /*top: 1.5em;
  left: 4.5em; frühere Position, zu tief */
  width: 4em;
  height: 2em;
  background-color: green; /* green, früher #5a9900*/
  transition: all .3s ease-in-out;
  border-radius: 1em;
  }

.toggle  .slider:before {  /* verschiebbarer Button */
  position: absolute;
  content: "";
  height: 1.6em;
  width: 1.6em;
  left: 0.2em;
  bottom: 0.2em;
  background-color:  DarkGray; /* früher white */
  border-radius: 50%; 
  transition: all .3s ease-in-out;
  }

.toggle input:checked + .slider {
  background-color: #c32e04; /* red */
  }

.toggle input:focus + .slider {
  background-color:pink;
  box-shadow: 0 0 1px #5a9900;
  }

.toggle  input:checked + .slider:before {
  -webkit-transform: translateX(1.9em);  /* Android 4 */
  -ms-transform: translateX(1.9em);   /* IE9 */
  transform: translateX(1.9em);
  }

.text  .slider:after {  /* Text vor dem FlipFlop-Schalter */
  position: absolute;
  content: "OFF";
  color: green; /* grün, früher #5a9900 */
  font-weight: bold;
  height: 1.6em;
  left: -2.5em;
  bottom: 0.2em;
  }

.text input:checked + .slider:after {  /* Text hinter dem FlipFlop-Schalter */
  position: absolute;
  content: "ON";
  color: #c32e04;
  left: 4.5em;
  }

#stats {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  }

#stats td, #stats th {
  border: 1px solid #dddddd;
  padding: 8px;
  }

#stats tr:nth-child(even){background-color: #5f605f;}

#stats tr:hover {background-color:  #404140;}

#stats th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: green; /*früher #5a9900 */
  color: black;
  }

#stats2 {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  }

#stats2 td, #stats2 th {
  border: 1px solid #dddddd;
  padding: 1px;
  }

#stats2 tr:nth-child(even){background-color: #5f605f;}

#stats2 tr:hover {background-color:  #404140;}

#stats2 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #5a9900;
  color: black;
  }

/* für werte websockets anzeige */
td.item[id^="unit"] {
  color: #00cd00; /* grün monochrom*/
  }

/* für werte.tpl Buttonanordnung*/

.button-group {
    display: flex;
 }
 .button-group button {
    font-size: 2rem;
    border: 0;
 }

 .pre {
	white-space: pre;
	font-family: monospace;
  }

.button_abstand {
margin: 1em;
  }

/* für form settings.tpl */
.settingsform_abstand {
  display: flex;
  float: left;
  width: 120px;
  }

/* für Player player.tpl */
.playerform_abstand {
  display: flex;
  float: left;
  width: 108px; /*steuert den Abstand zw. Text und Eingabefeld*/
  }
#sel_favp {
  position: relative;
  top: -0.0em; /*hier Positionierung für select Player*/
  left: +11em;
  height: 30px;
  color: white;
  background-color: green; /* früher #5a9900*/
  border-radius: 5px 5px;
  }
#sel_fav {
  position: relative;
  top: -0.0em; /*hier Positionierung für select Favoriten Box*/
  left: +3.1em;
  height: 30px;
  color: white;
  background-color: green; /* früher #5a9900*/
  border-radius: 5px 5px;
  }
#sel_fav0 {
  position: relative;
  top: -3.3em; /*hier Positionierung für select Favoriten Text*/
  left: +8.9em;
  }

#posi {
  position: relative;
  margin: 10px;
  left: 20px;
  }
#posi_h {
  position: absolute;
  left: 243px;/*Positionierung für input Temperatur*/
  }
#posi_h1 {
  position: absolute;
  left: 320px;/*Positionierung für Anzeige nach input Temperatur*/
  }
#posi_h2 {
  position: absolute;
  left: 100px;/*Positionierung für Text Temperatur*/
  }
#posi_h3 {
  position: absolute;
  left: 200px;/*Positionierung für Text Temperatur*/
  }

body {
     background: black;
     }
     .volslider {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     width: 300px;
     height: 30px;
     padding: 30px;
     padding-left: 40px;
     background: #038352;
     border-radius: 20px;
     display: flex;
     align-items: center;
     box-shadow: 0px 15px 40px #7E6D5766;
     }
     .volslider p {
     font-size: 26px;
     font-weight: 600;
     font-family: Open Sans;
     padding-left: 30px;
     color: black;
     }
     .volslider input[type="range"] {
     -webkit-appearance:none !important;
     width: 420px;
     height: 2px;
     background: black;
     border: none;
     outline: none;
     }
     .volslider input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none !important;
     width: 30px;
     height:30px;
     background: black;
     border: 2px solid black;
     border-radius: 50%;
     cursor: pointer;
     }
     .volslider input[type="range"]::-webkit-slider-thumb:hover {
     background: black;
     }


/* Testzwecke ping.tpl */
.responded {
    color:green;
  }
.checking,.unchecked {
    color:#FF8C00;
  }
.timeout {
    color:red;
  }


/* END */