* {
  box-sizing: border-box;
}

*:active {
  outline: none;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
}

:host {
  box-shadow: none !important;
}

::-moz-focus-inner {
  border: none;
}

input,
textarea,
button {
  font-family: inherit;
  font-size: inherit;
  font-stretch: inherit;
}

:host(.sr),
:host(.sr) button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr,
.sr button {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.hidden {
  display: none;
}

:host([hidden]) {
  display: none;
}

.invisible {
  visibility: hidden;
}

@container style(--t-prefers-motion: "reduced") {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
}
@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")) {
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      transition-delay: 0ms !important;
    }
  }
}
.q2-element-dropdown {
  display: none;
  position: absolute;
  background-color: var(--app-white, #ffffff);
  color: var(--t-text, #4d4d4d);
  left: 0;
  width: 100%;
  z-index: 100;
  margin-top: 1px;
  box-shadow: var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14));
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--app-tween-1, 0.2s ease);
  border-radius: var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);
  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 4px)));
  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));
  scrollbar-width: thin;
  scrollbar-color: var(--comp-scrollbar-color) transparent;
}
.q2-element-dropdown::-webkit-scrollbar {
  width: var(--comp-scrollbar-size);
  height: var(--comp-scrollbar-size);
  margin: 5px;
}
.q2-element-dropdown::-webkit-scrollbar-thumb {
  background: var(--comp-scrollbar-color);
  border-radius: var(--comp-scrollbar-border-radius);
}
.q2-element-dropdown::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--comp-scrollbar-border-radius);
}

.q2-element-dropdown.sizable {
  display: block;
  height: auto;
}

.dropdown-open .q2-element-dropdown {
  display: block;
  height: auto;
  overflow: auto;
  opacity: 1;
  visibility: visible;
}

:host([alignment=right]) .q2-element-dropdown {
  left: auto;
  right: 0;
}

:host([block]) q2-btn,
:host([block]) {
  display: block;
}

/**
 * @prop --tct-select-icon-size: (<length>) Controls the size of the select chevron and clear icons.
 * @prop --tct-select-margin: (<length-percentage>+) Controls the outer margin of the select host.
 * @prop --tct-select-margin-top: (<length-percentage>) Controls the top margin of the select host when --tct-select-margin is not set.
 * @prop --tct-select-margin-bottom: (<length-percentage>) Controls the bottom margin of the select host when --tct-select-margin is not set.
 * @prop --tct-select-input-min-height?: (<length-percentage>) Controls the optional minimum height of the select input. Use this to control the height of the select in the empty state, especially when using multiline-options with tall content.
 * @prop --tct-select-input-max-height?: (<length-percentage>) Controls the optional maximum height of the select input. Use this to constrain the height when displaying multiline selected content.
 * @prop --tct-select-multi-select-option-background?: (<color>) Controls the optional background color of multi-select option chips in their default state.
 * @prop --tct-select-multi-select-option-color?: (<color>) Controls the optional text color of multi-select option chips in their default state.
 * @prop --tct-select-multi-select-option-active-background: (<color>) Controls the background color of multi-select option chips when active (checked).
 * @prop --tct-select-multi-select-option-active-color: (<color>) Controls the text color of multi-select option chips when active (checked).
 * @prop --tct-select-multi-select-option-hover-background: (<color>) Controls the background color of multi-select option chips on hover.
 * @prop --tct-select-multi-select-option-hover-color: (<color>) Controls the text color of multi-select option chips on hover.
 * @prop --tct-select-multi-select-option-disabled-opacity: (<number>) Controls the opacity of multi-select option chips when disabled.
 * @prop --tct-select-multi-select-option-padding: (<length-percentage>+) Controls the inner padding of multi-select option chips.
 * @prop --tct-select-multi-select-option-radius: (<length-percentage>) Controls the corner radius of multi-select option chips.
 * @prop --tct-select-multi-select-option-font-size?: (<length-percentage>) Controls the optional font size of multi-select option chip labels.
 */
:host {
  --comp-default-select-margin: var(--tct-select-margin-top, var(--t-select-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-select-margin-bottom, var(--t-select-margin-bottom, var(--app-scale-5x, 25px)));
  display: block;
  margin: var(--tct-select-margin, var(--comp-default-select-margin));
}

.q2-select-container {
  position: relative;
  display: block;
}

.q2-select-input {
  margin: 0;
  letter-spacing: inherit;
  --tct-input-icon-size: var(--tct-select-icon-size, var(--const-px-18, 18px));
  --tct-input-min-height: var(--tct-select-input-min-height, var(--t-select-input-min-height));
  --tct-input-max-height: var(--tct-select-input-max-height, var(--t-select-input-max-height, none));
}

::slotted([slot=_selected-display]) {
  width: 100%;
  min-height: var(--comp-selected-display-height, 44px);
  padding-top: var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px));
  padding-bottom: var(--tct-select-selected-display-padding, var(--app-scale-2x, 10px));
}

.custom-display-content {
  position: absolute;
  bottom: 0;
  left: calc(var(--tct-scale-2, var(--app-scale-2x, 10px)) + 1px);
  height: 44px;
  width: calc(100% - 34px - var(--tct-scale-3, var(--app-scale-3x, 15px)));
  overflow: hidden;
  cursor: pointer;
  transition: left var(--tct-tween-2, var(--app-tween-1, 0.2s ease));
}

.custom-display-content:not([hidden]) {
  display: flex;
  align-items: center;
}

.is-searchable.is-focused .custom-display-content,
.is-searchable .custom-display-content:active {
  left: calc(var(--tct-scale-3, var(--app-scale-3x, 15px)) + 1px);
}

.has-error .custom-display-content {
  width: calc(100% - 68px - var(--tct-scale-3, var(--app-scale-3x, 15px)));
}

.popover-content {
  display: flex;
  flex-direction: column-reverse;
}

.popover-bottom-container {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.popover-top-container {
  position: sticky;
  top: 0;
  z-index: 5;
}
.popover-top-container .multi-select-header {
  padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-2, var(--app-scale-2x, 10px));
  background: var(--app-white);
  display: flex;
  gap: var(--app-scale-2x, 10px);
  align-items: center;
}
.popover-top-container .multi-select-header fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  gap: var(--app-scale-2x, 10px);
}
.popover-top-container .multi-select-header legend {
  padding: 0;
  float: left;
}
.popover-top-container .multi-select-header label {
  cursor: pointer;
  padding: var(--tct-select-multi-select-option-padding, var(--t-select-multi-select-option-padding, var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px))));
  font-size: var(--tct-select-multi-select-option-font-size, var(--t-select-multi-select-option-font-size, var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, inherit))));
  border-radius: var(--tct-select-multi-select-option-radius, var(--t-select-multi-select-option-radius, var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--app-border-radius-1, 4px)))));
  background: var(--tct-select-multi-select-option-background, var(--tct-select-multi-select-option-bg, var(--t-select-multi-select-option-bg, var(--tct-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent))))));
  color: var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))));
}
.popover-top-container .multi-select-header label:hover {
  background: var(--tct-select-multi-select-option-hover-background, var(--tct-select-multi-select-option-hover-background-color, var(--t-select-multi-select-option-hover-background-color, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--app-gray-l3, #f2f2f2))))))));
  color: var(--tct-select-multi-select-option-hover-color, var(--tct-select-multi-select-option-color, var(--t-select-multi-select-option-color, var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--app-gray-d2, #404040))))))));
}
.popover-top-container .multi-select-header input:checked + label, .popover-top-container .multi-select-header input:checked + label:enabled:hover {
  background: var(--tct-select-multi-select-option-active-background, var(--tct-select-multi-select-option-active-background-color, var(--t-select-multi-select-option-active-background-color, var(--tct-btn-primary-bg, var(--t-btn-primary-bg, #2e2e2e)))));
  color: var(--tct-select-multi-select-option-active-color, var(--t-select-multi-select-option-active-color, var(--tct-btn-primary-font-color, var(--t-btn-primary-font-color, var(--app-white, #ffffff)))));
}
.popover-top-container .multi-select-header input:disabled + label {
  opacity: var(--tct-select-multi-select-option-disabled-opacity, var(--t-select-multi-select-option-disabled-opacity, var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--app-disabled-opacity, 0.4)))));
  cursor: not-allowed;
}
.popover-top-container .multi-select-header input:focus-visible + label {
  box-shadow: var(--const-double-focus-ring);
}