.switchy input{display:none}.switchy *{box-sizing:border-box;vertical-align:middle}.switchy{display:inline-block;position:relative;white-space:nowrap;cursor:pointer}.switchy span{display:inline-block;width:48px;height:30px;position:relative;border-radius:15px;border:1px solid #cecece;transition:all .6s linear}.switchy input:checked~span{background:#4cd964;transition:all .2s ease}.switchy span:before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;border-radius:15px;background:#fff;transition:all .4s ease}.switchy span:after{content:"";display:block;width:26px;height:26px;border-radius:13px;background:#fff;box-shadow:0 3px 6px 0 rgba(0,0,0,.2),0 0 2px 0 rgba(0,0,0,.6);position:absolute;top:1px;left:1px;transition:all .2s linear}.switchy input:checked~span:after{transform:translate3d(18px,0,0)}.switchy input:checked~span:before{transform:scale3d(0,0,0)}.switchy[data-tint=red] input:checked~span{background:#ff3b30}.switchy[data-tint=orange] input:checked~span{background:#ff9500}.switchy[data-tint=yellow] input:checked~span{background:#fc0}.switchy[data-tint=teal-blue] input:checked~span{background:#5ac8fa}.switchy[data-tint=blue] input:checked~span{background:#007aff}.switchy[data-tint=purple] input:checked~span{background:#5856d6}.switchy[data-tint=pink] input:checked~span{background:#ff2d55}.switchy input:active~span:after{width:33px}.switchy input:checked:active~span:after{transform:translate3d(11px,0,0)}.switchy-sm span{width:36px;height:22.5px;border-radius:11.25px}.switchy-sm span:before{border-radius:11.25px}.switchy-sm span:after{width:19.5px;height:19.5px;border-radius:9.75px}.switchy-sm input:checked~span:after{transform:translate3d(13.5px,0,0)}.switchy-sm input:active~span:after{width:24.75px}.switchy-sm input:checked:active~span:after{transform:translate3d(8.25px,0,0)}.switchy-lg span{width:60px;height:37.5px;border-radius:18.75px}.switchy-lg span:before{border-radius:18.75px}.switchy-lg span:after{width:32.5px;height:32.5px;border-radius:16.25px}.switchy-lg input:checked~span:after{transform:translate3d(22.5px,0,0)}.switchy-lg input:active~span:after{width:41.25px}.switchy-lg input:checked:active~span:after{transform:translate3d(13.75px,0,0)}.switchy input[disabled]~span:before{background:#f2f2f2}.switchy input[disabled]~span:after{background:#f2f2f2}@media all and (min--moz-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.switchy input:active~span:after{width:26px}.switchy input:checked:active~span:after{transform:translate3d(18px,0,0)}}