.form-check-input[type=checkbox]:checked {
    background-image: none;
     
}

.form-check-input:before {
    content: "";
    position: absolute;
    box-shadow: 0 0 0 13px transparent;
    border-radius: 50%;
    width: .875rem;
    height: .875rem;
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
    transform: scale(0)
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}
.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    width: 2em;
    margin-left: -2.5em;
    background-image: var(--bs-form-switch-bg);
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out
}

    /*.form-switch .form-check-input:after {
        content: "";
        position: absolute;
        border: none;
        z-index: 2;
        border-radius: 50%;
        width: 1.25rem;
        height: 1.25rem;
        background-color: #fff;
        margin-top: -.1875rem;
        box-shadow: 0 0 3px 0 rgba(0,0,0,.07),0 2px 2px 0 rgba(0,0,0,.04);
        transition: background-color .2s,transform .2s
    }*/
    .form-switch .form-check-input:after {
        content: "";
        position: absolute;
        border: none;
        z-index: 2;
        border-radius: 50%;
        width: 1.25rem;
        height: 1.25rem;
        /*background-color: #3b71ca;*/
        background-color: #fff !important;
        margin-top: -.1875rem;
        box-shadow: 0 0 3px 0 rgba(0,0,0,.07),0 2px 2px 0 rgba(0,0,0,.04);
        transition: background-color .2s,transform .2s
    }

    .form-switch .form-check-input:focus {
        background-image: none
    }

        .form-switch .form-check-input:focus:before {
            box-shadow: 3px -1px 0 13px rgba(0,0,0,.6);
            transform: scale(1);
            transition: box-shadow .2s,transform .2s
        }

        .form-switch .form-check-input:focus:after {
            border-radius: 50%;
            width: 1.25rem;
            height: 1.25rem
        }

    .form-switch .form-check-input:checked,
    .form-switch .form-check-input:checked:focus {
        background-image: none
    }

        .form-switch .form-check-input:checked:focus:before {
            margin-left: 1.0625rem;
            /*box-shadow: 3px -1px 0 13px #3b71ca;*/
            box-shadow: 3px -1px 0 13px #fff !important;
            transform: scale(1);
            transition: box-shadow .2s,transform .2s
        }

        .form-switch .form-check-input:checked[type=checkbox] {
            background-image: none
        }

            .form-switch .form-check-input:checked[type=checkbox]:after {
                content: "";
                position: absolute;
                border: none;
                z-index: 2;
                border-radius: 50%;
                width: 1.25rem;
                height: 1.25rem;
                /*background-color: #fff;*/
                background-color: #3b71ca !important;
                margin-top: -3px;
                margin-left: 1.0625rem;
                box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
                transition: background-color .2s,transform .2s
            }




.form-switch {
    padding-left: 2.5em
}

    .form-switch .form-check-input {
        width: 2em;
        margin-left: -2.5em;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3E%3C/svg%3E");
        background-position: 0;
        border-radius: 2em;
        transition: background-position .15s ease-in-out
    }

@media(prefers-reduced-motion:reduce) {
    .form-switch .form-check-input {
        transition: none
    }
}

.form-switch .form-check-input:focus {
    /*background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%233b71ca'/%3E%3C/svg%3E")*/
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")
}

.form-switch .form-check-input:checked {
    background-position: 100%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")
}

.form-switch.form-check-reverse {
    padding-right: 2.5em;
    padding-left: 0
}

    .form-switch.form-check-reverse .form-check-input {
        margin-right: -2.5em;
        margin-left: 0
    }

.form-switch .form-check-input {
    background-image: none;
    border-width: 0;
    border-radius: .4375rem;
    width: 2rem;
    height: .875rem;
    /*background-color: rgba(0,0,0,.25);*/
    background-color: #3b71ca;
    margin-top: .3em;
    margin-right: 8px
}

    .form-switch .form-check-input:after {
        content: "";
        position: absolute;
        border: none;
        z-index: 2;
        border-radius: 50%;
        width: 1.25rem;
        height: 1.25rem;
        /*background-color: #fff;*/
        background-color: #3b71ca !important;
        margin-top: -.1875rem;
        box-shadow: 0 0 3px 0 rgba(0,0,0,.07),0 2px 2px 0 rgba(0,0,0,.04);
        transition: background-color .2s,transform .2s
    }

    .form-switch .form-check-input:focus {
        background-image: none
    }

        .form-switch .form-check-input:focus:before {
            box-shadow: 3px -1px 0 13px rgba(0,0,0,.6);
            transform: scale(1);
            transition: box-shadow .2s,transform .2s
        }

        .form-switch .form-check-input:focus:after {
            border-radius: 50%;
            width: 1.25rem;
            height: 1.25rem
        }

    .form-switch .form-check-input:checked,
    .form-switch .form-check-input:checked:focus {
        background-image: none
    }

        .form-switch .form-check-input:checked:focus:before {
            margin-left: 1.0625rem;
            /*box-shadow: 3px -1px 0 13px #3b71ca;*/
            box-shadow: 3px -1px 0 13px #fff !important;
            transform: scale(1);
            transition: box-shadow .2s,transform .2s
        }

        .form-switch .form-check-input:checked[type=checkbox] {
            background-image: none
        }

            .form-switch .form-check-input:checked[type=checkbox]:after {
                content: "";
                position: absolute;
                border: none;
                z-index: 2;
                border-radius: 50%;
                width: 1.25rem;
                height: 1.25rem;
                /*background-color: #3b71ca;*/
                background-color: #fff !important;
                margin-top: -3px;
                margin-left: 1.0625rem;
                box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
                transition: background-color .2s,transform .2s
            }

    .form-switch .form-check-input.is-valid:focus:before,
    .was-validated .form-switch .form-check-input:valid:focus:before {
        box-shadow: 3px -1px 0 13px rgba(0,0,0,.6)
    }

    .form-switch .form-check-input.is-valid:checked[type=checkbox]:after,
    .was-validated .form-switch .form-check-input:valid:checked[type=checkbox]:after {
        background-color: #14a44d;
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
    }

    .form-switch .form-check-input.is-valid:checked:focus:before,
    .was-validated .form-switch .form-check-input:valid:checked:focus:before {
        box-shadow: 3px -1px 0 13px #14a44d
    }
    .form-switch .form-check-input.is-invalid:focus:before,
    .was-validated .form-switch .form-check-input:invalid:focus:before {
        box-shadow: 3px -1px 0 13px rgba(0,0,0,.6)
    }

    .form-switch .form-check-input.is-invalid:checked[type=checkbox]:after,
    .was-validated .form-switch .form-check-input:invalid:checked[type=checkbox]:after {
        background-color: #dc4c64;
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)
    }

    .form-switch .form-check-input.is-invalid:checked:focus:before,
    .was-validated .form-switch .form-check-input:invalid:checked:focus:before {
        box-shadow: 3px -1px 0 13px #dc4c64
    }