.checkbox-content {
    display: block;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.checkbox-content input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.checkbox-content:hover input ~ .checkmark:before {
    color: #DDD;
}
.checkbox-content input:checked ~ .checkmark:before {
    color: #f39c12 /* #e9e500; */
}
.checkmark:before {
    color: #DDD;
}

.checkmark-star:before {
    content: "\f005";
}
.checkmark-handshake:before {
    content: "\f2b5";
}
.checkbox-content input:checked ~ .checkmark:before {
    display: block;
}