1.checkbox {
2  display: inline-flex;
3  align-items: center;
4  cursor: pointer;
5}
6
7.checkbox input[type="checkbox"] {
8  opacity: 0;
9  position: absolute;
10}
11
12.checkbox .checkmark {
13  display: inline-flex;
14  justify-content: center;
15  align-items: center;
16  width: 20px;
17  height: 20px;
18  border: 1px solid #ccc;
19  border-radius: 50%;
20  transition: background-color 0.2s ease;
21}
22
23.checkbox input[type="checkbox"]:checked + .checkmark {
24  background-color: #0078d4;
25  border-color: #0078d4;
26}
27
28.checkbox input[type="checkbox"]:checked + .checkmark:after {
29  content: "";
30  display: block;
31  width: 6px;
32  height: 6px;
33  border-radius: 50%;
34  background-color: #fff;
35  transition: transform 0.2s ease;
36  transform: scale(1);
37}
38
39.checkbox .checkmark:after {
40  content: "";
41  display: block;
42  width: 6px;
43  height: 6px;
44  border-radius: 50%;
45  background-color: transparent;
46  transform: scale(0);
47  transition: transform 0.2s ease;
48}
49