:root {
  --spacing-smaller: 3px;
  --spacing-small: 5px;
  --spacing-medium: 7px;
  --spacing-large: 12px;
  --font-size: 12px;
  --font-size-large: 14px;
  --font-size-larger: 16px;
  --line-height: 16px;
  --line-height-larger: 20px;
  --primary-color: var(--app-primary);
  --text-color-dark: #212529;
  --text-color: #585858;
  --text-color-light: #65727e;
  --border-color: #bebebe;
  --border-color-light: #f1f3f5;
  --input-placeholder: #65727e;
  --input-background: #e9e9ed;
  --input-border: #dee2e6;
  --input-border-active: #c1c9d0;
  --input-border-invalid: #e44e4e;
  --input-outline-invalid: rgba(219, 138, 138, 0.5);
  --input-color: #e9e9ed;
  --input-disabled: #f7f7f7;
  --input-min-height: 45px;
  --options-height: 40dvh;
  --option-background: #f3f4f7;
  --border-radius: 5px;
  --icon-size: 12px;
  --icon-space: 30px;
  --checkbox-size: 16px;
  --checkbox-radius: 4px;
  --checkbox-border: #ced4da;
  --checkbox-background: #fff;
  --checkbox-active: #fff;
  --checkbox-thickness: 2px;
}
/* Overrides for MultiSelect */
.multi-select {
  --spacing-smaller: 3px;
  --spacing-small: 5px;
  --spacing-medium: 7px;
  --spacing-large: 12px;
  --font-size: 12px;
  --font-size-large: 14px;
  --font-size-larger: 16px;
  --line-height: 16px;
  --line-height-larger: 20px;
  --primary-color: var(--app-primary);
  --text-color-dark: var(--app-contrast);
  --text-color: var(--app-muted-color);
  --text-color-light: var(--app-muted-color);
  --border-color: var(--app-form-element-border-color);
  --border-color-light: var(--app-muted-border-color);
  --input-placeholder: var(--app-form-element-placeholder-color);
  --input-background: var(--app-form-element-background-color);
  --input-border: var(--app-form-element-border-color);
  --input-border-active: var(--app-primary-focus);
  --input-border-invalid: var(--app-form-element-invalid-border-color);
  --input-outline-invalid: var(--app-form-element-invalid-active-shadow);
  --input-color: var(--app-form-element-color);
  --input-disabled: var(--app-form-element-disabled-background-color);
  --input-min-height: calc(
    1rem * var(--app-line-height) + var(--app-form-element-spacing-vertical) *
      2 + var(--app-border-width) * 2
  );
  --options-height: 40dvh;
  --option-background: var(--badge-neutral-bg);
  --border-radius: var(--app-border-radius);
  --icon-size: 12px;
  --icon-space: 30px;
  --checkbox-size: 16px;
  --checkbox-radius: 4px;
  --checkbox-border: var(--app-form-element-border-color);
  --checkbox-background: var(--app-form-element-background-color);
  --checkbox-active: var(--app-form-element-background-color);
  --checkbox-thickness: 2px;
}

.multi-select
  .multi-select-options
  .multi-select-option
  .multi-select-option-radio,
.multi-select
  .multi-select-options
  .multi-select-all
  .multi-select-option-radio {
  padding: 2px;
}
.multi-select
  .multi-select-options
  .multi-select-option
  .multi-select-option-radio,
.multi-select
  .multi-select-options
  .multi-select-all
  .multi-select-option-radio {
  padding: 2px;
}

.multi-select {
   margin-bottom: var(--app-spacing);
}

.multi-select.disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.multi-select.disabled .multi-select-header,
.multi-select.disabled .multi-select-options {
  pointer-events: none;
}

.multi-select .multi-select-header {
  background: var(--app-form-element-background-color);
}

.multi-select .multi-select-options {
  background: var(--app-form-element-background-color);
}

.multi-select .multi-select-header .multi-select-header-option {
    border: 1px solid var(--app-border);
}

.multi-select .multi-select-header {
    padding-left: 7px;
}