/* Main Component Styles */
label.checkbox {
  position: relative;
}
label.checkbox .check-icon {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  border: solid 1px #d6dce3;
  background-color: #f0f3f6;
  border-radius: 3px;
  transition: 0.2s all ease-in-out;
}
label.checkbox .check-icon:before {
  content: "";
  position: absolute;
  inset: 0;
  transition: 0.2s all ease-in-out;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='check' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16' style=''%3e%3cpath fill='%23fff' d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z' class=''%3e%3c/path%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 65%;
  background-position: center center;
  transform: scale(1.3);
  opacity: 0;
}
label.checkbox input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
label.checkbox input[type=checkbox]:checked + .check-icon {
  border-color: #3057d5;
  background: #3057d5;
}
label.checkbox input[type=checkbox]:checked + .check-icon:before {
  transform: scale(1);
  opacity: 1;
}
label.checkbox input[type=checkbox]:focus ~ .check-icon {
  box-shadow: 0 0 0 4px rgba(47, 86, 212, 0.1);
}
label.checkbox > div:first-child {
  display: inline-flex;
}
label.checkbox.checkbox-square .check-icon {
  border-radius: 0;
}
label.checkbox.checkbox-circular .check-icon {
  border-radius: 50%;
}
label.checkbox.has-label {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
  align-items: center;
}
label.checkbox.has-label-multiple {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
  align-items: flex-start;
}
label.checkbox.has-label-multiple .check-icon {
  top: 5px;
}