1/* Hide the default checkbox */
2.container input {
3  position: absolute;
4  opacity: 0;
5  cursor: pointer;
6  height: 0;
7  width: 0;
8  display: none;
9  color: white;
10}
11
12.container {
13  --size: 50px;
14  width: var(--size);
15  display: block;
16  height: var(--size);
17  background-color: #191A1E;
18  border-radius: 100%;
19  cursor: pointer;
20  padding: 5px;
21  color: white;
22  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
23}
24
25.container .checkmark {
26  width: 100%;
27  height: 100%;
28  border-radius: 50%;
29  box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
30  transition: all ease 0.3s;
31  padding: 8px;
32}
33
34.container .checkmark svg {
35  opacity: 0;
36  transition: all ease 0.3s;
37}
38
39.container input:checked + .checkmark {
40  box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
41}
42
43.container input:checked + .checkmark svg {
44  opacity: 1;
45}