1   /* The switch - the box around the slider */
 2  .switch {
 3    position: relative;
 4    display: inline-block;
 5    width: 60px;
 6    height: 34px;
 7  }
 8  
 9  /* Hide default HTML checkbox */
10  .switch input {
11    opacity: 0;
12    width: 0;
13    height: 0;
14  }
15  
16  /* The slider */
17  .switch .slider {
18    position: absolute;
19    cursor: pointer;
20    top: 0;
21    left: 0;
22    right: 0;
23    bottom: 0;
24    background-color: #ccc;
25    -webkit-transition: .4s;
26    transition: .4s;
27  }
28  
29  .slider:before {
30    position: absolute;
31    content: "";
32    height: 26px;
33    width: 26px;
34    left: 4px;
35    bottom: 4px;
36    background-color: black;
37    -webkit-transition: .4s;
38    transition: .4s;
39  }
40  
41  .switch input:checked + .slider {
42    background-color: white;
43  }
44  
45  .switch input:focus + .slider {
46    box-shadow: 0 0 1px #2196F3;
47  }
48  
49  .switch input:checked + .slider:before {
50    -webkit-transform: translateX(26px);
51    -ms-transform: translateX(26px);
52    transform: translateX(26px);
53  }
54  
55  /* Rounded sliders */
56  .slider.round {
57    border-radius: 34px;
58  }
59  
60  .slider.round:before {
61    border-radius: 50%;
62  }