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: 17px;
13  background-color: rgb(82, 82, 82);
14  border-radius: 20px;
15  cursor: pointer;
16  transition-duration: .2s;
17}
18
19.toggleSwitch::after {
20  content: "";
21  position: absolute;
22  height: 22px;
23  width: 22px;
24  left: 0px;
25  background-color: rgb(41, 41, 41);
26  border-radius: 50%;
27  transition-duration: .2s;
28  border: 2px solid rgb(82, 82, 82);
29}
30
31#checkboxInput:checked+.toggleSwitch::after {
32  transform: translateX(100%);
33  transition-duration: .2s;
34  border: 2px solid rgb(165, 255, 105);
35}
36/* Switch background change */
37#checkboxInput:checked+.toggleSwitch {
38  background-color: rgb(165, 255, 105);
39  transition-duration: .2s;
40}
41