* {
  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-tooltip-background: (<color>) Controls the background color of the tooltip bubble and arrow.
 * @prop --tct-tooltip-color: (<color>) Controls the text color of the tooltip bubble.
 * @prop --tct-tooltip-font-size: (<length-percentage>) Controls the font size of the tooltip bubble text.
 * @prop --tct-tooltip-font-weight: (<number>) Controls the font weight of the tooltip bubble text.
 * @prop --tct-tooltip-padding: (<length-percentage>+) Controls the inner padding of the tooltip bubble.
 * @prop --tct-tooltip-border-radius: (<length-percentage>) Controls the corner radius of the tooltip bubble.
 * @prop --tct-tooltip-arrow-size: (<length>) Controls the size of the tooltip arrow.
 * @prop --tct-tooltip-offset: (<length-percentage>) Controls the positional offset of the tooltip arrow relative to its target.
 * @prop --tct-tooltip-body-offset: (<length-percentage>) Controls the positional offset of the tooltip bubble relative to its arrow.
 * @prop --tct-tooltip-position: (<length-percentage>) Controls the distance the tooltip bubble sits away from its target.
 * @prop --tct-tooltip-max-width: (<length-percentage>) Controls the maximum width of the tooltip bubble in multiline mode.
 * @prop --tct-tooltip-transition-duration: (<time>) Controls the show/hide transition duration of the tooltip.
 * @prop --tct-tooltip-hover-delay: (<time>) Controls the delay before the tooltip appears on hover.
 * @prop --tct-tooltip-transition-delay: (<time>) Controls the show/hide transition delay of the tooltip.
 * @prop --tct-tooltip-transition-visible-duration: (<time>) Controls how long the tooltip remains visible after appearing via focus.
 */
:host {
  display: inline-block;
  line-height: 0;
}

:host([block]) {
  display: block;
}

.tooltip {
  --comp-background: var(--tct-tooltip-background, var(--tct-tooltip-background-color, var(--t-tooltip-background-color, var(--t-top-a3, rgba(13, 13, 13, 0.8509803922)))));
  --comp-offset-default: calc(var(--app-scale-1x, 5px) * -1);
  --comp-offset: var(--tct-tooltip-offset, var(--t-tooltip-offset, var(--comp-offset-default)));
  --comp-position: var(--tct-tooltip-position, var(--t-tooltip-position, var(--app-scale-1x, 5px)));
  --comp-body-offset-default: calc(var(--app-scale-3x, 15px) * -1);
  --comp-body-offset: var(--tct-tooltip-body-offset, var(--t-tooltip-body-offset, var(--comp-body-offset-default)));
  --comp-duration: var(--tct-tooltip-transition-duration, var(--t-tooltip-transition-duration, var(--app-duration-1, 0.2s)));
  --comp-visible-duration: var(--tct-tooltip-transition-visible-duration, var(--t-tooltip-transition-visible-duration, 2s));
  --comp-delay: var(--tct-tooltip-transition-delay, var(--t-tooltip-transition-delay, 0s));
  display: inline-flex;
  line-height: normal;
  position: relative;
}
.tooltip:hover {
  --comp-delay: var(--tct-tooltip-hover-delay, var(--tct-tooltip-transition-delay, 1s));
}
:host([immediate]:not([immediate=false])) .tooltip:hover {
  --comp-delay: 0s;
}
.tooltip:before {
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  color: var(--comp-background);
  pointer-events: none;
  content: "";
  border: var(--tct-tooltip-arrow-size, var(--t-tooltip-arrow-size, var(--app-scale-1x, 5px))) solid transparent;
}
.tooltip:after {
  --comp-padding: var(--app-scale-1x, 5px) 8px;
  position: absolute;
  z-index: 1;
  padding: var(--tct-tooltip-padding, var(--t-tooltip-padding, var(--comp-padding)));
  font-weight: var(--tct-tooltip-font-weight, var(--t-tooltip-font-weight, 600));
  font-size: var(--tct-tooltip-font-size, var(--t-tooltip-font-size, var(--app-font-size-small, var(--const-px-12, 12px))));
  line-height: 1.5;
  color: var(--tct-tooltip-color, var(--t-tooltip-color, var(--app-white, #ffffff)));
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  word-wrap: break-word;
  white-space: pre;
  pointer-events: none;
  content: attr(data-label);
  background: var(--comp-background);
  border-radius: var(--tct-tooltip-border-radius, var(--t-tooltip-border-radius, var(--app-border-radius-1, 4px)));
}
.tooltip:before, .tooltip:after {
  display: inline-block;
  visibility: hidden;
  opacity: 0;
  transition: all var(--comp-duration) ease-in-out var(--comp-delay);
  transition-property: visibility, opacity;
}
:host([block]) .tooltip {
  display: block;
}
:host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:before, :host([persist-on-hover]:not([persist-on-hover=false])) .tooltip:after {
  pointer-events: auto;
}
.tooltip:not(.dismissed):hover:before, .tooltip:not(.dismissed):hover:after, .tooltip:not(.dismissed).has-keyboard-focus:focus-within:before, .tooltip:not(.dismissed).has-keyboard-focus:focus-within:after, :host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):before, :host([persistent]:not([persistent=false])) .tooltip:not(.dismissed):after {
  text-decoration: none;
  visibility: visible;
  opacity: 1;
}
@keyframes tooltippedFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tooltip.has-touch-click:before, .tooltip.has-touch-click:after {
  visibility: visible;
  opacity: 0;
  transition: none;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-name: tooltippedFade, tooltippedFade;
  animation-direction: normal, reverse;
  animation-duration: var(--comp-duration);
  animation-delay: 0ms, calc(var(--comp-visible-duration) + var(--comp-duration));
}
.tooltip.has-touch-click:hover:before, .tooltip.has-touch-click:hover:after {
  animation-name: tooltippedFade;
  animation-direction: normal;
  animation-delay: 0ms;
}
.tooltip.dismissed:before, .tooltip.dismissed:after {
  visibility: hidden;
  opacity: 0;
  animation-name: none;
}
:host([multiline]) .tooltip:after {
  width: max-content;
  max-width: var(--tct-tooltip-max-width, var(--t-tooltip-max-width, 200px));
  word-break: break-word;
  word-wrap: normal;
  white-space: pre-line;
  border-collapse: separate;
  text-align: left;
}
:host([position=s]) :host([multiline]) .tooltip:after, :host([position=n]) :host([multiline]) .tooltip:after {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
:host([position=w]) :host([multiline]) .tooltip:after, :host([position=e]) :host([multiline]) .tooltip:after {
  right: 100%;
}
:host([multiline]) .tooltip:hover:after, :host([multiline]) .tooltip:active:after, :host([multiline]) .tooltip:focus:after {
  display: table-cell;
}
:host([multiline]) .tooltip:focus-within:after {
  display: table-cell;
}
:host([position=s]) .tooltip:after, :host([position=se]) .tooltip:after, :host([position=sw]) .tooltip:after {
  top: 100%;
  right: 50%;
  margin-top: var(--comp-position);
}
:host([position=s]) .tooltip:before, :host([position=se]) .tooltip:before, :host([position=sw]) .tooltip:before {
  top: auto;
  right: 50%;
  bottom: var(--comp-offset);
  margin-right: var(--comp-offset);
  border-bottom-color: var(--comp-background);
}
:host([position=n]) .tooltip:after, :host([position=ne]) .tooltip:after, :host([position=nw]) .tooltip:after {
  right: 50%;
  bottom: 100%;
  margin-bottom: var(--comp-position);
}
:host([position=n]) .tooltip:before, :host([position=ne]) .tooltip:before, :host([position=nw]) .tooltip:before {
  top: var(--comp-offset);
  right: 50%;
  bottom: auto;
  margin-right: var(--comp-offset);
  border-top-color: var(--comp-background);
}
:host([position=se]) .tooltip:after, :host([position=ne]) .tooltip:after {
  right: auto;
  left: 50%;
  margin-left: var(--comp-body-offset);
  margin-right: var(--comp-body-offset);
  transform: translateX(var(--comp-offset-translate, 0));
}
:host([position=sw]) .tooltip:after, :host([position=nw]) .tooltip:after {
  margin-right: var(--comp-body-offset);
  margin-left: var(--comp-body-offset);
  right: 50%;
  transform: translateX(var(--comp-offset-translate, 0));
}
:host([position=s]) .tooltip:after, :host([position=n]) .tooltip:after {
  transform: translateX(calc(50% + var(--comp-offset-translate, 0)));
}
:host([position=w]) .tooltip:after {
  right: 100%;
  bottom: 50%;
  margin-right: var(--comp-position);
  transform: translateY(50%);
}
:host([position=w]) .tooltip:before {
  top: 50%;
  bottom: 50%;
  left: var(--comp-offset);
  margin-top: var(--comp-offset);
  border-left-color: var(--comp-background);
}
:host([position=e]) .tooltip:after {
  bottom: 50%;
  left: 100%;
  margin-left: var(--comp-position);
  transform: translateY(50%);
}
:host([position=e]) .tooltip:before {
  top: 50%;
  right: var(--comp-offset);
  bottom: 50%;
  margin-top: var(--comp-offset);
  border-right-color: var(--comp-background);
}