Checkbox border is not applied after checkbox is checked

I have a testimonial form where my clients can leave their testimonial and the check boxes below get a black border which I don't know where it's coming from.

NOTE

The black border will become visible once clicking at the checkbox and will only go away after clicking elsewhere in the content. I have tried to manipulate it with the :focus and :active class but none of it worked.

Also, this is a form generated with contact form 7 in WordPress

You can see the form here: https://www.renepfisterer.com/akademie/testimonials

MY CSS for the button

Input.checkbox {
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-appearance: none;
  padding: 6px;
  border-radius: 2px;
  display: inline-block;
  position: relative;
  margin: 0 4px 0 0;
  }

Input.checkbox:hover {
    border: 1px solid #ff9357;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }
Input.checkbox:focus {
    border: 1px solid #ff9357!important;
    background-color:#fff!important;
      border-radius:2px!important;
    }
Input.checkbox:checked {
    border: 1px solid #ff9357;
    font-size: 16px;
    top: 0px;
    color: #ff9357;
  }
Input.checkbox:checked:after {
    content: '\2714';
    font-size: 16px;
    position: absolute;
    color: #ff9357;
    top: -6px;
    left: 2px;
  }
Input.checkbox:checked:active {
   border: 1px solid #ff9357;
   border-radius:2px;
  }

This is the html form code

<div class="thrv_wrapper thrv_text_element tve_empty_dropzone" style="" data-css="tve-u-15e38537436"><p data-css="tve-u-15e3853aca3" style="text-align: center;"><strong></strong></p><div role="form" class="wpcf7" id="wpcf7-f509-o1" lang="en-US" dir="ltr"><strong>
<div class="screen-reader-response" role="alert" aria-live="polite"></div>
<form action="/akademie/testimonials/#wpcf7-f509-o1" method="post" class="wpcf7-form init" enctype="multipart/form-data" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="509">
<input type="hidden" name="_wpcf7_version" value="5.2">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f509-o1">
<input type="hidden" name="_wpcf7_container_post" value="0">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
</div>
<div class="row">
<div class=""><span class="wpcf7-form-control-wrap Vorname"><input type="text" name="Vorname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Vorname*"></span></div>
<div class=""><span class="wpcf7-form-control-wrap Nachname"><input type="text" name="Nachname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Nachname*"></span></div>
<div class=""><span class="wpcf7-form-control-wrap E-Mail"><input type="email" name="E-Mail" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="beispiel@mail.com"></span></div>
<div class=""><span class="wpcf7-form-control-wrap LinkedIn"><input type="url" name="LinkedIn" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-url wpcf7-validates-as-url" aria-invalid="false" placeholder="LinkedIn/Xing"></span></div>
</div>
<div class="row2">
<div class=""><span class="wpcf7-form-control-wrap Testimonial"><textarea name="Testimonial" cols="40" rows="10" maxlength="250" minlength="100" class="wpcf7-form-control wpcf7-textarea textarea" aria-invalid="false" placeholder="Gebe hier dein Testimonial ein und achte darauf, mindestens 100 Zeichen und maximal 250 zeichen zu verwenden."></textarea></span>
  </div>
</div>
<div class="row4">
<div class="">
<p>Bitte lade ein Bild von dir im Quadratischen Format (z.B. 500x500 Pixel), mit maximal 2 MB hoch.</p>
</div>
<div class=""><span class="wpcf7-form-control-wrap testimonial-foto"><input type="file" name="testimonial-foto" size="40" class="wpcf7-form-control wpcf7-file wpcf7-validates-as-required fileupload" accept=".jpg,.png,.jpg2000" aria-required="true" aria-invalid="false"></span><br></div>
</div>
<div class="row3">
<div class=""> <span class="wpcf7-form-control-wrap dsgvo"><span class="wpcf7-form-control wpcf7-acceptance"><span class="wpcf7-list-item"><label><input type="checkbox" name="dsgvo" value="1" aria-invalid="false" class="checkbox"><span class="wpcf7-list-item-label">Ich habe die <a href="https://renepfisterer.com/datenschutzerklaerung" target="_blank"> Datenschutzeinstellungen</a> gelesen und erkläre mich mit der Verarbeitung der Daten einverstanden.</span></label></span></span></span>
  </div>
<div class=""> <span class="wpcf7-form-control-wrap Testimonial-Accept"><span class="wpcf7-form-control wpcf7-acceptance optional"><span class="wpcf7-list-item"><label><input type="checkbox" name="Testimonial-Accept" value="1" aria-invalid="false" class="checkbox"><span class="wpcf7-list-item-label">Ich bin damit einverstanden, dass mein Bild, der Text sowie der LinkedIn/Xing Profillink auf www.renepfisterer.com veröffentlicht werden</span></label></span></span></span>
  </div>
</div>
<div class="row5">
<div class=""><input type="submit" value="Absenden" class="wpcf7-form-control wpcf7-submit formbutton">
  </div>
</div>
<div class="wpcf7-response-output" role="alert" aria-hidden="true"></div></form></strong></div><p></p></div>

Any help would be appreciated. Thanks in advance!