CSS for checkboxes makes it unclickable

My Css right there makes the checkbox unclickable although I match the label for to the input id.

How should it be done?

I have seen other answers similar to mine, but I have done what they recommended which is the for and id matching

CSS:

input[type="checkbox"],
input[type="radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    float: left;
    margin-right: -2em;
    opacity: 0;
    width: 1em;
    z-index: -1;
}

    input[type="checkbox"] + label,
    input[type="radio"] + label {
        text-decoration: none;
        color: #777;
        cursor: pointer;
        display: inline-block;
        font-size: 1em;
        font-weight: 300;
        padding-left: 2.55em;
        padding-right: 0.75em;
        position: relative;
    }

        input[type="checkbox"] + label:before,
        input[type="radio"] + label:before {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-transform: none !important;
        }

        input[type="checkbox"] + label:before,
        input[type="radio"] + label:before {
            background: #f8f8f8;
            border-radius: 6px;
            border: solid 1px #e5e5e5;
            content: '';
            display: inline-block;
            height: 1.8em;
            left: 0;
            line-height: 1.725em;
            position: absolute;
            text-align: center;
            top: 0;
            width: 1.8em;
        }

    input[type="checkbox"]:checked + label:before,
    input[type="radio"]:checked + label:before {
        background: #ff2b06;
        border-color: #ff2b06;
        color: #ffffff;
        content: '\f00c';
    }

    input[type="checkbox"]:focus + label:before,
    input[type="radio"]:focus + label:before {
        border-color: #ff2b06;
        box-shadow: 0 0 0 1px #ff2b06;
    }

input[type="checkbox"] + label:before {
    border-radius: 6px;
}

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

FORM:

<div class="col-md-12">
  <label for="event_attendee_gender">Gender*</label>
    <div class="col-md-6">
      <input class="gender_radio_group" type="radio" value="male" name="event_attendee[gender]" id="event_attendee_gender_male">
      <label for="event_attendee_male">Male</label>
    </div>
    <div class="col-md-6">
      <input class="gender_radio_group" type="radio" value="female" name="event_attendee[gender]" id="event_attendee_gender_female">
      <label for="event_attendee_female">Female</label>
    </div>
  </div>
 </div>