.toggler{width:72px}.toggler input{display:none}.toggler label{cursor:pointer;background:#e4e8e8;border:1px solid #d6d6d6;border-radius:36px;width:72px;height:30px;display:block;position:relative}.toggler label:after{content:"";animation-name:toggler-size;animation-duration:.15s;animation-timing-function:ease-out;animation-direction:forwards;background-color:#d7062a;border-radius:100%;animation-iteration-count:1;animation-play-state:running;display:block}.toggler label:after,.toggler label .toggler-on,.toggler label .toggler-off{width:26px;height:26px;transition:left .15s ease-in-out,background-color .2s ease-out,width .15s ease-in-out,height .15s ease-in-out,opacity .15s ease-in-out;position:absolute;top:50%;left:25%;transform:translateY(-50%)translate(-50%)}.toggler input:checked+label:after,.toggler input:checked+label .toggler-on,.toggler input:checked+label .toggler-off{left:75%}.toggler input:checked+label:after{background-color:#50ac5d;animation-name:toggler-size2}.toggler .toggler-on,.toggler .toggler-off{opacity:1;z-index:2}.toggler input:checked+label .toggler-off,.toggler input:not(:checked)+label .toggler-on{opacity:0;width:0;height:0}.toggler .path{fill:none;stroke:#fefefe;stroke-width:7px;stroke-linecap:round;stroke-miterlimit:10}@keyframes toggler-size{0%,to{width:26px;height:26px}50%{width:20px;height:20px}}@keyframes toggler-size2{0%,to{width:26px;height:26px}50%{width:20px;height:20px}}