Checkbox unclickable on MS Edge

Question

The following radio button can be selected and deselected in Firefox and Chrome but not in MS Edge or IE11. What should I do to get it working on these browsers as well?

I have tried following a couple of tricks from here but none of it works: https://www.triplet.fi/blog/problem-solved-custom-checkbox-not-working-on-edge/

<div class="ig-btn">
            <div class="text-center click-to">Click to <br>
              <span class="join">JOIN</span>
            </div>
            <div style="position: absolute;">
              <div class="checkbox text-center">
                <label for="user_remember_me" class="i-checks">
              <input id="user_remember_me" name="sign_up_private[]" type="checkbox" value="<?php echo bp_get_group_id(false)?>">
              <input name="user[remember_me]" type="hidden" value="0"><i></i>


            </label>
              </div>
            </div>
          </div>

CSS for classes:

.ig-btn, .ig-img, .ig-para {
  float: left;
}

.ig-btn {
  background-color: #ccc;
  width: 113px;
  height: 240px;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: #e59629;  
}
.join {
  font-size: 30px;
  margin-top: -10px;
  display: block;
}

.ig-btn .radio, .ig-btn .checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  top: 0;
  left: 37px;
}
.ig-btn .radio label, .ig-btn .checkbox label {
  min-height: 20px;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}
.ig-btn .i-checks input {
  position: absolute;
  margin-left: -20px;
  opacity: 0;
}
.ig-btn .checkbox input[type="checkbox"] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: -20px;
}
.ig-btn .i-checks input {
  position: absolute;
  margin-left: -20px;
  opacity: 0;
}
.ig-btn input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}
.ig-btn .i-checks input:checked+i {
  border-color: #e59629;
}
.ig-btn .i-checks>i {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  margin-right: 4px;
  margin-left: -20px;
  line-height: 1;
  vertical-align: middle;
  background-color: #fff;
  border: 3px solid #e59629;
  border-radius: 20px;
}
.ig-btn .i-checks input:checked+i:before {
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background-color: #e59629;
  border-radius: 20px;
}
.ig-btn .i-checks>i:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: transparent;
  content: "";
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}
.i-checks input:checked+i {
  border-color: #e59629;
}

.i-checks input {
  position: absolute;
  margin-left: -20px;
  opacity: 0;
}
.checkbox input[type="checkbox"] {
  position: absolute;
  margin-top: 4px \9;
  margin-left: -20px;
}
.i-checks input {
  position: absolute;
  margin-left: -20px;
  opacity: 0;
}
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
}
.i-checks input:checked+i {
  border-color: #e59629;
}
.i-checks>i {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: -2px;
  margin-right: 4px;
  margin-left: -20px;
  line-height: 1;
  vertical-align: middle;
  background-color: #fff;
  border: 2px solid #e59629;
  border-radius: 10px;
}
.i-checks input:checked+i::before {
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  background-color: #e59629;
  border-radius: 10px;
}
.i-checks>i::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: transparent;
  content: "";
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}