Switch by PriyanshuGupta28

1.checkbox-wrapper-51 input[type="checkbox"] {
2  visibility: hidden;
3  display: none;
4}
5
6.checkbox-wrapper-51 .toggle {
7  position: relative;
8  display: block;
9  width: 42px;
10  height: 24px;
11  cursor: pointer;
12  -webkit-tap-highlight-color: transparent;
13  transform: translate3d(0, 0, 0);
14}
15
16.checkbox-wrapper-51 .toggle:before {
17  content: "";
18  position: relative;
19  top: 1px;
20  left: 1px;
21  width: 40px;
22  height: 22px;
23  display: block;
24  background: #c8ccd4;
25  border-radius: 12px;
26  transition: background 0.2s ease;
27}
28
29.checkbox-wrapper-51 .toggle span {
30  position: absolute;
31  top: 0;
32  left: 0;
33  width: 24px;
34  height: 24px;
35  display: block;
36  background: #fff;
37  border-radius: 50%;
38  box-shadow: 0 2px 6px rgba(154,153,153,0.75);
39  transition: all 0.2s ease;
40}
41
42.checkbox-wrapper-51 .toggle span svg {
43  margin: 7px;
44  fill: none;
45}
46
47.checkbox-wrapper-51 .toggle span svg path {
48  stroke: #c8ccd4;
49  stroke-width: 2;
50  stroke-linecap: round;
51  stroke-linejoin: round;
52  stroke-dasharray: 24;
53  stroke-dashoffset: 0;
54  transition: all 0.5s linear;
55}
56
57.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle:before {
58  background: #1175c7;
59}
60
61.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span {
62  transform: translateX(18px);
63}
64
65.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span path {
66  stroke: #000000;
67  stroke-dasharray: 25;
68  stroke-dashoffset: 25;
69}