* {
  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;
    }
  }
}
/**
 * @prop --tct-tab-container-padding: (<length-percentage>+) Controls the inner padding of the tab container list.
 * @prop --tct-tab-container-margin?: (<length-percentage>+) Controls the optional outer margin of the tab container list.
 * @prop --tct-tab-container-border-width: (<length>+) Controls the bottom border width of the tab container list.
 * @prop --tct-tab-container-border-style: (<custom-ident>) Controls the bottom border style of the tab container list.
 * @prop --tct-tab-container-border-color: (<color>) Controls the bottom border color of the tab container list.
 * @prop --tct-tab-container-content-padding: (<length-percentage>+) Controls the inner padding of the tab content area.
 * @prop --tct-tab-container-content-background?: (<color>) Controls the optional background color of the tab content area.
 * @prop --tct-tab-content-padding: (<length-percentage>+) Controls the inner padding of the tab content area when --tct-tab-container-content-padding is not set.
 * @prop --tct-tab-focus-visible-box-shadow: (*) Controls the box shadow of a tab button when focused via keyboard.
 * @prop --tct-tab-gap: (<length-percentage>) Controls the gap between adjacent tab buttons.
 * @prop --tct-tab-width: (<length-percentage>) Controls the width of inactive tab buttons.
 * @prop --tct-tab-padding: (<length-percentage>+) Controls the inner padding of tab buttons.
 * @prop --tct-tab-text-align: (<custom-ident>) Controls the text alignment within tab buttons.
 * @prop --tct-tab-text-decoration?: (<custom-ident>) Controls the optional text decoration of inactive tab buttons.
 * @prop --tct-tab-font-size: (<length-percentage>) Controls the font size of tab button text.
 * @prop --tct-tab-line-height: (<number> | <length-percentage>) Controls the line height of tab button text.
 * @prop --tct-tab-border-radius?: (<length-percentage>) Controls the optional corner radius of tab buttons.
 * @prop --tct-tab-inactive-color?: (<color>) Controls the optional text color of inactive tab buttons.
 * @prop --tct-tab-inactive-background?: (<color>) Controls the optional background color of inactive tab buttons.
 * @prop --tct-tab-inactive-border-color?: (<color>) Controls the optional border color of inactive tab buttons.
 * @prop --tct-tab-inactive-border-style: (<custom-ident>) Controls the border style of inactive tab buttons.
 * @prop --tct-tab-inactive-border-width: (<length>+) Controls the border width of inactive tab buttons.
 * @prop --tct-tab-hover-color: (<color>) Controls the text color of tab buttons on hover.
 * @prop --tct-tab-hover-background?: (<color>) Controls the optional background color of tab buttons on hover.
 * @prop --tct-tab-hover-width: (<length-percentage>) Controls the width of tab buttons on hover.
 * @prop --tct-tab-active-color: (<color>) Controls the text color of the active tab button.
 * @prop --tct-tab-active-background?: (<color>) Controls the optional background color of the active tab button.
 * @prop --tct-tab-active-border-color: (<color>) Controls the border color of the active tab button.
 * @prop --tct-tab-active-border-style: (<custom-ident>) Controls the border style of the active tab button.
 * @prop --tct-tab-active-text-decoration?: (<custom-ident>) Controls the optional text decoration of the active tab button.
 * @prop --tct-tab-active-width: (<length-percentage>) Controls the width of the active tab button.
 * @prop --tct-tab-alt-active-color?: (<color>) Controls the optional text color of the active tab button when color="alt".
 * @prop --tct-tab-alt-inactive-color?: (<color>) Controls the optional text color of inactive tab buttons when color="alt".
 * @prop --tct-tab-section-padding: (<length-percentage>+) Controls the inner padding of tab buttons when type="section".
 * @prop --tct-tab-section-font-size: (<length-percentage>) Controls the font size of tab buttons when type="section".
 * @prop --tct-tab-section-line-height: (<number> | <length-percentage>) Controls the line height of tab buttons when type="section".
 * @prop --tct-tab-container-width: (<length-percentage>) Controls the width of the tab strip when orientation="vertical". Defaults to `200px`.
 * @prop --tct-tab-active-indicator-width: (<length>) Controls the width of the active-tab indicator on the leading edge when orientation="vertical". Defaults to `3px`.
 * @prop --tct-tab-badge-gap?: (<length-percentage>) Controls the optional gap between the label and badge within a tab button when orientation="vertical".
 * @prop --tct-vertical-tab-container-padding?: (<length-percentage>+) Controls the inner padding of the tab container list when orientation="vertical". Defaults to `0`.
 * @prop --tct-vertical-tab-border-radius?: (<length-percentage>) Controls the optional corner radius of tab buttons when orientation="vertical". Defaults to `0`.
 * @prop --tct-vertical-tab-container-content-padding?: (<length-percentage>+) Controls the inner padding of the tab content area when orientation="vertical".
 */
:host {
  display: block;
  position: relative;
}

button {
  cursor: pointer;
  margin: 0;
}

.tab-container {
  position: relative;
}

ul {
  --comp-container-padding: var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;
  padding: var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));
  margin: var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));
  display: flex;
  gap: var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));
  list-style: none;
  border-bottom-width: var(--tct-tab-container-border-width, 1px);
  border-bottom-style: var(--tct-tab-container-border-style, solid);
  border-bottom-color: var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
  overflow-x: auto;
  align-items: center;
  scrollbar-width: none;
  scrollbar-color: transparent;
}
ul::-webkit-scrollbar {
  width: 0;
  height: 0;
}
ul::-webkit-scrollbar-thumb {
  background: transparent;
}
ul::-webkit-scrollbar-track {
  background: transparent;
}
@media print {
  ul.no-print {
    display: none;
  }
}

li {
  flex: 0 0 auto;
}
li button {
  background: var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));
  border-width: var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));
  border-color: var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));
  border-style: var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));
  border-radius: var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));
  width: var(--tct-tab-width, var(--t-tab-width, 100%));
  text-align: var(--tct-tab-text-align, var(--t-tab-text-align, center));
  text-decoration: var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));
  padding: var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));
  color: var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));
  font-size: var(--tct-tab-font-size, var(--t-tab-font-size, var(--const-px-17, 17px)));
  line-height: var(--tct-tab-line-height, var(--const-px-20, 20px));
  display: block;
  transition: background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);
}
:host([type=section]) li button {
  --comp-tab-section-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
  font-size: var(--tct-tab-section-font-size, var(--const-px-14, 14px));
  line-height: var(--tct-tab-section-line-height, var(--const-px-18, 18px));
  padding: var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)));
}
li button:focus-visible {
  box-shadow: var(--tct-tab-focus-visible-box-shadow, var(--const-double-focus-ring));
}
li button:hover {
  color: var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));
  background: var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));
  width: var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%));
}
li button[aria-selected=true] {
  color: var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));
  border-color: var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));
  border-style: var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));
  width: var(--tct-tab-active-width, var(--t-tab-active-width, 100%));
  background: var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)));
  text-decoration: var(--tct-tab-active-text-decoration, none);
}
:host([color=alt]) li button {
  color: var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit));
}
:host([color=alt]) li button:hover, :host([color=alt]) li button[aria-selected=true] {
  color: var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit));
}
@media screen and (max-width: 767px) {
  li button {
    --comp-tab-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));
    font-size: inherit;
    padding: var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)));
  }
}

.tab-content {
  --comp-tab-content-padding: var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;
  padding: var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));
  background: var(--tct-tab-container-content-background, none);
}
.tab-content:focus {
  outline: none;
  box-shadow: none;
}

.gradient-left,
.gradient-right {
  z-index: 1;
  position: absolute;
  top: 0;
  height: 100%;
  width: 44px;
}

.gradient-left {
  background-image: linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);
  left: 0;
}

.gradient-right {
  background-image: linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);
  right: 0;
}

.btn-left,
.btn-right {
  --tct-icon-size: 18px;
  --tct-btn-icon-hover-background: transparent;
  --tct-btn-icon-width: 22px;
  --tct-icon-stroke-primary: var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));
  position: absolute;
  top: calc(50% - 22px);
  z-index: 2;
}
.btn-left q2-icon,
.btn-right q2-icon {
  --tct-icon-stroke-width: 3;
}

.btn-left {
  left: 0;
}

.btn-right {
  right: 0;
}

.tab-pane-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tab-pane-badge q2-badge {
  margin-left: 5px;
  margin-right: 5px;
}

@media screen and (min-width: 768px) {
  :host([orientation=vertical]) {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  :host([orientation=vertical]) .tab-container {
    width: var(--tct-tab-container-width, 200px);
    flex-shrink: 0;
  }
  :host([orientation=vertical]) .tab-content {
    --comp-vertical-tab-content-padding: 0 var(--tct-scale-2, var(--app-scale-2x, 10px));
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--tct-vertical-tab-container-content-padding, var(--tct-vertical-tab-content-padding, var(--t-vertical-tab-content-padding, var(--comp-vertical-tab-content-padding))));
  }
  :host([orientation=vertical]) ul {
    padding: var(--tct-vertical-tab-container-padding, 0);
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: visible;
    border-bottom-width: 0;
    border-right-width: var(--tct-tab-container-border-width, 1px);
    border-right-style: var(--tct-tab-container-border-style, solid);
    border-right-color: var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
    height: 100%;
  }
  :host([orientation=vertical]) li {
    border-left-width: var(--tct-tab-active-indicator-width, 3px);
    border-left-style: solid;
    border-left-color: transparent;
    transition: border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs);
  }
  :host([orientation=vertical]) li:has(button[aria-selected=true]) {
    color: var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));
    border-left-color: var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));
  }
  :host([orientation=vertical]) li button {
    border-width: 0;
    text-align: start;
    border-radius: var(--tct-vertical-tab-border-radius, 0);
  }
  :host([orientation=vertical]) .tab-pane-badge {
    justify-content: flex-start;
    gap: var(--tct-tab-badge-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)));
  }
  :host([orientation=vertical]) .gradient-left {
    right: 0;
    width: 100%;
    height: 44px;
    background-image: linear-gradient(to top, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);
  }
  :host([orientation=vertical]) .gradient-right {
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    height: 44px;
    background-image: linear-gradient(to bottom, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);
  }
  :host([orientation=vertical]) .btn-left {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  :host([orientation=vertical]) .btn-right {
    bottom: 0;
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  :host([orientation=vertical][color=alt]) li:has(button[aria-selected=true]) {
    color: var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit));
  }
}