.datepicker {
  margin-top: var(--core-dimension-600);
}

.datepicker.no-margin {
  margin: 0;
}

.datepicker__input {
  width: 100%;
  border: 0;
  padding: 0;
  background-color: transparent;
  display: flex;
  align-items: flex-start;
  flex: 1 0 0;
  font-size: var(--input-field-text-font-size);
  line-height: var(--input-field-text-line-height);
  font-weight: var(--input-field-text-font-weight);
  color: var(--input-field-color-resting);
  height: var(--input-field-min-height);
}

.datepicker__input:focus-visible {
  outline: 0;
}

.datepicker__input::placeholder {
  color: var(--input-field-placeholder-color-resting);
}

.datepicker__calendar--icon {
  cursor: pointer;
  overflow: visible;
  background: 0 0;
  border: 0;
  outline: 0;
  padding: 0;
  height: var(--semantic-size-icon-m);
  width: var(--semantic-size-icon-m);
  display: inline-block;
}

.datepicker__calendar--icon i {
  font-size: var(--semantic-size-icon-m);
  vertical-align: middle;
}

.datepicker__calendar--icon i::before {
  color: var(--icon-plain-secondary-color-resting);
}

.datepicker__calendar--icon:focus-visible {
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .datepicker__calendar--icon:focus-visible {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.datepicker__input--container {
  display: flex;
  align-items: center;
  border-radius: var(--input-field-border-radius);
  border: var(--input-field-border-width) solid var(--input-field-border-color-resting);
  display: flex;
  height: var(--input-field-min-height);
  padding: var(--input-field-inset-all);
  align-items: center;
  gap: var(--input-field-gap);
  margin-top: var(--semantic-spacing-static-100);
}

.datepicker__input--container:has(.datepicker__input:focus) {
  color: var(--interactive-primary);
  border-color: var(--interactive-primary);
  outline: var(--border-m) solid transparent;
}

.datepicker__label {
  color: var(--label-color-resting);
  font-size: var(--label-item-text-font-size);
  font-weight: var(--label-group-text-font-weight);
  line-height: var(--label-group-text-line-height);
}

.datepicker__hint {
  color: var(--hint-color-resting);
  line-height: var(--hint-text-line-height);
  margin-top: var(--semantic-spacing-static-100);
}

.datepicker__calendar--container {
  display: none;
  user-select: none;
  padding: var(--semantic-spacing-static-600);
  flex-direction: column;
  align-items: flex-end;
  gap: var(--semantic-spacing-static-600);
  position: absolute;
  min-width: 332px;
  border-radius: var(--semantic-spacing-static-200);
  background: var(--semantic-color-on-action-primary-resting);
  box-shadow: var(--semantic-elevation-200-1-x) var(--semantic-elevation-200-1-y) var(--semantic-elevation-200-1-blur) var(--semantic-elevation-200-1-spread) var(--semantic-elevation-200-1-color), var(--semantic-elevation-200-2-x) var(--semantic-elevation-200-2-y) var(--semantic-elevation-200-2-blur) var(--semantic-elevation-200-2-spread) var(--semantic-elevation-200-2-color);
  z-index: var(--z-index-popup);
  margin-top: -24px;
}

.datepicker__calendar--container.active {
  display: inline-flex;
}

.datepicker__calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.datepicker__calendar--year-container:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  text-align: center;
  grid-gap: var(--semantic-spacing-static-100);
}

.datepicker__calendar--month-container:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  text-align: center;
  grid-gap: var(--semantic-spacing-static-100);
}

.datepicker__calendar--month,
.datepicker__calendar--year {
  height: var(--core-dimension-900);
  min-width: var(--core-dimension-900);
  padding: 0px var(--semantic-spacing-static-200);
  align-content: center;
  cursor: pointer;
  border-radius: var(--core-dimension-900);
  font-weight: var(--core-font-weight-200);
}

.datepicker__calendar--month.selected,
.datepicker__calendar--year.selected {
  background: var(--semantic-color-action-primary-resting);
  color: var(--semantic-color-action-primary-inverse-resting);
}

.datepicker__calendar--month.selected:hover,
.datepicker__calendar--year.selected:hover {
  background-color: var(--semantic-color-action-primary-hover);
}

.datepicker__calendar--month.selected:active,
.datepicker__calendar--year.selected:active {
  background-color: var(--semantic-color-action-primary-active);
}

.datepicker__calendar--month:hover,
.datepicker__calendar--year:hover {
  background-color: var(--semantic-color-surface-default-hover);
}

.datepicker__calendar--month:active,
.datepicker__calendar--year:active {
  background-color: var(--semantic-color-surface-default-active);
}

.datepicker__calendar--month:focus-visible,
.datepicker__calendar--year:focus-visible {
  border-radius: var(--core-dimension-900);
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .datepicker__calendar--month:focus-visible,
.theme--inverted .datepicker__calendar--year:focus-visible {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.datepicker__calendar-header--prev,
.datepicker__calendar-header--next {
  cursor: pointer;
  padding: 0;
  vertical-align: middle;
  font-size: var(--icon-functional-m-size);
  line-height: var(--icon-functional-s-size);
}

.datepicker__calendar-header--prev:focus-visible,
.datepicker__calendar-header--next:focus-visible {
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .datepicker__calendar-header--prev:focus-visible,
.theme--inverted .datepicker__calendar-header--next:focus-visible {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.datepicker__calendar-header--prev.disabled,
.datepicker__calendar-header--next.disabled {
  color: var(--semantic-color-action-primary-disabled);
  cursor: not-allowed;
}

.datepicker__calendar-table {
  border-spacing: var(--semantic-spacing-static-100);
  line-height: var(--semantic-text-utility-default-s-line-height);
  user-select: none;
  table-layout: fixed;
  width: 284px;
}

.datepicker__calendar-table--week-days th {
  padding: 0 8px;
  font-weight: 400;
  height: var(--core-dimension-900);
  width: var(--core-dimension-900);
  color: var(--hint-color-resting);
}

.datepicker__calendar-table--dates td[data-date] {
  padding: 0 8px;
  text-align: center;
  font-weight: var(--semantic-text-utility-attention-m-font-weight);
  height: var(--core-dimension-900);
  width: var(--core-dimension-900);
  border-radius: var(--core-dimension-900);
  cursor: pointer;
}

.datepicker__calendar-table--dates td[data-date]:hover {
  background-color: var(--semantic-color-surface-default-hover);
}

.datepicker__calendar-table--dates td[data-date]:active {
  background-color: var(--semantic-color-surface-default-active);
}

.datepicker__calendar-table--dates td[data-date].current {
  border: var(--semantic-border-width-static) var(--semantic-color-border-tertiary-resting) solid;
}

.datepicker__calendar-table--dates td[data-date].current:hover {
  background-color: var(--semantic-color-surface-default-hover);
}

.datepicker__calendar-table--dates td[data-date].current:active {
  background-color: var(--semantic-color-surface-default-active);
}

.datepicker__calendar-table--dates td[data-date].selected {
  background-color: var(--semantic-color-action-primary-resting);
  color: var(--semantic-color-on-action-primary-resting);
}

.datepicker__calendar-table--dates td[data-date].selected:hover {
  background-color: var(--semantic-color-action-primary-hover);
}

.datepicker__calendar-table--dates td[data-date].selected:active {
  background-color: var(--semantic-color-action-primary-active);
}

.datepicker__calendar-table--dates td[data-date].selected.current {
  border: 0;
}

.datepicker__calendar-table--dates td[data-date]:focus-visible {
  border-radius: var(--core-dimension-900);
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .datepicker__calendar-table--dates td[data-date]:focus-visible {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.datepicker__calendar-table--dates td[data-date].disabled {
  color: var(--semantic-color-action-primary-disabled);
  cursor: not-allowed;
}

.datepicker__calendar-table--dates td[data-date].disabled:hover {
  background-color: transparent;
}

.datepicker__calendar-table--dates td[data-date].disabled:active {
  background-color: transparent;
}

.datepicker__calendar-header--month-year-toggle {
  vertical-align: middle;
  margin-left: var(--semantic-spacing-static-100);
}

.datepicker__calendar-header--control {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--indicator-count-min-width, 16px);
}

.datepicker__calendar-header--control.hidden {
  visibility: hidden;
}

.datepicker__calendar-header--month-year {
  text-align: center;
  font-size: var(--semantic-text-headline-m-font-size);
  font-weight: var(--semantic-text-headline-m-font-weight);
  line-height: var(--semantic-text-headline-m-line-height);
  cursor: pointer;
}

.datepicker__calendar-header--month-year:focus-visible {
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .datepicker__calendar-header--month-year:focus-visible {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.datepicker__calendar-footer--cancel,
.datepicker__calendar-footer--ok {
  margin-bottom: 0;
}

.datepicker.has-error .datepicker__input--container {
  border-color: var(--input-field-border-color-critical);
}

.datepicker.has-error .datepicker__hint {
  color: var(--semantic-color-signal-attention-critical);
  margin-top: var(--semantic-spacing-static-100);
}

.datepicker.has-error .datepicker__hint::before {
  content: "\e918";
  font-family: "Allianz Icons";
  color: var(--indicator-surface-critical);
  font-size: var(--semantic-text-body-m-font-size);
  margin-right: var(--semantic-spacing-static-100);
  vertical-align: text-bottom;
}

.datepicker__calendar--footer {
  gap: var(--semantic-spacing-static-400);
  display: flex;
  justify-content: flex-end;
}

.datepicker__calendar-header--month.dimmed,
.datepicker__calendar-header--year.dimmed {
  color: var(--semantic-color-on-information-attention-disabled);
}

.datepicker__chevron {
  pointer-events: none;
  margin-left: var(--semantic-spacing-static-100);
}

.datepicker__chevron .datepicker__chevron--left,
.datepicker__chevron .datepicker__chevron--right {
  vertical-align: middle;
  background-color: var(--accordion-chevron-color-resting);
  display: inline-block;
  height: calc(var(--semantic-border-width-static) * 2);
  width: var(--semantic-spacing-static-200);
  transition: var(--semantic-motion-duration-slow-200) var(--semantic-motion-curve-slow-ease-in-out-001);
  border-radius: 2px;
}

.datepicker__chevron .datepicker__chevron--left {
  transform: rotate(40deg);
}

.datepicker__chevron .datepicker__chevron--right {
  transform: rotate(-40deg);
  margin-left: calc(var(--semantic-spacing-static-200) * -1);
}

.datepicker__chevron.icon--is-rotated .datepicker__chevron--left {
  transform: rotate(-40deg);
}

.datepicker__chevron.icon--is-rotated .datepicker__chevron--right {
  transform: rotate(40deg);
}

.button.datepicker__calendar-footer--cancel, .button.datepicker__calendar-footer--ok {
  width: unset;
  margin-bottom: 0;
}