html.crm-standalone {
  --crm-input-border-color: var(--nook-grey-dark);
  /* changed from rem to em in core - not sure why? */
  --crm-input-width: 15rem;
  --crm-input-large-width: 25rem;
}

textarea:disabled,
input:disabled {
  background-color: var(--nook-grey-light);
}

/* fix at a standard height */
af-field:not(.af-field-type-rich-text-editor, .af-field-type-multiple, .af-field-type-text-area, .af-field-type-check-box, .af-field-type-radio) .crm-af-field {
  height: 2rem;
}

.af-field-type-radio .crm-af-field {
  flex-wrap: wrap;
  gap: 0.5rem;
}

#bootstrap-theme .af-field-type-radio .crm-af-field .radio-inline {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin-left: 0;
  /*
  border: 1px solid var(--nook-blue-icons);
  background-color: var(--nook-blue-overlay);
  border-radius: 0.5rem;
  */
}

.nook .af-field-type-hidden {
  display: none;
}


.panel-heading af-field .crm-af-field {
  height: auto;
}

.nook-form .nook-field .crm-form-date-wrapper {
  display: flex;
  flex-direction: row nowrap;
  gap: var(0.25rem, 1rem);
  align-items: center;
}

.nook-form--stretch .nook-field .select2-container {
  width: 100% !important;
}

.nook-form .nook-field {
  --nook-icon-color: var(--nook-grey-darkest);
}

.nook-form .nook-form-buttons,
.nook-form-status-bar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}

.nook-form .nook-form-error {
  color: var(--crm-c-alert);
  margin-top: 5px;
  font-weight: 600;
}

.nook-form-status-bar {
  margin-top: 5px;
  gap: 0.5rem;
}

/* dont render a selection box for single checkbox inputs
 * slightly hacky but allows using a single item multi-select
 * TODO: allow setting up boolean questions?
 */
.crm-container ul.crm-checkbox-list:not(:has(li:nth-child(2))) {
  border: none;
  height: unset;
}

/* align clear buttons */
.crm-af-field:has(.af-field-clear),
.af-field-type-radio .crm-af-field {
  display: flex;
  align-items: center;
}
.crm-af-field .af-field-clear {
  position: relative;
  right: 1.75rem;
  margin: 0!important;
  padding-left: 0.25rem!important;
  --crm-primary-color: none;
  --crm-btn-border: none;
  --nook-icon-color: black;
  --crm-primary-hover-color: none;
}


input[type=radio] {
  outline-color: var(--crm-primary-color);
}

#bootstrap-theme .crm-af-field .form-group {
  margin-bottom: 0;
}

af-field.nook-flex-align-center {
  margin: 1rem 0;
}

.nook-radio-chip-group {
  --crm-btn-radius: 9999px;
  display: flex;
  flex-flow: row wrap;
  gap: 0.5rem 0.75rem;
  line-height: 1;
}

.nook-radio-chip-group input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.nook-radio-chip-group input:checked + .btn {
  --crm-primary-text-color: white;
  --crm-primary-hover-text-color: white;
  --crm-primary-hover-color: var(--nook-blue-darkest);
  --crm-primary-color: var(--nook-blue-dark);
}