.squaredOne {
width: 28px;
height: 28px;
position: relative;
margin: 20px auto;
background: #fcfff4;
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.squaredOne label {
width: 20px;
height: 20px;
position: absolute;
top: 4px;
left: 4px;
cursor: pointer;
background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.squaredOne label:after {
content: '';
width: 16px;
height: 16px;
position: absolute;
top: 2px;
left: 2px;
background: #27ae60;
background: linear-gradient(to bottom, #27ae60 0%, #145b32 100%);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
opacity: 0;
}
.squaredOne label:hover::after {
opacity: 0.3;
}
.squaredOne input[type=checkbox] {
visibility: hidden;
}
.squaredOne input[type=checkbox]:checked + label:after {
opacity: 1;
}