.input{
        height: 35px;
}

.control{
    input[type="checkbox"], input[type="radio"] {
        opacity: 0;
        position: absolute;   
    }

    input[type="checkbox"], .checkbox, input[type="radio"], .radio {
        display: inline-flex;
        vertical-align: middle;
        margin: 5px 2px;
        cursor: pointer;
    }

    .checkbox, .radio {
        position: relative;
    }

    input[type="checkbox"] + .checkbox:before, input[type="radio"] + .radio:before {
        content: '';
        background: #fff;
        border: 2px solid #ddd;
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        padding-top: 1px;
        margin:0px 5px 2px 0px;
        text-align: center;
    }

    input[type="checkbox"]:checked + .checkbox:before {
        content: "\f00c";
        font-family: 'FontAwesome';
        background: rebeccapurple;
        color: $white;
        font-size: 11px;
        background-color: $primary;
    }

    input[type="radio"] + .radio:before {
        border-radius: 50%;
    }

    input[type="radio"]:checked + .radio:before {
        content: "\f00c";
        font-family: 'FontAwesome';
        color: $white;
        font-size: 11px;
        background-color: $primary;
    }
}