@layer components {
  :root {
    --twentyone--datepicker--width: 18em;
    --twentyone--datepicker--background: var(--twentyone--color--white);
    --twentyone--datepicker--border: none;
    --twentyone--datepicker--padding: var(--twentyone--spacing--8) var(--twentyone--spacing--16);
    --twentyone--datepicker--border-radius: var(--twentyone--spacing--8);
    --twentyone--datepicker--gap: var(--twentyone--spacing--12);
    --twentyone--datepicker--box-shadow: var(--twentyone--shadow--medium);
    --twentyone--datepicker--content-gap: var(--twentyone--spacing--12);
    --twentyone--datepicker--names-color: var(--twentyone--color--grey);
    --twentyone--datepicker--navigation-control-button-width: var(--twentyone--spacing--32);
    --twentyone--datepicker--navigation-control-button-icon-font-size: var(--twentyone--element--font-size);
    --twentyone--datepicker--navigation-control-button-icon-color: var(--twentyone--color--primary);
    --twentyone--datepicker--navigation-control-button-background: transparent;
    --twentyone--datepicker--navigation-title-color: var(--twentyone--color--black);
    --twentyone--datepicker--navigation-title-background: transparent;
    --twentyone--datepicker--navigation-title-padding: var(--twentyone--spacing--4) var(--twentyone--spacing--8);
    --twentyone--datepicker--cell-border-radius: var(--twentyone--spacing--8);
    --twentyone--datepicker--cell-background: transparent;
    --twentyone--datepicker--cell-hover-background: var(--twentyone--color--lightgrey);
    --twentyone--datepicker--cell-range-background: rgba(var(--twentyone--color--primary-rgb), .25);
    --twentyone--datepicker--cell-active-background: var(--twentyone--color--primary);
    --twentyone--datepicker--cell-current-background: var(--twentyone--color--lightgrey);
    --twentyone--datepicker--cell-color: var(--twentyone--color--black);
    --twentyone--datepicker--cell-hover-color: var(--twentyone--color--black);
    --twentyone--datepicker--cell-current-color: var(--twentyone--color--black);
    --twentyone--datepicker--cell-range-color: var(--twentyone--color--primary);
    --twentyone--datepicker--cell-active-color: var(--twentyone--color--white);
  }
  .twentyone-form-item.is--date input, .twentyone-form-item.is--time input {
    cursor: pointer;
  }
  .twentyone-form-item:not(.is--initialized) .twentyone-form-item--remaining {
    display: none;
  }
  .twentyone-form-item .twentyone-form-item--remaining {
    position: absolute;
    bottom: var(--twentyone--spacing--8);
    right: var(--twentyone--spacing--8);
    text-align: right;
    font-size: 75%;
    color: var(--twentyone--input--color);
    pointer-events: none;
  }
  .twentyone-form-item.is--date.is--initialized.is--inline input {
    opacity: 0;
    position: absolute;
    z-index: -1;
  }
  .twentyone-form-item .air-datepicker-container {
    position: absolute;
  }
  div.air-datepicker {
    background: var(--twentyone--datepicker--background);
    border: var(--twentyone--datepicker--border);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: var(--twentyone--font-family--system);
    font-size: 1em;
    font-weight: normal;
    gap: var(--twentyone--datepicker--gap);
    justify-content: space-between;
    min-height: var(--twentyone--datepicker--width) !important;
    padding: var(--twentyone--datepicker--padding);
    width: var(--twentyone--datepicker--width) !important;
    z-index: 999999;
    border-radius: var(--twentyone--datepicker--border-radius);
    box-shadow: var(--twentyone--datepicker--box-shadow);
    -webkit-user-select: none;
    user-select: none;
  }
  div.air-datepicker * {
    box-sizing: border-box;
  }
  div.air-datepicker .air-datepicker--content {
    align-items: stretch;
    display: flex;
    flex: 1 1 100%;
    justify-content: stretch;
    padding: 0;
  }
  div.air-datepicker .air-datepicker--content .air-datepicker-body {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--twentyone--datepicker--content-gap);
    justify-content: flex-start;
    width: 100%;
  }
  div.air-datepicker .air-datepicker--content .air-datepicker-body.-hidden- {
    display: none;
  }
  div.air-datepicker .air-datepicker--content .air-datepicker-body .air-datepicker-body--cells {
    flex: 1 1 100%;
    grid-auto-rows: minmax(0, 1fr);
  }
  div.air-datepicker .air-datepicker--content .air-datepicker-body .air-datepicker-body--cells.-days- {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  div.air-datepicker .air-datepicker--content .air-datepicker-body .air-datepicker-body--day-names {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0;
  }
  div.air-datepicker .air-datepicker--content .air-datepicker-body .air-datepicker-body--day-names .air-datepicker-body--day-name {
    aspect-ratio: 1;
    color: var(--twentyone--datepicker--names-color);
    font-size: var(--twentyone--input--font-size);
    line-height: 1;
  }
  div.air-datepicker .air-datepicker--navigation {
    align-items: stretch;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    min-height: unset;
    padding: 0;
  }
  div.air-datepicker .air-datepicker--navigation .air-datepicker-nav {
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    width: 100%;
  }
  div.air-datepicker .air-datepicker--navigation .air-datepicker-nav .air-datepicker-nav--action {
    aspect-ratio: 1/1;
    background: var(--twentyone--datepicker--navigation-control-button-background);
    fill: var(--twentyone--datepicker--navigation-control-button-icon-color);
    flex: 0 0 var(--twentyone--datepicker--navigation-control-button-width);
    width: var(--twentyone--datepicker--navigation-control-button-width);
    border-radius: var(--twentyone--datepicker--cell-border-radius);
    transition: var(--twentyone--element--transition);
  }
  div.air-datepicker .air-datepicker--navigation .air-datepicker-nav .air-datepicker-nav--action svg {
    aspect-ratio: 1;
    fill: inherit;
    font-size: var(--twentyone--datepicker--navigation-control-button-icon-font-size);
    height: 1em;
    width: 1em;
    transition: var(--twentyone--element--transition);
  }
  div.air-datepicker .air-datepicker--navigation .air-datepicker-nav .air-datepicker-nav--action svg path {
    fill: unset;
    stroke: unset;
    stroke-width: unset;
  }
  div.air-datepicker .air-datepicker--navigation .air-datepicker-nav .air-datepicker-nav--action:hover {
    background: var(--twentyone--datepicker--cell-hover-background);
    fill: var(--twentyone--datepicker--cell-hover-color);
  }
  div.air-datepicker .air-datepicker--navigation .air-datepicker-nav .air-datepicker-nav--title {
    background: var(--twentyone--datepicker--navigation-title-background);
    color: var(--twentyone--datepicker--navigation-title-color);
    font-size: var(--twentyone--label--font-size);
    font-weight: bold;
    padding: var(--twentyone--datepicker--navigation-title-padding);
    border-radius: var(--twentyone--datepicker--cell-border-radius);
    transition: var(--twentyone--element--transition);
  }
  div.air-datepicker .air-datepicker--navigation .air-datepicker-nav .air-datepicker-nav--title.-disabled- {
    opacity: var(--twentyone--element--disabled-opacity);
    pointer-events: none;
  }
  div.air-datepicker .air-datepicker--navigation .air-datepicker-nav .air-datepicker-nav--title:hover {
    background: var(--twentyone--datepicker--cell-hover-background);
    color: var(--twentyone--datepicker--cell-hover-color);
  }
  div.air-datepicker .air-datepicker-button {
    background: var(--twentyone--datepicker--cell-background);
    color: var(--twentyone--datepicker--cell-color);
    font-family: inherit;
    border-radius: var(--twentyone--datepicker--cell-border-radius);
  }
  div.air-datepicker .air-datepicker-button:hover {
    background: var(--twentyone--datepicker--cell-hover-background);
    color: var(--twentyone--datepicker--cell-hover-color);
  }
  div.air-datepicker .air-datepicker-cell {
    background-color: var(--twentyone--datepicker--cell-background);
    border: none;
    color: var(--twentyone--datepicker--cell-color);
    font-size: var(--twentyone--input--font-size);
    border-radius: var(--twentyone--datepicker--cell-border-radius);
  }
  div.air-datepicker .air-datepicker-cell.-current- {
    background-color: var(--twentyone--datepicker--cell-current-background);
    color: var(--twentyone--datepicker--cell-current-color);
  }
  div.air-datepicker .air-datepicker-cell.-current-.-range-from- {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
  }
  div.air-datepicker .air-datepicker-cell.-current-.-range-from-:hover {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
  }
  div.air-datepicker .air-datepicker-cell.-current-.-range-to- {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
  }
  div.air-datepicker .air-datepicker-cell.-current-.-range-to-:hover {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
  }
  div.air-datepicker .air-datepicker-cell.-current-:hover {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
  }
  div.air-datepicker .air-datepicker-cell.-day- {
    aspect-ratio: 1;
    padding: 0;
  }
  div.air-datepicker .air-datepicker-cell.-day-.-other-month-, div.air-datepicker .air-datepicker-cell.-year-.-other-decade- {
    opacity: var(--twentyone--element--disabled-opacity);
  }
  div.air-datepicker .air-datepicker-cell.-day-.-other-month-.-focus-, div.air-datepicker .air-datepicker-cell.-year-.-other-decade-.-focus- {
    opacity: 1;
  }
  div.air-datepicker .air-datepicker-cell.-day-.-other-month-.-in-range-, div.air-datepicker .air-datepicker-cell.-year-.-other-decade-.-in-range- {
    background: var(--twentyone--datepicker--cell-range-background) !important;
    color: var(--twentyone--datepicker--cell-range-color) !important;
  }
  div.air-datepicker .air-datepicker-cell.-day-.-other-month-.-range-from-, div.air-datepicker .air-datepicker-cell.-year-.-other-decade-.-range-from- {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
  }
  div.air-datepicker .air-datepicker-cell.-day-.-other-month-.-range-from-, div.air-datepicker .air-datepicker-cell.-day-.-other-month-.-range-to-, div.air-datepicker .air-datepicker-cell.-day-.-other-month-.-in-range-, div.air-datepicker .air-datepicker-cell.-year-.-other-decade-.-range-from-, div.air-datepicker .air-datepicker-cell.-year-.-other-decade-.-range-to-, div.air-datepicker .air-datepicker-cell.-year-.-other-decade-.-in-range- {
    opacity: 1;
  }
  div.air-datepicker .air-datepicker-cell.-day-.-other-month-.-range-to-, div.air-datepicker .air-datepicker-cell.-year-.-other-decade-.-range-to- {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
  }
  div.air-datepicker .air-datepicker-cell.-disabled- {
    cursor: not-allowed;
    opacity: var(--twentyone--element--disabled-opacity);
    pointer-events: none;
  }
  div.air-datepicker .air-datepicker-cell.-focus- {
    background: var(--twentyone--datepicker--cell-hover-background);
  }
  div.air-datepicker .air-datepicker-cell.-in-range- {
    background: var(--twentyone--datepicker--cell-range-background) !important;
    color: var(--twentyone--datepicker--cell-range-color) !important;
    border-radius: 0;
  }
  div.air-datepicker .air-datepicker-cell.-range-from- {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
    border-radius: var(--twentyone--datepicker--cell-border-radius) 0 0 var(--twentyone--datepicker--cell-border-radius);
  }
  div.air-datepicker .air-datepicker-cell.-range-to- {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
    border-radius: 0 var(--twentyone--datepicker--cell-border-radius) var(--twentyone--datepicker--cell-border-radius) 0;
  }
  div.air-datepicker .air-datepicker-cell.-range-to-.-range-from- {
    border-radius: var(--twentyone--datepicker--cell-border-radius);
  }
  div.air-datepicker .air-datepicker-cell.-selected- {
    background: var(--twentyone--datepicker--cell-active-background);
    color: var(--twentyone--datepicker--cell-active-color);
  }
  div.air-datepicker .air-datepicker--buttons,
  div.air-datepicker .air-datepicker--time {
    border: none;
    padding: 0;
  }
  div.air-datepicker .air-datepicker--pointer {
    display: none;
  }
  div.air-datepicker.-inline- {
    box-shadow: none;
    padding: 0;
    width: 100% !important;
    z-index: 2;
  }
  div.air-datepicker.-inline- + .twentyone-label {
    display: none;
  }
  div.air-datepicker-global-container {
    z-index: 999999;
  }
}