@value ( varAdditional01Extra400 ) from "~@xo-union/tk-ui-colors/lib/variables.css";
@value (var-in-mobile) from "~@xo-union/tk-ui-breakpoints/lib/variables.css";
@value (varFontSize100, varLineHeight100, varFontSize200, varLineHeight200, varFontSize300, varLineHeight300, varFontSize400, varLineHeight400, varFontSize450, varLineHeight450, varFontSize500, varLineHeight500, varFontSize600, varLineHeight600, varFontSize700, varLineHeight700, varFontSize800, varLineHeight800, varFontSize900, varLineHeight900, var-hero-xl-letter-spacing, var-hero-xl-font-weight, var-hero-xl-font-family, var-hero-xl-font-size, var-hero-xl-line-height, var-hero-lg-letter-spacing, var-hero-lg-font-weight, var-hero-lg-font-family, var-hero-lg-font-size, var-hero-lg-line-height, var-hero-md-letter-spacing, var-hero-md-font-weight, var-hero-md-font-family, var-hero-md-font-size, var-hero-md-line-height, var-hero-sm-letter-spacing, var-hero-sm-font-weight, var-hero-sm-font-family, var-hero-sm-font-size, var-hero-sm-line-height, var-h1-font-weight, var-h1-font-family, var-h1-font-size, var-h1-line-height, var-h2-font-weight, var-h2-font-family, var-h2-font-size, var-h2-line-height, var-h3-letter-spacing, var-h3-font-weight, var-h3-font-family, var-h3-font-size, var-h3-line-height, var-h4-letter-spacing, var-h4-font-weight, var-h4-font-family, var-h4-font-size, var-h4-line-height, var-subhead-letter-spacing, var-subhead-font-family, var-subhead-font-size, var-subhead-line-height, var-editorial-letter-spacing, var-editorial-font-family, var-editorial-font-size, var-editorial-line-height, var-body1-letter-spacing, var-body1-font-family, var-body1-font-size, var-body1-line-height, var-body2-letter-spacing, var-body2-font-family, var-body2-font-size, var-body2-line-height, var-buttonL-letter-spacing, var-buttonL-font-weight, var-buttonL-font-family, var-buttonL-font-size, var-buttonL-line-height, var-buttonM-letter-spacing, var-buttonM-font-weight, var-buttonM-font-family, var-buttonM-font-size, var-buttonM-line-height, var-overline-letter-spacing, var-overline-text-transform, var-overline-font-weight, var-overline-font-family, var-overline-font-size, var-overline-line-height, var-caption-lg-letter-spacing, var-caption-lg-font-weight, var-caption-lg-font-family, var-caption-lg-font-size, var-caption-lg-line-height, var-caption-sm-letter-spacing, var-caption-sm-font-weight, var-caption-sm-font-family, var-caption-sm-font-size, var-caption-sm-line-height, var-mobile-hero-xl-font-size, var-mobile-hero-xl-line-height, var-mobile-hero-lg-font-size, var-mobile-hero-lg-line-height, var-mobile-hero-md-font-size, var-mobile-hero-md-line-height, var-mobile-hero-sm-font-size, var-mobile-hero-sm-line-height, var-mobile-h1-font-size, var-mobile-h1-line-height, var-mobile-h2-font-size, var-mobile-h2-line-height, var-mobile-h3-font-size, var-mobile-h3-line-height, var-mobile-h4-font-size, var-mobile-h4-line-height, var-mobile-subhead-font-size, var-mobile-subhead-line-height ) from "~@xo-union/tk-ui-typography/lib/variables.css";
.caption_label.caption_label {
  letter-spacing: var-body1-letter-spacing;
  font-family: var-body1-font-family;
  font-size: var-body1-font-size;
  line-height: var-body1-line-height;
}

.head_cell.head_cell {
  letter-spacing: var-overline-letter-spacing;
  text-transform: var-overline-text-transform;
  font-weight: var-overline-font-weight;
  font-family: var-overline-font-family;
  font-size: var-overline-font-size;
  line-height: var-overline-line-height;
}

@value (
  varTextSubtle,
  varTextDefault,
  varTextDisabled,
  varTextOnDarkDefault,
  varBackgroundDark,
  varBorderDarkDefault,
  varBackgroundLight,
  varLinkOnDarkDisabled
  varAdditional01Extra400
) from "~@xo-union/tk-ui-colors/lib/variables.css";
@value (var-sm) from "~@xo-union/tk-ui-breakpoints/lib/variables.css";
@value varMediaSmLow: max-width: var-sm;
.root {
  margin: 0;
  --rdp-accent-color: var(--tkww-union-essentials-outline-color, varAdditional01Extra400);
  --rdp-background-color: transparent;
  --rdp-accent-color-dark: var(--tkww-union-essentials-outline-color, varAdditional01Extra400);
  --rdp-background-color-dark: var(--tkww-union-essentials-outline-color, varAdditional01Extra400);
  --rdp-outline: 3px solid var(--rdp-accent-color);
  /* Outline border for focused elements */
  --rdp-outline-selected: 3px solid var(--rdp-accent-color);
  /* Outline border for focused _and_ selected elements */
}
@media (varMediaSmLow) {
  .root {
    --rdp-cell-size: auto;
  }
}

.months.months {
  margin: 0;
  padding-left: 20px;
  padding-right: 20px;
}
@media (varMediaSmLow) {
  .months.months {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.months.months::before {
  background-color: var(--tkww-union-datepicker-navigation-background-color, varBackgroundLight);
  content: " ";
  height: 60px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.month.month {
  margin: 0;
  margin-right: 20px;
}
@media (varMediaSmLow) {
  .month.month {
    margin-right: 0;
  }
}

.head {
  position: relative;
}

.caption_label.caption_label {
  align-items: center;
  border: 3px solid transparent;
  color: var(--tkww-union-datepicker-navigation-color, varTextDefault);
  display: inline-flex;
  font-weight: bold;
  margin: 0;
  margin-bottom: 15px;
  margin-left: 0;
  margin-right: 16px;
  margin-top: 21px;
  order: 1;
  padding: 0;
  position: relative;
  white-space: nowrap;
  z-index: 1;
}

.multiple_months .caption_label {
  margin-top: 18px;
}
.multiple_months .nav.nav {
  margin-top: 4px;
}

.nav {
  margin-top: 8px;
}

.button_reset.button_reset:focus {
  outline: none;
}
.button_reset.button_reset:focus-visible {
  outline-color: var(--tkww-union-essentials-outline-color, varAdditional01Extra400);
  outline-offset: var(--tkww-union-essentials-outline-offset, 2px);
  outline-style: solid;
  outline-width: 3px;
}

.nav_button.nav_button {
  background-color: transparent;
  border-radius: 0;
  color: var(--tkww-union-datepicker-navigation-color, varTextDefault);
  height: 2.75rem;
  width: 2.25rem;
}
.nav_button.nav_button:hover {
  background-color: transparent;
  color: var(--tkww-union-datepicker-navigation-color, varTextDefault);
}
.nav_button.nav_button:focus-visible {
  background-color: transparent;
  color: var(--tkww-union-datepicker-navigation-color, varTextDefault);
}

.button.button:focus-visible:not([disabled]) {
  background-color: transparent;
  border: none;
}
.button.button:hover:not([disabled]):not(.day_selected) {
  background-color: transparent;
}

.day_outside.day_outside {
  color: var(--tkww-union-datepicker-day-outside-color, varLinkOnDarkDisabled);
  opacity: 1;
}

.day.day {
  border-radius: var(--tkww-union-datepicker-day-border-radius, 50%);
}
.day.day:not(.day_selected):disabled {
  color: var(--tkww-union-datepicker-day-disabled-color, varTextDisabled);
  opacity: 1;
}
.day.day:not(.day_selected):hover:not([disabled]) {
  border: 1px solid var(--tkww-union-datepicker-day-hover-border-color, varBorderDarkDefault);
}
@media (varMediaSmLow) {
  .day.day {
    height: 38px;
    margin: 1.15px 0;
    width: 38px;
  }
}

.day_selected.day_selected {
  background-color: var(--tkww-union-datepicker-day-selected-background-color, varBackgroundDark);
  color: var(--tkww-union-datepicker-day-selected-color, varTextOnDarkDefault);
}
.day_selected.day_selected:focus-visible:not([disabled]) {
  background-color: var(--tkww-union-datepicker-day-selected-background-color, varBackgroundDark);
  color: var(--tkww-union-datepicker-day-selected-color, varTextOnDarkDefault);
}

@media (varMediaSmLow) {
  .table.table {
    table-layout: fixed;
    width: 100%;
  }
}

.head_cell.head_cell {
  color: var(--tkww-union-datepicker-weekdays-color, varTextSubtle);
  height: 20px;
  padding-bottom: 12px;
}

.day_today.day_today {
  font-weight: normal;
}

.caption {
  justify-content: inherit;
}

.cell {
  padding: 1px 0 0;
}

.row:first-child .cell,
.row:last-child .cell {
  padding: 0 0 1px;
}