.switch {
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 54px;
}

.switch::before {
    display: flex;
    background-color: #fff; /*gris*/
    width: 100px;
    height: 50px;
    border-radius: 100px;
    cursor: pointer;
    display: flex;
}

.switch input[type="checkbox"] /*quita la forma del checkbox*/ {
    background-color: #d2d2d2;
    width: 0;
    height: 0;
    border-radius: 100px;
    cursor: pointer;
    position: relative;
}

.switch input[type="checkbox"]::before /*fondo gris - off*/ {
    content: '';
    top: -15px;
    left: -5px;
    position: absolute;
    background-color: #d2d2d2;
    width: 100px;
    height: 50px;
    border-radius: 100px;
}

.switch input[type="checkbox"]::after { /*boton izq - off*/
    content: '';
    top: -15px;
    left: -5px;
    position: absolute;
    background-color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 100px;
    margin: 2px;
}

.switch input[type="checkbox"]:checked::before /*fondo gris - on*/ {
    content: '';
    top: -15px;
    left: -5px;
    position: absolute;
    background-color: #20096d;
    width: 100px;
    height: 50px;
    border-radius: 100px;
    transform: translateX(0px);
}

.switch input[type="checkbox"]:checked::after /*boton der - off*/ {
    content: '';
    top: -15px;
    left: -5px;
    position: absolute;
    background-color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 100px;
    transform: translateX(50px);
    margin: 2px;
}