/**
 * https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Buttons_und_Schalter
 */
/*-------------------------------------------------------------------------------*/
input [type= "checkbox" ]{-webkit-appearance:none;-moz-appearance:none;appearance:none;}
input[type="checkbox"] {vertical-align: baseline!important;line-height: 2;}
input.switch {
-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;
width:40px!important;height:20px!important;vertical-align: top;line-height: 1.5;
background-color:#fff;border:1px ridge  #B4B5B5;border-radius:50px;cursor: pointer;
-webkit-box-shadow: inset -20px 0px 0px 0px #D9DADC;box-shadow: inset -20px 0px 0px 0px #E64C3B;-webkit-transition-duration: 200ms;transition-duration: 400ms;}
input.switch:checked {-webkit-box-shadow: inset 20px 0px 0px 1px #4ed164;box-shadow: inset 20px 0px 0px 1px #4ed164;}
input.switch > i:hover{background-color: #028F02;}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:checked + td label {color: #446FB3;font-weight: bold;}
input[type="checkbox"]:hover + label,
input[type="checkbox"]:hover + td label {color: #E7AA02;font-weight: bold;}
label, label.w3-validate {font-weight: bold !important;color: #7A7A7A;}
/*-------------------------------------------------------------------------------*/
.toggle label {position: relative;display: inline-block;width: 10em;height: 3.5em;}
.toggle input {display: none;}
 /* Grundfläche */
.toggle .slider {position: absolute;cursor: pointer;top: 1.5em;left: 2em;width: 4em;height: 2em;background-color: #c32e04;border-radius: 1em;transition: all .3s ease-in-out;}
/* verschiebbarer Button */
.toggle  .slider::before {position: absolute;content: "";height: 1.6em;width: 1.6em;left: .2em;bottom: .2em;background-color: white;border-radius: 50%;transition: all .3s ease-in-out;}
/*-------------------------------------------------------------------------------*/
/* Text vor dem FlipFlop-Schalter */
.text .slider::before {position: absolute;content: "OFF";color: #c32e04;font-weight: bold;height: 1.6em;left: -2.5em;bottom: .2em;}
/* Text hinter dem FlipFlop-Schalter */
.text input:checked + .slider::after {position: absolute;content: "ON";color: #5a9900;left: 4.5em;}
/*-------------------------------------------------------------------------------*/
.toggle-buttons input[type="radio"]{visibility:hidden;}
.toggle-buttons label {border: 1px solid #333;border-radius: 0.5em;padding: 0.5em;}
.toggle-buttons input:checked + label {background: #ebf5d7;color: #5a9900;box-shadow: none;}
/*-------------------------------------------------------------------------------*/
.toggle-switch {position:relative;display:inline-block;width:40px;height:60px;background-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;text-align:center;}
.toggle-switch input {width:100%;height:100%;margin:0 0;padding:0 0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;cursor:pointer;opacity:0;filter:alpha(opacity=0);}
.toggle-switch label {display:block;position:absolute;top:1px;right:1px;bottom:1px;left:1px;
background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),
  inset 0 -1px 1px #888,
  inset 0 -5px 1px #bbb,
  inset 0 -6px 0 white;
-moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),
  inset 0 -1px 1px #888,
  inset 0 -5px 1px #bbb,
  inset 0 -6px 0 white;
box-shadow:0 2px 3px rgba(0,0,0,0.4),
  inset 0 -1px 1px #888,
  inset 0 -5px 1px #bbb,
  inset 0 -6px 0 white;
-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;font:normal 11px Arial,Sans-Serif;color:#666;text-shadow:0 1px 0 white;cursor:text;}
.toggle-switch label:before {content:attr(data-off);position:absolute;top:6px;right:0;left:0;z-index:4;}
.toggle-switch label:after {content:attr(data-on);position:absolute;right:0;bottom:11px;left:0;color:#666;text-shadow:0 -1px 0 #eee;}
.toggle-switch input:checked + label {
background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),
  inset 0 1px 7px -1px #ccc,
  inset 0 5px 1px #fafafa,
  inset 0 6px 0 white;
-moz-box-shadow:0 0 1px rgba(0,0,0,0.4),
  inset 0 1px 7px -1px #ccc,
  inset 0 5px 1px #fafafa,
  inset 0 6px 0 white;
box-shadow:0 0 1px rgba(0,0,0,0.4),
  inset 0 1px 7px -1px #ccc,
  inset 0 5px 1px #fafafa,
  inset 0 6px 0 white;
}

.toggle-switch input:checked:hover + label {
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4),
  inset 0 1px 7px -1px #ccc,
  inset 0 5px 1px #fafafa,
  inset 0 6px 0 white;
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4),
  inset 0 1px 7px -1px #ccc,
  inset 0 5px 1px #fafafa,
  inset 0 6px 0 white;
box-shadow:0 1px 3px rgba(0,0,0,0.4),
  inset 0 1px 7px -1px #ccc,
  inset 0 5px 1px #fafafa,
  inset 0 6px 0 white;
}
.toggle-switch input:checked + label:before {z-index:1;top:11px;}
.toggle-switch input:checked + label:after {bottom:9px;color:#aaa;text-shadow:none;z-index:4;}
/*-------------------------------------------------------------------------------*/

.toggle-buttons input[type="radio"] {visibility: hidden;}
.toggle-buttons label {border: 1px solid #333;border-radius: 0.5em;padding: 0.5em;}
.toggle-buttons input:checked + label {background: #93DC01;color: #528C01;box-shadow: none;}
.together {position: relative;}
.together input {position: absolute;width: 1px;height: 1px;top: 0;left: 0;}
.together label {margin: 0.5em 0;border-radius: 0;}
.together label:first-of-type {border-radius: 0.5em 0 0 0.5em;}
.together label:last-of-type {border-radius: 0 0.5em 0.5em 0;}