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: 80px;
12  height: 40px;
13  background-color: rgb(199, 199, 199);
14  border-radius: 20px;
15  cursor: pointer;
16  transition-duration: .3s;
17}
18
19.toggleSwitch::after {
20  content: "";
21  position: absolute;
22  height: 40px;
23  width: 40px;
24  left: 0px;
25  background: conic-gradient(rgb(104, 104, 104),white,rgb(104, 104, 104),white,rgb(104, 104, 104));
26  border-radius: 50%;
27  transition-duration: .3s;
28  box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.308);
29}
30
31#checkboxInput:checked+.toggleSwitch::after {
32  transform: translateX(100%);
33  transition-duration: .3s;
34}
35/* Switch background change */
36#checkboxInput:checked+.toggleSwitch {
37  background-color: rgb(153, 197, 151);
38  transition-duration: .3s;
39}