Unable to click checkboxes after styling
<p>I have tried to style some checkboxes but now I can't click on/ activate/ check them. Radio buttons that are mostly styled the same way do work.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
 var $selection = $('.sc-checkbox');

 $selection.each(function() {
  var $this = $(this),
      $id = $this.attr('id');

  $this.after( '&lt;label for="' + $id + '"&gt;&lt;/label&gt;' );
 });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="checkbox"].sc-checkbox {
    -webkit-opacity: 0;
    opacity: 0;
    left: -102%;
    position: absolute
}
input[type="checkbox"].sc-checkbox+label{
  padding: 0 5px 0 10px;
}
input[type="checkbox"].sc-checkbox+label:before {
    content: '';
    display: inline-block;
    background: transparent;
    border: .14286rem solid rgba(0, 0, 0, 0.54);
    width: .92857rem;
    height: .92857rem;
    border-radius: .14286rem;
    font-family: 'Material Icons';
    position: relative;
    vertical-align: middle;
    left: 0;
    line-height: .92857rem;
    -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1)
}

input[type="checkbox"].sc-checkbox:checked+label:before {
    background: #3f51b5;
    border: .14286rem solid #3f51b5;
    content: '\E5CA';
    color: #fff
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"&gt;
&lt;input type="checkbox" class="sc-checkbox" id="test"&gt;&lt;/label&gt;&lt;label for="test"&gt;Test&lt;/label&gt;
&lt;input type="checkbox" class="sc-checkbox" id="test1" checked&gt;&lt;/label&gt;&lt;label for="test1"&gt;Test1&lt;/label&gt;</code></pre>
</div>
</div>
</p>

<p>When you run the example everything works but on my website it doesn't work.
I have fiddled around with positions, paddings and margins on the <code>:before</code> but nothing seems to be working.</p>

<p>I hope someone can help me make the checkboxes work again.</p>

<p>Thanks in advance.</p>