1.check_container {
2  position: relative;
3}
4
5.checkbox {
6  position: relative;
7  top: 1px;
8  width: 30px;
9  height: 30px;
10  border: 2px solid #212fab;
11  border-radius: 50px;
12  cursor: pointer;
13  display: block;
14  transition: all 0.3s linear;
15}
16
17.checkbox::after {
18  content: "";
19  position: absolute;
20  top: 25%;
21  left: 20%;
22  width: 6px;
23  height: 12px;
24  opacity: 0;
25  transform: rotate(45deg) scale(0) translate(-50%, -50%);
26  border-right: 4px solid #ffffff;
27  border-bottom: 4px solid #ffffff;
28  transition: all 0.3s linear;
29}
30
31#checkbox:checked ~ .checkbox::after {
32  opacity: 1 !important;
33  transform: rotate(50deg) scale(1) translate(20%, -25%) !important;
34}
35
36#checkbox:checked ~ .checkbox {
37  background: #212fab;
38  border: none;
39}
40
41.hidden {
42  display: none !important;
43}
44