/* stylelint-disable */
.DateRangePickerNew {
  --date-range-picker-icon-color: var(--color-content-base-primary);
  --date-range-picker-text-color: var(--color-content-base-primary);
  --date-range-picker-background-color: var(--color-background-base-primary);
  --date-range-picker-border-color: var(--color-border-base-main);
  --date-range-picker-border-width: var(--border-width-s);
  cursor: text;
  display: inline-flex;
  vertical-align: top;
  flex-direction: column;
}
.DateRangePickerNew > * {
    cursor: text;
  }
.DateRangePickerNew-CalendarDialogContainer {
    display: flex;
    justify-content: center;
  }
.DateRangePickerNew-Fieldset {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    inset-block-start: 0;
    inset-inline-start: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    border-radius: var(--border-radius-xs);
    border: var(--date-range-picker-border-width) solid
      var(--date-range-picker-border-color);
    transition: border var(--transition-default);
  }
.DateRangePickerNew-Body {
    position: relative;
    display: flex;
    -moz-column-gap: var(--date-range-picker-input-gap);
         column-gap: var(--date-range-picker-input-gap);
    align-items: center;
    box-sizing: border-box;
    padding: 0 var(--date-range-picker-gutter-x);
    background-color: var(--date-range-picker-background-color);
    transition: background-color var(--transition-slow);
    color: var(--date-range-picker-text-color);
    border-radius: var(--border-radius-xs);
  }
.DateRangePickerNew-FieldContainer {
    display: flex;
    inline-size: 100%;
    position: relative;
  }
.DateRangePickerNew-Field {
    border: none;
    outline: none;
    display: flex;
    inline-size: 100%;
    padding: 0;
    background: none;
    color: var(--date-range-picker-text-color);
    -webkit-text-fill-color: var(--date-range-picker-text-color);
    box-sizing: border-box;
    block-size: var(--date-range-picker-input-height);
    font: var(--date-range-picker-input-font);
    transition: color var(--transition-default);
  }
.DateRangePickerNew-Field::placeholder {
      opacity: 1;
      color: var(--color-content-base-tertiary);
    }
.DateRangePickerNew-Field:-webkit-autofill,
    .DateRangePickerNew-Field:-webkit-autofill:hover,
    .DateRangePickerNew-Field:-webkit-autofill:focus {
      box-shadow: 0 0 0 1000px var(--date-range-picker-background-color) inset;
      background-color: transparent;
      -webkit-text-fill-color: var(--date-range-picker-text-color);
    }
.DateRangePickerNew-Field::-webkit-outer-spin-button,
    .DateRangePickerNew-Field::-webkit-inner-spin-button {
      -webkit-appearance: none;
              appearance: none;
      margin: 0;
    }
.DateRangePickerNew-Field_supposed {
      color: var(--color-content-base-tertiary);
    }
.DateRangePickerNew-FieldSeparator {
    padding: var(--date-range-picker-input-padding);
    display: flex;
    align-items: flex-end;
    font: var(--date-range-picker-input-font);
    white-space: nowrap;
    opacity: 0;
  }
.DateRangePickerNew-FieldSeparator_focused {
      opacity: 1;
    }
.DateRangePickerNew-FieldDivider {
    position: absolute;
    inset-block-end: 2px;
    inset-inline-start: 0;
    border-color: var(--date-range-picker-border-color);
    opacity: 0;
    transition: opacity var(--transition-default),
      inset-inline-start var(--transition-default);
  }
.DateRangePickerNew-FieldDivider_focused {
      opacity: 1;
    }
.DateRangePickerNew_size_2xs {
      --date-range-picker-gutter-x: 12px;
      --date-range-picker-input-height: 32px;
      --date-range-picker-input-font: var(--typography-text-2xs-font);
      --date-range-picker-input-padding: 8px 0 8px;
      --date-range-picker-input-gap: var(--spacing-2x);
    }
.DateRangePickerNew_size_xs {
      --date-range-picker-gutter-x: 12px;
      --date-range-picker-input-height: 40px;
      --date-range-picker-input-font: var(--typography-text-xs-font);
      --date-range-picker-input-padding: 19px 0 4px;
      --date-range-picker-input-gap: var(--spacing-2x);
    }
.DateRangePickerNew_size_s {
      --date-range-picker-gutter-x: 16px;
      --date-range-picker-input-height: 48px;
      --date-range-picker-input-font: var(--typography-text-s-font);
      --date-range-picker-input-padding: 21px 0 6px;
      --date-range-picker-input-gap: var(--spacing-3x);
    }
.DateRangePickerNew_size_m {
      --date-range-picker-gutter-x: 20px;
      --date-range-picker-input-height: 56px;
      --date-range-picker-input-font: var(--typography-text-m-font);
      --date-range-picker-input-padding: 24px 0 6px;
      --date-range-picker-input-gap: var(--spacing-3x);
    }
.DateRangePickerNew_size_l {
      --date-range-picker-gutter-x: 24px;
      --date-range-picker-input-height: 64px;
      --date-range-picker-input-font: var(--typography-text-l-font);
      --date-range-picker-input-padding: 26px 0 6px;
      --date-range-picker-input-gap: var(--spacing-4x);
    }
.DateRangePickerNew_fullWidth {
    inline-size: 100%;
  }
.DateRangePickerNew_hasLabel .DateRangePickerNew-Field {
      padding: var(--date-range-picker-input-padding);
      font: var(--date-range-picker-input-font);
    }
.DateRangePickerNew_hasLabel .DateRangePickerNew-Field::placeholder {
        opacity: 0;
      }
.DateRangePickerNew:hover {
    --date-range-picker-border-color: var(--color-border-base-main-hover);
  }
.DateRangePickerNew_focused,
  .DateRangePickerNew_focused:hover {
    --date-range-picker-border-width: var(--border-width-m);
    --date-range-picker-background-color: var(--color-background-base-main);
    --date-range-picker-border-color: var(--color-border-accent-default);
  }
.DateRangePickerNew_focused .DateRangePickerNew-Field::placeholder, .DateRangePickerNew_focused:hover .DateRangePickerNew-Field::placeholder {
        opacity: 1;
      }
.DateRangePickerNew_error,
  .DateRangePickerNew_error.DateRangePickerNew:hover,
  .DateRangePickerNew_error.DateRangePickerNew_focused,
  .DateRangePickerNew_error.DateRangePickerNew_focused:hover {
    --date-range-picker-border-color: var(--color-border-error-default);
  }
.DateRangePickerNew_disabled {
    --date-range-picker-border-color: var(--color-border-base-disabled);
    --date-range-picker-background-color: var(--color-background-base-disabled);
    --date-range-picker-text-color: var(--color-content-base-secondary);
    --date-range-picker-icon-color: var(--color-content-base-disabled);
    pointer-events: none;
    cursor: default;
  }