*{-webkit-box-sizing:border-box;box-sizing:border-box}.scontainer{width:400px;height:auto;margin:20px auto 0px auto}#sliderarea{width:400px;height:400px;position:relative;margin:0 auto;padding:0;-webkit-box-sizing:content-box;box-sizing:content-box}.sliderbutton{height:12px;width:12px;position:absolute;background-color:#2981c4;border:1px solid #444;border-radius:50%;outline:none;cursor:pointer}.sliderbutton:hover{background-color:#fd8f00}.cbcode{width:100%;height:1.5rem;font-size:1rem;line-height:1.5rem;text-align:center;color:#ddd;margin:1rem auto 1rem auto;outline:none}.brightmode .cbcode{color:#000}path{stroke-width:3;stroke:#1e01a0;stroke-linecap:round;fill:none}circle{fill:#666}line{stroke-width:1.3;stroke:#666;stroke-linecap:round}.example{width:400px;height:27px;margin:1rem auto;border:1px solid #444;display:block}#rectangle{width:25px;height:25px;background-color:#2981c4;left:0px;position:relative}.tcontrol{margin:1rem auto}@media (max-width: 414px){.scontainer{width:300px}#sliderarea{width:300px;height:300px}.example{width:300px}}.on-off-but{width:3rem;height:3rem;display:block;margin:1.5rem auto 1.5rem auto;position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:-webkit-gradient(linear, left bottom, left top, from(#333), to(#000));background:linear-gradient(0deg, #333, #000);outline:none;border-radius:50%;-webkit-box-shadow:0 0 0 5px #353535,0 0 0 5px #353535,inset 0 0 10px #000,0 5px 20px rgba(0,0,0,0.5),inset 0 0 15px rgba(0,0,0,0.2);box-shadow:0 0 0 5px #353535,0 0 0 5px #353535,inset 0 0 10px #000,0 5px 20px rgba(0,0,0,0.5),inset 0 0 15px rgba(0,0,0,0.2)}.on-off-but:before{content:'';position:absolute;top:6%;left:6%;width:88%;height:88%;background:-webkit-gradient(linear, left bottom, left top, from(#000), to(#6b6b6b));background:linear-gradient(0deg, #000, #6b6b6b);border-radius:50%;-webkit-box-shadow:0 0 0 1px #232323;box-shadow:0 0 0 1px #232323;-webkit-transition:all 1.5s ease-in;transition:all 1.5s ease-in}.on-off-but:checked:before{-webkit-box-shadow:0 0 5px #13b3ff, 0 0 15px #13b3ff;box-shadow:0 0 5px #13b3ff, 0 0 15px #13b3ff}.on-off-but:after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background:-webkit-gradient(linear, left bottom, left top, from(#6b6b6b), to(#000));background:linear-gradient(0deg, #6b6b6b, #000);border-radius:50%;-webkit-box-shadow:0 0 0 1px #232323;box-shadow:0 0 0 1px #232323;-webkit-transition:all 1.5s ease-in;transition:all 1.5s ease-in}.on-off-but:checked:after{background:#13b3ff;-webkit-box-shadow:0 0 5px #13b3ff, 0 0 15px #13b3ff;box-shadow:0 0 5px #13b3ff, 0 0 15px #13b3ff}.brightmode .on-off-but{background:-webkit-gradient(linear, left bottom, left top, from(#999), to(#666));background:linear-gradient(0deg, #999, #666);-webkit-box-shadow:0 0 0 5px #656565,0 0 0 5px #656565,inset 0 0 10px rgba(60,60,60,0.3),0 5px 20px rgba(60,60,60,0.2),inset 0 0 15px rgba(60,60,60,0.1);box-shadow:0 0 0 5px #656565,0 0 0 5px #656565,inset 0 0 10px rgba(60,60,60,0.3),0 5px 20px rgba(60,60,60,0.2),inset 0 0 15px rgba(60,60,60,0.1)}.brightmode .on-off-but:before{background:-webkit-gradient(linear, left bottom, left top, from(#444), to(#ababab));background:linear-gradient(0deg, #444, #ababab);-webkit-box-shadow:0 0 0 1px #636363;box-shadow:0 0 0 1px #636363}.brightmode .on-off-but:checked:before{-webkit-box-shadow:0 0 5px #13b3ff, 0 0 15px #13b3ff;box-shadow:0 0 5px #13b3ff, 0 0 15px #13b3ff}.brightmode .on-off-but:after{background:-webkit-gradient(linear, left bottom, left top, from(#ababab), to(#444));background:linear-gradient(0deg, #ababab, #444);-webkit-box-shadow:0 0 0 1px #636363;box-shadow:0 0 0 1px #636363}.brightmode .on-off-but:checked:after{background:#13b3ff;-webkit-box-shadow:0 0 5px #13b3ff, 0 0 15px #13b3ff;box-shadow:0 0 5px #13b3ff, 0 0 15px #13b3ff}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.on-off-but{display:none}}