1/* Remove this container when use*/
2.component-title {
3  width: 100%;
4  position: absolute;
5  z-index: 999;
6  top: 30px;
7  left: 0;
8  padding: 0;
9  margin: 0;
10  font-size: 1rem;
11  font-weight: 700;
12  color: #888;
13  text-align: center;
14}
15
16/* The switch - the box around the slider */
17.container {
18  width: 51px;
19  height: 31px;
20  position: relative;
21}
22
23/* Hide default HTML checkbox */
24.checkbox {
25  opacity: 0;
26  width: 0;
27  height: 0;
28  position: absolute;
29}
30
31.switch {
32  width: 100%;
33  height: 100%;
34  display: block;
35  background-color: #e9e9eb;
36  border-radius: 16px;
37  cursor: pointer;
38  transition: all 0.2s ease-out;
39}
40
41/* The slider */
42.slider {
43  width: 27px;
44  height: 27px;
45  position: absolute;
46  left: calc(50% - 27px/2 - 10px);
47  top: calc(50% - 27px/2);
48  border-radius: 50%;
49  background: #FFFFFF;
50  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06);
51  transition: all 0.2s ease-out;
52  cursor: pointer;
53}
54
55.checkbox:checked + .switch {
56  background-color: #34C759;
57}
58
59.checkbox:checked + .switch .slider {
60  left: calc(50% - 27px/2 + 10px);
61  top: calc(50% - 27px/2);
62}
63