.icheckbox {
width: 20px;
height: 20px;
margin: 0 10px 0 0;
display: inline-block;
vertical-align: top;
background: white;
border: 1px solid #D3D0D0;
position: relative;
}
.icheckbox:after {
content: " ";
background-repeat: no-repeat;
background-position: center center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.385' height='18.385' viewBox='0 0 18.385 18.385'%3E%3Cg id='Group_349' data-name='Group 349' transform='translate(9.087 -33.129) rotate(45)'%3E%3Cg id='Group_27' data-name='Group 27' transform='translate(17.955 17.955)'%3E%3Crect id='Rectangle_20' data-name='Rectangle 20' width='24' height='2' rx='1' transform='translate(11.045 23.896) rotate(-90)' fill='%23fff'/%3E%3Crect id='Rectangle_27' data-name='Rectangle 27' width='24' height='2' rx='1' transform='translate(0.045 10.896)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
opacity: 0;
}
.icheckbox.hover {
border-color: black;
}
.icheckbox.checked {
border-color: var(--dark);
border: none;
}
.icheckbox.checked:after {
opacity: 1;
}
.icheckbox::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: var(--dark);
opacity: 0;
}
.icheckbox.checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: var(--dark);
z-index: 1;
}
.icheckbox.checked::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: var(--white);
z-index: 2;
clip-path: polygon(27% 53%, 44% 65%, 74% 31%, 81% 37%, 63% 58%, 45% 78%, 19% 58%);
}