*,:after,:before{box-sizing:inherit}body{font-family:Helvetica,Arial,sans-serif}hr{width:100%}.container{display:flex;justify-content:center;flex-direction:column;text-align:center;margin-top:50px}.toggle{margin-top:10px}.toggle-btn{display:inline-block;outline:0;width:4em;height:2em;position:relative;cursor:pointer;user-select:none;background:#fbfbfb;border-radius:2em;padding:2px;transition:all .4s ease;border:1px solid #e8eae9}.toggle-btn:active:after,.toggle-btn:focus:after{box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08),inset 0 0 0 1.5px #9c9c9c}.toggle-btn:after{left:0;position:relative;display:block;content:"";width:50%;height:100%;border-radius:2em;background:#fbfbfb;transition:all .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08)}.toggle-btn.toggle-btn-on:after{left:50%}.toggle-btn.toggle-btn-on{background:#86d993}.toggle-btn.toggle-btn-on:active{box-shadow:none}.toggle-btn.toggle-btn-on:active:after{margin-left:-.8em}.toggle-btn:active:after{padding-right:.8em}.toggle-input{display:none}