.switch { position:relative; display:inline-block; width:3.55rem; height:2rem; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider, .switch .slider:before { position:absolute; -webkit-transition:.4s; transition:.4s; }
.switch .slider { cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; }
.switch .slider:before { content:""; position:absolute; height:1.6rem; width:1.6rem; left:0.2rem; top:0.2rem; background-color:#fff; }
.switch input:checked+.slider { background-color:#2196f3; }
.switch input:focus+.slider { box-shadow:0 0 1px #2196f3; }
.switch input:checked+.slider:before { -webkit-transform:translateX(1.6rem); -ms-transform:translateX(1.6rem); transform:translateX(1.6rem); }
.switch input:disabled+.slider { background-color:#97c8ef; }
.switch .slider.round { border-radius:1rem; }
.switch .slider.round:before { border-radius:50%; }
.switch div { position:absolute; top:0.3rem; left:4.3rem; }
.switch.right { display:block; margin:0 0 0 auto; }
.switch.right div { left:0; }
.switch.small { width:2rem; height:1.1rem; }
.switch.small .slider:before{ height:0.8rem; width:0.8rem; left:0.12rem; top:0.15rem; }
.switch.small input:checked+.slider:before { -webkit-transform:translateX(0.96rem); -ms-transform:translateX(0.96rem); transform:translateX(0.96rem); }
.switch.small div { top:0.05rem; left:2.3rem; font-size:0.85rem; line-height:1.1; }
.switch div { white-space:nowrap; }