@keyframes move-left{0%{left:155px;width:190px}50%{left:-10px;width:155px}75%{left:10px}100%{left:5px}}@keyframes move-right{0%{left:5px;width:155px}50%{left:170px;width:190px}75%{left:150px}100%{left:155px}}.knobs,.layer{position:absolute;top:0;right:0;bottom:0;left:0}.button{position:relative;top:50%;width:350px;height:50px;margin:10px auto;overflow:visible}.button.r,.button.r .layer{border-radius:100px}.button.b2{border-radius:2px}.checkbox{position:relative;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:3}.knobs{z-index:2}.layer{width:100%;background-color:#fff;box-shadow:inset 0 2px 5px rgba(0,0,0,.4);border:1px solid #9f9f9f;transition:.5s ease all;z-index:1}.lab-hidden{position:relative;width:0;height:0;overflow:hidden}.btn-costom-toggle .knobs:before,.btn-costom-toggle .knobs span{position:absolute;top:5px;width:155px;height:40px;font-size:1.2rem;text-align:center;line-height:22px;padding:9px 4px;border-radius:50px;transition:.5s ease all}.btn-costom-toggle .knobs:before{content:"";background-color:#df394d;box-shadow:0 3px 3px rgba(0,0,0,.4);animation:move-left .5s}.btn-costom-toggle .knobs:before,.btn-costom-toggle .knobs span:nth-child(1){left:5px}.btn-costom-toggle .knobs span{z-index:1}.btn-costom-toggle .knobs span:nth-child(2){left:155px}.btn-costom-toggle .checkbox:focus-visible+.knobs:before{outline:solid 3px #000;transition:.5s ease left}.btn-costom-toggle .checkbox:checked+.knobs span:nth-child(1),.btn-costom-toggle .knobs span:nth-child(2){color:#9f9f9f;font-weight:normal}.btn-costom-toggle .checkbox:checked+.knobs span:nth-child(2),.btn-costom-toggle .knobs span:nth-child(1){color:#fff;font-weight:bold}.btn-costom-toggle .knobs span:nth-child(2),.btn-costom-toggle .checkbox:checked+.knobs:before{left:155px;width:190px}.btn-costom-toggle .checkbox:checked+.knobs:before{background-color:#4472c4;animation:move-right .5s}.btn-costom-toggle .checkbox:checked~.layer{background-color:#fff}.btn-costom-toggle .checkbox:checked+.knobs:after{color:#fff}