Toogle Button For Checkbox

.fluent_form_98 .switch input[type="checkbox"] {
position: relative;
width: 34px;
height: 14px;
margin-right: 10px;
margin-left: 10px;
-moz-appearance: none;
-webkit-appearance: none;
background: rgb(107,114,128);
outline: none;
cursor: pointer;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
transition: background 300ms linear;
}
.fluent_form_98 .switch input[type="checkbox"]::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
top: -4px;
left: -4px;
border-radius: 20px;
background-color: #374151;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: left 150ms linear;
}
.fluent_form_98 .switch:hover input[type="checkbox"]::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
top: -4px;
left: -4px;
border-radius: 20px;
background-color: #374151;
box-shadow: 0px 0px 2px 5px rgba(55, 65, 81, 0.2);
transition: left 150ms linear;
}
.fluent_form_98 .switch input[type="checkbox"]:checked {
background: rgba(117,130,235,0.5);
}
.fluent_form_98 .switch input[type="checkbox"]:checked::before {
left: 15px;
background-color: #426FDC;
}
.fluent_form_98 .switch:hover input[type="checkbox"]:checked::before {
left: 15px;
background-color: #426FDC;
box-shadow: 0px 0px 2px 5px rgba(117, 130, 235, 0.2);
}