.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:rgb(40,167,69,.7)}input:focus+.slider{box-shadow:0 0 1px #28a745}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.example{margin:4rem auto}.example>.row{margin-top:2rem;height:5rem;vertical-align:middle;text-align:center;border:1px solid rgba(189,193,200,.5)}.example>.row:first-of-type{border:none;height:auto;text-align:left}.example h3{font-weight:400}.example h3>small{font-weight:200;font-size:.75em;color:#939aa5}.example h6{font-weight:700;font-size:.65rem;letter-spacing:3.32px;text-transform:uppercase;color:#bdc1c8;margin:0;line-height:5rem}.example .btn-toggle{top:50%;transform:translateY(-50%)}.btn-toggle{margin:0 4rem;padding:0;position:relative;border:none;height:1.5rem;width:3rem;border-radius:1.5rem;color:#6b7381;background:rgba(220,53,69,.7)}.btn-toggle.focus,.btn-toggle.focus.active,.btn-toggle:focus,.btn-toggle:focus.active{outline:0}.btn-toggle:after,.btn-toggle:before{line-height:1.5rem;width:4rem;text-align:center;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:2px;position:absolute;bottom:0;transition:opacity .25s}.btn-toggle:before{content:'Off';left:-4rem}.btn-toggle:after{content:'On';right:-4rem;opacity:.5}.btn-toggle>.handle{position:absolute;top:.1875rem;left:.1875rem;width:1.125rem;height:1.125rem;border-radius:1.125rem;background:#fff;transition:left .25s}.btn-toggle.active{transition:background-color .25s}.btn-toggle.active>.handle{left:1.6875rem;transition:left .25s}.btn-toggle.active:before{opacity:.5}.btn-toggle.active:after{opacity:1}.btn-toggle.btn-sm:after,.btn-toggle.btn-sm:before{line-height:-.5rem;color:#fff;letter-spacing:.75px;left:.4125rem;width:2.325rem}.btn-toggle.btn-sm:before{text-align:right}.btn-toggle.btn-sm:after{text-align:left;opacity:0}.btn-toggle.btn-sm.active:before{opacity:0}.btn-toggle.btn-sm.active:after{opacity:1}.btn-toggle.btn-xs:after,.btn-toggle.btn-xs:before{display:none}.btn-toggle:after,.btn-toggle:before{color:#6b7381}.btn-toggle.active{background-color:rgba(40,167,69,.7)}.btn-toggle.btn-lg{margin:0 5rem;padding:0;position:relative;border:none;height:2.5rem;width:5rem;border-radius:2.5rem}.btn-toggle.btn-lg.focus,.btn-toggle.btn-lg.focus.active,.btn-toggle.btn-lg:focus,.btn-toggle.btn-lg:focus.active{outline:0}.btn-toggle.btn-lg:after,.btn-toggle.btn-lg:before{line-height:2.5rem;width:5rem;text-align:center;font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:2px;position:absolute;bottom:0;transition:opacity .25s}.btn-toggle.btn-lg:before{content:'Off';left:-5rem}.btn-toggle.btn-lg:after{content:'On';right:-5rem;opacity:.5}.btn-toggle.btn-lg>.handle{position:absolute;top:.3125rem;left:.3125rem;width:1.875rem;height:1.875rem;border-radius:1.875rem;background:#fff;transition:left .25s}.btn-toggle.btn-lg.active{transition:background-color .25s}.btn-toggle.btn-lg.active>.handle{left:2.8125rem;transition:left .25s}.btn-toggle.btn-lg.active:before{opacity:.5}.btn-toggle.btn-lg.active:after{opacity:1}.btn-toggle.btn-lg.btn-sm:after,.btn-toggle.btn-lg.btn-sm:before{line-height:.5rem;color:#fff;letter-spacing:.75px;left:.6875rem;width:3.875rem}.btn-toggle.btn-lg.btn-sm:before{text-align:right}.btn-toggle.btn-lg.btn-sm:after{text-align:left;opacity:0}.btn-toggle.btn-lg.btn-sm.active:before{opacity:0}.btn-toggle.btn-lg.btn-sm.active:after{opacity:1}.btn-toggle.btn-lg.btn-xs:after,.btn-toggle.btn-lg.btn-xs:before{display:none}.btn-toggle.btn-sm{margin:0 .5rem;padding:0;position:relative;border:none;height:1.5rem;width:3rem;border-radius:1.5rem}.btn-toggle.btn-sm.focus,.btn-toggle.btn-sm.focus.active,.btn-toggle.btn-sm:focus,.btn-toggle.btn-sm:focus.active{outline:0}.btn-toggle.btn-sm:after,.btn-toggle.btn-sm:before{line-height:1.5rem;width:.5rem;text-align:center;font-weight:600;font-size:.55rem;text-transform:uppercase;letter-spacing:2px;position:absolute;bottom:0;transition:opacity .25s}.btn-toggle.btn-sm:before{content:'Off';left:-.5rem}.btn-toggle.btn-sm:after{content:'On';right:-.5rem;opacity:.5}.btn-toggle.btn-sm>.handle{position:absolute;top:.1875rem;left:.1875rem;width:1.125rem;height:1.125rem;border-radius:1.125rem;background:#fff;transition:left .25s}.btn-toggle.btn-sm.active{transition:background-color .25s}.btn-toggle.btn-sm.active>.handle{left:1.6875rem;transition:left .25s}.btn-toggle.btn-sm.active:before{opacity:.5}.btn-toggle.btn-sm.active:after{opacity:1}.btn-toggle.btn-sm.btn-sm:after,.btn-toggle.btn-sm.btn-sm:before{line-height:-.5rem;color:#fff;letter-spacing:.75px;left:.4125rem;width:2.325rem}.btn-toggle.btn-sm.btn-sm:before{text-align:right}.btn-toggle.btn-sm.btn-sm:after{text-align:left;opacity:0}.btn-toggle.btn-sm.btn-sm.active:before{opacity:0}.btn-toggle.btn-sm.btn-sm.active:after{opacity:1}.btn-toggle.btn-sm.btn-xs:after,.btn-toggle.btn-sm.btn-xs:before{display:none}.btn-toggle.btn-xs{margin:0 0;padding:0;position:relative;border:none;height:1rem;width:2rem;border-radius:1rem}.btn-toggle.btn-xs.focus,.btn-toggle.btn-xs.focus.active,.btn-toggle.btn-xs:focus,.btn-toggle.btn-xs:focus.active{outline:0}.btn-toggle.btn-xs:after,.btn-toggle.btn-xs:before{line-height:1rem;width:0;text-align:center;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:2px;position:absolute;bottom:0;transition:opacity .25s}.btn-toggle.btn-xs:before{content:'Off';left:0}.btn-toggle.btn-xs:after{content:'On';right:0;opacity:.5}.btn-toggle.btn-xs>.handle{position:absolute;top:.125rem;left:.125rem;width:.75rem;height:.75rem;border-radius:.75rem;background:#fff;transition:left .25s}.btn-toggle.btn-xs.active{transition:background-color .25s}.btn-toggle.btn-xs.active>.handle{left:1.125rem;transition:left .25s}.btn-toggle.btn-xs.active:before{opacity:.5}.btn-toggle.btn-xs.active:after{opacity:1}.btn-toggle.btn-xs.btn-sm:after,.btn-toggle.btn-xs.btn-sm:before{line-height:-1rem;color:#fff;letter-spacing:.75px;left:.275rem;width:1.55rem}.btn-toggle.btn-xs.btn-sm:before{text-align:right}.btn-toggle.btn-xs.btn-sm:after{text-align:left;opacity:0}.btn-toggle.btn-xs.btn-sm.active:before{opacity:0}.btn-toggle.btn-xs.btn-sm.active:after{opacity:1}.btn-toggle.btn-xs.btn-xs:after,.btn-toggle.btn-xs.btn-xs:before{display:none}.btn-toggle.btn-secondary{color:#6b7381;background:#bdc1c8}.btn-toggle.btn-secondary:after,.btn-toggle.btn-secondary:before{color:#6b7381}.btn-toggle.btn-secondary.active{background-color:#ff8300}