.switch { background: #d9534f; border: 1px solid #d43f3a; position: relative; display: inline-block; box-sizing: content-box; overflow: visible; width: 72px; height: 18px; padding: 0; margin: 0; border-radius: 20px; cursor: pointer; box-shadow: #989898 0 0 0 0 inset; transition: .3s ease-out all; -webkit-transition: .3s ease-out all; top: -1px;  }
.switch.wide { width: 80px; }
.switch small { background: #fff; border-radius: 100%; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); width: 17px; height: 17px; position: absolute; top: 0; left: 0;  transition: .3s ease-out all; -webkit-transition: .3s ease-out all; } 
.switch.checked { background: #18b3a3 ; border-color: #18b3a3 ; box-shadow: #686868 0 0 0 0 inset; }
.switch.checked small { left: 55px; }
.switch.wide.checked small { left: 55px; }
.switch .switch-text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
.switch .off { display: block; position: absolute; right: 10%; top: 10%; z-index: 0; color: #fff; }
.switch .on { display: none; z-index: 0; color: #fff; position: absolute; top: 10%; left: 11%; }
.switch.checked .off { display: none; }
.switch.checked .on { display: block; }
.switch.disabled { opacity: .5; cursor: not-allowed; }