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: 90px;
12  height: 30px;
13  background-color: rgb(206, 206, 206);
14  border-radius: 40px;
15  cursor: pointer;
16  transition-duration: .3s;
17}
18
19.toggleSwitch::after {
20  content: "";
21  position: absolute;
22  height: 30px;
23  width: 50%;
24  left: 0px;
25  background: conic-gradient(rgba(26, 26, 26, 0.555),white,rgba(26, 26, 26, 0.555),white,rgba(26, 26, 26, 0.555));
26  border-radius: 40px;
27  transition-duration: .3s;
28  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.281);
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(124, 173, 206);
38  transition-duration: .3s;
39}