.switch{position:relative;display:inline-block;width:49px;height:23px}.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:16px;width:16px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.input-field{width:300px}input:checked+.slider{background-color:#2196F3}input:focus+.slider{box-shadow:0 0 1px #2196F3}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%}[data-tip]{position:relative}[data-tip]:before{content:'';display:none;content:'';border-left:5px solid #fff0;border-right:5px solid #fff0;border-bottom:5px solid #1a1a1a;position:absolute;top:30px;left:5px;z-index:8;font-size:0;line-height:0;width:0;height:0}[data-tip]:after{display:none;content:attr(data-tip);position:absolute;top:35px;left:-133px;padding:5px 8px;background:#1a1a1a;color:#fff;z-index:9;font-size:.75em;height:18px;line-height:18px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:nowrap;word-wrap:normal}[data-tip]:hover:before,[data-tip]:hover:after{display:block}