* {
  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-section-background: (<color>) Controls the background color of the section host.
 * @prop --tct-section-font-color: (<color>) Controls the text color of the section host.
 * @prop --tct-section-border-color?: (<color>) Controls the optional border color of the section host.
 * @prop --tct-section-border-radius: (<length-percentage>) Controls the corner radius of the section host.
 * @prop --tct-section-border-style: (<custom-ident>) Controls the border style of the section host.
 * @prop --tct-section-border-width?: (<length>+) Controls the optional border width of the section host.
 * @prop --tct-section-margin: (<length-percentage>+) Controls the outer margin of the section host.
 * @prop --tct-section-print-margin: (<length-percentage>+) Controls the outer margin of the section host in print media.
 * @prop --tct-section-tween: (*) Controls the transition timing for the section's expand/collapse animation.
 * @prop --tct-section-wrapper-padding: (<length-percentage>+) Controls the inner padding of the section wrapper.
 * @prop --tct-section-wrapper-hover-box-shadow?: (*) Controls the optional box shadow applied to the section wrapper on hover.
 * @prop --tct-section-header-padding: (<length-percentage>+) Controls the inner padding of the section header.
 * @prop --tct-section-header-print-padding?: (<length-percentage>+) Controls the optional inner padding of the section header in print media.
 * @prop --tct-section-header-min-height: (<length>) Controls the minimum height of the section header when a header is present.
 * @prop --tct-section-title-margin?: (<length-percentage>+) Controls the optional outer margin of the section title.
 * @prop --tct-section-title-font-size: (<length-percentage>) Controls the font size of the section title.
 * @prop --tct-section-icon-size: (<length>) Controls the size of the section expand/collapse icon.
 * @prop --tct-section-title-font-weight: (<number>) Controls the font weight of the section title.
 * @prop --tct-section-title-text-transform?: (<custom-ident>) Controls the optional text transform of the section title.
 * @prop --tct-section-title-letter-spacing?: (<length>) Controls the optional letter spacing of the section title.
 * @prop --tct-section-content-padding: (<length-percentage>+) Controls the inner padding of the section content area.
 * @prop --tct-section-content-print-padding?: (<length-percentage>+) Controls the optional inner padding of the section content area in print media.
 * @prop --tct-section-btn-hover-background: (<color>) Controls the background color of the section header's collapse/expand button on hover.
 * @prop --tct-section-btn-icon-stroke-primary: (<color>) Controls the primary stroke color of the section header's collapse/expand button icon.
 * @prop --tct-section-btn-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the section header's collapse/expand button icon.
 */
:host {
  display: block;
  background: var(--tct-section-background, var(--tct-section-background-color, var(--t-section-background-color, var(--tct-section-bg, var(--t-section-bg, var(--app-white, #ffffff))))));
  color: var(--tct-section-font-color, var(--t-section-font-color, inherit));
  border-radius: var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));
  margin: var(--tct-section-margin, var(--t-section-margin, var(--app-scale-3x, 15px)));
  border-width: var(--tct-section-border-width, 0);
  border-style: var(--tct-section-border-style, solid);
  border-color: var(--tct-section-border-color, none);
}
@media screen and (max-width: 767px) {
  :host {
    --comp-default-margin: var(--app-scale-3x, 15px) 0;
    margin: var(--tct-section-margin, var(--t-section-margin, var(--comp-default-margin)));
  }
}
@media print {
  :host {
    --comp-default-print-margin: var(--app-scale-3x, 15px) 0;
    margin: var(--tct-section-print-margin, var(--comp-default-print-margin));
  }
}

.wrapper {
  --comp-tween: var(--tct-section-tween, var(--t-section-tween, var(--app-tween-1, 0.2s ease)));
  --comp-default-wrapper-padding: var(--app-scale-1x, 5px) 0;
  border-radius: var(--tct-section-border-radius, var(--t-section-border-radius, var(--app-border-radius-1, 4px)));
  display: block;
  padding: var(--tct-section-wrapper-padding, var(--t-section-wrapper-padding, var(--comp-default-wrapper-padding)));
}
.wrapper:hover {
  box-shadow: var(--tct-section-wrapper-hover-box-shadow, var(--t-section-wrapper-hover-box-shadow, inherit));
}
:host([collapsible]) .wrapper {
  --comp-tween: var(--tct-section-tween, var(--t-section-tween, var(--app-tween-2, 0.4s ease)));
}

header {
  --comp-default-header-padding: 0 var(--app-scale-3x, 15px);
  padding: var(--tct-section-header-padding, var(--t-section-header-padding, var(--comp-default-header-padding)));
  display: flex;
}
@media print {
  header {
    padding: var(--tct-section-header-print-padding, 0);
  }
}
header.has-header {
  min-height: var(--tct-section-header-min-height, var(--t-section-header-min-height, 44px));
}

.header-content {
  flex: 1 1 100%;
  min-width: 0;
  align-self: center;
}
:host([collapsible]) .header-content {
  cursor: pointer;
}

.title {
  margin: var(--tct-section-title-margin, 0);
  font-size: var(--tct-section-title-font-size, var(--const-px-20, 20px));
  font-weight: var(--tct-section-title-font-weight, 600);
  text-transform: var(--tct-section-title-text-transform, none);
  letter-spacing: var(--tct-section-title-letter-spacing, inherit);
}

q2-icon {
  --tct-icon-size: var(--tct-section-icon-size, var(--const-px-18, 18px));
  transition: transform var(--comp-tween);
}
:host(:not([expanded])) q2-icon, :host([expanded=false]) q2-icon {
  transform: rotate(180deg);
}

.content-wrapper {
  height: auto;
}
.content-wrapper.is-closed {
  display: none;
  overflow: hidden;
}
.content-wrapper.is-transitioning {
  overflow: hidden;
}
:host([collapsible]) .content-wrapper {
  transition: height var(--comp-tween);
}

.content {
  --comp-default-content-padding: var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);
  padding: var(--tct-section-content-padding, var(--t-section-content-padding, var(--comp-default-content-padding)));
}
@media print {
  .content {
    padding: var(--tct-section-content-print-padding, 0);
  }
}
.content:focus {
  box-shadow: none;
}
:host([collapsible]) :host(:not([expanded])) .content {
  visibility: hidden;
}

q2-btn {
  --tct-btn-icon-hover-background: var(--tct-section-btn-hover-background, var(--app-gray-l3, #f2f2f2));
  --tct-icon-stroke-primary: var(--tct-section-btn-icon-stroke-primary, var(--app-gray, #747474));
  --tct-icon-stroke-secondary: var(--tct-section-btn-icon-stroke-secondary, var(--app-gray, #747474));
}