1.checkbox-wrapper-9 .tgl {
2  display: none;
3}
4
5.checkbox-wrapper-9 .tgl,
6  .checkbox-wrapper-9 .tgl:after,
7  .checkbox-wrapper-9 .tgl:before,
8  .checkbox-wrapper-9 .tgl *,
9  .checkbox-wrapper-9 .tgl *:after,
10  .checkbox-wrapper-9 .tgl *:before,
11  .checkbox-wrapper-9 .tgl + .tgl-btn {
12  box-sizing: border-box;
13}
14
15.checkbox-wrapper-9 .tgl::-moz-selection,
16  .checkbox-wrapper-9 .tgl:after::-moz-selection,
17  .checkbox-wrapper-9 .tgl:before::-moz-selection,
18  .checkbox-wrapper-9 .tgl *::-moz-selection,
19  .checkbox-wrapper-9 .tgl *:after::-moz-selection,
20  .checkbox-wrapper-9 .tgl *:before::-moz-selection,
21  .checkbox-wrapper-9 .tgl + .tgl-btn::-moz-selection,
22  .checkbox-wrapper-9 .tgl::selection,
23  .checkbox-wrapper-9 .tgl:after::selection,
24  .checkbox-wrapper-9 .tgl:before::selection,
25  .checkbox-wrapper-9 .tgl *::selection,
26  .checkbox-wrapper-9 .tgl *:after::selection,
27  .checkbox-wrapper-9 .tgl *:before::selection,
28  .checkbox-wrapper-9 .tgl + .tgl-btn::selection {
29  background: none;
30}
31
32.checkbox-wrapper-9 .tgl + .tgl-btn {
33  outline: 0;
34  display: block;
35  width: 4em;
36  height: 2em;
37  position: relative;
38  cursor: pointer;
39  -webkit-user-select: none;
40  -moz-user-select: none;
41  -ms-user-select: none;
42  user-select: none;
43}
44
45.checkbox-wrapper-9 .tgl + .tgl-btn:after,
46  .checkbox-wrapper-9 .tgl + .tgl-btn:before {
47  position: relative;
48  display: block;
49  content: "";
50  width: 50%;
51  height: 100%;
52}
53
54.checkbox-wrapper-9 .tgl + .tgl-btn:after {
55  left: 0;
56}
57
58.checkbox-wrapper-9 .tgl + .tgl-btn:before {
59  display: none;
60}
61
62.checkbox-wrapper-9 .tgl:checked + .tgl-btn:after {
63  left: 50%;
64}
65
66.checkbox-wrapper-9 .tgl-flat + .tgl-btn {
67  padding: 2px;
68  transition: all 0.2s ease;
69  background: #fff;
70  border: 4px solid #f2f2f2;
71  border-radius: 2em;
72}
73
74.checkbox-wrapper-9 .tgl-flat + .tgl-btn:after {
75  transition: all 0.2s ease;
76  background: #f2f2f2;
77  content: "";
78  border-radius: 1em;
79}
80
81.checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn {
82  border: 4px solid #7FC6A6;
83}
84
85.checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn:after {
86  left: 50%;
87  background: #7FC6A6;
88}