.checkbox-list{
color: #fff;
background: linear-gradient(#3a7bd5, #3a6073);
padding: 25px;
border-radius: 10px;
}
.checkbox{
border-bottom: 1px dashed rgba(255,255,255,0.5);
padding: 5px 5px 9px 5px;
margin: 0 0 10px;
display: block;
}
.checkbox input[type=checkbox]{
margin: 0;
visibility: hidden;
left: 1px;
top: 1px;
}
.checkbox label{
font-size: 20px;
line-height: 26px;
padding-left: 35px;
margin: 0;
display: block;
cursor: pointer;
position: relative;
transition: all 0.3s ease 0s;
}
.checkbox label:before,
.checkbox label:after{
content: "";
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,0.5);
border-radius: 4px;
position: absolute;
top: 3px;
left: 3px;
transition: all 0.25s;
}
.checkbox label:after{
height: 10px;
width: 16px;
border-radius: 0 0 0 4px;
border: 5px solid #fff;
border-top: none;
border-right: none;
opacity: 0;
transform: rotate(-45deg);
top: 15px;
left: 6px;
}
.checkbox input[type=checkbox]:checked+label{ font-weight: 600; }
.checkbox input[type=checkbox]:checked+label:before{
opacity: 0;
top: -10px;
}
.checkbox input[type=checkbox]:checked+label:after{
opacity: 1;
top: 6px;
}
@media only screen and (max-width:767px){
.checkbox{ margin: 0 0 20px; }
}