/* docara-shell-source: runtime/component/datepicker/css/datepicker.css */
@charset "UTF-8";
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-day{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-day--border-end-end-radius, var(--sf-datepicker-day--border-bottom-right-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-end-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker-day{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-day--border-end-end-radius, var(--sf-datepicker-day--border-bottom-right-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-day:where(:dir(ltr)){
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-day--border-end-end-radius, var(--sf-datepicker-day--border-bottom-right-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-day{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-day--border-end-end-radius, var(--sf-datepicker-day--border-bottom-right-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-end-radius: initial){
  [dir="rtl"] .sf-datepicker-day{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-day--border-end-end-radius, var(--sf-datepicker-day--border-bottom-right-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-day:where(:dir(rtl)){
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-day--border-end-end-radius, var(--sf-datepicker-day--border-bottom-right-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-day{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-day--border-end-start-radius, var(--sf-datepicker-day--border-bottom-left-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-start-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker-day{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-day--border-end-start-radius, var(--sf-datepicker-day--border-bottom-left-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-day:where(:dir(ltr)){
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-day--border-end-start-radius, var(--sf-datepicker-day--border-bottom-left-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-day{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-day--border-end-start-radius, var(--sf-datepicker-day--border-bottom-left-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-start-radius: initial){
  [dir="rtl"] .sf-datepicker-day{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-day--border-end-start-radius, var(--sf-datepicker-day--border-bottom-left-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-day:where(:dir(rtl)){
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-day--border-end-start-radius, var(--sf-datepicker-day--border-bottom-left-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-day{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-day--border-start-end-radius, var(--sf-datepicker-day--border-top-right-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-end-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker-day{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-day--border-start-end-radius, var(--sf-datepicker-day--border-top-right-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-day:where(:dir(ltr)){
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-day--border-start-end-radius, var(--sf-datepicker-day--border-top-right-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-day{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-day--border-start-end-radius, var(--sf-datepicker-day--border-top-right-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-end-radius: initial){
  [dir="rtl"] .sf-datepicker-day{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-day--border-start-end-radius, var(--sf-datepicker-day--border-top-right-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-day:where(:dir(rtl)){
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-day--border-start-end-radius, var(--sf-datepicker-day--border-top-right-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-day{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-day--border-start-start-radius, var(--sf-datepicker-day--border-top-left-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-start-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker-day{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-day--border-start-start-radius, var(--sf-datepicker-day--border-top-left-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-day:where(:dir(ltr)){
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-day--border-start-start-radius, var(--sf-datepicker-day--border-top-left-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-day{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-day--border-start-start-radius, var(--sf-datepicker-day--border-top-left-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-start-radius: initial){
  [dir="rtl"] .sf-datepicker-day{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-day--border-start-start-radius, var(--sf-datepicker-day--border-top-left-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-day:where(:dir(rtl)){
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-day--border-start-start-radius, var(--sf-datepicker-day--border-top-left-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-day{
    padding-right: var(--sf-ui-1\/3--space-y);
    padding-right: var(--sf-datepicker-day--padding-right, var(--sf-ui-1\/3--space-y));
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-datepicker-day{
    padding-right: var(--sf-ui-1\/3--space-y);
    padding-right: var(--sf-datepicker-day--padding-right, var(--sf-ui-1\/3--space-y));
    }
  }
  .sf-datepicker-day:where(:dir(ltr)){
    padding-right: var(--sf-ui-1\/3--space-y);
    padding-right: var(--sf-datepicker-day--padding-right, var(--sf-ui-1\/3--space-y));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-day{
    padding-left: var(--sf-ui-1\/3--space-y);
    padding-left: var(--sf-datepicker-day--padding-right, var(--sf-ui-1\/3--space-y));
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-datepicker-day{
    padding-left: var(--sf-ui-1\/3--space-y);
    padding-left: var(--sf-datepicker-day--padding-right, var(--sf-ui-1\/3--space-y));
    }
  }
  .sf-datepicker-day:where(:dir(rtl)){
    padding-left: var(--sf-ui-1\/3--space-y);
    padding-left: var(--sf-datepicker-day--padding-right, var(--sf-ui-1\/3--space-y));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-day{
    padding-left: var(--sf-ui-1\/3--space-y);
    padding-left: var(--sf-datepicker-day--padding-left, var(--sf-ui-1\/3--space-y));
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-datepicker-day{
    padding-left: var(--sf-ui-1\/3--space-y);
    padding-left: var(--sf-datepicker-day--padding-left, var(--sf-ui-1\/3--space-y));
    }
  }
  .sf-datepicker-day:where(:dir(ltr)){
    padding-left: var(--sf-ui-1\/3--space-y);
    padding-left: var(--sf-datepicker-day--padding-left, var(--sf-ui-1\/3--space-y));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-day{
    padding-right: var(--sf-ui-1\/3--space-y);
    padding-right: var(--sf-datepicker-day--padding-left, var(--sf-ui-1\/3--space-y));
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-datepicker-day{
    padding-right: var(--sf-ui-1\/3--space-y);
    padding-right: var(--sf-datepicker-day--padding-left, var(--sf-ui-1\/3--space-y));
    }
  }
  .sf-datepicker-day:where(:dir(rtl)){
    padding-right: var(--sf-ui-1\/3--space-y);
    padding-right: var(--sf-datepicker-day--padding-left, var(--sf-ui-1\/3--space-y));
  }
  .sf-datepicker-day {
    border-end-end-radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-datepicker-day--border-end-end-radius, var(--sf-datepicker-day--border-bottom-right-radius, var(--sf-radius--ui)));
    border-end-start-radius: var(--sf-radius--ui);
    border-end-start-radius: var(--sf-datepicker-day--border-end-start-radius, var(--sf-datepicker-day--border-bottom-left-radius, var(--sf-radius--ui)));
    border-start-end-radius: var(--sf-radius--ui);
    border-start-end-radius: var(--sf-datepicker-day--border-start-end-radius, var(--sf-datepicker-day--border-top-right-radius, var(--sf-radius--ui)));
    border-start-start-radius: var(--sf-radius--ui);
    border-start-start-radius: var(--sf-datepicker-day--border-start-start-radius, var(--sf-datepicker-day--border-top-left-radius, var(--sf-radius--ui)));
    height: var(--sf-ui-1--control-height);
    block-size: var(--sf-ui-1--control-height);
    height: var(--sf-ui-1--control-height);
    height: var(--sf-datepicker-day--height, var(--sf-ui-1--control-height));
    block-size: var(--sf-datepicker-day--height, var(--sf-ui-1--control-height));
    padding-bottom: var(--sf-ui-1--space-y);
    padding-bottom: var(--sf-datepicker-day--padding-bottom, var(--sf-ui-1--space-y));
    -webkit-padding-end: var(--sf-ui-1\/3--space-y);
            padding-inline-end: var(--sf-ui-1\/3--space-y);
    -webkit-padding-end: var(--sf-datepicker-day--padding-right, var(--sf-ui-1\/3--space-y));
            padding-inline-end: var(--sf-datepicker-day--padding-right, var(--sf-ui-1\/3--space-y));
    -webkit-padding-start: var(--sf-ui-1\/3--space-y);
            padding-inline-start: var(--sf-ui-1\/3--space-y);
    -webkit-padding-start: var(--sf-datepicker-day--padding-left, var(--sf-ui-1\/3--space-y));
            padding-inline-start: var(--sf-datepicker-day--padding-left, var(--sf-ui-1\/3--space-y));
    padding-top: var(--sf-ui-1--space-y);
    padding-top: var(--sf-datepicker-day--padding-top, var(--sf-ui-1--space-y));
    width: 100%;
    inline-size: 100%;
    width: 100%;
    width: var(--sf-datepicker-day--width, 100%);
    inline-size: var(--sf-datepicker-day--width, 100%);
    background-color: var(--sf-datepicker-day--background-color);
    /* A day sits on the panel's own surface (elevation 3); surface-0 drew every
       day as a darker cell on it in the dark theme. */
    --sf-datepicker-day--background-color: var(--sf-transparent);
  }
  .sf-datepicker-day .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-on-surface);
    --sf-datepicker-day-date--font-family: var(--sf-text--family);
    --sf-datepicker-day-date--font-size: var(--sf-text--size);
    --sf-datepicker-day-date--font-weight: var(--sf-font-weight-regular);
    --sf-datepicker-day-date--line-height: var(--sf-text--height);
    color: var(--sf-datepicker-day-date--color);
    font-family: var(--sf-datepicker-day-date--font-family);
    font-size: var(--sf-datepicker-day-date--font-size);
    font-weight: var(--sf-datepicker-day-date--font-weight);
    line-height: var(--sf-datepicker-day-date--line-height);
  }
  .sf-datepicker-day .sf-datepicker-day-info {
    --sf-datepicker-day-info--color: var(--sf-on-surface-variant);
    --sf-datepicker-day-info--font-family: var(--sf-text--family);
    --sf-datepicker-day-info--font-size: var(--sf-text-size-1\/4);
    --sf-datepicker-day-info--font-weight: var(--sf-font-weight-regular);
    --sf-datepicker-day-info--line-height: var(--sf-text-height-1\/4);
    color: var(--sf-datepicker-day-info--color);
    font-family: var(--sf-datepicker-day-info--font-family);
    font-size: var(--sf-datepicker-day-info--font-size);
    font-weight: var(--sf-datepicker-day-info--font-weight);
    line-height: var(--sf-datepicker-day-info--line-height);
  }
  /* A day's number keeps the row's line whether or not it has a caption: the
     caption stands in the height under the number instead of pushing it up
     (owner, 2026-10-14). Centred together, a day with «3» under it lifted its
     number above its neighbours'. */
  .sf-datepicker-day[\:has\(.sf-datepicker-day-info\)] {
    position: relative;
  }
  .sf-datepicker-day:has(.sf-datepicker-day-info) {
    position: relative;
  }
  .sf-datepicker-day .sf-datepicker-day-info {
    position: absolute;
    top: calc(50% + var(--sf-text--height) / 2);
    bottom: 0;
    inset-block: calc(50% + var(--sf-text--height) / 2) 0;
    top: calc(50% + var(--sf-text--height) / 2);
    top: calc(50% + var(--sf-datepicker-day-date--line-height, var(--sf-text--height)) / 2);
    bottom: 0;
    inset-block: calc(50% + var(--sf-datepicker-day-date--line-height, var(--sf-text--height)) / 2) 0;
    left: 0;
    right: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@layer sf.states {
  .sf-datepicker-day:not(:disabled):not(.disabled):hover {
    --sf-datepicker-day--background-color: var(--sf-surface-container-hover);
  }
  .sf-datepicker-day:focus:not(.focus-visible) {
    outline: none;
  }
  .sf-datepicker-day:focus:not(:focus-visible) {
    outline: none;
  }
  .sf-datepicker-day:not(:disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
    position: relative;
    z-index: var(--sf-z-index-1);
  }
  .sf-datepicker-day:not(:disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
    position: relative;
    z-index: var(--sf-z-index-1);
  }
  .sf-datepicker-day:not(:disabled):not(.disabled):active .sf-datepicker-day-date, .sf-datepicker-day.active .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-on-primary);
  }
  .sf-datepicker-day:not(:disabled):not(.disabled):active .sf-datepicker-day-info, .sf-datepicker-day.active .sf-datepicker-day-info {
    --sf-datepicker-day-info--color: var(--sf-on-primary);
  }
  .sf-datepicker-day:not(:disabled):not(.disabled):active, .sf-datepicker-day:not(:disabled):not(.disabled).active {
    --sf-datepicker-day--background-color: var(--sf-primary);
  }
  .sf-datepicker-day:disabled .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-on-disable);
  }
  .sf-datepicker-day.disabled .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-on-disable);
  }
  .sf-datepicker-day:disabled .sf-datepicker-day-info {
    --sf-datepicker-day-info--color: var(--sf-on-disable);
  }
  .sf-datepicker-day.disabled .sf-datepicker-day-info {
    --sf-datepicker-day-info--color: var(--sf-on-disable);
  }
  @media (forced-colors: active) {
    .sf-datepicker-day:not(:disabled).focus-visible {
      outline-color: Highlight;
    }
    .sf-datepicker-day:not(:disabled):focus-visible {
      outline-color: Highlight;
    }
    .sf-datepicker-day:disabled .sf-datepicker-day-date {
      --sf-datepicker-day-date--color: GrayText;
    }
    .sf-datepicker-day.disabled .sf-datepicker-day-date {
      --sf-datepicker-day-date--color: GrayText;
    }
    .sf-datepicker-day:disabled .sf-datepicker-day-info {
      --sf-datepicker-day-info--color: GrayText;
    }
    .sf-datepicker-day.disabled .sf-datepicker-day-info {
      --sf-datepicker-day-info--color: GrayText;
    }
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/center (.justify-center) align-items/center (.items-center) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-text{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-text--border-end-end-radius, var(--sf-datepicker-text--border-bottom-right-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-end-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker-text{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-text--border-end-end-radius, var(--sf-datepicker-text--border-bottom-right-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-text:where(:dir(ltr)){
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-text--border-end-end-radius, var(--sf-datepicker-text--border-bottom-right-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-text{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-text--border-end-end-radius, var(--sf-datepicker-text--border-bottom-right-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-end-radius: initial){
  [dir="rtl"] .sf-datepicker-text{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-text--border-end-end-radius, var(--sf-datepicker-text--border-bottom-right-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-text:where(:dir(rtl)){
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-text--border-end-end-radius, var(--sf-datepicker-text--border-bottom-right-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-text{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-text--border-end-start-radius, var(--sf-datepicker-text--border-bottom-left-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-start-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker-text{
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-text--border-end-start-radius, var(--sf-datepicker-text--border-bottom-left-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-text:where(:dir(ltr)){
    border-bottom-left-radius: var(--sf-radius--ui);
    border-bottom-left-radius: var(--sf-datepicker-text--border-end-start-radius, var(--sf-datepicker-text--border-bottom-left-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-text{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-text--border-end-start-radius, var(--sf-datepicker-text--border-bottom-left-radius, var(--sf-radius--ui)));
  }
  @supports not (border-end-start-radius: initial){
  [dir="rtl"] .sf-datepicker-text{
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-text--border-end-start-radius, var(--sf-datepicker-text--border-bottom-left-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-text:where(:dir(rtl)){
    border-bottom-right-radius: var(--sf-radius--ui);
    border-bottom-right-radius: var(--sf-datepicker-text--border-end-start-radius, var(--sf-datepicker-text--border-bottom-left-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-text{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-text--border-start-end-radius, var(--sf-datepicker-text--border-top-right-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-end-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker-text{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-text--border-start-end-radius, var(--sf-datepicker-text--border-top-right-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-text:where(:dir(ltr)){
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-text--border-start-end-radius, var(--sf-datepicker-text--border-top-right-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-text{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-text--border-start-end-radius, var(--sf-datepicker-text--border-top-right-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-end-radius: initial){
  [dir="rtl"] .sf-datepicker-text{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-text--border-start-end-radius, var(--sf-datepicker-text--border-top-right-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-text:where(:dir(rtl)){
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-text--border-start-end-radius, var(--sf-datepicker-text--border-top-right-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-text{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-text--border-start-start-radius, var(--sf-datepicker-text--border-top-left-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-start-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker-text{
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-text--border-start-start-radius, var(--sf-datepicker-text--border-top-left-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-text:where(:dir(ltr)){
    border-top-left-radius: var(--sf-radius--ui);
    border-top-left-radius: var(--sf-datepicker-text--border-start-start-radius, var(--sf-datepicker-text--border-top-left-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-text{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-text--border-start-start-radius, var(--sf-datepicker-text--border-top-left-radius, var(--sf-radius--ui)));
  }
  @supports not (border-start-start-radius: initial){
  [dir="rtl"] .sf-datepicker-text{
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-text--border-start-start-radius, var(--sf-datepicker-text--border-top-left-radius, var(--sf-radius--ui)));
    }
  }
  .sf-datepicker-text:where(:dir(rtl)){
    border-top-right-radius: var(--sf-radius--ui);
    border-top-right-radius: var(--sf-datepicker-text--border-start-start-radius, var(--sf-datepicker-text--border-top-left-radius, var(--sf-radius--ui)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-text{
    padding-right: var(--sf-space-1\/2);
    padding-right: var(--sf-datepicker-text--padding-right, var(--sf-space-1\/2));
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-datepicker-text{
    padding-right: var(--sf-space-1\/2);
    padding-right: var(--sf-datepicker-text--padding-right, var(--sf-space-1\/2));
    }
  }
  .sf-datepicker-text:where(:dir(ltr)){
    padding-right: var(--sf-space-1\/2);
    padding-right: var(--sf-datepicker-text--padding-right, var(--sf-space-1\/2));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-text{
    padding-left: var(--sf-space-1\/2);
    padding-left: var(--sf-datepicker-text--padding-right, var(--sf-space-1\/2));
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-datepicker-text{
    padding-left: var(--sf-space-1\/2);
    padding-left: var(--sf-datepicker-text--padding-right, var(--sf-space-1\/2));
    }
  }
  .sf-datepicker-text:where(:dir(rtl)){
    padding-left: var(--sf-space-1\/2);
    padding-left: var(--sf-datepicker-text--padding-right, var(--sf-space-1\/2));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker-text{
    padding-left: var(--sf-space-1\/2);
    padding-left: var(--sf-datepicker-text--padding-left, var(--sf-space-1\/2));
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-datepicker-text{
    padding-left: var(--sf-space-1\/2);
    padding-left: var(--sf-datepicker-text--padding-left, var(--sf-space-1\/2));
    }
  }
  .sf-datepicker-text:where(:dir(ltr)){
    padding-left: var(--sf-space-1\/2);
    padding-left: var(--sf-datepicker-text--padding-left, var(--sf-space-1\/2));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker-text{
    padding-right: var(--sf-space-1\/2);
    padding-right: var(--sf-datepicker-text--padding-left, var(--sf-space-1\/2));
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-datepicker-text{
    padding-right: var(--sf-space-1\/2);
    padding-right: var(--sf-datepicker-text--padding-left, var(--sf-space-1\/2));
    }
  }
  .sf-datepicker-text:where(:dir(rtl)){
    padding-right: var(--sf-space-1\/2);
    padding-right: var(--sf-datepicker-text--padding-left, var(--sf-space-1\/2));
  }
  .sf-datepicker-text {
    border-end-end-radius: var(--sf-radius--ui);
    border-end-end-radius: var(--sf-datepicker-text--border-end-end-radius, var(--sf-datepicker-text--border-bottom-right-radius, var(--sf-radius--ui)));
    border-end-start-radius: var(--sf-radius--ui);
    border-end-start-radius: var(--sf-datepicker-text--border-end-start-radius, var(--sf-datepicker-text--border-bottom-left-radius, var(--sf-radius--ui)));
    border-start-end-radius: var(--sf-radius--ui);
    border-start-end-radius: var(--sf-datepicker-text--border-start-end-radius, var(--sf-datepicker-text--border-top-right-radius, var(--sf-radius--ui)));
    border-start-start-radius: var(--sf-radius--ui);
    border-start-start-radius: var(--sf-datepicker-text--border-start-start-radius, var(--sf-datepicker-text--border-top-left-radius, var(--sf-radius--ui)));
    font-family: var(--sf-text--family);
    font-family: var(--sf-datepicker-text--font-family, var(--sf-text--family));
    font-size: var(--sf-text-size-1);
    font-size: var(--sf-datepicker-text--font-size, var(--sf-text-size-1));
    font-weight: var(--sf-font-weight-medium);
    font-weight: var(--sf-datepicker-text--font-weight, var(--sf-font-weight-medium));
    line-height: var(--sf-text-height-1);
    line-height: var(--sf-datepicker-text--line-height, var(--sf-text-height-1));
    padding-bottom: var(--sf-space-1\/3);
    padding-bottom: var(--sf-datepicker-text--padding-bottom, var(--sf-space-1\/3));
    -webkit-padding-end: var(--sf-space-1\/2);
            padding-inline-end: var(--sf-space-1\/2);
    -webkit-padding-end: var(--sf-datepicker-text--padding-right, var(--sf-space-1\/2));
            padding-inline-end: var(--sf-datepicker-text--padding-right, var(--sf-space-1\/2));
    -webkit-padding-start: var(--sf-space-1\/2);
            padding-inline-start: var(--sf-space-1\/2);
    -webkit-padding-start: var(--sf-datepicker-text--padding-left, var(--sf-space-1\/2));
            padding-inline-start: var(--sf-datepicker-text--padding-left, var(--sf-space-1\/2));
    padding-top: var(--sf-space-1\/3);
    padding-top: var(--sf-datepicker-text--padding-top, var(--sf-space-1\/3));
    background-color: var(--sf-datepicker-text--background-color);
    color: var(--sf-datepicker-text--color);
    --sf-datepicker-text--background-color: var(--sf-surface-0);
    --sf-datepicker-text--color: var(--sf-on-surface);
  }
}
@layer sf.states {
  .sf-datepicker-text:not(:disabled):not(.disabled):hover {
    --sf-datepicker-text--background-color: var(--sf-surface-container);
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .sf-datepicker-text:focus:not(.focus-visible) {
    outline: none;
  }
  .sf-datepicker-text:focus:not(:focus-visible) {
    outline: none;
  }
  .sf-datepicker-text:not(:disabled).focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-datepicker-text:not(:disabled):focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-datepicker-text:not(:disabled):not(.disabled):active, .sf-datepicker-text:not(:disabled):not(.disabled).active {
    --sf-datepicker-text--background-color: var(--sf-primary);
    --sf-datepicker-text--color: var(--sf-on-primary);
  }
  .sf-datepicker-text:disabled {
    --sf-datepicker-text--background-color: var(--sf-surface-1);
    --sf-datepicker-text--color: var(--sf-on-disable);
  }
  .sf-datepicker-text.disabled {
    --sf-datepicker-text--background-color: var(--sf-surface-1);
    --sf-datepicker-text--color: var(--sf-on-disable);
  }
  @media (forced-colors: active) {
    .sf-datepicker-text:not(:disabled).focus-visible {
      outline-color: Highlight;
    }
    .sf-datepicker-text:not(:disabled):focus-visible {
      outline-color: Highlight;
    }
    .sf-datepicker-text:disabled {
      --sf-datepicker-text--background-color: Canvas;
      --sf-datepicker-text--color: GrayText;
    }
    .sf-datepicker-text.disabled {
      --sf-datepicker-text--background-color: Canvas;
      --sf-datepicker-text--color: GrayText;
    }
  }
}
@layer sf.overrides {
  .sf-datepicker-day.sf-datepicker-day-start, .sf-datepicker-day.sf-datepicker-day-end {
    --sf-datepicker-day--background-color: var(--sf-primary);
  }
  .sf-datepicker-day.sf-datepicker-day-start:not(.sf-datepicker-day.sf-datepicker-day-end) {
    --sf-datepicker-day--border-end-end-radius: 0;
    --sf-datepicker-day--border-start-end-radius: 0;
  }
  .sf-datepicker-day.sf-datepicker-day-end:not(.sf-datepicker-day.sf-datepicker-day-start) {
    --sf-datepicker-day--border-end-start-radius: 0;
    --sf-datepicker-day--border-start-start-radius: 0;
  }
  /* A day from the next or previous month can be picked, so its number is text
     a person has to read: WCAG 1.4.3 asks 4.5:1. Half opacity over the whole
     cell gave 3.3:1. The muted text role gives about 6.4:1 on a light surface,
     and an elevation class re-points it on a raised one, so the popup keeps it
     in the dark theme too. The opacity hook stays for projects that set it,
     at full by default. */
  .sf-datepicker-day.sf-datepicker-another-month:not(:disabled):not(.active):not(.disabled):not(.sf-datepicker-day-selected) {
    --sf-datepicker-another-month--opacity: 1;
    opacity: var(--sf-datepicker-another-month--opacity);
  }
  /* On the number itself: the number declares its own colour, so a colour
     set on the day never reached it, and the neighbouring month read like
     this one in both themes. A neighbouring weekend keeps its red at the
     ink step 80, still 4.5:1 on the panel in both themes. */
  .sf-datepicker .sf-datepicker-day.sf-datepicker-another-month:not(:disabled):not(.active):not(.disabled):not(.sf-datepicker-day-selected) .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-on-surface-variant);
  }
  .sf-datepicker .sf-datepicker-day.sf-datepicker-another-month.sf-datepicker-day-off:not(:disabled):not(.active):not(.disabled):not(.sf-datepicker-day-selected) .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: color-mix(in srgb, var(--sf-error) 80%, transparent);
    --sf-datepicker-day-info--color: color-mix(in srgb, var(--sf-error) 80%, transparent);
  }
  .sf-datepicker .sf-datepicker-day.sf-datepicker-another-month.sf-datepicker-day-off:not(:disabled):not(.active):not(.disabled):not(.sf-datepicker-day-selected) .sf-datepicker-day-info {
    --sf-datepicker-day-date--color: color-mix(in srgb, var(--sf-error) 80%, transparent);
    --sf-datepicker-day-info--color: color-mix(in srgb, var(--sf-error) 80%, transparent);
  }
  .sf-datepicker-day.sf-datepicker-day-start .sf-datepicker-day-date, .sf-datepicker-day.sf-datepicker-day-end .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-on-primary);
  }
  .sf-datepicker-day.sf-datepicker-day-start .sf-datepicker-day-info, .sf-datepicker-day.sf-datepicker-day-end .sf-datepicker-day-info {
    --sf-datepicker-day-info--color: var(--sf-on-primary);
  }
  .sf-datepicker-day.sf-datepicker-day-selected {
    --sf-datepicker-day--border-end-end-radius: 0;
    --sf-datepicker-day--border-start-end-radius: 0;
    --sf-datepicker-day--border-start-start-radius: 0;
    --sf-datepicker-day--border-end-start-radius: 0;
    --sf-datepicker-day--background-color: var(--sf-primary-container-active);
  }
  .sf-datepicker-day.sf-datepicker-day-selected .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-on-primary-container);
  }
  .sf-datepicker-day.sf-datepicker-day-selected .sf-datepicker-day-info {
    --sf-datepicker-day-info--color: var(--sf-on-primary-container);
  }
  .sf-datepicker-day:disabled .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-on-disable);
  }
  .sf-datepicker-day.disabled .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-on-disable);
  }
  .sf-datepicker-day:disabled .sf-datepicker-day-info {
    --sf-datepicker-day-info--color: var(--sf-on-disable);
  }
  .sf-datepicker-day.disabled .sf-datepicker-day-info {
    --sf-datepicker-day-info--color: var(--sf-on-disable);
  }
  .sf-datepicker-text.sf-datepicker-text-start, .sf-datepicker-text.sf-datepicker-text-end {
    --sf-datepicker-text--background-color: var(--sf-primary);
    --sf-datepicker-text--color: var(--sf-on-primary);
  }
  .sf-datepicker-text.sf-datepicker-text-start {
    --sf-datepicker-text--border-end-end-radius: var(--sf-radius-square);
    --sf-datepicker-text--border-start-end-radius: var(--sf-radius-square);
  }
  .sf-datepicker-text.sf-datepicker-text-end {
    --sf-datepicker-text--border-end-start-radius: var(--sf-radius-square);
    --sf-datepicker-text--border-start-start-radius: var(--sf-radius-square);
  }
  .sf-datepicker-text.sf-datepicker-text-selected {
    --sf-datepicker-text--border-end-end-radius: var(--sf-radius-square);
    --sf-datepicker-text--border-start-end-radius: var(--sf-radius-square);
    --sf-datepicker-text--border-start-start-radius: var(--sf-radius-square);
    --sf-datepicker-text--border-end-start-radius: var(--sf-radius-square);
    --sf-datepicker-text--background-color: var(--sf-primary-container-active);
    --sf-datepicker-text--color: var(--sf-on-primary-container);
  }
  .sf-datepicker-text:disabled {
    --sf-datepicker-text--color: var(--sf-on-disable);
  }
  .sf-datepicker-text.disabled {
    --sf-datepicker-text--color: var(--sf-on-disable);
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-datepicker--border-bottom-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-end-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-datepicker--border-bottom-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-datepicker:where(:dir(ltr)){
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-datepicker--border-bottom-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-datepicker--border-bottom-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-end-radius: initial){
  [dir="rtl"] .sf-datepicker{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-datepicker--border-bottom-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-datepicker:where(:dir(rtl)){
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-datepicker--border-bottom-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-datepicker--border-bottom-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-start-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-datepicker--border-bottom-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-datepicker:where(:dir(ltr)){
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-datepicker--border-bottom-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-datepicker--border-bottom-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-end-start-radius: initial){
  [dir="rtl"] .sf-datepicker{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-datepicker--border-bottom-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-datepicker:where(:dir(rtl)){
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-datepicker--border-bottom-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-datepicker--border-top-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-end-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-datepicker--border-top-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-datepicker:where(:dir(ltr)){
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-datepicker--border-top-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-datepicker--border-top-right-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-end-radius: initial){
  [dir="rtl"] .sf-datepicker{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-datepicker--border-top-right-radius, var(--sf-radius--surface));
    }
  }
  .sf-datepicker:where(:dir(rtl)){
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-datepicker--border-top-right-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-datepicker--border-top-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-start-radius: initial){
  html:not([dir="rtl"]) .sf-datepicker{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-datepicker--border-top-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-datepicker:where(:dir(ltr)){
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-datepicker--border-top-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-datepicker--border-top-left-radius, var(--sf-radius--surface));
  }
  @supports not (border-start-start-radius: initial){
  [dir="rtl"] .sf-datepicker{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-datepicker--border-top-left-radius, var(--sf-radius--surface));
    }
  }
  .sf-datepicker:where(:dir(rtl)){
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-datepicker--border-top-left-radius, var(--sf-radius--surface));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker{
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-datepicker--padding-right, var(--sf-space-1\/3));
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-datepicker{
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-datepicker--padding-right, var(--sf-space-1\/3));
    }
  }
  .sf-datepicker:where(:dir(ltr)){
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-datepicker--padding-right, var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker{
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-datepicker--padding-right, var(--sf-space-1\/3));
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-datepicker{
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-datepicker--padding-right, var(--sf-space-1\/3));
    }
  }
  .sf-datepicker:where(:dir(rtl)){
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-datepicker--padding-right, var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker{
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-datepicker--padding-left, var(--sf-space-1\/3));
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-datepicker{
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-datepicker--padding-left, var(--sf-space-1\/3));
    }
  }
  .sf-datepicker:where(:dir(ltr)){
    padding-left: var(--sf-space-1\/3);
    padding-left: var(--sf-datepicker--padding-left, var(--sf-space-1\/3));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker{
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-datepicker--padding-left, var(--sf-space-1\/3));
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-datepicker{
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-datepicker--padding-left, var(--sf-space-1\/3));
    }
  }
  .sf-datepicker:where(:dir(rtl)){
    padding-right: var(--sf-space-1\/3);
    padding-right: var(--sf-datepicker--padding-left, var(--sf-space-1\/3));
  }
  .sf-datepicker {
    --sf-datepicker--inline-size: calc(var(--sf-ui-1--control-height) * 7 + var(--sf-space-1));
    /* The whole calendar floats on step 3, not only its top band: on the plain
       surface its body was the page's colour in the dark theme. */
    background-color: var(--sf-elevation-3--surface);
    background-color: var(--sf-datepicker--background-color, var(--sf-elevation-3--surface));
    --sf-on-surface-variant: var(--sf-on-elevation-3--variant);
    border-end-end-radius: var(--sf-radius--surface);
    border-end-end-radius: var(--sf-datepicker--border-bottom-right-radius, var(--sf-radius--surface));
    border-end-start-radius: var(--sf-radius--surface);
    border-end-start-radius: var(--sf-datepicker--border-bottom-left-radius, var(--sf-radius--surface));
    border-start-end-radius: var(--sf-radius--surface);
    border-start-end-radius: var(--sf-datepicker--border-top-right-radius, var(--sf-radius--surface));
    border-start-start-radius: var(--sf-radius--surface);
    border-start-start-radius: var(--sf-datepicker--border-top-left-radius, var(--sf-radius--surface));
    box-shadow: var(--sf-elevation-3--shadow);
    box-shadow: var(--sf-datepicker--box-shadow, var(--sf-elevation-3--shadow));
    width: min(var(--sf-datepicker--inline-size), 100vi - var(--sf-space-2));
    inline-size: min(var(--sf-datepicker--inline-size), 100vi - var(--sf-space-2));
    padding-bottom: var(--sf-space-1\/3);
    padding-bottom: var(--sf-datepicker--padding-bottom, var(--sf-space-1\/3));
    -webkit-padding-end: var(--sf-space-1\/3);
            padding-inline-end: var(--sf-space-1\/3);
    -webkit-padding-end: var(--sf-datepicker--padding-right, var(--sf-space-1\/3));
            padding-inline-end: var(--sf-datepicker--padding-right, var(--sf-space-1\/3));
    -webkit-padding-start: var(--sf-space-1\/3);
            padding-inline-start: var(--sf-space-1\/3);
    -webkit-padding-start: var(--sf-datepicker--padding-left, var(--sf-space-1\/3));
            padding-inline-start: var(--sf-datepicker--padding-left, var(--sf-space-1\/3));
    padding-top: var(--sf-space-1\/3);
    padding-top: var(--sf-datepicker--padding-top, var(--sf-space-1\/3));
  }
  /* Quick ranges beside the grid, at its inline start; where the panel has no
     room for both, a wrapping row above it. The panel is the container, so the
     list follows the room the panel has, not the window. */
  .sf-datepicker.sf-datepicker--presets {
    /* Five days wide: the list measures in the grid's own unit, and «Последние
       30 дней» fits it. */
    --sf-datepicker-presets--inline-size: calc(var(--sf-ui-1--control-height) * 5);
    container: sf-datepicker/inline-size;
    flex-wrap: wrap;
    align-items: flex-start;
    -webkit-column-gap: var(--sf-space-1\/3);
       -moz-column-gap: var(--sf-space-1\/3);
            column-gap: var(--sf-space-1\/3);
    row-gap: var(--sf-space-1\/3);
    width: min(var(--sf-datepicker--inline-size) + var(--sf-datepicker-presets--inline-size) + var(--sf-space-1\/3), 100vi - var(--sf-space-2));
    inline-size: min(var(--sf-datepicker--inline-size) + var(--sf-datepicker-presets--inline-size) + var(--sf-space-1\/3), 100vi - var(--sf-space-2));
  }
  .sf-datepicker.sf-datepicker--presets > .sf-datepicker-container {
    flex: 1 1 calc(var(--sf-ui-1--control-height) * 7);
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-datepicker .sf-datepicker-presets {
    flex: 0 0 var(--sf-datepicker-presets--inline-size);
    min-width: 0;
    min-inline-size: 0;
    padding-top: var(--sf-space-1\/3);
    -webkit-padding-before: var(--sf-space-1\/3);
            padding-block-start: var(--sf-space-1\/3);
  }
  /* A month, a year or a quick range lies on the panel, not on the page: the
     page's surface under it drew a dark box round every one of them in the
     dark theme (light hid it, the two are the same white there). Hover and
     the chosen one still paint, from the states layer. */
  .sf-datepicker .sf-datepicker-text {
    --sf-datepicker-text--background-color: var(--sf-transparent);
  }
  /* A list row is a control's height, the height of a day beside it. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker .sf-datepicker-preset{
    text-align: left;
  }
  @supports not (text-align: start){
  html:not([dir="rtl"]) .sf-datepicker .sf-datepicker-preset{
    text-align: left;
    }
  }
  .sf-datepicker .sf-datepicker-preset:where(:dir(ltr)){
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker .sf-datepicker-preset{
    text-align: right;
  }
  @supports not (text-align: start){
  [dir="rtl"] .sf-datepicker .sf-datepicker-preset{
    text-align: right;
    }
  }
  .sf-datepicker .sf-datepicker-preset:where(:dir(rtl)){
    text-align: right;
  }
  .sf-datepicker .sf-datepicker-preset {
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Beside the grid the panel's content is about 28rem wide (twelve 40px
     days and a gap); any less and the list wraps above it. */
  @container sf-datepicker (inline-size < 27rem) {
    .sf-datepicker .sf-datepicker-presets {
      flex: 1 1 100%;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .sf-datepicker .sf-datepicker-preset {
      min-height: var(--sf-ui-1\/2--control-height);
      min-block-size: var(--sf-ui-1\/2--control-height);
      padding-top: 0;
      padding-bottom: 0;
      padding-block: 0;
    }
  }
  .sf-datepicker .sf-datepicker-main {
    --sf-datepicker-main--background-color: var(--sf-transparent);
    background-color: var(--sf-datepicker-main--background-color);
  }
  .sf-datepicker .sf-datepicker-row {
    --sf-datepicker-row--background-color: var(--sf-transparent);
    background-color: var(--sf-datepicker-row--background-color);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker .sf-datepicker-top{
    padding-right: var(--sf-datepicker-top--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-datepicker .sf-datepicker-top{
    padding-right: var(--sf-datepicker-top--padding-inline-end);
    }
  }
  .sf-datepicker .sf-datepicker-top:where(:dir(ltr)){
    padding-right: var(--sf-datepicker-top--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker .sf-datepicker-top{
    padding-left: var(--sf-datepicker-top--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-datepicker .sf-datepicker-top{
    padding-left: var(--sf-datepicker-top--padding-inline-end);
    }
  }
  .sf-datepicker .sf-datepicker-top:where(:dir(rtl)){
    padding-left: var(--sf-datepicker-top--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-datepicker .sf-datepicker-top{
    padding-left: var(--sf-datepicker-top--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-datepicker .sf-datepicker-top{
    padding-left: var(--sf-datepicker-top--padding-inline-start);
    }
  }
  .sf-datepicker .sf-datepicker-top:where(:dir(ltr)){
    padding-left: var(--sf-datepicker-top--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-datepicker .sf-datepicker-top{
    padding-right: var(--sf-datepicker-top--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-datepicker .sf-datepicker-top{
    padding-right: var(--sf-datepicker-top--padding-inline-start);
    }
  }
  .sf-datepicker .sf-datepicker-top:where(:dir(rtl)){
    padding-right: var(--sf-datepicker-top--padding-inline-start);
  }
  .sf-datepicker .sf-datepicker-top {
    --sf-datepicker-top--background-color: var(--sf-elevation-3--surface);
    --sf-on-surface-variant: var(--sf-on-elevation-3--variant);
    --sf-datepicker-top--padding-bottom: var(--sf-space-1);
    --sf-datepicker-top--padding-inline-end: var(--sf-space-1\/3);
    --sf-datepicker-top--padding-inline-start: var(--sf-space-1\/3);
    --sf-datepicker-top--padding-top: var(--sf-space-1);
    background-color: var(--sf-datepicker-top--background-color);
    padding-bottom: var(--sf-datepicker-top--padding-bottom);
    -webkit-padding-end: var(--sf-datepicker-top--padding-inline-end);
            padding-inline-end: var(--sf-datepicker-top--padding-inline-end);
    -webkit-padding-start: var(--sf-datepicker-top--padding-inline-start);
            padding-inline-start: var(--sf-datepicker-top--padding-inline-start);
    padding-top: var(--sf-datepicker-top--padding-top);
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .sf-datepicker .sf-datepicker-period {
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-datepicker .sf-datepicker-weekday {
    color: var(--sf-on-surface-variant);
    color: var(--sf-datepicker-weekday--color, var(--sf-on-surface-variant));
    font-family: var(--sf-text--family);
    font-size: var(--sf-text-size-1\/2);
    font-weight: var(--sf-font-weight-medium);
    line-height: var(--sf-text-height-1\/2);
    /* The weekday is 1/2 text, so its row is a 1/2 control's height, a step
       of the ladder; its own padding made it 28 pixels, a height of none. */
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--sf-ui-1\/2--control-height);
    block-size: var(--sf-ui-1\/2--control-height);
  }
  .sf-datepicker .sf-datepicker-context {
    /* Opaque, to cover the days under it, in the panel's own colour. */
    --sf-datepicker-context--background-color: var(--sf-datepicker--background-color, var(--sf-elevation-3--surface));
    background: var(--sf-datepicker-context--background-color);
    --sf-on-surface-variant: var(--sf-on-elevation-3--variant);
    z-index: var(--sf-z-index-2);
  }
}
@layer sf.overrides {
  .sf-datepicker .sf-datepicker-day.sf-datepicker-day-off:not(:disabled):not(.active):not(.disabled):not(.sf-datepicker-day-selected) .sf-datepicker-day-date {
    --sf-datepicker-day-date--color: var(--sf-error);
  }
  .sf-datepicker .sf-datepicker-day.sf-datepicker-day-off:not(:disabled):not(.active):not(.disabled):not(.sf-datepicker-day-selected) .sf-datepicker-day-info {
    --sf-datepicker-day-info--color: var(--sf-error);
  }
}