* {
  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-stepper-min-height: (<length>) Controls the minimum height of each step list item.
 * @prop --tct-stepper-list-padding: (<length-percentage>+) Controls the inner padding of the step list.
 * @prop --tct-stepper-step-width: (<length>) Controls the width of each step within the list.
 * @prop --tct-stepper-step-gap: (<length-percentage>) Controls the gap between adjacent steps.
 * @prop --tct-stepper-tween: (*) Controls the transition timing for stepper animations.
 * @prop --tct-stepper-scroll-arrow-color: (<color>) Controls the stroke color of the scroll arrow icons.
 * @prop --tct-stepper-btn-border-radius?: (<length-percentage>) Controls the optional corner radius of the step button.
 * @prop --tct-stepper-btn-focus-visible-box-shadow: (*) Controls the box shadow of the step button when focused via keyboard.
 * @prop --tct-stepper-btn-icon-size: (<length>) Controls the size of the step bullet icon.
 * @prop --tct-stepper-btn-icon-visibility: (<custom-ident>) Controls the visibility of the step bullet icons.
 * @prop --tct-stepper-btn-gap: (<length-percentage>) Controls the gap between the step bullet and the step label.
 * @prop --tct-stepper-btn-label-font-size: (<length-percentage>) Controls the font size of the step bullet text.
 * @prop --tct-stepper-active-font-weight: (<number>) Controls the font weight applied to active step labels.
 * @prop --tct-stepper-bullet-active-background: (<color>) Controls the background color of the active step bullet.
 * @prop --tct-stepper-bullet-active-font-color: (<color>) Controls the text color inside the active step bullet.
 * @prop --tct-stepper-bullet-active-font-weight: (<number>) Controls the font weight inside the active step bullet when selected.
 * @prop --tct-stepper-bullet-active-divider-color: (<color>) Controls the color of the divider line between the active step and adjacent steps.
 * @prop --tct-stepper-bullet-active-box-shadow: (*) Controls the box shadow of the selected step bullet.
 * @prop --tct-stepper-bullet-complete-box-shadow: (*) Controls the box shadow of completed step bullets.
 * @prop --tct-stepper-bullet-error-box-shadow: (*) Controls the box shadow of step bullets in the error state.
 * @prop --tct-stepper-bullet-inactive-background: (<color>) Controls the background color of inactive step bullets.
 * @prop --tct-stepper-bullet-inactive-font-color: (<color>) Controls the text color inside inactive step bullets.
 * @prop --tct-stepper-bullet-disabled-background: (<color>) Controls the background color of disabled step bullets.
 * @prop --tct-stepper-bullet-disabled-font-color: (<color>) Controls the text color inside disabled step bullets.
 * @prop --tct-stepper-bullet-disabled-divider-color: (<color>) Controls the color of the divider line adjacent to disabled steps.
 * @prop --tct-stepper-bullet-disabled-box-shadow?: (*) Controls the optional box shadow of disabled step bullets.
 * @prop --tct-stepper-label-color: (<color>) Controls the text color of step labels.
 * @prop --tct-stepper-label-font-size: (<length-percentage>) Controls the font size of step labels.
 * @prop --tct-stepper-label-font-weight: (<number>) Controls the font weight of step labels.
 * @prop --tct-stepper-label-line-height: (<number> | <length-percentage>) Controls the line height of step labels.
 * @prop --tct-stepper-label-line-count: (<integer>) Controls the maximum number of lines for the step label before clamping.
 * @prop --tct-stepper-description-color: (<color>) Controls the text color of step descriptions.
 * @prop --tct-stepper-description-font-size: (<length-percentage>) Controls the font size of step descriptions.
 * @prop --tct-stepper-description-line-count: (<integer>) Controls the maximum number of lines for the step description before clamping.
 */
:host {
  display: block;
  position: relative;
}

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

ul {
  --comp-bullet-background: var(--tct-stepper-bullet-active-background, var(--tct-stepper-bullet-active-bg, var(--t-stepper-bullet-active-bg, var(--t-primary, #0079c1))));
  --comp-divider-color: var(--tct-stepper-bullet-active-divider-color, var(--comp-bullet-background));
  --comp-bullet-font-color: var(--tct-stepper-bullet-active-font-color, var(--t-stepper-bullet-active-font-color, var(--t-primary-font-color, #ffffff)));
  --comp-bullet-size: var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));
  --comp-bullet-gap: var(--tct-stepper-btn-gap, var(--t-stepper-btn-gap, var(--app-scale-3x, 15px)));
  --comp-bullet-font-size: var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, var(--const-px-16, 16px)));
  --comp-step-width: var(--tct-stepper-step-width, var(--t-stepper-step-width, var(--t-stepper-step-width, 80px)));
  --comp-step-gap: var(--tct-stepper-step-gap, var(--t-stepper-step-gap, 5px));
  --comp-btn-icon-size: var(--tct-stepper-btn-icon-size, var(--t-stepper-btn-icon-size, 24px));
  --comp-btn-label-font-size: var(--tct-stepper-btn-label-font-size, var(--t-stepper-btn-label-font-size, var(--const-px-16, 16px)));
  --comp-btn-icon-visibility: var(--tct-stepper-btn-icon-visibility, visible);
  --comp-tween: var(--tct-stepper-tween, var(--t-stepper-tween, var(--app-tween-1, 0.2s ease)));
  overflow-x: auto;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  padding: var(--tct-stepper-list-padding, var(--t-stepper-list-padding, 2px));
  margin: 0;
  gap: var(--comp-step-gap);
  --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;
}
ul::-webkit-scrollbar {
  width: var(--comp-scrollbar-size);
  height: var(--comp-scrollbar-size);
  margin: 5px;
}
ul::-webkit-scrollbar-thumb {
  background: var(--comp-scrollbar-color);
  border-radius: var(--comp-scrollbar-border-radius);
}
ul::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--comp-scrollbar-border-radius);
}
.has-scroll ul {
  justify-content: unset;
}

li {
  min-height: var(--tct-stepper-min-height, var(--t-stepper-min-height, 50px));
  flex: 0 0 auto;
  position: relative;
  width: var(--comp-step-width);
  text-align: center;
  max-width: 150px;
  min-width: 80px;
}

.step-btn {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: var(--tct-stepper-btn-border-radius, 0);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100% - 4px);
  width: 100%;
  transition: var(--comp-tween);
  padding: 0;
  transition-property: box-shadow;
  outline: none;
  margin-top: 2px;
  --comp-active-color: var(--comp-bullet-background);
  --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);
  --comp-bullet-active-box-shadow: var(--tct-stepper-bullet-active-box-shadow, var(--comp-default-box-shadow));
}
.step-btn.status-complete {
  --comp-active-color: var(--const-stoplight-success, #0e8a00);
  --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);
  --comp-bullet-active-box-shadow: var(--tct-stepper-bullet-complete-box-shadow, var(--comp-default-box-shadow));
  --tct-stoplight-success: var(--comp-active-color);
}
.step-btn.status-error {
  --comp-active-color: var(--const-stoplight-alert, #d20a0a);
  --comp-default-box-shadow: 0 0 0 2px var(--t-base, #ffffff), 0 0 0 4px var(--comp-active-color);
  --comp-bullet-active-box-shadow: var(--tct-stepper-bullet-error-box-shadow, var(--comp-default-box-shadow));
  --tct-stoplight-warning: var(--comp-active-color);
}
.step-btn:focus-visible {
  box-shadow: var(--tct-stepper-btn-focus-visible-box-shadow, var(--const-double-focus-ring));
}
.step-btn.pane-disabled {
  cursor: not-allowed;
}
.step-btn[aria-disabled=true], .step-btn.pane-disabled {
  cursor: not-allowed;
}
.step-btn[aria-disabled=true]:not(.pane-disabled), .step-btn[aria-disabled=true]:not(.pane-disabled) + .step-divider, .step-btn.pane-disabled:not(.pane-disabled), .step-btn.pane-disabled:not(.pane-disabled) + .step-divider {
  --comp-bullet-font-color: var(--tct-stepper-bullet-disabled-font-color, var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d))));
  --comp-bullet-background: var(--tct-stepper-bullet-disabled-background, var(--tct-stepper-bullet-inactive-background, var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)))));
  --comp-divider-color: var(--tct-stepper-bullet-disabled-divider-color, var(--comp-bullet-background));
  --comp-bullet-inactive-box-shadow: var(--tct-stepper-bullet-disabled-box-shadow, none);
}

.step-icon,
.step-bubble {
  visibility: var(--comp-btn-icon-visibility);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  margin: var(--comp-bullet-gap) auto;
  color: var(--comp-bullet-font-color);
  width: var(--comp-btn-icon-size);
  height: var(--comp-btn-icon-size);
  min-height: var(--comp-btn-icon-size);
  font-size: var(--comp-bullet-font-size);
  transition: var(--comp-tween);
  transition-property: background, color;
  border-radius: 50%;
  position: relative;
  box-shadow: var(--comp-bullet-inactive-box-shadow);
}
.step-icon q2-icon,
.step-bubble q2-icon {
  --tct-icon-fill: var(--comp-active-color);
}
.step-icon q2-icon:before,
.step-bubble q2-icon:before {
  content: "";
  display: block;
  background: var(--comp-bullet-font-color);
  position: absolute;
  width: 80%;
  height: 80%;
  left: 11%;
  top: 11%;
  border-radius: 50%;
}
.status-complete .step-icon, .status-error .step-icon,
.status-complete .step-bubble,
.status-error .step-bubble {
  background: var(--comp-active-color);
}
[aria-selected=true] .step-icon,
[aria-selected=true] .step-bubble {
  box-shadow: var(--comp-bullet-active-box-shadow);
  font-weight: var(--tct-stepper-bullet-active-font-weight, var(--t-stepper-bullet-active-font-weight, 600));
}

.step-bubble {
  background: var(--comp-bullet-background);
}

.step-divider {
  width: calc(var(--comp-step-width) - var(--comp-step-gap) - var(--comp-bullet-gap) - var(--comp-bullet-size));
  top: calc(var(--comp-bullet-size) / 2 + var(--comp-bullet-gap));
  left: calc(var(--comp-step-width) * -0.5 + var(--comp-step-gap) + var(--comp-bullet-gap));
  border: 0;
  border-top: 1px solid var(--comp-divider-color);
  height: 0;
  position: absolute;
  margin: 0;
  transition: border var(--comp-tween);
}

.step-container {
  position: relative;
}

.step-label {
  color: var(--tct-stepper-label-color, var(--tct-stepper-title-color, var(--t-stepper-title-color, inherit)));
  font-size: var(--tct-stepper-label-font-size, var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, var(--const-px-12, 12px)))));
  line-height: var(--tct-stepper-label-line-height, 1.5em);
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--tct-stepper-label-line-count, 2);
  -webkit-box-orient: vertical;
  font-weight: var(--tct-stepper-label-font-weight, var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600)));
}
[aria-describedby] .step-label {
  -webkit-line-clamp: var(--tct-stepper-label-line-count, 1);
}

.step-description {
  color: var(--tct-stepper-description-color, var(--t-stepper-description-color, inherit));
  font-size: var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, var(--const-px-12, 12px))));
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: var(--tct-stepper-description-line-count, 4);
  -webkit-box-orient: vertical;
  padding-bottom: 0.2em;
}
.step-description .ellipsize {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: var(--comp-step-width);
  display: block;
}

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

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

.gradient-right {
  background-image: linear-gradient(to right, var(--t-base-a0, rgba(255, 255, 255, 0)), var(--t-base-a2, rgba(255, 255, 255, 0.5)) 10%, var(--t-base, #ffffff) 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;
}