.toggle_switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

#toggleCheckbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #bbbbbb;
    transition: 0.4s;
    border-radius: 20px;
}

.toggle_slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 3.5px;
    bottom: 3px;
    background-color: #6f6f6f;
    transition: 0.4s;
    border-radius: 50%;
    box-shadow: #3c40434d 0px 1px 2px 0px,
        #3c404326 0px 2px 6px 2px;
}

/* .toggle_slider::before {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    left: 3.5px;
    bottom: 3px;
    background:  url("https://bucket.trulle.in/cutebae_app/file/1.jpg")  no-repeat center/contain;
    transition: 0.4s;
    border-radius: 50%;
} */


#toggleCheckbox:checked+.toggle_slider {
    background-color: #a3b7ff;
    /* background-color: red; */
}

#toggleCheckbox:checked+.toggle_slider:before {
    transform: translateX(13px);
    background: #4767d6;
    /* transition: all 1s ease-in-out; */

}