:root{--blue-background: #c2e9f6;--blue-border: #108DAD;--blue-color: #96dcee;--yellow-background: #fffaa8;--yellow-border: #f5eb71;--indigo-background: #808fc7;--indigo-border: #808BBC;--indigo-color: #6b7abb;--gray-border: #e8e8ea;--gray-dots: #e8e8ea}@keyframes reverse{0%{left:37px;width:32px}60%{left:3px;width:64px}to{left:3px}}@keyframes switch{0%{left:3px}60%{left:3px;width:64px}to{left:37px;width:32px}}.toggle--checkbox{opacity:0}.container--toggle{display:flex;justify-content:center;align-items:center;min-height:50px;margin-left:12px}.toggle--label{width:80px;height:44px;background:var(--indigo-color);border-radius:100px;border:3px solid var(--indigo-border);display:flex;position:relative;align-items:center;transition:all .35s ease-in;cursor:pointer}.toggle--checkbox:checked+.toggle--label{background:var(--blue-color);border-color:var(--blue-border)}.toggle--label:before{animation-name:switch;animation-duration:.35s;animation-fill-mode:forwards;content:"";width:32px;height:32px;border:3px solid var(--gray-border);top:4px;left:3px;position:absolute;border-radius:50%;background:#fff;transition:all .35s ease-in}.toggle--checkbox:checked+.toggle--label:before{animation-name:reverse;background:var(--yellow-background);border-color:var(--yellow-border)}.toggle--label:after{position:absolute;content:"";box-shadow:var(--gray-dots) -11px 0 0 1px,var(--gray-dots) -18px 9px 0 -1px;left:65px;top:8px;width:5px;height:5px;background:transparent;border-radius:50%;opacity:1;transition:all .25s ease-in}.toggle--checkbox:checked+.toggle--label:after{opacity:0;transition-delay:50ms}.toggle--label-background{border-radius:5px;position:absolute;background:#fff;left:25px;width:5px;height:3px;top:20px;transition:all .15s ease-in}.toggle--label-background:before,.toggle--label-background:after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;transition:all .15s ease-in}.toggle--label-background:before{top:-12px;left:-15px}.toggle--label-background:after{top:7px;left:-15px}.toggle--checkbox:checked+.toggle--label .toggle--label-background{width:4px;left:55px;top:18px}.toggle--checkbox:checked+.toggle--label .toggle--label-background:before{top:-3px;left:-4px;width:16px;height:4px}.toggle--checkbox:checked+.toggle--label .toggle--label-background:after{top:2px;width:16px;height:4px;left:-8px}.container--toggle3state{position:relative;width:180px;height:50px;background:#2c2c2c;border-radius:50px;border:2px solid #444;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 10px;box-sizing:border-box;transition:background .3s}.slider{position:absolute;top:3px;width:60px;height:40px;background:linear-gradient(135deg,#108dad,#00ffe0);border-radius:25px;box-shadow:0 4px 8px #00000040;transition:all .35s ease-in-out;border:2px solid #fff}.slider.all{left:3px}.slider.web{left:57px}.slider.game{left:113px}.label{position:relative;z-index:1;font-weight:700;font-size:.85rem;width:50px;text-align:center;pointer-events:none;color:#bbb;transition:color .3s}.slider.all~.all,.slider.web~.web,.slider.game~.game{color:#fff}