Untitled

.cf-page-readonly input[disabled][type="radio"]::before {
  background: white;
  position: relative;
  content: "\25CB";
  font-size: 30px;
  top: -12.5px;
  left: -2.5px;
}

.cf-page-readonly input[disabled][type="radio"]:checked::before {
  content: "\25C9";
  font-size: 25px;
  top: -6.5px;
  left: 0px;
  z-index: 100;
}

/* prevent overlap/cutoff caused by size of empty circle icon */
.cf-page-readonly input[disabled][type="radio"]:not(:checked) {
  overflow: hidden;
}

/* the circled bullet symbol renders very differently in the browsers
I tested compared to the the saved form, but lf-responsive doesn't seem 
to apply to saved forms so I used this to fix that quirk*/
.lf-responsive .cf-page-readonly input[disabled][type="radio"]:checked:before {
  top: -3.5px !important;
}

.lf-responsive .cf-page-readonly .choice input[disabled] {
  margin-top: 3px !important;
}

.cf-page-readonly input[disabled][type="checkbox"]::before {
  background: white;
  position: relative;
  content: "\2610";
  font-size: 17px;
  top: -6.5px;
  left: -0.5px;
}

.cf-page-readonly input[disabled][type="checkbox"]:checked::before {
  content: "\2611";
}