.form-checkbox {
  vertical-align: top;
  width: 20px;
  height: 20px;
  margin: 0 3px 0 0;
}
.form-checkbox ~ label {
  cursor: pointer;
  line-height: 20px;
  margin-bottom: 3.5px;
  display: inline-block;
}
.form-checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.form-checkbox:not(checked) ~ label {
  position: relative;
  padding: 0 0 0 40px;
}
.form-checkbox:not(checked) ~ label:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='78' r='10' transform='translate(-1 -67)' stroke='%231A1A1A' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E") 0 0 no-repeat;
}
.form-checkbox:not(checked) ~ label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='%231A1A1A' fill='%23FFF' cx='10' cy='10' r='10'/%3E%3Ccircle fill='%23ED0F00' cx='10' cy='10' r='3.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat;
  opacity: 0;
  transition: all .2s;
}
.form-checkbox:checked ~ label:after {
  opacity: 1;
}
.form-checkbox--square ~ label {
  cursor: pointer;
  line-height: 20px;
  margin-bottom: 10px;
  display: inline-block;
}
.form-checkbox--square:not(checked) {
  position: absolute;
  opacity: 0;
}
.form-checkbox--square:not(checked) ~ label {
  position: relative;
  padding: 0 0 0 56px;
  font-weight: 600;
  line-height: 40px;
  margin-bottom: 0;
}
.form-checkbox--square:not(checked) ~ label:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Crect id='a' width='40' height='40' rx='2'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cuse fill='%23FFF' xlink:href='%23a'/%3E%3Crect stroke='%23000' x='.5' y='.5' width='39' height='39' rx='2'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat;
}
.form-checkbox--square:not(checked) ~ label:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Crect id='a' width='40' height='40' rx='2'/%3E%3C/defs%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg%3E%3Cuse fill='%23FFF' xlink:href='%23a'/%3E%3Crect stroke='%23000' x='.5' y='.5' width='39' height='39' rx='2'/%3E%3C/g%3E%3Cpath d='M33.674 10.214l-.99-.99a.834.834 0 0 0-1.138 0L15.96 25.08l-6.594-6.496a.834.834 0 0 0-1.137 0l-.99.99a.799.799 0 0 0 0 1.138l8.143 8.064a.858.858 0 0 0 1.156 0l17.137-17.425c.13-.167.224-.335.224-.559 0-.224-.093-.41-.224-.578z' fill='%23ED0F00'/%3E%3C/g%3E%3C/svg%3E") 0 0 no-repeat;
  opacity: 0;
  transition: all .2s;
}
.form-checkbox--square:checked ~ label:after {
  opacity: 1;
}