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(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: 10px;
23  width: 10px;
24  left: 5px;
25  background-color: transparent;
26  border-radius: 50%;
27  transition-duration: .2s;
28  box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.26);
29  border: 5px solid white;
30}
31
32#checkboxInput:checked+.toggleSwitch::after {
33  transform: translateX(100%);
34  transition-duration: .2s;
35  background-color: white;
36}
37/* Switch background change */
38#checkboxInput:checked+.toggleSwitch {
39  background-color: rgb(148, 118, 255);
40  transition-duration: .2s;
41}
42