.dot_off{background-color:#bbb}.dot_off,.dot_on{height:20px;width:20px;border-radius:50%;display:inline-block}.dot_on{background-color:#58ac04}input.green{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;width:50px;height:30px;background-color:#fff;border:1px solid #d9dadc;border-radius:50px;-webkit-box-shadow:inset -20px 0 0 0 #fff;box-shadow:inset -20px 0 0 0 #fff;-webkit-transition-duration:.2s;transition-duration:.2s}input.green:after{content:"";position:absolute;top:1px;left:1px;width:26px;height:26px;background-color:transparent;border-radius:50%;-webkit-box-shadow:2px 4px 6px rgba(0,0,0,.2);box-shadow:2px 4px 6px rgba(0,0,0,.2)}input.green:checked{border-color:#4ed164;-webkit-box-shadow:inset 20px 0 0 0 #4ed164;box-shadow:inset 20px 0 0 0 #4ed164}input.green:checked:after{left:20px;-webkit-box-shadow:-2px 4px 3px rgba(0,0,0,.05);box-shadow:-2px 4px 3px rgba(0,0,0,.05)}input.blue{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;width:50px;height:30px;background-color:#fff;border:1px solid #d9dadc;border-radius:50px;-webkit-box-shadow:inset -20px 0 0 0 #fff;box-shadow:inset -20px 0 0 0 #fff;-webkit-transition-duration:.2s;transition-duration:.2s}input.blue:after{content:"";position:absolute;top:1px;left:1px;width:26px;height:26px;background-color:transparent;border-radius:50%;-webkit-box-shadow:2px 4px 6px rgba(0,0,0,.2);box-shadow:2px 4px 6px rgba(0,0,0,.2)}input.blue:checked{border-color:#2c9fff;-webkit-box-shadow:inset 20px 0 0 0 #2c9fff;box-shadow:inset 20px 0 0 0 #2c9fff}input.blue:checked:after{left:20px;-webkit-box-shadow:-2px 4px 3px rgba(0,0,0,.05);box-shadow:-2px 4px 3px rgba(0,0,0,.05)}input.orange{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;width:50px;height:30px;background-color:#fff;border:1px solid #d9dadc;border-radius:50px;-webkit-box-shadow:inset -20px 0 0 0 #fff;box-shadow:inset -20px 0 0 0 #fff;-webkit-transition-duration:.2s;transition-duration:.2s}input.orange:after{content:"";position:absolute;top:1px;left:1px;width:26px;height:26px;background-color:transparent;border-radius:50%;-webkit-box-shadow:2px 4px 6px rgba(0,0,0,.2);box-shadow:2px 4px 6px rgba(0,0,0,.2)}input.orange:checked{border-color:#ff5b2e;-webkit-box-shadow:inset 20px 0 0 0 #ff5b2e;box-shadow:inset 20px 0 0 0 #ff5b2e}input.orange:checked:after{left:20px;-webkit-box-shadow:-2px 4px 3px rgba(0,0,0,.05);box-shadow:-2px 4px 3px rgba(0,0,0,.05)}input.cyan{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;width:50px;height:30px;background-color:#fff;border:1px solid #d9dadc;border-radius:50px;-webkit-box-shadow:inset -20px 0 0 0 #fff;box-shadow:inset -20px 0 0 0 #fff;-webkit-transition-duration:.2s;transition-duration:.2s}input.cyan:after{content:"";position:absolute;top:1px;left:1px;width:26px;height:26px;background-color:transparent;border-radius:50%;-webkit-box-shadow:2px 4px 6px rgba(0,0,0,.2);box-shadow:2px 4px 6px rgba(0,0,0,.2)}input.cyan:checked{border-color:#52b7d7;-webkit-box-shadow:inset 20px 0 0 0 #52b7d7;box-shadow:inset 20px 0 0 0 #52b7d7}input.cyan:checked:after{left:20px;-webkit-box-shadow:-2px 4px 3px rgba(0,0,0,.05);box-shadow:-2px 4px 3px rgba(0,0,0,.05)}input.red{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;width:50px;height:30px;background-color:#fff;border:1px solid #d9dadc;border-radius:50px;-webkit-box-shadow:inset -20px 0 0 0 #fff;box-shadow:inset -20px 0 0 0 #fff;-webkit-transition-duration:.2s;transition-duration:.2s}input.red:after{content:"";position:absolute;top:1px;left:1px;width:26px;height:26px;background-color:transparent;border-radius:50%;-webkit-box-shadow:2px 4px 6px rgba(0,0,0,.2);box-shadow:2px 4px 6px rgba(0,0,0,.2)}input.red:checked{border-color:#ce4646;-webkit-box-shadow:inset 20px 0 0 0 #ce4646;box-shadow:inset 20px 0 0 0 #ce4646}input.red:checked:after{left:20px;-webkit-box-shadow:-2px 4px 3px rgba(0,0,0,.05);box-shadow:-2px 4px 3px rgba(0,0,0,.05)}input.custom-color{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;width:50px;height:30px;background-color:#fff;border:1px solid #d9dadc;border-radius:50px;-webkit-box-shadow:inset -20px 0 0 0 #fff;box-shadow:inset -20px 0 0 0 #fff;-webkit-transition-duration:.2s;transition-duration:.2s}input.custom-color:after{content:"";position:absolute;top:1px;left:1px;width:26px;height:26px;background-color:transparent;border-radius:50%;-webkit-box-shadow:2px 4px 6px rgba(0,0,0,.2);box-shadow:2px 4px 6px rgba(0,0,0,.2)}input.custom-color:checked{-webkit-box-shadow:inset 20px 0 0 0;box-shadow:inset 20px 0 0 0}input.custom-color:checked:after{left:20px;-webkit-box-shadow:-2px 4px 3px rgba(0,0,0,.05);box-shadow:-2px 4px 3px rgba(0,0,0,.05)}
|