* {
  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-calendar-margin: (<length-percentage>+) Controls the outer margin of the calendar host.
 * @prop --tct-calendar-margin-top: (<length-percentage>) Controls the top margin of the calendar host when --tct-calendar-margin is not set.
 * @prop --tct-calendar-margin-bottom: (<length-percentage>) Controls the bottom margin of the calendar host when --tct-calendar-margin is not set.
 * @prop --tct-calendar-popover-padding: (<length-percentage>+) Controls the inner padding of the calendar popover.
 * @prop --tct-calendar-label-padding: (<length-percentage>+) Controls the inner padding of the calendar input label.
 * @prop --tct-calendar-icon-size: (<length>) Controls the size of the calendar input icon.
 * @prop --tct-calendar-label-font-size: (<length-percentage>) Controls the font size of the calendar input label.
 * @prop --tct-calendar-month-font-size: (<length-percentage>) Controls the font size of the calendar month heading.
 * @prop --tct-calendar-month-font-weight: (<number>) Controls the font weight of the calendar month heading.
 * @prop --tct-calendar-day-heading-font-size?: (<length-percentage>) Controls the optional font size of the calendar day-of-week heading row.
 * @prop --tct-calendar-day-heading-font-weight: (<number>) Controls the font weight of the calendar day-of-week heading row.
 * @prop --tct-calendar-day-integer-font-size?: (<length-percentage>) Controls the optional font size of the day number text inside calendar cells.
 * @prop --tct-calendar-today-decorator-font-size: (<length-percentage>) Controls the font size of the "today" decorator text inside the today cell.
 * @prop --tct-calendar-day-border?: (*) Controls the optional border shorthand of calendar day cells.
 * @prop --tct-calendar-day-border-radius?: (<length-percentage>) Controls the optional corner radius of calendar day cells.
 * @prop --tct-calendar-day-hover-background: (<color>) Controls the background color of valid calendar day cells on hover.
 * @prop --tct-calendar-day-hover-border?: (*) Controls the optional border shorthand of calendar day cells on hover.
 * @prop --tct-calendar-day-hover-border-radius?: (<length-percentage>) Controls the optional corner radius of calendar day cells on hover.
 * @prop --tct-calendar-day-hover-font-color?: (<color>) Controls the optional text color of calendar day cells on hover.
 * @prop --tct-calendar-day-disabled-opacity: (<number>) Controls the opacity of disabled calendar day cells.
 * @prop --tct-calendar-day-selected-background: (<color>) Controls the background color of the selected calendar day cell.
 * @prop --tct-calendar-day-selected-border?: (*) Controls the optional border shorthand of the selected calendar day cell.
 * @prop --tct-calendar-day-selected-border-radius?: (<length-percentage>) Controls the optional corner radius of the selected calendar day cell.
 * @prop --tct-calendar-day-selected-font-color?: (<color>) Controls the optional text color of the selected calendar day cell.
 * @prop --tct-calendar-day-selected-outline-color: (<color>) Controls the outline color of the selected calendar day cell.
 * @prop --tct-calendar-day-focused-outer-ring-color: (<color>) Controls the outer focus ring color of the selected calendar day cell when focused.
 * @prop --tct-calendar-day-focus-visible-inner-ring-color: (<color>) Controls the inner focus ring color of calendar day cells when focused via keyboard.
 * @prop --tct-calendar-day-focus-visible-outer-ring-color: (<color>) Controls the outer focus ring color of calendar day cells when focused via keyboard.
 * @prop --tct-calendar-btn-hover-background: (<color>) Controls the background color of the calendar input's icon button on hover.
 * @prop --tct-calendar-btn-icon-stroke-primary: (<color>) Controls the primary stroke color of the calendar input's icon button.
 * @prop --tct-calendar-btn-icon-stroke-secondary: (<color>) Controls the secondary stroke color of the calendar input's icon button.
 * @prop --tct-calendar-disclaimer-padding: (<length-percentage>+) Controls the inner padding of the calendar disclaimer text.
 * @prop --tct-calendar-disclaimer-font-size: (<length-percentage>) Controls the font size of the calendar disclaimer text.
 * @prop --tct-calendar-disclaimer-border-color: (<color>) Controls the border color of the calendar disclaimer section.
 * @prop --tct-calendar-disclaimer-border-width: (<length>+) Controls the border width of the calendar disclaimer section.
 */
:host {
  --comp-default-calendar-margin: var(--tct-calendar-margin-top, var(--t-calendar-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-calendar-margin-bottom, var(--t-calendar-margin-bottom, var(--app-scale-5x, 25px)));
  display: block;
  margin: var(--tct-calendar-margin, var(--comp-default-calendar-margin));
}

:host[hidden] {
  display: none;
}

click-elsewhere {
  position: relative;
  display: block;
}

q2-input {
  margin: 0;
  cursor: pointer;
  letter-spacing: inherit;
  --tct-input-icon-size: var(--tct-calendar-icon-size, var(--const-px-18, 18px));
  --tct-input-btn-hover-background: var(--tct-calendar-btn-hover-background, var(--app-gray-l3, #f2f2f2));
  --tct-input-btn-icon-stroke-primary: var(--tct-calendar-btn-icon-stroke-primary, var(--app-gray, #747474));
  --tct-input-btn-icon-stroke-secondary: var(--tct-calendar-btn-icon-stroke-secondary, var(--app-gray, #747474));
}

q2-popover {
  --comp-min-tappable-size: 44px;
  --comp-table-border-spacing: 2px;
  --comp-min-tappable-size-and-spacing: calc(var(--comp-min-tappable-size) + var(--comp-table-border-spacing));
  --comp-popover-padding: var(--tct-calendar-popover-padding, var(--t-calendar-popover-padding, var(--app-scale-1x, 5px)));
  --comp-min-table-width: calc(var(--comp-min-tappable-size-and-spacing) * 7);
  --comp-table-container-border-spacing: calc(var(--comp-table-border-spacing) * 2);
  --comp-popover-total-padding: calc(var(--comp-popover-padding) * 2);
  --tct-popover-min-width: calc(
      var(--comp-min-table-width) + var(--comp-table-container-border-spacing) + var(--comp-popover-total-padding)
  );
}

.calendar-field-popup {
  padding: var(--comp-popover-padding);
}

.calendar-label {
  --comp-label-padding: var(--tct-calendar-label-padding, var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);
  font-size: var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, var(--const-px-16, 16px)));
  flex: 1 1;
  flex-basis: calc(100% - var(--tct-btn-icon-width, 44px));
  margin: 0;
  padding: var(--comp-label-padding);
}

.cal-month-heading {
  padding: 0 0 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, var(--const-px-16, 16px)));
  font-weight: var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600));
  text-align: center;
}

.cal-month-text {
  min-width: 82px;
  display: inline-block;
}

.cal-year-text {
  min-width: 50px;
  display: inline-block;
}

table {
  width: 100%;
  margin-bottom: 2px;
  text-align: center;
  border-spacing: var(--comp-table-border-spacing);
}

th {
  font-size: var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));
  font-weight: var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));
  width: 14.285714%;
}

td {
  height: var(--comp-min-tappable-size);
  cursor: pointer;
  border: var(--tct-calendar-day-border, var(--t-calendar-day-border, 0));
  border-radius: var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius));
}
td.is-unavailable {
  border: 1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));
}
td.is-valid:hover {
  border: var(--tct-calendar-day-hover-border, var(--t-calendar-day-hover-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));
  border-radius: var(--tct-calendar-day-hover-border-radius, var(--t-calendar-day-hover-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));
  background: var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2)))))));
  color: var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit));
}
td[aria-hidden], td[aria-disabled] {
  pointer-events: none;
  cursor: not-allowed;
}
td[aria-disabled] {
  opacity: var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)));
}
td[aria-selected=true] {
  border: var(--tct-calendar-day-selected-border, var(--t-calendar-day-selected-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));
  border-radius: var(--tct-calendar-day-selected-border-radius, var(--t-calendar-day-selected-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));
  background: var(--tct-calendar-day-selected-background, var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))))));
  color: var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));
  box-shadow: 0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))));
}
td[aria-selected=true]:focus {
  box-shadow: 0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)))), 0 0 0 4px var(--tct-calendar-day-focused-outer-ring-color, var(--const-focus-color, #0066cc));
}
td:focus-visible {
  box-shadow: 0 0 0 2px var(--tct-calendar-day-focus-visible-inner-ring-color, #ffffff), 0 0 0 4px var(--tct-calendar-day-focus-visible-outer-ring-color, var(--const-focus-color, #0066cc));
}

.today-decorator {
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--tct-calendar-today-decorator-font-size, var(--const-px-10, 10px));
  height: 12px;
}

.day-integer {
  font-size: var(--tct-calendar-day-integer-font-size, inherit);
}

.calendar-disclaimer {
  font-size: var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, var(--const-px-12, 12px)))));
  border-style: solid;
  border-width: var(--tct-calendar-disclaimer-border-width, var(--t-calendar-disclaimer-border-width, 1px 0 0 0));
  border-color: var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));
  padding: var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));
  text-align: left;
}