@charset "UTF-8";
.app-extra-form input[type="checkbox"],
.app-input-checkbox {
  display: none;
  visibility: hidden;
}
.app-extra-form input[type="checkbox"] + label,
.app-input-checkbox + label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 22px;
  color: var(--color-gray-900);
  margin-right: 0.5rem;
  transition: all 0.2s;
}
.app-extra-form input[type="checkbox"] + label:hover:before,
.app-input-checkbox + label:hover:before {
  border-color: var(--color-gray-400);
}
.app-extra-form input[type="checkbox"] + label:active:before,
.app-input-checkbox + label:active:before {
  border-color: var(--color-primary);
}
.app-extra-form input[type="checkbox"] + label:before,
.app-input-checkbox + label:before {
  display: inline-block;
  cursor: pointer;
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px auto;
  border-radius: 4px;
  border: 1px solid var(--color-gray-300);
  vertical-align: middle;
  background-color: var(--color-grouped-content-background);
  transition: all 0.2s;
}
.app-extra-form input[type="checkbox"]:checked + label,
.app-input-checkbox:checked + label {
  color: var(--color-primary);
}
.app-extra-form input[type="checkbox"]:checked + label:before,
.app-input-checkbox:checked + label:before {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwcHgiIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDIwIDE1Ij4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNy4xNDMsMTQuOTM4IDAsNy43OTYgMi4wMjEsNS43NzYgNy4xNDMsMTAuODk4IDE3Ljk3OSwwLjA2MiAyMCwyLjA4MiAiLz4NCjwvc3ZnPg0K');
}
.app-extra-form input[type="checkbox"]:hover:checked + label:before,
.app-input-checkbox:hover:checked + label:before {
  border-color: var(--color-primary);
}
.app-extra-form input[type="checkbox"]:disabled + label,
.app-input-checkbox:disabled + label {
  cursor: not-allowed;
  opacity: 0.8;
  color: var(--color-gray-600);
}

