1.lock-checkbox {
2  position: relative;
3  display: inline-block;
4  width: 40px;
5  height: 40px;
6  margin-right: 10px;
7}
8
9.lock-checkbox input[type="checkbox"] {
10  opacity: 0;
11  width: 0;
12  height: 0;
13}
14
15.lock-icon {
16  fill: #00ff40;
17  position: absolute;
18  top: 50%;
19  left: 50%;
20  transform: translate(-50%, -50%);
21  width: 34px;
22  height: 34px;
23  transition: all 0.3s;
24  cursor: pointer;
25}
26
27.lock-checkbox input[type="checkbox"]:checked + .lock-icon {
28  fill: #ff0000;
29}
30