RTL00_WEB_WS2812/Firmware/RTLGDB/WEBFiles/elements.css

body {font-family: Arial;}

fieldset { 
    display: block;
    border: 0px;
	margin: 20px;
}

.range { 
    max-width: 600px;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: inherit;
    // float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

.tab button:hover {
    background-color: #dddddd;
}

.tab button.active {
    background-color: #00cc99;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.filtercontent {
    display: none;
    padding: 6px 6px;
    max-width: 700px;
    border: 1px solid #ccc;
}

/* http://dimox.name/custom-checkboxes-and-radio-buttons-using-css-only/ */

.checkbox + label {
  cursor: pointer;
}

.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}

.checkbox:not(checked) + label {
  position: relative;
  padding: 0 0 0 60px;
}

.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #f1f1f1;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}

.checkbox:checked + label:before {
  background: #00cc99;
}

.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s;
}

.checkbox:checked + label:after {
  left: 26px;
}

/* http://www.cssportal.com/style-input-range/ */

input[type=range] {
  height: 30px;
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 22px;
  cursor: pointer;
  animate: 1.0s;
  box-shadow: 1px 1px 3px #787878;
  background: #F1F1F1;
  border-radius: 10px;
  border: 1px solid #D4D4D4;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 2px #787878;
  border: 1px solid #787878;
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #F1F1F1;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 22px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 3px #787878;
  background: #F1F1F1;
  border-radius: 10px;
  border: 1px solid #D4D4D4;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 2px #787878;
  border: 1px solid #787878;
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 22px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #F1F1F1;
  border: 1px solid #D4D4D4;
  border-radius: 20px;
  box-shadow: 1px 1px 3px #787878;
}
input[type=range]::-ms-fill-upper {
  background: #F1F1F1;
  border: 1px solid #D4D4D4;
  border-radius: 20px;
  box-shadow: 1px 1px 3px #787878;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 2px #787878;
  border: 1px solid #787878;
  height: 22px;
  width: 22px;
  border-radius: 11px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #F1F1F1;
}
input[type=range]:focus::-ms-fill-upper {
  background: #F1F1F1;
}