//
//ui-check
//
.ui-check [type=checkbox],
.ui-radio [type=radio]{
  position: absolute;
  height: 0;
  min-height: 0;
  visibility: hidden;
  opacity: 0
}
.ui-check,.ui-radio {
  label{
    vertical-align: middle;
    display: inline-block;
    padding: 0 0 0 30px;
    user-select: none;
    position: relative;

    &:before,:after{
      display: inline-block;
      content:"check_box_outline_blank";
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 20px;
      font-family: "Material Icons";
      vertical-align: middle;
      left:0;
      top:0;
    }
  }
}

.ui-check {
  label {
    &:after {
      color: #17A7FB;
      display: none;
      content:"check_box";
    }
    &:before {
      display: inline-block;;
      content:"radio_button_unchecked";
    }
  }
}

.ui-radio{
  label {
    &:after {
      color: #17A7FB;
      display: none;
      content:"radio_button_checked";
    }
    &:before {
      display: inline-block;;
      content:"radio_button_unchecked";
    }
  }
}

.ui-check [type=checkbox]:checked ~ label:before,
.ui-radio [type=radio]:checked ~ label:before {
  display: none;
}
.ui-check [type=checkbox]:checked ~ label:after, .ui-radio [type=radio]:checked ~ label:after {
  display: inline-block;
}
.ui-check [type=checkbox]:disabled + label, .ui-radio [type=radio]:disabled + label {
  color: #7B98A7;
  pointer-events: none;
  cursor: not-allowed;
}