input[type="checkbox"]:not(:checked),[type="checkbox"]:checked {
    visibility: hidden;
    position: absolute;
}
[type="checkbox"]:not(:checked)+label,[type="checkbox"]:checked+label {
    position: relative;
    padding: 2px 0 0 28px;
    cursor: pointer;
    color: $gray-600;
}

[type="checkbox"]:not(:checked)+label:before,[type="checkbox"]:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px; 
    border: 1px solid $gray-500;
    background: $white;
    border-radius: 0;
}
[type="checkbox"]:checked+label:before{
    border-color: $primary;
}
[type="checkbox"]:not(:checked)+label:after,[type="checkbox"]:checked+label:after {
    content: "\2714";
    position: absolute;
    top: 1px;
    left: 0;
    color: $primary;
    transition: all .2s;
    line-height: 20px;
    text-align: center;
    width: 20px;
}
[type="checkbox"]:not(:checked)+label:after {
    opacity: 0;
}
[type="checkbox"]:checked+label:after{
    opacity:1;
}

input[type="radio"]:not(:checked),
[type="radio"]:checked {
    position: absolute;
    left: -9999px
}

[type="radio"]:not(:checked)+label,
[type="radio"]:checked+label {
    position: relative;
    padding: 0 30px;
    cursor: pointer;
}

[type="radio"]:not(:checked)+label:before,
[type="radio"]:checked+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border: 1px solid $gray-600;
    border-radius: 50%;
}

[type="radio"]:not(:checked)+label:after,
[type="radio"]:checked+label:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all .2s;
}
[type="radio"]:checked+label:before {
    border: 1px solid $primary;
}
[type="radio"]:checked+label:after {
    background-color: $primary;
}