html.crm-standalone {
  --crm-input-border-color: var(--nook-grey-dark);
  /* changed from rem to em in core - not sure why? */
  --crm-big-input: 15rem;
  --crm-huge-input: 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) .crm-af-field {
    height: 2rem;
}

.nook .af-field-type-hidden {
    display: none;
}
.nook#bootstrap-theme af-field.nook-date-only .crm-form-time {
    display: none;
}
.nook#bootstrap-theme af-field.nook-date-range .crm-form-date-wrapper {
    grid-template-columns: 10ch 2ch;
}
.panel-heading af-field .crm-af-field {
    height: auto;
}
.nook-form .nook-field .crm-form-date-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--nook-gap, 1rem);
    align-items: center;
}
.crm-form-date-wrapper {
    --nook-gap: 0.25rem;
}

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

.nook-form .nook-field {
    --nook-icon-color: var(--crm-c-primary);
}

.nook-form .nook-form-buttons,
.nook-form .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 .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;
}