.custom-checkbox {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5rem;
  position: relative;
  margin-bottom: 16px;
  margin-top: 8px;
  width: auto;
  margin-inline-end: 8px;
}
.custom-checkbox input {
  opacity: 0;
  position: absolute;
  top: 0
}
.custom-checkbox input+span {
  height: 1.25rem;
  position: relative;
  left: 0;
  width: 1.25rem
}
.custom-checkbox input+span:before {
  border-radius: .25rem;
  border-width: 1px;
  height: 1.25rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 1.25rem;
  content: "";
  border: 1px solid #888;
}
.custom-checkbox input+span+span {
  padding-inline-start: .5rem;
  text-align: start;
  line-height: normal;
}
.custom-checkbox input:checked+span:after {
  position: absolute;
  top: 50%;
  left: 50%;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  background: url(../images/check.svg);
  width: 10px;
  height: 10px;
  content: "";
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: 150ms;
  transition-timing-function: linear;
  transition-duration: .2s;
}
.custom-checkbox input[partial]+span:after {
  background: url(../images/check-partial.svg);
}
.custom-checkbox.disabled {
  pointer-events:none!important;
  opacity: 0.3!important;
  cursor: default!important;
}