1/* To hide the checkbox */
2#checkboxInput {
3  display: none;
4}
5
6.toggleSwitch {
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  position: relative;
11  width: 50px;
12  height: 30px;
13  background-color: rgb(112, 112, 112);
14  border-radius: 20px;
15  cursor: pointer;
16  transition-duration: 0.2s;
17}
18
19.slider {
20  height: 20px;
21  position: absolute;
22  left: 5px;
23  border-radius: 50%;
24  transition-duration: 0.2s;
25  border: 3px solid rgb(71, 71, 71);
26  background-color: rgb(71, 71, 71);
27  fill: rgb(255, 129, 129);
28}
29
30#checkboxInput:checked + .toggleSwitch .slider {
31  transform: translateX(100%);
32  transition-duration: 0.2s;
33  fill: rgb(94, 255, 1);
34}
35/* Switch background change */
36#checkboxInput:checked + .toggleSwitch {
37  /* background-color: rgb(148, 118, 255); */
38  transition-duration: 0.2s;
39}
40