RTL00_WEB_WS2812/Firmware/WEBFiles/elements.css

body {font-family: Arial;}
form{
	width:100%;
}
#child_page{
	margin:0 auto;
	width:700px;
	height:800px;
	display: block;
}

#picker-wrapper{
	position:relative;
	float:left;
	width:100%;
	
}
#picker{
	margin:0 auto;
	width:300px;
	display: block;
}
.hblockcont { 
    text-align:center;
	align:center;
}

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

.on, .off { 
    width: 80px;
	height: 80px;
}
.range { 
    max-width: 600px;
}

.tab {
    overflow: hidden;
    height: 45px;
    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;
}
.tabcontentframe {
   border-style:none;
   width:100%;
   margin-top:20px;
   height:1150px;
   border-spacing:0px;
}

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

.button {
    background-color: #00cc99;
    border: none;
    color: black;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.select {
   //background-color:#00cc99;
   width: 180px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 28px;
}

.inputtext {
   width: 180px;
   font-size: 16px;
   border: 1px solid #ccc;
   text-align: center;
   height: 26px;
}

/* https://www.w3schools.com/html/html_tables.asp */

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
	
}

.td1st {
    border: 0px solid #dddddd;
    text-align: left;
    padding: 4px;
}

td {
    border: 0px solid #dddddd;
    text-align: right;
    padding: 4px;
}

/* 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;
}