Input CSS styles not working with runat server

I'm working on updating checkbox inputs to use the styles from the US Web Design Standards. However, I've ran into an issue when trying to update the checkboxes in pages still within our .NET app that have the runat="server" attribute. Without the runat="server" attribute, the checkboxes render as in http://ift.tt/2z2JmJV. With the runat="server" attribute, only the square outline renders and clicking on it does nothing - it doesn't change the background to blue, nor does it insert the checkmark svg. Any help in understanding what is going on in order to make the styles work with runat="server" will be greatly appreciated.

This is the.NET code

<fieldset class="fieldsGroup standardFieldsGroup termsAndConditions" 
  runat="server" id="termsAndConditions">
  <legend><span class="uppercase small">Terms & Conditions</span></legend>
    <div class="formField fieldTypeCheckbox authorized">
      <input type="checkbox" runat="server" id="idAuthorized" 
       name="authorized" class="authorized gs-input"/>
      <label for="idAuthorized" class="gs-input">I am authorized by this 
       organization to update the information on their Page
      </label>
      <span class="validators">
       <span id="idAuthorizedValidator" class="displayHidden">You must be 
        authorized to update the information on this organization's 
        Page Form</span>
      </span>
    </div>
    <div class="formField fieldTypeCheckbox acceptTerms">
      <input type="checkbox" runat="server" id="idAcceptTerms" 
       name="acceptTerms" class="acceptTerms gs-input" />
      <label for="idAcceptTerms" class="gs-input">I agree to X's <a 
       id="aTermsAndConditions" href="https://x.org/terms-of-
       use" target="_blank" class="black-link underline">Terms and 
       Conditions</a>
      </label>
      <span class="validators">
        <span id="idAcceptTermsValidator" class="displayHidden">You must 
         agree to the X Terms and 
         Conditions
        </span>
      </span>
    </div>
 </fieldset>

The following is the CSS

input.gs-input {
  //webkit-appearance: none;
  //-moz-appearance: none;
  //appearance: none;
  border: 0.1rem solid #5b616b;
  border-radius: 0;
  box-sizing: border-box;
  color: #212121;
  display: block;
  font-size: 1.7rem;
  height: 4.4rem;
  line-height: 1.3;
  margin: 0.2em 0;
  max-width: 46rem;
  padding: 1rem 0.7em;
  width: 100%;
}

label.gs-input {
  position: relative;
  left: 30px;
}

input.gs-input[type="checkbox"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

input.gs-input[type=checkbox] {
  position: absolute;
  left: -999em;
}

.lt-ie9 [type=checkbox], .lt-ie9
[type=radio] {
  border: 0;
  float: left;
  margin: 0.4em 0.4em 0 0;
  position: static;
  width: auto;
}

[type=checkbox] + label.gs-input {
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 0.65em;
}

[type=checkbox] + label.gs-input::before {
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #757575;
  content: '\a0';
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  margin-right: 0.6em;
  text-indent: 0.15em;
  vertical-align: middle;
  width: 2rem;
  position: absolute;
  left: -30px;
}

[type=checkbox]:checked + label.gs-input::before {
  background-color: #0071bc;
  box-shadow: 0 0 0 1px #0071bc;
}

[type=checkbox]:checked + label.gs-input::before {
  background-image: url("../img/correct8.png");
  background-image: url("../img/correct8.svg");
  background-position: 50%;
  background-repeat: no-repeat;
}

[type=checkbox]:disabled + label.gs-input {
  color: #d6d7d9;
}

[type=checkbox]:focus + label.gs-input::before {
  outline: 2px dotted #aeb0b5;
  outline-offset: 3px;
}

[type=checkbox]:disabled + label.gs-input::before {
  background: #f1f1f1;
  box-shadow: 0 0 0 1px #aeb0b5;
  cursor: not-allowed;
}