How to style checkbox in contact-form-7 wordpress

Im styling 3 checkboxes in contact-form-7 this is the code of contact

<div class="form-group checkbox">
  [checkbox participated_2016 default:1 "I Participated at Mercy Ships Cargo Day 2016"]
</div>
<div class="form-group checkbox">
  [checkbox want_to_participate default:1 "I Want to participate to Mercy Ships Cargo Day 2017"]
</div>
<div class="form-group checkbox">
  [checkbox join_mailing default:1 "Join Cargo Day mailing list"]
</div>

and i putted this css to style it

.checkbox .wpcf7-list-item span {
      display: inline-block;
      position: relative;
      padding-left: 15px;
    }
    .checkbox .wpcf7-list-item span::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 3px;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    }
    .checkbox .wpcf7-list-item span::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #0cf !important;
    }
    .checkbox .wpcf7-list-item input[type="checkbox"] {
      opacity: 0;
    }
    .checkbox .wpcf7-list-item input[type="checkbox"]:focus + span::before {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
    .checkbox .wpcf7-list-item input[type="checkbox"]:checked + span::after {
      font-family: 'FontAwesome';
      content: "\f00c";
      color: #0cf;
    }
    .checkbox .wpcf7-list-item input[type="checkbox"]:disabled + span {
      opacity: 0.65;
    }
    .checkbox .wpcf7-list-item input[type="checkbox"]:disabled + span::before {
      background-color: #eeeeee;
      cursor: not-allowed;
    }
    .checkbox.checkbox-circle span::before {
      border-radius: 50%;
    }
    .checkbox.checkbox-inline {
      margin-top: 0;
    }

    .checkbox-primary input[type="checkbox"]:checked + span::before {
      background-color: #428bca;
      border-color: #428bca;
    }
    .checkbox-primary input[type="checkbox"]:checked + span::after {
      color: #fff;
    }
    .checkbox .wpcf7-list-item input:focus, .checkbox input:active:focus, .checkbox input.active:focus {
      outline: none;
      box-shadow: none;
    }

but when i do this styling whatever checkbox i click on, all three are selected and deselected in same time. Does anyone know why?