.radio-wrapper,
.checkbox-wrapper {
  position: relative; 
}
input[type="checkbox"],
input[type="radio"] {
  /*display:  none;*/
  position:  absolute; 
  top:  0px; 
  left: 0px; 
  height:  1.2rem; 
  width:  1.2rem; 
  -webkit-appearance:  none;
}
.radio-label,
.checkbox-label {
  display:  flex; 
  position:  relative;
  font-size:  1rem; 
  font-weight:  400;
  align-items:  center; 
  justify-content:  flex-start; 
}
.radio-label:before, 
.radio-label:after,
.checkbox-label:before, 
.checkbox-label:after {
  pointer-events: none; 
}
.radio-label:before,
.radio-label:after {
  border-radius:  50%; 
}
.radio-label:before,
.checkbox-label:before {
  display:  flex; 
  content: ' ';
  height:  1.2rem; 
  width:  1.2rem; 
  border:  solid 2px #000;
  background:  #fff;
  margin-right:  10px; 
  border-radius: 0.3rem;
}
.radio-label:after,
.checkbox-label:after {
  position:  absolute; 
  top:  7px; 
  left:  7px; 
  display:  flex; 
  content: ' '; 
  height:  12px; 
  width:  12px;  
  background: #000;
  transform: scale(0);
  transition:  transform .3s ease; 
}
.checkbox-label:after {
    height: 0.6rem;
    width: 1rem;
    left: 0.1rem;
    border-bottom: solid 4px #000;
    border-left: solid 4px #000;
    background: none;
    transform: rotate(-45deg) scale(0);
    transition: transform .1s ease, opacity .1s ease;
    transform-origin: center center;
    top: 20%;
}
.radio-wrapper input[type="radio"]:checked + .radio-label:after {
  transform:  scale(1);
}
.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label:after {
  opacity:  1; 
  transform: rotate(-45deg) scale(.8);
}