1.material-checkbox {
2  display: flex;
3  align-items: center;
4  font-size: 16px;
5  color: #777777;
6  cursor: pointer;
7}
8
9.material-checkbox input[type="checkbox"] {
10  position: absolute;
11  opacity: 0;
12  width: 0;
13  height: 0;
14}
15
16.checkmark {
17  position: relative;
18  display: inline-block;
19  width: 20px;
20  height: 20px;
21  margin-right: 12px;
22  border: 2px solid #454B00;
23  border-radius: 4px;
24  transition: all 0.3s;
25}
26
27.material-checkbox input[type="checkbox"]:checked ~ .checkmark {
28  background-color: #2F3300;
29  border-color: #454B00;
30}
31
32.material-checkbox input[type="checkbox"]:checked ~ .checkmark:after {
33  content: "";
34  position: absolute;
35  top: 2px;
36  left: 6px;
37  width: 4px;
38  height: 10px;
39  border: solid white;
40  border-width: 0 2px 2px 0;
41  transform: rotate(45deg);
42}
43
44.material-checkbox input[type="checkbox"]:focus ~ .checkmark {
45  box-shadow: 0 0 0 2px #dfec5065;
46}
47
48.material-checkbox:hover input[type="checkbox"] ~ .checkmark {
49  border-color: #C3CF34;
50}
51
52.material-checkbox input[type="checkbox"]:disabled ~ .checkmark {
53  opacity: 0.5;
54  cursor: not-allowed;
55}
56
57.material-checkbox input[type="checkbox"]:disabled ~ .checkmark:hover {
58  border-color: #4d4d4d;
59}
60