1.checkbox-wrapper-31:hover .check {
2  stroke-dashoffset: 0;
3}
4
5.checkbox-wrapper-31 {
6  position: relative;
7  display: inline-block;
8  width: 40px;
9  height: 40px;
10}
11
12.checkbox-wrapper-31 .background {
13  fill: #ccc;
14  transition: ease all 0.6s;
15  -webkit-transition: ease all 0.6s;
16}
17
18.checkbox-wrapper-31 .stroke {
19  fill: none;
20  stroke: #fff;
21  stroke-miterlimit: 10;
22  stroke-width: 2px;
23  stroke-dashoffset: 100;
24  stroke-dasharray: 100;
25  transition: ease all 0.6s;
26  -webkit-transition: ease all 0.6s;
27}
28
29.checkbox-wrapper-31 .check {
30  fill: none;
31  stroke: #fff;
32  stroke-linecap: round;
33  stroke-linejoin: round;
34  stroke-width: 2px;
35  stroke-dashoffset: 22;
36  stroke-dasharray: 22;
37  transition: ease all 0.6s;
38  -webkit-transition: ease all 0.6s;
39}
40
41.checkbox-wrapper-31 input[type=checkbox] {
42  position: absolute;
43  width: 100%;
44  height: 100%;
45  left: 0;
46  top: 0;
47  margin: 0;
48  opacity: 0;
49  -appearance: none;
50  -webkit-appearance: none;
51}
52
53.checkbox-wrapper-31 input[type=checkbox]:hover {
54  cursor: pointer;
55}
56
57.checkbox-wrapper-31 input[type=checkbox]:checked + svg .background {
58  fill: #6cbe45;
59}
60
61.checkbox-wrapper-31 input[type=checkbox]:checked + svg .stroke {
62  stroke-dashoffset: 0;
63}
64
65.checkbox-wrapper-31 input[type=checkbox]:checked + svg .check {
66  stroke-dashoffset: 0;
67}
68