@vchasno/ui-kit 0.4.104 → 0.4.105
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/dist/components/Datepicker/DateRangePicker/DateRangePicker.d.ts +15 -1
- package/dist/components/Datepicker/DateRangePicker/DateRangePicker.js +1 -1
- package/dist/components/Datepicker/DateRangePicker/DateRangePicker.js.map +1 -1
- package/dist/components/Datepicker/DateRangePicker/DateRangePicker.reducer.js +1 -1
- package/dist/components/Datepicker/DateRangePicker/DateRangePicker.reducer.js.map +1 -1
- package/dist/components/Datepicker/DateRangePicker/utils.js +2 -0
- package/dist/components/Datepicker/DateRangePicker/utils.js.map +1 -0
- package/dist/css/vchasno-ui.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,27 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [0.4.105] - 2026-06-11
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **DateRangePicker** — manual range typing through a masked input: both dates can be typed directly (`react-text-mask`, mask derived from `dateFormat`) with round-trip validation (rejects overflow like `32/13/2025`), `minDate`/`maxDate` bounds, and `Enter` to commit a fully valid range
|
|
13
|
+
- **DateRangePicker** — add `mask?` prop to override the input mask (defaults to a mask derived from `dateFormat`)
|
|
14
|
+
- **DateRangePicker** — add `endDefaultsToToday?: boolean` — when only a start date is entered/selected, Save auto-fills the end with the current moment (`new Date()`), clamped down to `maxDate`; a reversed-range guard leaves the tuple untouched when the start is in the future
|
|
15
|
+
- **DateRangePicker** — preset label display: when the committed range exactly matches a named preset, the input shows the preset's label (e.g. "За весь час") instead of the raw dates via a non-interactive overlay; opening the calendar restores the editable masked dates
|
|
16
|
+
|
|
17
|
+
### Changed
|
|
18
|
+
|
|
19
|
+
- **DateRangePicker** — deduplicated the input commit logic: a single `commitRange` helper now owns the `applyEndFallback → onChange → onConfirm → close` sequence (previously duplicated between Save and the Enter handler), and a shared `parseBounds` object replaces the repeated `parseRange` options; the capture-phase Enter interception is documented in place (why: `react-datepicker` clones `customInput` with its own `onKeyDown` that would reset the range to `[start, null]`)
|
|
20
|
+
- **DateRangePicker** — `parseRange` now splits the typed text on the spaced range separator (`' - '`) instead of a bare `-`, so `-`-separated date formats like `yyyy-MM-dd` parse correctly
|
|
21
|
+
- **DateRangePicker** — documented in the `presets` prop JSDoc and stories that preset labels must be ttag-wrapped in consuming products (ui-kit receives ready-made strings; ttag is not a ui-kit dependency)
|
|
22
|
+
|
|
23
|
+
### Fixed
|
|
24
|
+
|
|
25
|
+
- **DateRangePicker** — clicking the input while the calendar is open no longer wipes an in-progress (unsaved) selection — `handleOpen` re-seeds the temporary range from committed props only on the first open, keeping the temporary state as the source of truth while the calendar stays open
|
|
26
|
+
- **DateRangePicker** — the floating label no longer overlaps the start date after picking a preset: the label now floats whenever the input shows a value (including the unsaved temporary range), not only on focus or a committed value — previously the un-floated label covered the start (e.g. hid `01/01/2000` in «За весь час»), and it only appeared after clicking back into the input
|
|
27
|
+
- **DateRangePicker** — clicking the input to edit an unsaved range no longer clears it: `react-datepicker`'s `onClickOutside` fired even for clicks on the picker's own input (it tracks `open` internally while we drive it via the `open` prop), cancelling and reopening from the empty committed props; `onClickOutside` now ignores clicks inside the wrapper, so the click just places the caret. The input also shows a text caret instead of a pointer cursor to signal it is editable
|
|
28
|
+
|
|
8
29
|
## [0.4.104] - 2026-05-12
|
|
9
30
|
|
|
10
31
|
### Changed
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ReactDatePickerProps } from 'react-datepicker';
|
|
3
|
+
import { MaskedInputProps } from 'react-text-mask';
|
|
3
4
|
import Select from '../../Select/Select.js';
|
|
4
5
|
import { LoadingFeedback, WithHint, ErrorFeedback, DataQa, HideEmptyMeta, WithPulseAnimation } from '../../types.js';
|
|
5
6
|
|
|
6
|
-
type ControlledReactDatePickerProps = 'selectsRange' | 'selectsMultiple' | 'startDate' | 'endDate' | 'onChange' | 'value' | 'open' | 'onInputClick' | 'onClickOutside' | 'monthsShown' | 'shouldCloseOnSelect' | 'renderCustomHeader' | 'children';
|
|
7
|
+
type ControlledReactDatePickerProps = 'selectsRange' | 'selectsMultiple' | 'startDate' | 'endDate' | 'onChange' | 'value' | 'open' | 'onInputClick' | 'onClickOutside' | 'monthsShown' | 'shouldCloseOnSelect' | 'renderCustomHeader' | 'children' | 'onChangeRaw' | 'customInput';
|
|
7
8
|
interface DateRangePickerProps extends Omit<ReactDatePickerProps<true>, ControlledReactDatePickerProps>, Partial<LoadingFeedback & WithHint & ErrorFeedback & DataQa & HideEmptyMeta & WithPulseAnimation> {
|
|
8
9
|
startDate: Date | null;
|
|
9
10
|
endDate: Date | null;
|
|
@@ -12,16 +13,29 @@ interface DateRangePickerProps extends Omit<ReactDatePickerProps<true>, Controll
|
|
|
12
13
|
wide?: boolean;
|
|
13
14
|
cancelLabel?: string;
|
|
14
15
|
saveLabel?: string;
|
|
16
|
+
/**
|
|
17
|
+
* перелік іменованих діапазонів для швидкого вибору.
|
|
18
|
+
* У продуктових проєктах підписи слід обгортати через ttag (наприклад t`Сьогодні`),
|
|
19
|
+
* щоб вони потрапили до перекладу — ui-kit отримує вже готові рядки.
|
|
20
|
+
*/
|
|
15
21
|
presets?: {
|
|
16
22
|
label: string;
|
|
17
23
|
range: [Date, Date];
|
|
18
24
|
}[];
|
|
19
25
|
presetPlaceholder?: string;
|
|
20
26
|
presetSelectProps?: Omit<React.ComponentProps<typeof Select>, 'options' | 'onChange' | 'value'>;
|
|
27
|
+
/**
|
|
28
|
+
* якщо обрано або введено лише дату початку, при збереженні автоматично підставляє
|
|
29
|
+
* поточний момент (точний `new Date()` із часом, без нормалізації до кінця дня) як
|
|
30
|
+
* дату завершення. Для цілодобових діапазонів нормалізуйте кінець у власному onChange.
|
|
31
|
+
*/
|
|
32
|
+
endDefaultsToToday?: boolean;
|
|
21
33
|
/** викликається при скасуванні вибору */
|
|
22
34
|
onCancel?: () => void;
|
|
23
35
|
/** викликається при підтвердженні вибору */
|
|
24
36
|
onConfirm?: (dates: [Date | null, Date | null]) => void;
|
|
37
|
+
/** маска для ручного вводу діапазону (типово виводиться з dateFormat) */
|
|
38
|
+
mask?: MaskedInputProps['mask'];
|
|
25
39
|
disabled?: ReactDatePickerProps<true>['disabled'];
|
|
26
40
|
required?: ReactDatePickerProps<true>['required'];
|
|
27
41
|
isClearable?: ReactDatePickerProps<true>['isClearable'];
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import
|
|
1
|
+
import e from"react";import t from"react-datepicker";import a from"react-text-mask";import n from"classnames";import{format as r,subMonths as l}from"date-fns";import{uk as c}from"date-fns/locale/uk";import i from"../../../icons/arrowLeft.js";import o from"../../../icons/arrowRight.js";import s from"../../../icons/calendar.js";import p from"../../../icons/clear.js";import m from"../../InputMeta/InputMeta.js";import u from"../../LabelText/LabelText.js";import d from"../../Select/Select.js";import"../../Select/SelectCreatable.js";import"react-select/async";import"react-select";import g from"../../Spinner/Spinner.js";import{pickerReducer as y,initialState as h}from"./DateRangePicker.reducer.js";import{buildRangeMask as k,formatRange as v,matchPresetLabel as _,parseRange as f,applyEndFallback as b}from"./utils.js";let E=()=>e.createElement("span",{className:"vchasno-ui-date-range-picker__custom-close-icon"},p),N=({startDate:p,endDate:N,onChange:C,label:D,disabled:w,required:x,loading:j,hint:T,error:S,className:L,dateFormat:M="dd/MM/yyyy",dataQa:R,hideEmptyMeta:I=!1,wide:A=!1,endDefaultsToToday:P=!1,pulse:H,isClearable:O=!1,minDate:q,maxDate:K,popperClassName:z,portalId:B,cancelLabel:F="Скасувати",saveLabel:G="Зберегти",locale:J=c,presets:Q=[],presetPlaceholder:U="Обрати період",presetSelectProps:V,onCancel:W,onConfirm:X,mask:Y,...Z})=>{var $,ee;let[et,ea]=e.useReducer(y,h),{isOpen:en,tempStartDate:er,tempEndDate:el,selectedPreset:ec,calendarKey:ei,inputText:eo}=et,es=e.useRef(null),ep=(Array.isArray(M)?M[0]:M)??"dd/MM/yyyy",em=Y??k(ep),eu={minDate:q,maxDate:K,allowStartOnly:P},ed=v(p,N,ep),eg=_(p,N,Q),ey=(e,t)=>{let[a,n]=b(e,t,P,new Date,K);C([a,n]),X?.([a,n]),ea({type:"close"})},eh=()=>{W?.(),ea({type:"cancel",startDate:p,endDate:N,inputText:ed})},ek=!!p||!!N,ev=!en&&null!==eg&&ek,e_=en?eo:ed;return e.createElement("label",{onClick:e=>e.preventDefault(),"data-qa":R,className:n("vchasno-ui-date-picker","vchasno-ui-date-range-picker",{"--loading":j,"--required":x,"--disabled":w,"--error":S,"--wide":A,"--not-empty":ek,"--filled":!!e_,"--preset-label":ev,"--is-label":!!D},L),onKeyDown:e=>{"Escape"===e.key&&en&&eh()},onKeyDownCapture:e=>{if("Enter"!==e.key)return;let t=e.target;if(!t.matches?.(".react-datepicker__input-container input"))return;e.preventDefault(),e.stopPropagation();let a=f(eo,ep,eu);a&&"empty"!==a&&ey(a.start,a.end)}},e.createElement("span",{ref:es,className:n("vchasno-ui-date-range-picker__wrapper",{"vchasno-ui-pulse-animation":H&&!w})},D&&e.createElement(u,null,D),e.createElement(t,{key:ei,openToDate:($=en?er:p,(ee=en?el:N)?l(ee,1):$||new Date),fixedHeight:!0,locale:J,disabled:w,placeholderText:"ДД/ММ/РРРР - ДД/ММ/РРРР",showPopperArrow:!1,className:n("vchasno-ui-date-range-picker__picker","vchasno-ui-date-picker__picker"),popperClassName:n("vchasno-ui-date-range-picker-popper",z),selectsRange:!0,startDate:en?er:p,endDate:en?el:N,onChange:e=>{let[t,a]=e;ea({type:"tempChange",start:t,end:a,inputText:v(t,a,ep)})},monthsShown:2,shouldCloseOnSelect:!1,open:en,onInputClick:()=>{w||en||ea({type:"open",startDate:p,endDate:N,inputText:ed})},onClickOutside:e=>{let t=e.target;t instanceof Node&&es.current?.contains(t)||eh()},enableTabLoop:!1,minDate:q,maxDate:K,portalId:B,value:e_,onChangeRaw:e=>{if(!(e.target instanceof HTMLInputElement))return;e.preventDefault();let t=e.target.value;ea({type:"typeChange",inputText:t,parsed:f(t,ep,eu)})},customInput:e.createElement(a,{inputMode:"numeric",mask:em,guide:!0}),renderCustomHeader:({monthDate:t,decreaseMonth:a,increaseMonth:n,prevMonthButtonDisabled:l,nextMonthButtonDisabled:c})=>e.createElement("div",{className:"vchasno-ui-date-range-picker__header"},e.createElement("button",{type:"button",className:"vchasno-ui-date-range-picker__nav-btn",onClick:a,disabled:l},e.createElement(i,null)),e.createElement("span",{className:"vchasno-ui-date-range-picker__month-title"},r(t,"LLLL, yyyy",{locale:"string"==typeof J?void 0:J})),e.createElement("button",{type:"button",className:"vchasno-ui-date-range-picker__nav-btn",onClick:n,disabled:c},e.createElement(o,null))),...Z},e.createElement("div",{className:"vchasno-ui-date-range-picker__presets"},Q.length>0&&e.createElement(d,{className:"vchasno-ui-date-range-picker__preset-select",isClearable:!0,options:Q.map(e=>({label:e.label,value:e.label})),value:ec,placeholder:U,onChange:e=>{let t=Array.isArray(e)?null:e;if(!t){ea({type:"reset"});return}let a=Q.find(e=>e.label===t.value);a&&ea({type:"presetSelect",option:t,start:a.range[0],end:a.range[1],inputText:v(a.range[0],a.range[1],ep)})},hideEmptyMeta:!0,wide:!0,...V})),e.createElement("div",{className:"vchasno-ui-date-range-picker__actions"},e.createElement("button",{type:"button",className:"vchasno-ui-date-range-picker__cancel-btn",onClick:eh},F),e.createElement("button",{type:"button",className:"vchasno-ui-date-range-picker__save-btn",onClick:()=>{ey(er,el)}},G))),ev&&e.createElement("span",{className:"vchasno-ui-date-range-picker__preset-label","aria-hidden":"true"},eg),j?e.createElement(g,{className:"vchasno-ui-date-range-picker__spinner"}):e.createElement(s,{className:"vchasno-ui-date-range-picker__custom-calendar-icon"}),O&&ek&&!w&&e.createElement("button",{type:"button","aria-label":"Очистити",className:"vchasno-ui-date-range-picker__clear-btn",onClick:()=>{C([null,null]),ea({type:"reset"})}},e.createElement(E,null))),!I||S||T?e.createElement(m,{hint:T,error:S}):null)};N.displayName="DateRangePicker";export{N as default};
|
|
2
2
|
//# sourceMappingURL=DateRangePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker.js","sources":["../../../../src/components/Datepicker/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactDatePickerProps } from 'react-datepicker';\nimport ReactDatePicker from 'react-datepicker';\n\nimport cn from 'classnames';\nimport { format, subMonths } from 'date-fns';\nimport { uk } from 'date-fns/locale/uk';\n\nimport ArrowLeftIcon from '../../../icons/arrowLeft';\nimport ArrowRightIcon from '../../../icons/arrowRight';\nimport CalendarIcon from '../../../icons/calendar';\nimport clearRawSvg from '../../../icons/clear';\nimport InputMeta from '../../InputMeta';\nimport LabelText from '../../LabelText';\nimport Select from '../../Select';\nimport type { SelectOption } from '../../Select';\nimport Spinner from '../../Spinner';\nimport type {\n DataQa,\n ErrorFeedback,\n HideEmptyMeta,\n LoadingFeedback,\n WithHint,\n WithPulseAnimation,\n} from '../../types';\nimport { initialState, pickerReducer } from './DateRangePicker.reducer';\n\nimport '../DatePicker.global.css';\nimport './DateRangePicker.global.css';\n\nconst CloseSvg = () => (\n <span className=\"vchasno-ui-date-range-picker__custom-close-icon\">{clearRawSvg}</span>\n);\n\ntype ControlledReactDatePickerProps =\n | 'selectsRange'\n | 'selectsMultiple'\n | 'startDate'\n | 'endDate'\n | 'onChange'\n | 'value'\n | 'open'\n | 'onInputClick'\n | 'onClickOutside'\n | 'monthsShown'\n | 'shouldCloseOnSelect'\n | 'renderCustomHeader'\n | 'children';\n\nexport interface DateRangePickerProps\n extends Omit<ReactDatePickerProps<true>, ControlledReactDatePickerProps>,\n Partial<\n LoadingFeedback & WithHint & ErrorFeedback & DataQa & HideEmptyMeta & WithPulseAnimation\n > {\n // Required controlled props (range-mode contract)\n startDate: Date | null;\n endDate: Date | null;\n onChange: (dates: [Date | null, Date | null]) => void;\n\n // UI-kit additions\n label?: string;\n wide?: boolean;\n cancelLabel?: string;\n saveLabel?: string;\n presets?: { label: string; range: [Date, Date] }[];\n presetPlaceholder?: string;\n presetSelectProps?: Omit<React.ComponentProps<typeof Select>, 'options' | 'onChange' | 'value'>;\n\n /** викликається при скасуванні вибору */\n onCancel?: () => void;\n /** викликається при підтвердженні вибору */\n onConfirm?: (dates: [Date | null, Date | null]) => void;\n\n // Explicit re-declarations for Storybook Controls visibility\n // (types inherited from ReactDatePickerProps<true> via indexed access — zero drift)\n disabled?: ReactDatePickerProps<true>['disabled'];\n required?: ReactDatePickerProps<true>['required'];\n isClearable?: ReactDatePickerProps<true>['isClearable'];\n minDate?: ReactDatePickerProps<true>['minDate'];\n maxDate?: ReactDatePickerProps<true>['maxDate'];\n dateFormat?: ReactDatePickerProps<true>['dateFormat'];\n className?: ReactDatePickerProps<true>['className'];\n popperClassName?: ReactDatePickerProps<true>['popperClassName'];\n portalId?: ReactDatePickerProps<true>['portalId'];\n locale?: ReactDatePickerProps<true>['locale'];\n}\n\nconst DateRangePicker: React.FC<DateRangePickerProps> = ({\n startDate,\n endDate,\n onChange,\n label,\n disabled,\n required,\n loading,\n hint,\n error,\n className,\n dateFormat = 'dd/MM/yyyy',\n dataQa,\n hideEmptyMeta = false,\n wide = false,\n pulse,\n isClearable = false,\n minDate,\n maxDate,\n popperClassName,\n portalId,\n cancelLabel = 'Скасувати',\n saveLabel = 'Зберегти',\n locale = uk,\n presets = [],\n presetPlaceholder = 'Обрати період',\n presetSelectProps,\n onCancel,\n onConfirm,\n ...props\n}) => {\n const [state, dispatch] = React.useReducer(pickerReducer, initialState);\n const { isOpen, tempStartDate, tempEndDate, selectedPreset, calendarKey } = state;\n\n const resolveOpenToDate = (start: Date | null, end: Date | null): Date => {\n if (end) return subMonths(end, 1);\n if (start) return start;\n return new Date();\n };\n\n const handleOpen = () => {\n if (disabled) return;\n dispatch({ type: 'open', startDate, endDate });\n };\n\n const handleTempChange = (dates: [Date | null, Date | null]) => {\n const [start, end] = dates;\n dispatch({ type: 'tempChange', start, end });\n };\n\n const handleSave = () => {\n onChange([tempStartDate, tempEndDate]);\n onConfirm?.([tempStartDate, tempEndDate]);\n dispatch({ type: 'close' });\n };\n\n const handleCancel = () => {\n onCancel?.();\n dispatch({ type: 'cancel', startDate, endDate });\n };\n\n const handleClear = () => {\n onChange([null, null]);\n dispatch({ type: 'reset' });\n };\n\n const handlePresetChange = (newValue: SelectOption | readonly SelectOption[] | null) => {\n const option = Array.isArray(newValue) ? null : (newValue as SelectOption | null);\n if (!option) {\n dispatch({ type: 'reset' });\n return;\n }\n const preset = presets.find((p) => p.label === option.value);\n if (preset) {\n dispatch({\n type: 'presetSelect',\n option,\n start: preset.range[0],\n end: preset.range[1],\n });\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape' && isOpen) {\n handleCancel();\n }\n };\n\n const formatDisplayValue = (): string => {\n if (!startDate && !endDate) return '';\n const displayFormat = Array.isArray(dateFormat) ? dateFormat[0] : dateFormat;\n if (!displayFormat) return '';\n const startStr = startDate ? format(startDate, displayFormat) : '';\n const endStr = endDate ? format(endDate, displayFormat) : '';\n if (startStr && endStr) return `${startStr} - ${endStr}`;\n if (startStr) return startStr;\n return '';\n };\n\n const displayValue = formatDisplayValue();\n const valueExists = !!startDate || !!endDate;\n\n return (\n <label\n onClick={(e) => e.preventDefault()}\n data-qa={dataQa}\n className={cn(\n 'vchasno-ui-date-picker',\n 'vchasno-ui-date-range-picker',\n {\n '--loading': loading,\n '--required': required,\n '--disabled': disabled,\n '--error': error,\n '--wide': wide,\n '--not-empty': valueExists,\n '--is-label': !!label,\n },\n className,\n )}\n onKeyDown={handleKeyDown}\n >\n <span\n className={cn('vchasno-ui-date-range-picker__wrapper', {\n 'vchasno-ui-pulse-animation': pulse && !disabled,\n })}\n >\n {label && <LabelText>{label}</LabelText>}\n <ReactDatePicker\n key={calendarKey}\n openToDate={resolveOpenToDate(\n isOpen ? tempStartDate : startDate,\n isOpen ? tempEndDate : endDate,\n )}\n fixedHeight\n locale={locale}\n disabled={disabled}\n placeholderText=\"ДД/ММ/РРРР - ДД/ММ/РРРР\"\n showPopperArrow={false}\n className={cn(\n 'vchasno-ui-date-range-picker__picker',\n 'vchasno-ui-date-picker__picker',\n )}\n popperClassName={cn('vchasno-ui-date-range-picker-popper', popperClassName)}\n selectsRange\n startDate={isOpen ? tempStartDate : startDate}\n endDate={isOpen ? tempEndDate : endDate}\n onChange={handleTempChange}\n monthsShown={2}\n shouldCloseOnSelect={false}\n open={isOpen}\n onInputClick={handleOpen}\n onClickOutside={handleCancel}\n enableTabLoop={false}\n minDate={minDate}\n maxDate={maxDate}\n portalId={portalId}\n value={displayValue}\n renderCustomHeader={({\n monthDate,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n }) => (\n <div className=\"vchasno-ui-date-range-picker__header\">\n <button\n type=\"button\"\n className=\"vchasno-ui-date-range-picker__nav-btn\"\n onClick={decreaseMonth}\n disabled={prevMonthButtonDisabled}\n >\n <ArrowLeftIcon />\n </button>\n <span className=\"vchasno-ui-date-range-picker__month-title\">\n {format(monthDate, 'LLLL, yyyy', {\n locale: typeof locale === 'string' ? undefined : locale,\n })}\n </span>\n <button\n type=\"button\"\n className=\"vchasno-ui-date-range-picker__nav-btn\"\n onClick={increaseMonth}\n disabled={nextMonthButtonDisabled}\n >\n <ArrowRightIcon />\n </button>\n </div>\n )}\n {...props}\n >\n <div className=\"vchasno-ui-date-range-picker__presets\">\n {presets.length > 0 && (\n <Select\n className=\"vchasno-ui-date-range-picker__preset-select\"\n isClearable\n options={presets.map((p) => ({\n label: p.label,\n value: p.label,\n }))}\n value={selectedPreset}\n placeholder={presetPlaceholder}\n onChange={handlePresetChange}\n hideEmptyMeta\n wide\n {...presetSelectProps}\n />\n )}\n </div>\n\n <div className=\"vchasno-ui-date-range-picker__actions\">\n <button\n type=\"button\"\n className=\"vchasno-ui-date-range-picker__cancel-btn\"\n onClick={handleCancel}\n >\n {cancelLabel}\n </button>\n <button\n type=\"button\"\n className=\"vchasno-ui-date-range-picker__save-btn\"\n onClick={handleSave}\n >\n {saveLabel}\n </button>\n </div>\n </ReactDatePicker>\n {loading ? (\n <Spinner className=\"vchasno-ui-date-range-picker__spinner\" />\n ) : (\n <CalendarIcon className=\"vchasno-ui-date-range-picker__custom-calendar-icon\" />\n )}\n {isClearable && valueExists && !disabled && (\n <button\n type=\"button\"\n aria-label=\"Очистити\"\n className=\"vchasno-ui-date-range-picker__clear-btn\"\n onClick={handleClear}\n >\n <CloseSvg />\n </button>\n )}\n </span>\n {hideEmptyMeta && !error && !hint ? null : <InputMeta hint={hint} error={error} />}\n </label>\n );\n};\n\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport default DateRangePicker;\n"],"names":["CloseSvg","React","span","className","clearRawSvg","DateRangePicker","startDate","endDate","onChange","label","disabled","required","loading","hint","error","dateFormat","dataQa","hideEmptyMeta","wide","pulse","isClearable","minDate","maxDate","popperClassName","portalId","cancelLabel","saveLabel","locale","uk","presets","presetPlaceholder","presetSelectProps","onCancel","onConfirm","props","start","end","state","dispatch","useReducer","pickerReducer","initialState","isOpen","tempStartDate","tempEndDate","selectedPreset","calendarKey","handleCancel","type","displayValue","formatDisplayValue","displayFormat","Array","isArray","startStr","format","endStr","valueExists","onClick","e","preventDefault","data-qa","cn","onKeyDown","key","createElement","LabelText","ReactDatePicker","openToDate","subMonths","Date","fixedHeight","placeholderText","showPopperArrow","selectsRange","dates","monthsShown","shouldCloseOnSelect","open","onInputClick","onClickOutside","enableTabLoop","value","renderCustomHeader","monthDate","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","div","button","ArrowLeftIcon","undefined","ArrowRightIcon","length","Select","options","map","p","placeholder","newValue","option","preset","find","range","Spinner","CalendarIcon","aria-label","InputMeta","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DateRangePicker.js","sources":["../../../../src/components/Datepicker/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactDatePickerProps } from 'react-datepicker';\nimport ReactDatePicker from 'react-datepicker';\nimport MaskedInput, { type MaskedInputProps } from 'react-text-mask';\n\nimport cn from 'classnames';\nimport { format, subMonths } from 'date-fns';\nimport { uk } from 'date-fns/locale/uk';\n\nimport ArrowLeftIcon from '../../../icons/arrowLeft';\nimport ArrowRightIcon from '../../../icons/arrowRight';\nimport CalendarIcon from '../../../icons/calendar';\nimport clearRawSvg from '../../../icons/clear';\nimport InputMeta from '../../InputMeta';\nimport LabelText from '../../LabelText';\nimport Select from '../../Select';\nimport type { SelectOption } from '../../Select';\nimport Spinner from '../../Spinner';\nimport type {\n DataQa,\n ErrorFeedback,\n HideEmptyMeta,\n LoadingFeedback,\n WithHint,\n WithPulseAnimation,\n} from '../../types';\nimport { initialState, pickerReducer } from './DateRangePicker.reducer';\nimport {\n applyEndFallback,\n buildRangeMask,\n formatRange,\n matchPresetLabel,\n parseRange,\n} from './utils';\n\nimport '../DatePicker.global.css';\nimport './DateRangePicker.global.css';\n\nconst CloseSvg = () => (\n <span className=\"vchasno-ui-date-range-picker__custom-close-icon\">{clearRawSvg}</span>\n);\n\ntype ControlledReactDatePickerProps =\n | 'selectsRange'\n | 'selectsMultiple'\n | 'startDate'\n | 'endDate'\n | 'onChange'\n | 'value'\n | 'open'\n | 'onInputClick'\n | 'onClickOutside'\n | 'monthsShown'\n | 'shouldCloseOnSelect'\n | 'renderCustomHeader'\n | 'children'\n | 'onChangeRaw'\n | 'customInput';\n\nexport interface DateRangePickerProps\n extends Omit<ReactDatePickerProps<true>, ControlledReactDatePickerProps>,\n Partial<\n LoadingFeedback & WithHint & ErrorFeedback & DataQa & HideEmptyMeta & WithPulseAnimation\n > {\n // Required controlled props (range-mode contract)\n startDate: Date | null;\n endDate: Date | null;\n onChange: (dates: [Date | null, Date | null]) => void;\n\n // UI-kit additions\n label?: string;\n wide?: boolean;\n cancelLabel?: string;\n saveLabel?: string;\n /**\n * перелік іменованих діапазонів для швидкого вибору.\n * У продуктових проєктах підписи слід обгортати через ttag (наприклад t`Сьогодні`),\n * щоб вони потрапили до перекладу — ui-kit отримує вже готові рядки.\n */\n presets?: { label: string; range: [Date, Date] }[];\n presetPlaceholder?: string;\n presetSelectProps?: Omit<React.ComponentProps<typeof Select>, 'options' | 'onChange' | 'value'>;\n\n /**\n * якщо обрано або введено лише дату початку, при збереженні автоматично підставляє\n * поточний момент (точний `new Date()` із часом, без нормалізації до кінця дня) як\n * дату завершення. Для цілодобових діапазонів нормалізуйте кінець у власному onChange.\n */\n endDefaultsToToday?: boolean;\n\n /** викликається при скасуванні вибору */\n onCancel?: () => void;\n /** викликається при підтвердженні вибору */\n onConfirm?: (dates: [Date | null, Date | null]) => void;\n\n /** маска для ручного вводу діапазону (типово виводиться з dateFormat) */\n mask?: MaskedInputProps['mask'];\n\n // Explicit re-declarations for Storybook Controls visibility\n // (types inherited from ReactDatePickerProps<true> via indexed access — zero drift)\n disabled?: ReactDatePickerProps<true>['disabled'];\n required?: ReactDatePickerProps<true>['required'];\n isClearable?: ReactDatePickerProps<true>['isClearable'];\n minDate?: ReactDatePickerProps<true>['minDate'];\n maxDate?: ReactDatePickerProps<true>['maxDate'];\n dateFormat?: ReactDatePickerProps<true>['dateFormat'];\n className?: ReactDatePickerProps<true>['className'];\n popperClassName?: ReactDatePickerProps<true>['popperClassName'];\n portalId?: ReactDatePickerProps<true>['portalId'];\n locale?: ReactDatePickerProps<true>['locale'];\n}\n\nconst DateRangePicker: React.FC<DateRangePickerProps> = ({\n startDate,\n endDate,\n onChange,\n label,\n disabled,\n required,\n loading,\n hint,\n error,\n className,\n dateFormat = 'dd/MM/yyyy',\n dataQa,\n hideEmptyMeta = false,\n wide = false,\n endDefaultsToToday = false,\n pulse,\n isClearable = false,\n minDate,\n maxDate,\n popperClassName,\n portalId,\n cancelLabel = 'Скасувати',\n saveLabel = 'Зберегти',\n locale = uk,\n presets = [],\n presetPlaceholder = 'Обрати період',\n presetSelectProps,\n onCancel,\n onConfirm,\n mask,\n ...props\n}) => {\n const [state, dispatch] = React.useReducer(pickerReducer, initialState);\n const { isOpen, tempStartDate, tempEndDate, selectedPreset, calendarKey, inputText } = state;\n\n const wrapperRef = React.useRef<HTMLSpanElement>(null);\n\n const displayFormat = (Array.isArray(dateFormat) ? dateFormat[0] : dateFormat) ?? 'dd/MM/yyyy';\n const resolvedMask = mask ?? buildRangeMask(displayFormat);\n const parseBounds = { minDate, maxDate, allowStartOnly: endDefaultsToToday };\n\n const resolveOpenToDate = (start: Date | null, end: Date | null): Date => {\n if (end) return subMonths(end, 1);\n if (start) return start;\n return new Date();\n };\n\n const displayValue = formatRange(startDate, endDate, displayFormat);\n const presetLabel = matchPresetLabel(startDate, endDate, presets);\n\n // Єдине місце коміту діапазону: applyEndFallback → onChange → onConfirm → close.\n const commitRange = (start: Date | null, end: Date | null) => {\n const [finalStart, finalEnd] = applyEndFallback(\n start,\n end,\n endDefaultsToToday,\n new Date(),\n maxDate,\n );\n onChange([finalStart, finalEnd]);\n onConfirm?.([finalStart, finalEnd]);\n dispatch({ type: 'close' });\n };\n\n /*\n * Карта workaround-ів: інтеграція з react-datepicker 6.9.0 у controlled-open режимі\n * (кнопки «Зберегти/Скасувати», пресети та masked-ввід змушують тримати `open` зовні,\n * тож бібліотека фаєрить власні події навіть для наших елементів). Шість обхідних місць,\n * кожне з власним «чому»-коментарем біля коду:\n * 1. handleOpen — guard від повторного засіювання temp-стану → проп `onInputClick`;\n * 2. handleClickOutside — containment у власному wrapper → проп `onClickOutside`;\n * 3. handleRawChange — відсіч подій від кліків по днях → проп `onChangeRaw`;\n * 4. handleInputKeyDownCapture — перехоплення Enter → `onKeyDownCapture` на <label>;\n * 5. calendarKey — remount для скиду стану календаря → проп `key` (інкремент у reducer);\n * 6. resolveOpenToDate (вище) — позиціонування місяців при відкритті → проп `openToDate`.\n */\n const handleOpen = () => {\n // Guard against re-seeding temp state on every input click: react-datepicker's\n // onInputClick fires on each click, and `open` reseeds temp from the committed\n // props — so clicking the input again while open would wipe an unsaved selection.\n // First click opens (seeds from props); while open the temp state stays the source\n // of truth so the user can keep editing.\n if (disabled || isOpen) return;\n dispatch({ type: 'open', startDate, endDate, inputText: displayValue });\n };\n\n const handleTempChange = (dates: [Date | null, Date | null]) => {\n const [start, end] = dates;\n dispatch({\n type: 'tempChange',\n start,\n end,\n inputText: formatRange(start, end, displayFormat),\n });\n };\n\n const handleSave = () => {\n commitRange(tempStartDate, tempEndDate);\n };\n\n const handleCancel = () => {\n onCancel?.();\n dispatch({ type: 'cancel', startDate, endDate, inputText: displayValue });\n };\n\n const handleClickOutside = (event: React.MouseEvent<HTMLDivElement>) => {\n // react-datepicker fires onClickOutside for clicks on our own input/icons too: it tracks\n // `open` internally while we drive it via the `open` prop, so its outside-click-ignore class\n // never lands on the input. Skip cancel for clicks inside our wrapper — otherwise clicking the\n // input to start editing wipes an unsaved range (cancel resets temp from empty committed props,\n // closes, then onInputClick reopens empty).\n const target = event.target;\n if (target instanceof Node && wrapperRef.current?.contains(target)) return;\n handleCancel();\n };\n\n const handleClear = () => {\n onChange([null, null]);\n dispatch({ type: 'reset' });\n };\n\n const handlePresetChange = (newValue: SelectOption | readonly SelectOption[] | null) => {\n const option = Array.isArray(newValue) ? null : (newValue as SelectOption | null);\n if (!option) {\n dispatch({ type: 'reset' });\n return;\n }\n const preset = presets.find((p) => p.label === option.value);\n if (preset) {\n dispatch({\n type: 'presetSelect',\n option,\n start: preset.range[0],\n end: preset.range[1],\n inputText: formatRange(preset.range[0], preset.range[1], displayFormat),\n });\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape' && isOpen) {\n handleCancel();\n }\n };\n\n const handleRawChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n // react-datepicker fires onChangeRaw from calendar selection too (handleSelect),\n // where the event is a day-cell click with no input value. Only handle real input\n // typing here; otherwise return so the calendar's own onChange (selection) proceeds.\n if (!(e.target instanceof HTMLInputElement)) return;\n e.preventDefault(); // disable react-datepicker's built-in single-date parsing — we own the input\n const raw = e.target.value;\n dispatch({\n type: 'typeChange',\n inputText: raw,\n parsed: parseRange(raw, displayFormat, parseBounds),\n });\n };\n\n /**\n * Перехоплює Enter у capture-фазі, щоб власний onKeyDown react-datepicker\n * (який скидає діапазон до [start, null] і стирає другу дату) ніколи не спрацював.\n *\n * Повністю валідний введений діапазон комітиться; з endDefaultsToToday валідний\n * лише початок комітить [start, зараз]; усе інше невалідне/неповне — no-op.\n *\n * Чому capture-фаза: react-datepicker клонує customInput і навішує власний\n * onKeyDown, тож єдиний спосіб випередити його — перехопити подію на батьківському\n * елементі через onKeyDownCapture. Актуально для react-datepicker 6.9.0.\n */\n const handleInputKeyDownCapture = (e: React.KeyboardEvent<HTMLElement>) => {\n if (e.key !== 'Enter') return;\n const target = e.target as HTMLElement;\n if (!target.matches?.('.react-datepicker__input-container input')) return;\n e.preventDefault();\n e.stopPropagation();\n const parsed = parseRange(inputText, displayFormat, parseBounds);\n if (parsed && parsed !== 'empty') {\n commitRange(parsed.start, parsed.end);\n }\n };\n\n const valueExists = !!startDate || !!endDate;\n const showPresetLabel = !isOpen && presetLabel !== null && valueExists;\n // Текст, який реально бачить користувач в інпуті: під час редагування — тимчасовий ввід,\n // інакше — збережене значення. Використовується і для value, і щоб тримати лейбл піднятим.\n const inputDisplayValue = isOpen ? inputText : displayValue;\n\n return (\n <label\n onClick={(e) => e.preventDefault()}\n data-qa={dataQa}\n className={cn(\n 'vchasno-ui-date-picker',\n 'vchasno-ui-date-range-picker',\n {\n '--loading': loading,\n '--required': required,\n '--disabled': disabled,\n '--error': error,\n '--wide': wide,\n '--not-empty': valueExists,\n '--filled': !!inputDisplayValue,\n '--preset-label': showPresetLabel,\n '--is-label': !!label,\n },\n className,\n )}\n onKeyDown={handleKeyDown}\n onKeyDownCapture={handleInputKeyDownCapture}\n >\n <span\n ref={wrapperRef}\n className={cn('vchasno-ui-date-range-picker__wrapper', {\n 'vchasno-ui-pulse-animation': pulse && !disabled,\n })}\n >\n {label && <LabelText>{label}</LabelText>}\n <ReactDatePicker\n key={calendarKey}\n openToDate={resolveOpenToDate(\n isOpen ? tempStartDate : startDate,\n isOpen ? tempEndDate : endDate,\n )}\n fixedHeight\n locale={locale}\n disabled={disabled}\n placeholderText=\"ДД/ММ/РРРР - ДД/ММ/РРРР\"\n showPopperArrow={false}\n className={cn(\n 'vchasno-ui-date-range-picker__picker',\n 'vchasno-ui-date-picker__picker',\n )}\n popperClassName={cn('vchasno-ui-date-range-picker-popper', popperClassName)}\n selectsRange\n startDate={isOpen ? tempStartDate : startDate}\n endDate={isOpen ? tempEndDate : endDate}\n onChange={handleTempChange}\n monthsShown={2}\n shouldCloseOnSelect={false}\n open={isOpen}\n onInputClick={handleOpen}\n onClickOutside={handleClickOutside}\n enableTabLoop={false}\n minDate={minDate}\n maxDate={maxDate}\n portalId={portalId}\n value={inputDisplayValue}\n onChangeRaw={handleRawChange}\n customInput={<MaskedInput inputMode=\"numeric\" mask={resolvedMask} guide />}\n renderCustomHeader={({\n monthDate,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n }) => (\n <div className=\"vchasno-ui-date-range-picker__header\">\n <button\n type=\"button\"\n className=\"vchasno-ui-date-range-picker__nav-btn\"\n onClick={decreaseMonth}\n disabled={prevMonthButtonDisabled}\n >\n <ArrowLeftIcon />\n </button>\n <span className=\"vchasno-ui-date-range-picker__month-title\">\n {format(monthDate, 'LLLL, yyyy', {\n locale: typeof locale === 'string' ? undefined : locale,\n })}\n </span>\n <button\n type=\"button\"\n className=\"vchasno-ui-date-range-picker__nav-btn\"\n onClick={increaseMonth}\n disabled={nextMonthButtonDisabled}\n >\n <ArrowRightIcon />\n </button>\n </div>\n )}\n {...props}\n >\n <div className=\"vchasno-ui-date-range-picker__presets\">\n {presets.length > 0 && (\n <Select\n className=\"vchasno-ui-date-range-picker__preset-select\"\n isClearable\n options={presets.map((p) => ({\n label: p.label,\n value: p.label,\n }))}\n value={selectedPreset}\n placeholder={presetPlaceholder}\n onChange={handlePresetChange}\n hideEmptyMeta\n wide\n {...presetSelectProps}\n />\n )}\n </div>\n\n <div className=\"vchasno-ui-date-range-picker__actions\">\n <button\n type=\"button\"\n className=\"vchasno-ui-date-range-picker__cancel-btn\"\n onClick={handleCancel}\n >\n {cancelLabel}\n </button>\n <button\n type=\"button\"\n className=\"vchasno-ui-date-range-picker__save-btn\"\n onClick={handleSave}\n >\n {saveLabel}\n </button>\n </div>\n </ReactDatePicker>\n {showPresetLabel && (\n <span className=\"vchasno-ui-date-range-picker__preset-label\" aria-hidden=\"true\">\n {presetLabel}\n </span>\n )}\n {loading ? (\n <Spinner className=\"vchasno-ui-date-range-picker__spinner\" />\n ) : (\n <CalendarIcon className=\"vchasno-ui-date-range-picker__custom-calendar-icon\" />\n )}\n {isClearable && valueExists && !disabled && (\n <button\n type=\"button\"\n aria-label=\"Очистити\"\n className=\"vchasno-ui-date-range-picker__clear-btn\"\n onClick={handleClear}\n >\n <CloseSvg />\n </button>\n )}\n </span>\n {hideEmptyMeta && !error && !hint ? null : <InputMeta hint={hint} error={error} />}\n </label>\n );\n};\n\nDateRangePicker.displayName = 'DateRangePicker';\n\nexport default DateRangePicker;\n"],"names":["CloseSvg","React","span","className","clearRawSvg","DateRangePicker","startDate","endDate","onChange","label","disabled","required","loading","hint","error","dateFormat","dataQa","hideEmptyMeta","wide","endDefaultsToToday","pulse","isClearable","minDate","maxDate","popperClassName","portalId","cancelLabel","saveLabel","locale","uk","presets","presetPlaceholder","presetSelectProps","onCancel","onConfirm","mask","props","start","end","state","dispatch","useReducer","pickerReducer","initialState","isOpen","tempStartDate","tempEndDate","selectedPreset","calendarKey","inputText","wrapperRef","useRef","displayFormat","Array","isArray","resolvedMask","buildRangeMask","parseBounds","allowStartOnly","displayValue","formatRange","presetLabel","matchPresetLabel","commitRange","finalStart","finalEnd","applyEndFallback","Date","type","handleCancel","valueExists","showPresetLabel","inputDisplayValue","onClick","e","preventDefault","data-qa","cn","onKeyDown","key","onKeyDownCapture","target","matches","stopPropagation","parsed","parseRange","ref","createElement","LabelText","ReactDatePicker","openToDate","subMonths","fixedHeight","placeholderText","showPopperArrow","selectsRange","dates","monthsShown","shouldCloseOnSelect","open","onInputClick","onClickOutside","event","Node","current","contains","enableTabLoop","value","onChangeRaw","HTMLInputElement","raw","customInput","MaskedInput","inputMode","guide","renderCustomHeader","monthDate","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","div","button","ArrowLeftIcon","format","undefined","ArrowRightIcon","length","Select","options","map","p","placeholder","newValue","option","preset","find","range","aria-hidden","Spinner","CalendarIcon","aria-label","InputMeta","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
let e={isOpen:!1,tempStartDate:null,tempEndDate:null,selectedPreset:null,calendarKey:0};function t(e,t){switch(t.type){case"open":return{...e,isOpen:!0,tempStartDate:t.startDate,tempEndDate:t.endDate};case"close":return{...e,isOpen:!1};case"tempChange":return{...e,tempStartDate:t.start,tempEndDate:t.end,selectedPreset:null};case"cancel":return{...e,isOpen:!1,tempStartDate:t.startDate,tempEndDate:t.endDate,selectedPreset:null};case"reset":return{...e,tempStartDate:null,tempEndDate:null,selectedPreset:null,calendarKey:e.calendarKey+1};case"presetSelect":return{...e,selectedPreset:t.option,tempStartDate:t.start,tempEndDate:t.end,calendarKey:e.calendarKey+1}}}export{e as initialState,t as pickerReducer};
|
|
1
|
+
let e={isOpen:!1,tempStartDate:null,tempEndDate:null,selectedPreset:null,calendarKey:0,inputText:""};function t(e,t){switch(t.type){case"open":return{...e,isOpen:!0,tempStartDate:t.startDate,tempEndDate:t.endDate,inputText:t.inputText};case"close":return{...e,isOpen:!1};case"tempChange":return{...e,tempStartDate:t.start,tempEndDate:t.end,selectedPreset:null,inputText:t.inputText};case"typeChange":{let n={...e,inputText:t.inputText,selectedPreset:null};if("empty"===t.parsed)return{...n,tempStartDate:null,tempEndDate:null};if(null!==t.parsed)return{...n,tempStartDate:t.parsed.start,tempEndDate:t.parsed.end};return n}case"cancel":return{...e,isOpen:!1,tempStartDate:t.startDate,tempEndDate:t.endDate,selectedPreset:null,inputText:t.inputText};case"reset":return{...e,tempStartDate:null,tempEndDate:null,selectedPreset:null,calendarKey:e.calendarKey+1,inputText:""};case"presetSelect":return{...e,selectedPreset:t.option,tempStartDate:t.start,tempEndDate:t.end,calendarKey:e.calendarKey+1,inputText:t.inputText}}}export{e as initialState,t as pickerReducer};
|
|
2
2
|
//# sourceMappingURL=DateRangePicker.reducer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker.reducer.js","sources":["../../../../src/components/Datepicker/DateRangePicker/DateRangePicker.reducer.ts"],"sourcesContent":["import type { SelectOption } from '../../Select';\n\nexport type PickerState = {\n isOpen: boolean;\n tempStartDate: Date | null;\n tempEndDate: Date | null;\n selectedPreset: SelectOption | null;\n calendarKey: number;\n};\n\nexport type PickerAction =\n | { type: 'open'; startDate: Date | null; endDate: Date | null }\n | { type: 'close' }\n | { type: 'tempChange'; start: Date | null; end: Date | null }\n | { type: 'cancel'; startDate: Date | null; endDate: Date | null }\n | { type: 'reset' }\n | { type: 'presetSelect'; option: SelectOption; start: Date; end: Date };\n\nexport const initialState: PickerState = {\n isOpen: false,\n tempStartDate: null,\n tempEndDate: null,\n selectedPreset: null,\n calendarKey: 0,\n};\n\nexport function pickerReducer(state: PickerState, action: PickerAction): PickerState {\n switch (action.type) {\n case 'open':\n return {\n ...state,\n isOpen: true,\n tempStartDate: action.startDate,\n tempEndDate: action.endDate,\n };\n case 'close':\n return { ...state, isOpen: false };\n case 'tempChange':\n return {\n ...state,\n tempStartDate: action.start,\n tempEndDate: action.end,\n selectedPreset: null,\n };\n case 'cancel':\n return {\n ...state,\n isOpen: false,\n tempStartDate: action.startDate,\n tempEndDate: action.endDate,\n selectedPreset: null,\n };\n case 'reset':\n return {\n ...state,\n tempStartDate: null,\n tempEndDate: null,\n selectedPreset: null,\n calendarKey: state.calendarKey + 1,\n };\n case 'presetSelect':\n return {\n ...state,\n selectedPreset: action.option,\n tempStartDate: action.start,\n tempEndDate: action.end,\n calendarKey: state.calendarKey + 1,\n };\n }\n}\n"],"names":["initialState","isOpen","tempStartDate","tempEndDate","selectedPreset","calendarKey","pickerReducer","state","action","type","startDate","endDate","start","end","option"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DateRangePicker.reducer.js","sources":["../../../../src/components/Datepicker/DateRangePicker/DateRangePicker.reducer.ts"],"sourcesContent":["import type { SelectOption } from '../../Select';\nimport type { ParsedRange, ParsedStart } from './utils';\n\nexport type PickerState = {\n isOpen: boolean;\n tempStartDate: Date | null;\n tempEndDate: Date | null;\n selectedPreset: SelectOption | null;\n calendarKey: number;\n inputText: string;\n};\n\nexport type PickerAction =\n | { type: 'open'; startDate: Date | null; endDate: Date | null; inputText: string }\n | { type: 'close' }\n | { type: 'tempChange'; start: Date | null; end: Date | null; inputText: string }\n | { type: 'typeChange'; inputText: string; parsed: ParsedRange | ParsedStart | 'empty' | null }\n | { type: 'cancel'; startDate: Date | null; endDate: Date | null; inputText: string }\n | { type: 'reset' }\n | { type: 'presetSelect'; option: SelectOption; start: Date; end: Date; inputText: string };\n\nexport const initialState: PickerState = {\n isOpen: false,\n tempStartDate: null,\n tempEndDate: null,\n selectedPreset: null,\n calendarKey: 0,\n inputText: '',\n};\n\nexport function pickerReducer(state: PickerState, action: PickerAction): PickerState {\n switch (action.type) {\n case 'open':\n return {\n ...state,\n isOpen: true,\n tempStartDate: action.startDate,\n tempEndDate: action.endDate,\n inputText: action.inputText,\n };\n case 'close':\n return { ...state, isOpen: false };\n case 'tempChange':\n return {\n ...state,\n tempStartDate: action.start,\n tempEndDate: action.end,\n selectedPreset: null,\n inputText: action.inputText,\n };\n case 'typeChange': {\n const base = {\n ...state,\n inputText: action.inputText,\n selectedPreset: null,\n };\n if (action.parsed === 'empty') {\n return { ...base, tempStartDate: null, tempEndDate: null };\n }\n if (action.parsed !== null) {\n return {\n ...base,\n tempStartDate: action.parsed.start,\n tempEndDate: action.parsed.end,\n };\n }\n // parsed === null: invalid/incomplete — leave temp dates unchanged\n return base;\n }\n case 'cancel':\n return {\n ...state,\n isOpen: false,\n tempStartDate: action.startDate,\n tempEndDate: action.endDate,\n selectedPreset: null,\n inputText: action.inputText,\n };\n case 'reset':\n return {\n ...state,\n tempStartDate: null,\n tempEndDate: null,\n selectedPreset: null,\n calendarKey: state.calendarKey + 1,\n inputText: '',\n };\n case 'presetSelect':\n return {\n ...state,\n selectedPreset: action.option,\n tempStartDate: action.start,\n tempEndDate: action.end,\n calendarKey: state.calendarKey + 1,\n inputText: action.inputText,\n };\n }\n}\n"],"names":["initialState","isOpen","tempStartDate","tempEndDate","selectedPreset","calendarKey","inputText","pickerReducer","state","action","type","startDate","endDate","start","end","base","parsed","option"],"mappings":"IAqBaA,EAA4B,CACrCC,OAAQ,CAAA,EACRC,cAAe,KACfC,YAAa,KACbC,eAAgB,KAChBC,YAAa,EACbC,UAAW,EACf,EAEO,SAASC,EAAcC,CAAkB,CAAEC,CAAoB,EAClE,OAAQA,EAAOC,IAAI,EACf,IAAK,OACD,MAAO,CACH,GAAGF,CAAK,CACRP,OAAQ,CAAA,EACRC,cAAeO,EAAOE,SAAS,CAC/BR,YAAaM,EAAOG,OAAO,CAC3BN,UAAWG,EAAOH,SAAAA,AACtB,CACJ,KAAK,QACD,MAAO,CAAE,GAAGE,CAAK,CAAEP,OAAQ,CAAA,CAAM,CACrC,KAAK,aACD,MAAO,CACH,GAAGO,CAAK,CACRN,cAAeO,EAAOI,KAAK,CAC3BV,YAAaM,EAAOK,GAAG,CACvBV,eAAgB,KAChBE,UAAWG,EAAOH,SAAAA,AACtB,CACJ,KAAK,aAAc,CACf,IAAMS,EAAO,CACT,GAAGP,CAAK,CACRF,UAAWG,EAAOH,SAAS,CAC3BF,eAAgB,IACpB,EACA,GAAIK,AAAkB,UAAlBA,EAAOO,MAAM,CACb,MAAO,CAAE,GAAGD,CAAI,CAAEb,cAAe,KAAMC,YAAa,IAAK,EAE7D,GAAIM,AAAkB,OAAlBA,EAAOO,MAAM,CACb,MAAO,CACH,GAAGD,CAAI,CACPb,cAAeO,EAAOO,MAAM,CAACH,KAAK,CAClCV,YAAaM,EAAOO,MAAM,CAACF,GAAAA,AAC/B,EAGJ,OAAOC,CACX,CACA,IAAK,SACD,MAAO,CACH,GAAGP,CAAK,CACRP,OAAQ,CAAA,EACRC,cAAeO,EAAOE,SAAS,CAC/BR,YAAaM,EAAOG,OAAO,CAC3BR,eAAgB,KAChBE,UAAWG,EAAOH,SAAAA,AACtB,CACJ,KAAK,QACD,MAAO,CACH,GAAGE,CAAK,CACRN,cAAe,KACfC,YAAa,KACbC,eAAgB,KAChBC,YAAaG,EAAMH,WAAW,CAAG,EACjCC,UAAW,EACf,CACJ,KAAK,eACD,MAAO,CACH,GAAGE,CAAK,CACRJ,eAAgBK,EAAOQ,MAAM,CAC7Bf,cAAeO,EAAOI,KAAK,CAC3BV,YAAaM,EAAOK,GAAG,CACvBT,YAAaG,EAAMH,WAAW,CAAG,EACjCC,UAAWG,EAAOH,SAAAA,AACtB,CACR,CACJ"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{format as e,parse as t,isValid as l}from"date-fns";let n=(t,l,n)=>{let i=t?e(t,n):"",r=l?e(l,n):"";return i&&r?`${i} - ${r}`:i||""},i=(e,t,l)=>{let n=(e,t)=>null===e?null===t:null!==t&&e.getTime()===t.getTime(),i=l.find(l=>n(e,l.range[0])&&n(t,l.range[1]));return i?i.label:null},r=e=>[...e].map(e=>/[a-zA-Z]/.test(e)?/\d/:e),g=e=>{let t=r(e);return[...t," ","-"," ",...t]},m=(n,i)=>{let r=n.trim();if(r.length!==i.length)return null;let g=t(r,i,new Date);return l(g)&&e(g,i)===r?g:null},u=(e,t,{minDate:l,maxDate:n,allowStartOnly:i=!1}={})=>{let r=e.trim();if(""===r)return"empty";let g=r.split(" - "),u=g[0],a=void 0!==u?m(u,t):null;if(2===g.length){let e=g[1],i=void 0!==e?m(e,t):null;if(a&&i)return a.getTime()>i.getTime()||l&&a.getTime()<l.getTime()||n&&i.getTime()>n.getTime()?null:{start:a,end:i}}return i&&a?l&&a.getTime()<l.getTime()||n&&a.getTime()>n.getTime()?null:{start:a,end:null}:null},a=(e,t,l,n,i)=>{if(!l||!e||t||e.getTime()>n.getTime())return[e,t];let r=i&&i.getTime()<n.getTime()?i:n;return e.getTime()>r.getTime()?[e,t]:[e,r]};export{a as applyEndFallback,g as buildRangeMask,n as formatRange,i as matchPresetLabel,u as parseRange};
|
|
2
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/Datepicker/DateRangePicker/utils.ts"],"sourcesContent":["import { format, isValid, parse } from 'date-fns';\n\nconst SEPARATOR = ' - ';\n\nexport const formatRange = (\n start: Date | null,\n end: Date | null,\n displayFormat: string,\n): string => {\n const startStr = start ? format(start, displayFormat) : '';\n const endStr = end ? format(end, displayFormat) : '';\n if (startStr && endStr) return `${startStr}${SEPARATOR}${endStr}`;\n if (startStr) return startStr;\n return '';\n};\n\ntype PresetEntry = { label: string; range: [Date, Date] };\n\n/**\n * Якщо діапазон точно збігається з діапазоном іменованого пресету — повертає його підпис,\n * інакше null. Порівняння за getTime() з урахуванням null; за колізії — перший збіг.\n */\nexport const matchPresetLabel = (\n start: Date | null,\n end: Date | null,\n presets: ReadonlyArray<PresetEntry>,\n): string | null => {\n const sameInstant = (a: Date | null, b: Date | null): boolean =>\n a === null ? b === null : b !== null && a.getTime() === b.getTime();\n const match = presets.find(\n (p) => sameInstant(start, p.range[0]) && sameInstant(end, p.range[1]),\n );\n return match ? match.label : null;\n};\n\n/**\n * Builds a react-text-mask mask for a single date from a date-fns format string:\n * every pattern letter becomes a digit slot, every other character stays a literal.\n * Targets numeric date formats (dd/MM/yyyy, dd.MM.yyyy, yyyy-MM-dd, …).\n */\nconst buildDateMask = (displayFormat: string): (string | RegExp)[] =>\n [...displayFormat].map((char) => (/[a-zA-Z]/.test(char) ? /\\d/ : char));\n\n/** Builds the full range mask (`<date> - <date>`) derived from the given format. */\nexport const buildRangeMask = (displayFormat: string): (string | RegExp)[] => {\n const dateMask = buildDateMask(displayFormat);\n return [...dateMask, ' ', '-', ' ', ...dateMask];\n};\n\nexport interface ParsedRange {\n start: Date;\n end: Date;\n}\n\n/** результат, коли введено лише валідну дату початку (кінець підставляється окремо) */\nexport interface ParsedStart {\n start: Date;\n end: null;\n}\n\ninterface ParseBounds {\n minDate?: Date | null;\n maxDate?: Date | null;\n /** дозволити введення лише дати початку — для режиму endDefaultsToToday */\n allowStartOnly?: boolean;\n}\n\nconst parseToken = (token: string, displayFormat: string): Date | null => {\n const trimmed = token.trim();\n if (trimmed.length !== displayFormat.length) return null;\n const parsed = parse(trimmed, displayFormat, new Date());\n if (!isValid(parsed)) return null;\n // round-trip guard rejects overflow values like 32/13/2025\n if (format(parsed, displayFormat) !== trimmed) return null;\n return parsed;\n};\n\n/**\n * Parses a typed range string.\n * Returns 'empty' for blank input, a full {start, end} range when both dates are\n * valid, and — when `allowStartOnly` is set (endDefaultsToToday) — a {start, end: null}\n * result when only a valid start date has been entered. null otherwise.\n */\nexport const parseRange = (\n text: string,\n displayFormat: string,\n { minDate, maxDate, allowStartOnly = false }: ParseBounds = {},\n): ParsedRange | ParsedStart | 'empty' | null => {\n const trimmed = text.trim();\n if (trimmed === '') return 'empty';\n\n // Split on the spaced range separator ' - ' — the exact literal the mask inserts between\n // the two dates. Using the spaced form (not a bare '-') keeps date-internal dashes intact,\n // so '-'-separated formats like yyyy-MM-dd parse correctly too.\n const parts = trimmed.split(SEPARATOR);\n const startPart = parts[0];\n const start = startPart !== undefined ? parseToken(startPart, displayFormat) : null;\n\n if (parts.length === 2) {\n const endPart = parts[1];\n const end = endPart !== undefined ? parseToken(endPart, displayFormat) : null;\n if (start && end) {\n if (start.getTime() > end.getTime()) return null;\n if (minDate && start.getTime() < minDate.getTime()) return null;\n if (maxDate && end.getTime() > maxDate.getTime()) return null;\n return { start, end };\n }\n }\n\n // start-only: a valid start with the end still blank (or mask placeholders)\n if (allowStartOnly && start) {\n if (minDate && start.getTime() < minDate.getTime()) return null;\n if (maxDate && start.getTime() > maxDate.getTime()) return null;\n return { start, end: null };\n }\n\n return null;\n};\n\n/**\n * Commit-time fallback for the end date.\n * When enabled and the user committed a start but no end, fills the end with `now`.\n * `now` is injected so the whole computation does a single clock read per commit\n * and stays a pure function (the caller passes `new Date()` at Save).\n *\n * Returns the tuple unchanged when disabled, when both are empty / end is already\n * set, or when start is in the future relative to `now` (would yield a reversed\n * range). When `maxDate` precedes `now`, the filled end is clamped down to it.\n */\nexport const applyEndFallback = (\n start: Date | null,\n end: Date | null,\n enabled: boolean,\n now: Date,\n maxDate?: Date | null,\n): [Date | null, Date | null] => {\n if (!enabled) return [start, end];\n if (!start || end) return [start, end];\n if (start.getTime() > now.getTime()) return [start, end]; // reversed-range guard\n // Clamp DOWN to maxDate only — mirrors parseRange's instant comparison above\n // (end.getTime() > maxDate.getTime()); may no-op against a day-granular maxDate.\n const filledEnd = maxDate && maxDate.getTime() < now.getTime() ? maxDate : now;\n if (start.getTime() > filledEnd.getTime()) return [start, end]; // post-clamp guard\n return [start, filledEnd];\n};\n"],"names":["formatRange","start","end","displayFormat","startStr","format","endStr","matchPresetLabel","presets","sameInstant","a","b","getTime","match","find","p","range","label","buildDateMask","map","char","test","buildRangeMask","dateMask","parseToken","token","trimmed","trim","length","parsed","parse","Date","isValid","parseRange","text","minDate","maxDate","allowStartOnly","parts","split","startPart","undefined","endPart","applyEndFallback","enabled","now","filledEnd"],"mappings":"0DAIaA,IAAAA,EAAc,CACvBC,EACAC,EACAC,KAEA,IAAMC,EAAWH,EAAQI,EAAOJ,EAAOE,GAAiB,GAClDG,EAASJ,EAAMG,EAAOH,EAAKC,GAAiB,UAClD,AAAIC,GAAYE,EAAe,GAAGF,OAAuBE,GAAQ,CAC7DF,GACG,EACX,EAQaG,EAAmB,CAC5BN,EACAC,EACAM,KAEA,IAAMC,EAAc,CAACC,EAAgBC,IACjCD,AAAM,OAANA,EAAaC,AAAM,OAANA,EAAaA,AAAM,OAANA,GAAcD,EAAEE,OAAO,KAAOD,EAAEC,OAAO,GAC/DC,EAAQL,EAAQM,IAAI,CACtB,AAACC,GAAMN,EAAYR,EAAOc,EAAEC,KAAK,CAAC,EAAE,GAAKP,EAAYP,EAAKa,EAAEC,KAAK,CAAC,EAAE,GAExE,OAAOH,EAAQA,EAAMI,KAAK,CAAG,IACjC,EAOMC,EAAgB,AAACf,GACnB,IAAIA,EAAc,CAACgB,GAAG,CAAC,AAACC,GAAU,WAAWC,IAAI,CAACD,GAAQ,KAAOA,GAGxDE,EAAiB,AAACnB,IAC3B,IAAMoB,EAAWL,EAAcf,GAC/B,MAAO,IAAIoB,EAAU,IAAK,IAAK,OAAQA,EAAS,AACpD,EAoBMC,EAAa,CAACC,EAAetB,KAC/B,IAAMuB,EAAUD,EAAME,IAAI,GAC1B,GAAID,EAAQE,MAAM,GAAKzB,EAAcyB,MAAM,CAAE,OAAO,KACpD,IAAMC,EAASC,EAAMJ,EAASvB,EAAe,IAAI4B,aACjD,AAAKC,EAAQH,IAETxB,EAAOwB,EAAQ1B,KAAmBuB,EAC/BG,EAHsB,IAIjC,EAQaI,EAAa,CACtBC,EACA/B,EACA,CAAEgC,QAAAA,CAAO,CAAEC,QAAAA,CAAO,CAAEC,eAAAA,EAAiB,CAAA,CAAK,CAAe,CAAG,EAAE,IAE9D,IAAMX,EAAUQ,EAAKP,IAAI,GACzB,GAAID,AAAY,KAAZA,EAAgB,MAAO,QAK3B,IAAMY,EAAQZ,EAAQa,KAAK,CA5Fb,OA6FRC,EAAYF,CAAK,CAAC,EAAE,CACpBrC,EAAQuC,AAAcC,KAAAA,IAAdD,EAA0BhB,EAAWgB,EAAWrC,GAAiB,KAE/E,GAAImC,AAAiB,IAAjBA,EAAMV,MAAM,CAAQ,CACpB,IAAMc,EAAUJ,CAAK,CAAC,EAAE,CAClBpC,EAAMwC,AAAYD,KAAAA,IAAZC,EAAwBlB,EAAWkB,EAASvC,GAAiB,KACzE,GAAIF,GAASC,SACT,AAAID,EAAMW,OAAO,GAAKV,EAAIU,OAAO,IAC7BuB,GAAWlC,EAAMW,OAAO,GAAKuB,EAAQvB,OAAO,IAC5CwB,GAAWlC,EAAIU,OAAO,GAAKwB,EAAQxB,OAAO,GAFF,KAGrC,CAAEX,MAAAA,EAAOC,IAAAA,CAAI,CAE5B,QAGA,AAAImC,GAAkBpC,EAClB,AAAIkC,GAAWlC,EAAMW,OAAO,GAAKuB,EAAQvB,OAAO,IAC5CwB,GAAWnC,EAAMW,OAAO,GAAKwB,EAAQxB,OAAO,GADW,KAEpD,CAAEX,MAAAA,EAAOC,IAAK,IAAK,EAGvB,IACX,EAYayC,EAAmB,CAC5B1C,EACAC,EACA0C,EACAC,EACAT,KAEA,GAAI,CAACQ,GACD,CAAC3C,GAASC,GACVD,EAAMW,OAAO,GAAKiC,EAAIjC,OAAO,GAFnB,MAAO,CAACX,EAAOC,EAAI,CAKjC,IAAM4C,EAAYV,GAAWA,EAAQxB,OAAO,GAAKiC,EAAIjC,OAAO,GAAKwB,EAAUS,SAC3E,AAAI5C,EAAMW,OAAO,GAAKkC,EAAUlC,OAAO,GAAW,CAACX,EAAOC,EAAI,CACvD,CAACD,EAAO6C,EAAU,AAC7B"}
|
package/dist/css/vchasno-ui.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.vchasno-ui-pulse-animation{animation:box-shadow-pulse var(--vchasno-pulse-animation-duration) infinite;box-shadow:0 0 0 0 rgb(var(--vchasno-pulse-animation-color)/30%)}@keyframes box-shadow-pulse{0%{box-shadow:0 0 0 0 rgb(var(--vchasno-pulse-animation-color)/80%)}70%{box-shadow:0 0 0 10px rgb(var(--vchasno-pulse-animation-color)/0)}to{box-shadow:0 0 0 30px rgb(var(--vchasno-pulse-animation-color)/0)}}:root{--vchasno-ui-border-radius-none:0;--vchasno-ui-border-radius-xs:2px;--vchasno-ui-border-radius-sm:4px;--vchasno-ui-border-radius-md:8px;--vchasno-ui-border-radius-lg:12px;--vchasno-ui-border-radius-xl:16px;--vchasno-ui-border-radius-full:9999px;--vchasno-ui-font-size-2xs:10px;--vchasno-ui-font-size-xs:12px;--vchasno-ui-font-size-sm:14px;--vchasno-ui-font-size-md:16px;--vchasno-ui-font-size-lg:20px;--vchasno-ui-font-size-xl:24px;--vchasno-ui-font-size-2xl:32px;--vchasno-ui-font-weight-thin:100;--vchasno-ui-font-weight-extralight:200;--vchasno-ui-font-weight-light:300;--vchasno-ui-font-weight-regular:400;--vchasno-ui-font-weight-medium:500;--vchasno-ui-font-weight-semibold:600;--vchasno-ui-font-weight-bold:700;--vchasno-ui-font-weight-extrabold:800;--vchasno-ui-font-weight-black:900;--vchasno-ui-spacing-0:0px;--vchasno-ui-spacing-2:2px;--vchasno-ui-spacing-4:4px;--vchasno-ui-spacing-6:6px;--vchasno-ui-spacing-8:8px;--vchasno-ui-spacing-10:10px;--vchasno-ui-spacing-12:12px;--vchasno-ui-spacing-16:16px;--vchasno-ui-spacing-20:20px;--vchasno-ui-spacing-24:24px;--vchasno-ui-spacing-32:32px;--vchasno-ui-spacing-40:40px;--vchasno-ui-spacing-48:48px;--vchasno-ui-spacing-52:52px;--vchasno-ui-spacing-120:120px;--vchasno-ui-color-brand-ttn-25:#f2f3fa;--vchasno-ui-color-brand-ttn-50:#d9d6f6;--vchasno-ui-color-brand-ttn-100:#c6c0f2;--vchasno-ui-color-brand-ttn-200:#b4abef;--vchasno-ui-color-brand-ttn-300:#9f93eb;--vchasno-ui-color-brand-ttn-400:#8e7fe8;--vchasno-ui-color-brand-ttn-500:#7b69e4;--vchasno-ui-color-brand-ttn-600:#604adf;--vchasno-ui-color-brand-ttn-700:#5443bc;--vchasno-ui-color-brand-edo-25:#fffbf5;--vchasno-ui-color-brand-edo-50:#fff3e0;--vchasno-ui-color-brand-edo-100:#ffe8c2;--vchasno-ui-color-brand-edo-400:#ffb200;--vchasno-ui-color-brand-edo-500:#ff9c01;--vchasno-ui-color-brand-edo-600:#f58700;--vchasno-ui-color-brand-qes-25:#fff5f5;--vchasno-ui-color-brand-qes-50:#ffe9ea;--vchasno-ui-color-brand-qes-100:#ffd8d9;--vchasno-ui-color-brand-qes-200:#ffc0c2;--vchasno-ui-color-brand-qes-300:#ffaeb0;--vchasno-ui-color-brand-qes-400:#ff9a9d;--vchasno-ui-color-brand-qes-500:#ff878b;--vchasno-ui-color-brand-qes-600:#ff7c80;--vchasno-ui-color-brand-qes-700:#ff5a5f;--vchasno-ui-color-brand-qes-800:#e75459;--vchasno-ui-color-brand-kadry-25:#f8fcfb;--vchasno-ui-color-brand-kadry-50:#e4f3f1;--vchasno-ui-color-brand-kadry-100:#c7eae5;--vchasno-ui-color-brand-kadry-200:#b1e3dc;--vchasno-ui-color-brand-kadry-300:#9bdcd3;--vchasno-ui-color-brand-kadry-400:#86d5ca;--vchasno-ui-color-brand-kadry-500:#70cec1;--vchasno-ui-color-brand-kadry-600:#5bc7b8;--vchasno-ui-color-brand-kadry-700:#12747d;--vchasno-ui-color-brand-kadry-800:#07626a;--vchasno-ui-color-brand-zvit-25:#fff8f5;--vchasno-ui-color-brand-zvit-50:#ffe8db;--vchasno-ui-color-brand-zvit-100:#ffd7c2;--vchasno-ui-color-brand-zvit-200:#ffc7a8;--vchasno-ui-color-brand-zvit-300:#ffb68f;--vchasno-ui-color-brand-zvit-400:#ffa675;--vchasno-ui-color-brand-zvit-500:#ff955c;--vchasno-ui-color-brand-zvit-600:#ff8542;--vchasno-ui-color-brand-zvit-700:#ff752a;--vchasno-ui-color-brand-zvit-800:#f55d0b;--vchasno-ui-color-brand-edi-25:#f5f9ff;--vchasno-ui-color-brand-edi-50:#e0eeff;--vchasno-ui-color-brand-edi-100:#b8dafc;--vchasno-ui-color-brand-edi-200:#9cccfa;--vchasno-ui-color-brand-edi-300:#80bdf8;--vchasno-ui-color-brand-edi-400:#63aef6;--vchasno-ui-color-brand-edi-500:#469ff4;--vchasno-ui-color-brand-edi-600:#007cef;--vchasno-ui-color-brand-edi-700:#1a66c8;--vchasno-ui-color-brand-kasa-25:#fff5fb;--vchasno-ui-color-brand-kasa-50:#ffeff8;--vchasno-ui-color-brand-kasa-100:#ffd3eb;--vchasno-ui-color-brand-kasa-200:#ffc0e3;--vchasno-ui-color-brand-kasa-300:#ffb5de;--vchasno-ui-color-brand-kasa-400:#f39ecd;--vchasno-ui-color-brand-kasa-500:#e582b8;--vchasno-ui-color-brand-kasa-600:#ce6fa3;--vchasno-ui-color-utility-blue-25:#f5f9ff;--vchasno-ui-color-utility-blue-50:#ecf4ff;--vchasno-ui-color-utility-blue-100:#dbe9fa;--vchasno-ui-color-utility-blue-200:#4e9aff;--vchasno-ui-color-utility-blue-500:#1a66c8;--vchasno-ui-color-utility-blue-600:#14509e;--vchasno-ui-color-utility-blue-700:#124587;--vchasno-ui-color-utility-green-50:#f5fdec;--vchasno-ui-color-utility-green-100:#d3efc8;--vchasno-ui-color-utility-green-200:#abdf96;--vchasno-ui-color-utility-green-300:#1cb800;--vchasno-ui-color-utility-green-400:#138000;--vchasno-ui-color-utility-red-50:#fee;--vchasno-ui-color-utility-red-100:#ffd8d6;--vchasno-ui-color-utility-red-200:#fb7a7a;--vchasno-ui-color-utility-red-300:#f54f4f;--vchasno-ui-color-utility-red-400:#c1261a;--vchasno-ui-color-utility-orange-50:#fff2d6;--vchasno-ui-color-utility-orange-100:#ffebcc;--vchasno-ui-color-utility-orange-400:#ffb200;--vchasno-ui-color-utility-orange-500:#f58700;--vchasno-ui-color-gray-0:#fff;--vchasno-ui-color-gray-25:#f3f8fb;--vchasno-ui-color-gray-50:#e2e9f3;--vchasno-ui-color-gray-100:#bfcede;--vchasno-ui-color-gray-200:#9aaabf;--vchasno-ui-color-gray-300:#8194ac;--vchasno-ui-color-gray-400:#6e809a;--vchasno-ui-color-gray-500:#3b4250;--vchasno-ui-color-gray-600:#252d3d;--vchasno-ui-color-gray-700:#1d1d1f;--vchasno-ui-color-surface-disabled-subtle:var(--vchasno-ui-color-gray-25);--vchasno-ui-color-surface-disabled-default:var(--vchasno-ui-color-gray-50);--vchasno-ui-color-surface-disabled-strong:var(--vchasno-ui-color-gray-100);--vchasno-ui-color-surface-disabled-1:var(--vchasno-ui-color-gray-200);--vchasno-ui-color-surface-success-muted:var(--vchasno-ui-color-utility-green-50);--vchasno-ui-color-surface-success-subtle:var(--vchasno-ui-color-utility-green-100);--vchasno-ui-color-surface-success-default:var(--vchasno-ui-color-utility-green-300);--vchasno-ui-color-surface-error-muted:var(--vchasno-ui-color-utility-red-50);--vchasno-ui-color-surface-error-subtle:var(--vchasno-ui-color-utility-red-100);--vchasno-ui-color-surface-error-default:var(--vchasno-ui-color-utility-red-300);--vchasno-ui-color-surface-info-muted:var(--vchasno-ui-color-utility-blue-50);--vchasno-ui-color-surface-info-subtle:var(--vchasno-ui-color-utility-blue-100);--vchasno-ui-color-surface-info-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-surface-warning-muted:var(--vchasno-ui-color-utility-orange-50);--vchasno-ui-color-surface-warning-subtle:var(--vchasno-ui-color-utility-orange-100);--vchasno-ui-color-surface-warning-default:var(--vchasno-ui-color-utility-orange-400);--vchasno-ui-color-surface-accent-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-content-disabled-default:var(--vchasno-ui-color-gray-200);--vchasno-ui-color-content-accent-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-content-error-default:var(--vchasno-ui-color-utility-red-400);--vchasno-ui-color-content-info-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-content-success-default:var(--vchasno-ui-color-utility-green-400);--vchasno-ui-color-content-warning-default:var(--vchasno-ui-color-utility-orange-500);--vchasno-ui-color-border-accent-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-border-error-default:var(--vchasno-ui-color-utility-red-300);--vchasno-ui-color-border-success-default:var(--vchasno-ui-color-utility-green-300);--vchasno-ui-color-border-warning-default:var(--vchasno-ui-color-utility-orange-400);--vchasno-ui-transition-duration-sec:0.3s;--vchasno-ui-btn-default-bg:transparent;--vchasno-ui-btn-default-hover-bg:#e1e4ff;--vchasno-ui-btn-default-color:#6e809a;--vchasno-ui-btn-disabled-color:#6e809a;--vchasno-ui-btn-default-hover-color:#604adf;--vchasno-ui-btn-primary-bg:#604adf;--vchasno-ui-btn-primary-disabled-bg:#e2e9f3;--vchasno-ui-btn-primary-hover-bg:#3f328c;--vchasno-ui-btn-primary-color:#fff;--vchasno-ui-btn-secondary-bg:hsla(0,0%,100%,.04);--vchasno-ui-btn-secondary-disabled-bg:#f3f8fb;--vchasno-ui-btn-pink-bg:#ff5a5f;--vchasno-ui-btn-pink-hover-bg:#e75459;--vchasno-ui-btn-secondary-border-color:#e2e9f3;--vchasno-ui-btn-secondary-hover-bg:#e0eeff;--vchasno-ui-btn-secondary-color:var(--vchasno-ui-color-border-accent-default);--vchasno-ui-btn-light-bg:#fff;--vchasno-ui-btn-light-hover-bg:rgba(96,74,223,.2);--vchasno-ui-btn-light-color:#604adf;--vchasno-ui-btn-font-size:14px;--vchasno-ui-btn-danger-color:#f54f4f;--vchasno-ui-btn-danger-bg:rgba(231,52,52,.1);--vchasno-ui-btn-danger-hover-bg:#f54f4f;--vchasno-ui-btn-danger-hover-color:#fff;--vchasno-ui-input-bg-color:#fff;--vchasno-ui-input-bg-color-disabled:#f3f8fb;--vchasno-ui-input-border-color-default:#e2e9f3;--vchasno-ui-input-border-color-focused:#1a66c8;--vchasno-ui-input-outline-color-focused:rgba(196,233,255,.4);--vchasno-ui-input-outline-color-error:#ffeaeb;--vchasno-ui-input-color-error:#f54f4f;--vchasno-ui-input-bg-error:hsla(1,82%,66%,.1);--vchasno-ui-input-font-size:14px;--vchasno-ui-input-font-color:#252d3d;--vchasno-ui-input-placeholder-color:#6e809a;--vchasno-ui-input-font-color-disabled:#bfcede;--vchasno-ui-label-color-default:#6e809a;--vchasno-ui-label-color-focused:#1a66c8;--vchasno-ui-checkbox-bg-color:var(--vchasno-ui-color-surface-accent-default);--vchasno-ui-checkbox-outline-color:rgba(196,233,255,.4);--vchasno-ui-checkbox-disabled-bg:#bfcede;--vchasno-ui-checkbox-border-color:#bfcede;--vchasno-ui-checkbox-icon-color:#fff;--vchasno-ui-checkbox-font-size:14px;--vchasno-ui-select-option-bg-selected:#f3f8fb;--vchasno-ui-select-option-color-selected:#252d3d;--vchasno-ui-select-menu-border-color:transparent;--vchasno-ui-calendar-color:#6b5fff;--vchasno-ui-calendar-select-color:#1a66c8;--vchasno-ui-calendar-default-icon-color:#6e809a;--vchasno-ui-calendar-bg-hover:#ff9c01;--vchasno-ui-text-primary-color:#252d3d;--vchasno-ui-text-secondary-color:#5a6a81;--vchasno-ui-text-success-color:#1cb800;--vchasno-ui-text-warning-color:#ff9c01;--vchasno-ui-text-error-color:#f54f4f;--vchasno-ui-text-link-color:var(--vchasno-ui-color-content-accent-default);--vchasno-ui-alert-info-color:#1a66c8;--vchasno-ui-alert-info-bg:#e0eeff;--vchasno-ui-alert-warning-color:#ff9c01;--vchasno-ui-alert-warning-bg:#fff2d6;--vchasno-ui-alert-error-color:#f54f4f;--vchasno-ui-alert-error-bg:#ffe8e8;--vchasno-ui-alert-success-color:#1cb800;--vchasno-ui-alert-success-bg:#e7f3d9;--vchasno-ui-alert-config-color:#1a66c8;--vchasno-ui-alert-config-bg:#f3f8fb;--vchasno-ui-tabs-active-color:var(--vchasno-ui-color-surface-accent-default);--vchasno-ui-pagination-border-color:#1a66c8;--vchasno-ui-pagination-hover-bg-color:rgba(0,0,0,.1);--vchasno-ui-pagination-focus-shadow-color:rgba(196,233,255,.4);--vchasno-ui-pagination-size:32px;--vchasno-ui-switch-height:30px;--vchasno-ui-switch-color-bg:#bfcede;--vchasno-ui-switch-spinner-color:#bfcede;--vchasno-ui-switch-circle-color:#fff;--vchasno-ui-switch-active-color-bg:var(--vchasno-ui-color-surface-accent-default);--vchasno-ui-pulse-dot-color:#604adf;--vchasno-ui-pulse-dot-size:35px;--vchasno-ui-menu-button-bg:#f3f8fb;--vchasno-ui-menu-item-hover-bg:#f3f8fb;--vchasno-ui-slider-color:var(--vchasno-ui-color-surface-accent-default);--vchasno-ui-slider-thumb-box-shadow-color:rgba(196,233,255,.4);--vchasno-ui-tooltip-font-size:14px;--vchasno-ui-tooltip-line-height:18px;--vchasno-ui-tooltip-padding:10px;--vchasno-ui-tooltip-bg-mui:rgba(37,45,61,.9);--vchasno-ui-tooltip-text-color:#fff;--vchasno-ui-snackbar-color-light:#fff;--vchasno-ui-snackbar-color-dark:#fff;--vchasno-ui-snackbar-color-info:#1a66c8;--vchasno-ui-snackbar-color-success:#1cb800;--vchasno-ui-snackbar-color-warning:#ff9c01;--vchasno-ui-snackbar-color-error:#f54f4f;--vchasno-ui-snackbar-color-transparent:hsla(0,0%,100%,.7);--vchasno-ui-snackbar-icon-color-info:var(--vchasno-ui-snackbar-color-info);--vchasno-ui-snackbar-icon-color-success:var(--vchasno-ui-snackbar-color-success);--vchasno-ui-snackbar-icon-color-warning:var(--vchasno-ui-snackbar-color-warning);--vchasno-ui-snackbar-icon-color-error:var(--vchasno-ui-snackbar-color-error);--vchasno-ui-snackbar-toast-min-width:335px;--vchasno-ui-snackbar-toast-width:auto;--vchasno-ui-snackbar-toast-max-width:560px;--vchasno-ui-snackbar-toast-offset:16px;--vchasno-ui-snackbar-toast-top:max(var(--vchasno-ui-snackbar-toast-offset),env(safe-area-inset-top));--vchasno-ui-snackbar-toast-right:max(var(--vchasno-ui-snackbar-toast-offset),env(safe-area-inset-right));--vchasno-ui-snackbar-toast-left:max(var(--vchasno-ui-snackbar-toast-offset),env(safe-area-inset-left));--vchasno-ui-snackbar-toast-bottom:max(var(--vchasno-ui-snackbar-toast-offset),env(safe-area-inset-bottom));--vchasno-ui-snackbar-toast-background:rgba(0,0,0,.9);--vchasno-ui-snackbar-toast-min-height:24px;--vchasno-ui-snackbar-toast-max-height:800px;--vchasno-ui-snackbar-toast-bd-radius:var(--vchasno-ui-border-radius-md);--vchasno-ui-snackbar-font-family:sans-serif;--vchasno-ui-snackbar-z-index:9999;--vchasno-ui-snackbar-text-color-light:#757575;--vchasno-ui-snackbar-text-color-dark:#fff;--vchasno-ui-snackbar-text-color-info:#fff;--vchasno-ui-snackbar-text-color-success:#fff;--vchasno-ui-snackbar-text-color-warning:#fff;--vchasno-ui-snackbar-text-color-error:#fff;--vchasno-ui-snackbar-spinner-color:#616161;--vchasno-ui-snackbar-spinner-color-empty-area:#e0e0e0;--vchasno-ui-snackbar-color-progress-light:linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);--vchasno-ui-snackbar-color-progress-dark:#bb86fc;--vchasno-ui-snackbar-color-progress-info:var(--vchasno-ui-snackbar-color-info);--vchasno-ui-snackbar-color-progress-success:var(--vchasno-ui-snackbar-color-success);--vchasno-ui-snackbar-color-progress-warning:var(--vchasno-ui-snackbar-color-warning);--vchasno-ui-snackbar-color-progress-error:var(--vchasno-ui-snackbar-color-error);--vchasno-ui-snackbar-color-progress-bgo:0.2;--vchasno-ui-snackbar-action-button-color:#0094ff;--vchasno-pulse-animation-color:107 95 255;--vchasno-pulse-animation-duration:1.5s;--vchasno-ui-full-screen-modal-z-index:998;--vchasno-ui-full-screen-modal-header-height:60px;--vchasno-ui-full-screen-modal-bg-color:#fff}[data-brand=edo]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-edo-500);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-edo-500);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-edo-600);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-edo-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-edo-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-edo-500)}[data-brand=qes]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-qes-700);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-qes-700);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-qes-800);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-qes-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-qes-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-qes-700)}[data-brand=ttn]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-ttn-500);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-ttn-600);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-ttn-700);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-ttn-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-ttn-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-ttn-500)}[data-brand=kadry]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-kadry-700);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-kadry-700);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-kadry-800);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-kadry-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-kadry-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-kadry-700)}[data-brand=zvit]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-zvit-600);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-zvit-700);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-zvit-800);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-zvit-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-zvit-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-zvit-600)}[data-brand=edi]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-edi-600);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-edi-600);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-edi-700);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-edi-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-edi-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-edi-600)}[data-brand=kasa]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-kasa-500);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-kasa-500);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-kasa-600);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-kasa-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-kasa-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-kasa-500)}.vchasno-ui-scrollable-box{-webkit-overflow-scrolling:touch;box-sizing:border-box;max-height:unset}.vchasno-ui-scrollable-box__shadow{display:block;height:0;pointer-events:none;position:sticky;width:100%;z-index:2}.vchasno-ui-scrollable-box__shadow:after{content:"";display:block;height:10px;left:0;position:absolute;right:0}.vchasno-ui-scrollable-box__shadow.--top{top:0}.vchasno-ui-scrollable-box__shadow.--top:after{box-shadow:inset 0 10px 10px -10px rgba(0,0,0,.1);top:0}.vchasno-ui-scrollable-box__shadow.--bottom{bottom:0}.vchasno-ui-scrollable-box__shadow.--bottom:after{bottom:0;box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,.1)}.vchasno-ui-scrollable-box.--is-scrollable{overflow-y:auto;transform:translateZ(0)}.vchasno-ui-scrollable-box.--hide-scroll{-ms-overflow-style:none;scrollbar-width:none}.vchasno-ui-scrollable-box.--hide-scroll::-webkit-scrollbar{display:none}.vchasno-ui-scrollable-box.--prevent-parent-scroll{overscroll-behavior-y:contain}.vchasno-ui-scrollable-box.--smooth-scroll{scroll-behavior:smooth}.vchasno-ui-full-screen-modal{background-color:var(--vchasno-ui-full-screen-modal-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--vchasno-ui-full-screen-modal-z-index)}.vchasno-ui-full-screen-modal__header{align-items:center;border-bottom:1px solid var(--vchasno-ui-input-border-color-default);box-sizing:border-box;display:flex;height:var(--vchasno-ui-full-screen-modal-header-height);justify-content:space-between;padding-left:20px;padding-right:20px}.vchasno-ui-full-screen-modal__content{box-sizing:border-box;height:calc(100% - var(--vchasno-ui-full-screen-modal-header-height));overflow-y:auto}.vchasno-ui-full-screen-modal--animation{animation:vchasno-full-screen-modal-show var(--vchasno-ui-transition-duration-sec) ease-in-out}@keyframes vchasno-full-screen-modal-show{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.vchasno-ui-overflow-hidden{overflow:hidden}.vchasno-ui-alert{align-items:center;border-left:3px solid transparent;border-radius:var(--vchasno-ui-border-radius-sm);box-sizing:border-box;display:inline-flex;flex-shrink:0;font-size:14px;gap:12px;line-height:20px;min-height:40px;padding:12px 16px}.vchasno-ui-alert b,.vchasno-ui-alert strong{font-weight:700}.vchasno-ui-alert.--wide{width:100%}.vchasno-ui-alert.--left-border{border-left-width:4px}.vchasno-ui-alert__close-icon,.vchasno-ui-alert__icon-wrapper{align-items:center;display:flex;flex-shrink:0;font-size:20px;height:20px;justify-content:center;line-height:20px;width:20px}.vchasno-ui-alert.--info{background-color:var(--vchasno-ui-alert-info-bg,#e0eeff);border-color:var(--vchasno-ui-alert-info-color,#1a66c8)}.vchasno-ui-alert.--warning{background-color:var(--vchasno-ui-alert-warning-bg,#fff2d6);border-color:var(--vchasno-ui-alert-warning-color,#ff9c01)}.vchasno-ui-alert.--error{background-color:var(--vchasno-ui-alert-error-bg,#ffe8e8);border-color:var(--vchasno-ui-alert-error-color,#f54f4f)}.vchasno-ui-alert.--success{background-color:var(--vchasno-ui-alert-success-bg,#e7f3d9);border-color:var(--vchasno-ui-alert-success-color,#00b700)}.vchasno-ui-alert.--config{background-color:var(--vchasno-ui-alert-config-bg,#f3f8fb);border-color:var(--vchasno-ui-alert-config-color,#1a66c8)}.vchasno-ui-alert__close-icon{border-radius:var(--vchasno-ui-border-radius-sm);height:30px;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s);width:30px}.vchasno-ui-alert__close-icon:hover{background-color:hsla(0,0%,100%,.5);cursor:pointer}.vchasno-ui-alert.--close{display:none}.vchasno-ui-BubbleBox{--vchasno-ui-bubble-height:40px;--vchasno-ui-bubble-width:40px;--vchasno-ui-bubble-shadow:2px 4px 6px rgba(0,0,0,.2);box-sizing:border-box;min-height:calc(var(--vchasno-ui-bubble-height)*2);position:relative}.vchasno-ui-BubbleBox,.vchasno-ui-BubbleBox__svg{transition:var(--vchasno-ui-transition-duration-sec)}.vchasno-ui-BubbleBox__svg{left:0;overflow:visible;pointer-events:none;position:absolute;top:0;transform:translateZ(0);z-index:-1}.vchasno-ui-BubbleBox__svg path{transition:var(--vchasno-ui-transition-duration-sec)}.vchasno-ui-BubbleBox__svg.vchasno-ui-BubbleBox__shadow{filter:drop-shadow(var(--vchasno-ui-bubble-shadow))}.vchasno-ui-BubbleBox__bubble{align-items:center;border:0;border-radius:var(--vchasno-ui-border-radius-full);bottom:0;cursor:pointer;display:flex;height:var(--vchasno-ui-bubble-height);justify-content:center;margin:0;padding:0;position:absolute;right:0;transition:var(--vchasno-ui-transition-duration-sec);width:var(--vchasno-ui-bubble-width);z-index:1}.vchasno-ui-spinner{display:inline-block;height:20px;position:relative;width:20px}.vchasno-ui-spinner__svg{height:100%;inset:0;margin:auto;pointer-events:none;position:absolute;transform-origin:center center;width:100%}.vchasno-ui-spinner--circle .vchasno-ui-spinner__svg{animation:spinner-rotate 1.3s linear infinite}.vchasno-ui-spinner--circle .vchasno-ui-spinner__svg__circle{stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;stroke-width:5px;animation:spinner-rotate-dash 2s ease-in-out infinite}.vchasno-ui-spinner--logo .vchasno-ui-spinner__svg__path{stroke-dasharray:200;stroke-dashoffset:200;animation:spinner-logo-draw 2s ease-in-out infinite alternate,spinner-logo-pulse 2s linear infinite;animation-delay:0s,1s}.vchasno-ui-spinner--logo .vchasno-ui-spinner__svg{transform:scale(2)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@keyframes spinner-rotate-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes spinner-logo-draw{0%{stroke-dashoffset:195}to{stroke-dashoffset:0}}@keyframes spinner-logo-pulse{0%,50%,to{opacity:1}25%,75%{opacity:.5}}.vchasno-ui-button{align-items:center;background-color:var(--vchasno-ui-btn-default-bg);border:0;border-radius:var(--vchasno-ui-border-radius-md);color:var(--vchasno-ui-btn-default-color);display:inline-flex;font-size:var(--vchasno-ui-btn-font-size);font-weight:500;gap:5px;justify-content:center;min-height:40px;transition:min-height var(--vchasno-ui-transition-duration-sec,.3s),padding var(--vchasno-ui-transition-duration-sec,.3s),background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s);user-select:none}.vchasno-ui-button:disabled{cursor:not-allowed;opacity:.8}.vchasno-ui-button:not(:disabled):hover{background-color:var(--vchasno-ui-btn-default-hover-bg);color:var(--vchasno-ui-btn-default-hover-color);cursor:pointer}.vchasno-ui-button.--sm{min-width:40px;padding:0 15px}.vchasno-ui-button.--md{min-width:40px;padding:0 24px}.vchasno-ui-button.--lg{min-height:50px;min-width:50px;padding:0 32px}.vchasno-ui-button.--wide{width:100%}.vchasno-ui-button.--primary{background-color:var(--vchasno-ui-btn-primary-bg);border:1px solid transparent;color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-button.--primary.--outline{background-color:transparent;border:1px solid var(--vchasno-ui-btn-primary-bg);box-shadow:none;color:var(--vchasno-ui-btn-primary-bg)}.vchasno-ui-button.--secondary{background-color:var(--vchasno-ui-btn-secondary-bg);border:1px solid var(--vchasno-ui-btn-secondary-border-color);color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-button:disabled.--pink,.vchasno-ui-button:disabled.--primary,.vchasno-ui-button:disabled.--secondary{color:var(--vchasno-ui-btn-disabled-color)}.vchasno-ui-button:disabled.--primary{background-color:var(--vchasno-ui-btn-primary-disabled-bg)}.vchasno-ui-button:disabled.--secondary{background-color:var(--vchasno-ui-btn-secondary-disabled-bg)}.vchasno-ui-button.--primary:not(:disabled):hover{background-color:var(--vchasno-ui-btn-primary-hover-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-button.--primary.--outline:not(:disabled):hover{background-color:var(--vchasno-ui-btn-default-hover-bg);border:1px solid var(--vchasno-ui-btn-primary-bg);color:var(--vchasno-ui-btn-primary-bg)}.vchasno-ui-button.--secondary.--outline{background-color:transparent;border:1px solid var(--vchasno-ui-btn-secondary-bg);box-shadow:none;color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-button.--secondary:not(:disabled):hover{background-color:var(--vchasno-ui-btn-secondary-hover-bg);color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-button.--pink{background-color:var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-button.--pink.--outline{background-color:transparent;border:1px solid var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-pink-bg)}.vchasno-ui-button.--pink:disabled{background-color:var(--vchasno-ui-btn-primary-disabled-bg)}.vchasno-ui-button.--pink:not(:disabled):hover{background-color:var(--vchasno-ui-btn-pink-hover-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-button.--pink.--outline:not(:disabled):hover{background-color:transparent;border:1px solid var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-pink-bg)}.vchasno-ui-button.--danger{background-color:var(--vchasno-ui-btn-danger-bg);border:0;color:var(--vchasno-ui-btn-danger-color)}.vchasno-ui-button.--danger.--outline{background-color:transparent;border:1px solid var(--vchasno-ui-btn-danger-color);color:var(--vchasno-ui-btn-danger-color)}.vchasno-ui-button:disabled.--danger{background-color:rgba(182,202,219,.2);border:1px solid #bfcede;color:#bfcede}.vchasno-ui-button.--danger:not(:disabled):hover{background-color:var(--vchasno-ui-btn-danger-hover-bg);color:var(--vchasno-ui-btn-danger-hover-color)}.vchasno-ui-button.--danger.--outline:not(:disabled):hover{background-color:rgba(0,0,0,.1);border:1px solid var(--vchasno-ui-btn-danger-color,#ef6562);color:var(--vchasno-ui-btn-danger-color,#ef6562)}.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-btn-default-color);transition:stroke var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-btn-default-hover-color)}.vchasno-ui-button:disabled.--transparent{color:#bfcede}.vchasno-ui-button.--light{background-color:var(--vchasno-ui-btn-light-bg,#fff);border:1px solid transparent;color:var(--vchasno-ui-btn-light-color)}.vchasno-ui-button:disabled.--light{background-color:rgba(182,202,219,.2);border:none;color:#bfcede}.vchasno-ui-button.--light.--outline{background-color:var(--vchasno-ui-btn-primary-color);border:1px solid var(--vchasno-ui-btn-primary-bg);color:var(--vchasno-ui-btn-primary-bg)}.vchasno-ui-button.--light:not(:disabled):hover{background-color:var(--vchasno-ui-btn-light-hover-bg);color:var(--vchasno-ui-btn-primary-bg)}.vchasno-ui-button.--suppress-padding{padding:0}.vchasno-ui-checkbox{align-items:center;cursor:pointer;display:inline-flex;gap:8px;user-select:none}.vchasno-ui-checkbox__box{align-items:center;border:1px solid var(--vchasno-ui-checkbox-border-color);border-radius:var(--vchasno-ui-border-radius-xs);display:inline-flex;flex-shrink:0;height:16px;justify-content:center;outline:2px solid transparent;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),border var(--vchasno-ui-transition-duration-sec,.3s),outline var(--vchasno-ui-transition-duration-sec,.3s);width:16px}.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-checkbox-bg-color)}.vchasno-ui-checkbox__svg{color:transparent;transform:scale(0) translateZ(0);transition:color var(--vchasno-ui-transition-duration-sec),transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(.12,.4,.29,1.46)}.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg{display:none}.vchasno-ui-checkbox>input:checked+.vchasno-ui-checkbox__box{background-color:var(--vchasno-ui-checkbox-bg-color);border-color:var(--vchasno-ui-input-border-color-focused)}.vchasno-ui-checkbox>input:checked+.vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg{color:var(--vchasno-ui-checkbox-icon-color);transform:scale(1) translateZ(0)}.vchasno-ui-checkbox.--hover>input:not(:disabled)+.vchasno-ui-checkbox__box,.vchasno-ui-checkbox:hover>input:not(:disabled)+.vchasno-ui-checkbox__box,.vchasno-ui-checkbox>input:not(:disabled):active+.vchasno-ui-checkbox__box{border-color:var(--vchasno-ui-input-border-color-focused);outline:2px solid var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-checkbox>input:disabled:checked+.vchasno-ui-checkbox__box{background-color:var(--vchasno-ui-checkbox-disabled-bg,#bfcede);border-color:var(--vchasno-ui-checkbox-disabled-bg,#bfcede)}.vchasno-ui-checkbox>input:disabled:not(:checked)+.vchasno-ui-checkbox__box{border-color:var(--vchasno-ui-checkbox-disabled-border-color,#e2e9f3)}.vchasno-ui-checkbox>input:checked+.vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-checkbox-icon-color)}.vchasno-ui-checkbox__label{font-size:var(--vchasno-ui-checkbox-font-size);line-height:1;user-select:none}.vchasno-ui-checkbox.--disabled{color:var(--vchasno-ui-checkbox-disabled-bg,#bfcede);cursor:not-allowed}.vchasno-ui-meta{display:block;font-size:calc(var(--vchasno-ui-input-font-size)*.8);height:calc(var(--vchasno-ui-input-font-size)*.9);line-height:calc(var(--vchasno-ui-input-font-size)*.9);max-width:100%;padding-left:16px}.vchasno-ui-meta__error,.vchasno-ui-meta__hint{display:inline-block;max-width:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vchasno-ui-meta__hint{color:var(--vchasno-ui-label-color-default)}.vchasno-ui-meta__error{color:var(--vchasno-ui-input-color-error)}.vchasno-ui-label-text{align-self:flex-start;background-color:var(--vchasno-ui-input-bg-color);border-radius:var(--vchasno-ui-border-radius-sm);color:var(--vchasno-ui-label-color-default);display:inline-flex;font-size:var(--vchasno-ui-input-font-size);gap:3px;left:12px;line-height:calc(var(--vchasno-ui-input-font-size)*1.2);max-width:calc(100% - 20px);padding:0 4px;pointer-events:none;position:absolute;text-overflow:ellipsis;top:50%;transform:translateY(-50%);transition:color var(--vchasno-ui-transition-duration-sec,.3s),top .3s,font-size .3s;white-space:nowrap;z-index:1}.vchasno-ui-select .vchasno-ui-label-text{max-width:calc(100% - 40px)}.vchasno-ui-select__floating-label,[class^=vchasno-ui-]:focus:not(.--disabled,[aria-hidden])+*+.vchasno-ui-label-text,[class^=vchasno-ui-]:focus:not(.--disabled,[aria-hidden])+.vchasno-ui-label-text,[class^=vchasno-ui-]:not(:placeholder-shown,[aria-hidden])+*+.vchasno-ui-label-text,[class^=vchasno-ui-]:not(:placeholder-shown,[aria-hidden])+.vchasno-ui-label-text{background-color:var(--vchasno-ui-input-bg-color);font-size:12px;top:0}.vchasno-ui-date-picker.--disabled:not(.--not-empty) .vchasno-ui-label-text,.vchasno-ui-input__wrapper:has(input:disabled):has(:placeholder-shown) .vchasno-ui-label-text,.vchasno-ui-select:not(:has(.vchasno-ui-select__value-container--has-value)).--disabled .vchasno-ui-label-text{background-color:var(--vchasno-ui-input-bg-color-disabled)}label[class^=vchasno-ui-]:not(.--error):focus-within .vchasno-ui-label-text{color:var(--vchasno-ui-label-color-focused)}label[class^=vchasno-ui-]:not(.--disabled).--error .vchasno-ui-label-text{color:var(--vchasno-ui-input-color-error)}label[class^=vchasno-ui-]:not(.--disabled).--required .vchasno-ui-label-text:hover{cursor:text}.vchasno-ui-label-text sup{color:var(--vchasno-ui-input-color-error);display:none;font-size:calc(var(--vchasno-ui-input-font-size)*1.4);position:relative;top:-.2em;vertical-align:top}label[class^=vchasno-ui-].--required .vchasno-ui-label-text sup{display:inline-block}.vchasno-ui-label-text__title-icon{color:var(--vchasno-ui-label-color-default);display:none;transform:scale(.8)}.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon{display:block}.vchasno-ui-label-text__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__triangle{left:50px;position:absolute}.react-datepicker-popper[data-placement^=bottom]{margin-top:-6px}.react-datepicker-popper[data-placement^=top]{margin-top:6px}.react-datepicker-popper[data-placement^=right]{margin-left:-6px}.react-datepicker-popper[data-placement^=left]{margin-left:6px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{margin-left:-6px;position:absolute}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before{border:6px solid transparent;box-sizing:content-box;height:0;position:absolute;width:1px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before{border-bottom-color:var(--vchasno-ui-calendar-color);border-width:6px;content:"";left:-6px;z-index:-1}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{margin-top:-6px;top:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before{border-bottom-color:var(--vchasno-ui-input-bg-color);border-top:none}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before{border-bottom-color:var(--vchasno-ui-calendar-color);top:-1px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:after{background-color:var(--vchasno-ui-input-bg-color);content:"";display:block;height:7px;left:-3px;position:absolute;top:1px;transform:rotate(45deg);width:7px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{bottom:0;margin-bottom:-6px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before{border-bottom:none;border-top-color:var(--vchasno-ui-input-bg-color)}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before{border-top-color:var(--vchasno-ui-calendar-color);bottom:-1px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:after{background-color:var(--vchasno-ui-input-bg-color);bottom:1px;content:"";display:block;height:7px;left:-3px;position:absolute;transform:rotate(45deg);width:7px}.react-datepicker{background-color:var(--vchasno-ui-input-bg-color);border:1px solid var(--vchasno-ui-input-border-color-default);border-radius:var(--vchasno-ui-border-radius-md);box-shadow:0 4px 10px 0 #252d3d26;color:var(--vchasno-ui-input-font-color);display:inline-flex;font-size:14px;padding:10px;position:relative}.react-datepicker__time-container{float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:var(--vchasno-ui-border-radius-sm);display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:var(--vchasno-ui-border-radius-sm);position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:var(--vchasno-ui-border-radius-sm);margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:content-box;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{border-radius:var(--vchasno-ui-border-radius-md);height:30px;line-height:20px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:var(--vchasno-ui-calendar-color);color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:var(--vchasno-ui-calendar-color)}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:transparent;cursor:default}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:var(--vchasno-ui-border-radius-none)}.react-datepicker__header{padding-top:5px;position:relative;text-align:center}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:var(--vchasno-ui-border-radius-sm)}@media (width <= 480px){.react-datepicker{padding:0}}.react-datepicker-popper{z-index:100}.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle{left:auto;right:42px}.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle{left:42px;right:auto}.react-datepicker-time__header,.react-datepicker__current-month{color:var(--vchasno-ui-input-font-color);font-size:14px;font-weight:500;margin-top:0;padding:8px 0 15px;text-transform:capitalize}.react-datepicker__month-container{float:left}.react-datepicker__aria-live{display:none}.react-datepicker__month{display:flex;flex-direction:column;gap:1px;margin:0;text-align:center}.react-datepicker__day-names,.react-datepicker__week{white-space:nowrap}.react-datepicker__week{display:flex;gap:1px}.react-datepicker__day-name{text-transform:none}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{box-sizing:border-box;color:var(--vchasno-ui-input-font-color);cursor:pointer;display:inline-block;height:32px;line-height:30px;text-align:center;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s);width:32px}.react-datepicker__day-names .react-datepicker__day-name{font-weight:700;text-transform:capitalize}.react-datepicker__day:hover{background-color:#f2f6f7;border-radius:var(--vchasno-ui-border-radius-md)}.react-datepicker__day--today{border:1px solid var(--vchasno-ui-calendar-select-color);border-radius:var(--vchasno-ui-border-radius-md);font-weight:500}.react-datepicker__day--weekend{font-weight:400}.react-datepicker__day--outside-month{color:var(--vchasno-ui-color-surface-disabled-1)}.react-datepicker__day--disabled{color:#bfcede;cursor:not-allowed}.react-datepicker__day--disabled:hover{background-color:transparent}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected{background-color:var(--vchasno-ui-calendar-select-color);border-radius:var(--vchasno-ui-border-radius-md);color:#fff;font-weight:700}.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover{background-color:var(--vchasno-ui-calendar-select-color)}.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected){background-color:var(--vchasno-ui-calendar-select-color);border-radius:var(--vchasno-ui-border-radius-md);color:#fff}.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover{background-color:var(--vchasno-ui-calendar-select-color)}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range){background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range){background-color:#f0f0f0;color:var(--vchasno-ui-input-font-color)}.react-datepicker__input-container{position:relative}.react-datepicker__close-icon{background-color:transparent;border:0;bottom:0;cursor:pointer;height:20px;margin:auto;outline:none;position:absolute;right:35px;top:0;width:20px}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:rgba(0,0,0,.8);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (height <= 550px),(width <= 400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:14px}.react-datepicker__navigation{align-items:center;background-size:cover;border:none;border-radius:var(--vchasno-ui-border-radius-md);cursor:pointer;display:flex;height:30px;justify-content:center;line-height:1;position:absolute;top:15px;width:30px;z-index:1}.react-datepicker__navigation:hover{background-color:#f2f6f7}.react-datepicker__navigation--previous{left:10px}.react-datepicker__navigation-icon{display:none}.react-datepicker__navigation--next:before,.react-datepicker__navigation--previous:before{height:10px;inset:0;margin:auto;position:absolute;width:10px}.react-datepicker__navigation--previous:before{color:var(--vchasno-ui-calendar-default-icon-color);content:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA0Ljk5MmMwLS4yNi4xLS41MS4yOS0uNzFsNC0zLjk5Yy4zOS0uMzkgMS4wMy0uMzkgMS40MiAwIC4zOS4zOS4zOSAxLjAzIDAgMS40MmwtMy4yOSAzLjI4IDMuMjkgMy4yOWMuMzkuMzkuMzkgMS4wMyAwIDEuNDItLjM5LjM5LTEuMDMuMzktMS40MiAwTC4zIDUuNzEyYy0uMi0uMi0uMy0uNDYtLjMtLjcyWiIgZmlsbD0iIzZlODA5YSIvPjwvc3ZnPg==")}.react-datepicker__navigation--next{color:var(--vchasno-ui-calendar-default-icon-color);right:10px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:110px}.react-datepicker__navigation--next:before{content:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi4wMDMgNS4wMDNjMCAuMjYtLjEuNTEtLjI5LjcxbC00IDMuOTljLS4zOS4zOS0xLjAzLjM5LTEuNDIgMC0uMzktLjM5LS4zOS0xLjAzIDAtMS40MmwzLjI5LTMuMjgtMy4yOS0zLjI5Yy0uMzktLjM5LS4zOS0xLjAzIDAtMS40Mi4zOS0uMzkgMS4wMy0uMzkgMS40MiAwbDMuOTkgMy45OWMuMi4yLjMuNDYuMy43MloiIGZpbGw9IiM2ZTgwOWEiLz48L3N2Zz4=")}.react-datepicker__input-container input{appearance:none;background:var(--vchasno-ui-input-bg-color);border:1px solid var(--vchasno-ui-input-border-color-default,#bfcede);border-radius:var(--vchasno-ui-border-radius-md);box-sizing:border-box;font-size:var(--vchasno-ui-input-font-size,.8rem);height:30px;line-height:calc(var(--vchasno-ui-input-font-size, .8rem)*2);outline:1px solid transparent;padding:10px 15px;transition:border var(--vchasno-ui-transition-duration-sec,.3s),outline-color var(--vchasno-ui-transition-duration-sec,.3s);vertical-align:middle;width:100%}.react-datepicker__input-container input:disabled{background:var(--vchasno-ui-input-bg-color-disabled);color:var(--vchasno-ui-input-font-color)}.react-datepicker__input-container input:hover{cursor:default}.react-datepicker__input-container input:focus{border-color:var(--vchasno-ui-input-border-color-focused);outline:2px solid var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-date-picker{display:inline-flex;flex-direction:column;gap:5px}.vchasno-ui-date-picker.--wide{width:100%}.vchasno-ui-date-picker .vchasno-ui-date-picker__picker{height:50px}.vchasno-ui-date-picker__wrapper{border-radius:var(--vchasno-ui-border-radius-md);position:relative}.vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__custom-close-icon{color:var(--vchasno-ui-input-border-color-default);height:20px;pointer-events:none;position:absolute;right:35px;top:50%;transform:translateY(-50%) scale(0);transition:color var(--vchasno-ui-transition-duration-sec,.3s),transform var(--vchasno-ui-transition-duration-sec,.3s);width:20px}.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon) .vchasno-ui-date-picker__custom-close-icon{transform:translateY(-50%) scale(1)}@supports not selector(.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon)){.vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__custom-close-icon{transform:translateY(-50%) scale(1)}}.vchasno-ui-date-picker:not(.--disabled) .vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon:hover) .vchasno-ui-date-picker__custom-close-icon{color:var(--vchasno-ui-calendar-default-icon-color)}.vchasno-ui-date-picker.--not-empty .vchasno-ui-label-text,.vchasno-ui-date-picker.--with-mask .vchasno-ui-label-text,.vchasno-ui-date-picker__wrapper:focus-within .vchasno-ui-label-text{font-size:var(--vchasno-ui-font-size-xs);top:0}.vchasno-ui-date-picker__wrapper>.vchasno-ui-date-picker__custom-calendar-icon{color:var(--vchasno-ui-calendar-default-icon-color);pointer-events:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper>.vchasno-ui-spinner{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle{stroke:var(--vchasno-ui-calendar-color)}.vchasno-ui-date-picker .react-datepicker__input-container input{color:var(--vchasno-ui-input-font-color);font-size:var(--vchasno-ui-input-font-size);line-height:calc(var(--vchasno-ui-input-font-size)*1.2);overflow:hidden;padding:var(--vchasno-ui-spacing-16);padding-right:24px;text-overflow:ellipsis;white-space:nowrap}.vchasno-ui-date-picker .react-datepicker__aria-live{display:none}.vchasno-ui-date-picker.--disabled,.vchasno-ui-date-picker.--disabled .vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__picker{cursor:not-allowed;opacity:.8}.vchasno-ui-date-picker:not(.--disabled):hover,.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__picker{cursor:pointer}.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input{border-color:var(--vchasno-ui-input-border-color-focused);outline:2px solid var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-date-picker:not(.--disabled).--error .react-datepicker__input-container input{border-color:var(--vchasno-ui-input-color-error);color:var(--vchasno-ui-input-color-error);outline-color:var(--vchasno-ui-input-outline-color-error)}.vchasno-ui-date-picker.--is-label input::placeholder{visibility:hidden}.vchasno-ui-date-picker.--is-label:focus-within input::placeholder{visibility:visible}.vchasno-ui-date-picker[class*="--today-button-"] .react-datepicker{display:flex;flex-direction:column}.vchasno-ui-date-picker[class*="--today-button-"] .react-datepicker__today-button{align-items:center;border:0;border-radius:var(--vchasno-ui-border-radius-md);cursor:pointer;display:flex;font-size:var(--vchasno-ui-btn-font-size);font-weight:500;gap:5px;justify-content:center;margin-top:12px;min-height:40px;padding:0 24px;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-date-picker.--today-button-primary .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-primary-bg);border:1px solid transparent;color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-date-picker.--today-button-secondary .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-secondary-bg);border:1px solid var(--vchasno-ui-btn-secondary-border-color);color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-date-picker.--today-button-danger .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-danger-bg);border:0;color:var(--vchasno-ui-btn-danger-color)}.vchasno-ui-date-picker.--today-button-pink .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-date-picker.--today-button-primary .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-primary-hover-bg)}.vchasno-ui-date-picker.--today-button-secondary .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-secondary-hover-bg)}.vchasno-ui-date-picker.--today-button-danger .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-danger-hover-bg);color:var(--vchasno-ui-btn-danger-hover-color)}.vchasno-ui-date-picker.--today-button-pink .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-pink-hover-bg)}.vchasno-ui-datepicker-popper--today-button-danger .react-datepicker,.vchasno-ui-datepicker-popper--today-button-pink .react-datepicker,.vchasno-ui-datepicker-popper--today-button-primary .react-datepicker,.vchasno-ui-datepicker-popper--today-button-secondary .react-datepicker{display:flex;flex-direction:column}.vchasno-ui-datepicker-popper--today-button-danger .react-datepicker__today-button,.vchasno-ui-datepicker-popper--today-button-pink .react-datepicker__today-button,.vchasno-ui-datepicker-popper--today-button-primary .react-datepicker__today-button,.vchasno-ui-datepicker-popper--today-button-secondary .react-datepicker__today-button{align-items:center;border:0;border-radius:var(--vchasno-ui-border-radius-md);cursor:pointer;display:flex;font-size:var(--vchasno-ui-btn-font-size);font-weight:500;gap:5px;justify-content:center;margin-top:12px;min-height:40px;padding:0 24px;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-datepicker-popper--today-button-primary .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-primary-bg);border:1px solid transparent;color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-datepicker-popper--today-button-secondary .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-secondary-bg);border:1px solid var(--vchasno-ui-btn-secondary-border-color);color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-datepicker-popper--today-button-danger .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-danger-bg);border:0;color:var(--vchasno-ui-btn-danger-color)}.vchasno-ui-datepicker-popper--today-button-pink .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-datepicker-popper--today-button-primary .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-primary-hover-bg)}.vchasno-ui-datepicker-popper--today-button-secondary .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-secondary-hover-bg)}.vchasno-ui-datepicker-popper--today-button-danger .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-danger-hover-bg);color:var(--vchasno-ui-btn-danger-hover-color)}.vchasno-ui-datepicker-popper--today-button-pink .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-pink-hover-bg)}.vchasno-ui-select{display:inline-flex;flex-direction:column;gap:5px;position:relative}.vchasno-ui-select .vchasno-ui-label-text{top:0;transform:translateY(16px);transition:font-size .3s,transform .3s}.vchasno-ui-select:focus-within .vchasno-ui-label-text,.vchasno-ui-select:has(.vchasno-ui-select__value-container--has-value) .vchasno-ui-label-text{font-size:12px;transform:translateY(-8px)}@supports not selector(.vchasno-ui-select:has(.vchasno-ui-select__value-container--has-value)){.vchasno-ui-select .vchasno-ui-label-text{font-size:12px;transform:translateY(-42px)}}.vchasno-ui-select.--wide{width:100%}.vchasno-ui-select .vchasno-ui-select__control{border-color:var(--vchasno-ui-input-border-color-default);border-radius:var(--vchasno-ui-border-radius-md);cursor:pointer;font-family:Roboto,Arial,Tahoma,Helvetica,Liberation Sans,sans-serif;min-height:50px;min-width:200px;outline:3px solid transparent;transition:border var(--vchasno-ui-transition-duration-sec,.3s),outline var(--vchasno-ui-transition-duration-sec,.3s)}.--pulse .vchasno-ui-select__control{animation:box-shadow-pulse 1.5s infinite;box-shadow:0 0 0 0 rgb(var(--vchasno-pulse-animation-color)/30%)}.vchasno-ui-select .vchasno-ui-select__control:has(.vchasno-ui-select__input){cursor:text}.vchasno-ui-select.--disabled .vchasno-ui-select__control{background-color:var(--vchasno-ui-input-bg-color-disabled);border:1px solid var(--vchasno-ui-input-border-color-default)}.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled{opacity:.8}.vchasno-ui-select .vchasno-ui-select__option,.vchasno-ui-select__menu-portal .vchasno-ui-select__option{transition:opacity var(--vchasno-ui-transition-duration-sec,.3s),background-color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select.--disabled .vchasno-ui-select__option,.vchasno-ui-select__menu-portal.--disabled .vchasno-ui-select__option{background-color:#f3f8fb;opacity:.8;pointer-events:none}.vchasno-ui-select .vchasno-ui-select__menu,.vchasno-ui-select__menu-portal .vchasno-ui-select__menu{border:1px solid var(--vchasno-ui-input-border-color-default);border-radius:var(--vchasno-ui-border-radius-md);box-shadow:none;margin-bottom:6px;margin-top:4px;transition:border var(--vchasno-ui-transition-duration-sec,.3s);z-index:100}.vchasno-ui-select .vchasno-ui-select__control--menu-is-open{border-color:red;outline-color:var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-select.--error .vchasno-ui-select__control,.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open{border:1px solid var(--vchasno-ui-text-error-color);outline-color:var(--vchasno-ui-input-outline-color-error)}.vchasno-ui-select .vchasno-ui-select__control:hover{border-color:var(--vchasno-ui-input-border-color-focused);outline-color:var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-select .vchasno-ui-select__dropdown-indicator,.vchasno-ui-select .vchasno-ui-select__input-container{color:var(--vchasno-ui-input-font-color)}.vchasno-ui-select.--error .vchasno-ui-select__control:hover{border-color:var(--vchasno-ui-text-error-color);outline-color:var(--vchasno-ui-input-outline-color-error)}.vchasno-ui-select .vchasno-ui-select__control--menu-is-open .vchasno-ui-select__dropdown-indicator{transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator{color:var(--vchasno-ui-text-error-color)}.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open .vchasno-ui-select__dropdown-indicator{color:var(--vchasno-ui-text-error-color);transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select.--error .vchasno-ui-select__control:hover .vchasno-ui-select__dropdown-indicator,.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover{color:var(--vchasno-ui-text-error-color)}.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open+.vchasno-ui-select__menu,.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open{border:1px solid var(--vchasno-ui-text-error-color)}.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused{border-color:var(--vchasno-ui-input-border-color-focused);box-shadow:none;outline-color:var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-select .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-input-border-color-focused)}.vchasno-ui-select .vchasno-ui-select__placeholder{color:var(--vchasno-ui-input-placeholder-color);font-size:var(--vchasno-ui-input-font-size);font-weight:400}.vchasno-ui-select:not(:focus-within,:not(:has(.vchasno-ui-label-text))) .vchasno-ui-select__placeholder{visibility:hidden}.vchasno-ui-select .vchasno-ui-select__clear-indicator{border-radius:var(--vchasno-ui-border-radius-sm);color:var(--vchasno-ui-input-font-color);padding:0;transition:color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover{color:var(--vchasno-ui-input-color-error);cursor:pointer}.vchasno-ui-select .vchasno-ui-select__option--is-focused,.vchasno-ui-select .vchasno-ui-select__option--is-selected,.vchasno-ui-select .vchasno-ui-select__option:hover,.vchasno-ui-select__menu-portal .vchasno-ui-select__option--is-focused,.vchasno-ui-select__menu-portal .vchasno-ui-select__option--is-selected,.vchasno-ui-select__menu-portal .vchasno-ui-select__option:hover{background-color:var(--vchasno-ui-select-option-bg-selected);color:var(--vchasno-ui-select-option-color-selected)}.vchasno-ui-select .vchasno-ui-select__option:hover,.vchasno-ui-select__menu-portal .vchasno-ui-select__option:hover{cursor:pointer}.vchasno-ui-select.--disabled{cursor:not-allowed}.vchasno-ui-select .vchasno-ui-select__multi-value{background-color:var(--vchasno-ui-select-option-bg-selected);border-radius:var(--vchasno-ui-border-radius-md);outline:1px solid var(--vchasno-ui-select-menu-border-color,transparent)}.vchasno-ui-select .vchasno-ui-select__multi-value__remove{background-color:transparent;color:var(--vchasno-ui-label-color-default);padding:0 3px 0 0;transition:color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover{background-color:transparent;color:var(--vchasno-ui-input-color-error);cursor:pointer}.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg{height:20px;width:20px}.vchasno-ui-select .vchasno-ui-select__indicators{padding-right:5px}.vchasno-ui-select .vchasno-ui-select__value-container{padding:5px 14px}.vchasno-ui-select .vchasno-ui-select__multi-value__label{font-size:14px;padding:6px 0 6px 6px}.vchasno-ui-select .vchasno-ui-select .vchasno-ui-select__multi-value__remove{font-size:14px;padding:6px}.vchasno-ui-date-range-picker{display:inline-flex;flex-direction:column;gap:5px;max-width:260px;width:100%}.vchasno-ui-date-range-picker .vchasno-ui-date-range-picker__picker{height:50px}.vchasno-ui-date-range-picker__wrapper{border-radius:var(--vchasno-ui-border-radius-md);position:relative}.vchasno-ui-date-range-picker__wrapper>.vchasno-ui-date-range-picker__custom-calendar-icon{background-color:var(--vchasno-ui-btn-light-bg);color:var(--vchasno-ui-calendar-default-icon-color);pointer-events:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-date-range-picker.--loading .vchasno-ui-date-range-picker__wrapper>.vchasno-ui-spinner{height:18px;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.vchasno-ui-date-range-picker.--loading .vchasno-ui-date-range-picker__wrapper .vchasno-ui-spinner circle{stroke:var(--vchasno-ui-calendar-color)}.vchasno-ui-date-range-picker__clear-btn{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;justify-content:center;padding:0}.vchasno-ui-date-range-picker__wrapper .vchasno-ui-date-range-picker__custom-close-icon{background-color:var(--vchasno-ui-btn-light-bg);color:var(--vchasno-ui-input-border-color-default);cursor:pointer;height:20px;position:absolute;right:35px;top:50%;transform:translateY(-50%);transition:color var(--vchasno-ui-transition-duration-sec,.3s);width:20px}.vchasno-ui-date-range-picker__wrapper .vchasno-ui-date-range-picker__custom-close-icon:hover{color:var(--vchasno-ui-calendar-default-icon-color)}.vchasno-ui-date-range-picker__preset-select .vchasno-ui-label-text,.vchasno-ui-date-range-picker__preset-select:focus-within .vchasno-ui-label-text{font-size:var(--vchasno-ui-input-font-size);top:50%;transform:translateY(-50%)}.vchasno-ui-date-range-picker.--not-empty .vchasno-ui-label-text,.vchasno-ui-date-range-picker__wrapper:focus-within .vchasno-ui-label-text{font-size:var(--vchasno-ui-font-size-xs);top:0}.vchasno-ui-date-range-picker.--disabled,.vchasno-ui-date-range-picker.--disabled .vchasno-ui-date-range-picker__wrapper .vchasno-ui-date-range-picker__picker{cursor:not-allowed;opacity:.8}.vchasno-ui-date-range-picker:not(.--disabled):hover,.vchasno-ui-date-range-picker:not(.--disabled):hover .vchasno-ui-date-range-picker__wrapper .vchasno-ui-date-range-picker__picker{cursor:pointer}.vchasno-ui-date-range-picker:not(.--disabled):hover .react-datepicker__input-container input{border-color:var(--vchasno-ui-input-border-color-focused);outline:2px solid var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-date-range-picker:not(.--disabled).--error .react-datepicker__input-container input{border-color:var(--vchasno-ui-input-color-error);color:var(--vchasno-ui-input-color-error);outline-color:var(--vchasno-ui-input-outline-color-error)}.vchasno-ui-date-range-picker.--is-label input::placeholder{visibility:hidden}.vchasno-ui-date-range-picker.--is-label:focus-within input::placeholder{visibility:visible}.vchasno-ui-date-range-picker-popper .react-datepicker{display:grid;grid:". ." "buttons buttons";grid-auto-columns:1fr;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;padding:0}.vchasno-ui-date-range-picker .react-datepicker__children-container{align-items:start;border-top:1px solid var(--vchasno-ui-input-border-color-default);display:flex;gap:16px;grid-area:buttons;padding:20px 12px}.vchasno-ui-date-range-picker .react-datepicker__week{gap:1px 0}.vchasno-ui-date-range-picker.--wide{width:100%}.vchasno-ui-date-range-picker-popper .react-datepicker__month-container{float:none;padding:8px}.vchasno-ui-date-range-picker__presets{width:100%}.vchasno-ui-date-range-picker__preset-select .vchasno-ui-select__control{height:40px;min-height:auto}.vchasno-ui-date-range-picker__preset-select .vchasno-ui-select__value-container{padding:0 14px}.vchasno-ui-date-range-picker__actions{display:flex;gap:8px;justify-content:flex-end;width:100%}.vchasno-ui-date-range-picker__cancel-btn{background-color:var(--vchasno-ui-btn-secondary-bg);border:1px solid var(--vchasno-ui-btn-secondary-border-color);border-radius:var(--vchasno-ui-border-radius-md);color:var(--vchasno-ui-btn-secondary-color);cursor:pointer;font-size:var(--vchasno-ui-btn-font-size);font-weight:500;min-height:40px;padding:0 24px;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-date-range-picker__cancel-btn:hover{background-color:var(--vchasno-ui-btn-secondary-hover-bg)}.vchasno-ui-date-range-picker__save-btn{background-color:var(
|
|
1
|
+
.vchasno-ui-pulse-animation{animation:box-shadow-pulse var(--vchasno-pulse-animation-duration) infinite;box-shadow:0 0 0 0 rgb(var(--vchasno-pulse-animation-color)/30%)}@keyframes box-shadow-pulse{0%{box-shadow:0 0 0 0 rgb(var(--vchasno-pulse-animation-color)/80%)}70%{box-shadow:0 0 0 10px rgb(var(--vchasno-pulse-animation-color)/0)}to{box-shadow:0 0 0 30px rgb(var(--vchasno-pulse-animation-color)/0)}}:root{--vchasno-ui-border-radius-none:0;--vchasno-ui-border-radius-xs:2px;--vchasno-ui-border-radius-sm:4px;--vchasno-ui-border-radius-md:8px;--vchasno-ui-border-radius-lg:12px;--vchasno-ui-border-radius-xl:16px;--vchasno-ui-border-radius-full:9999px;--vchasno-ui-font-size-2xs:10px;--vchasno-ui-font-size-xs:12px;--vchasno-ui-font-size-sm:14px;--vchasno-ui-font-size-md:16px;--vchasno-ui-font-size-lg:20px;--vchasno-ui-font-size-xl:24px;--vchasno-ui-font-size-2xl:32px;--vchasno-ui-font-weight-thin:100;--vchasno-ui-font-weight-extralight:200;--vchasno-ui-font-weight-light:300;--vchasno-ui-font-weight-regular:400;--vchasno-ui-font-weight-medium:500;--vchasno-ui-font-weight-semibold:600;--vchasno-ui-font-weight-bold:700;--vchasno-ui-font-weight-extrabold:800;--vchasno-ui-font-weight-black:900;--vchasno-ui-spacing-0:0px;--vchasno-ui-spacing-2:2px;--vchasno-ui-spacing-4:4px;--vchasno-ui-spacing-6:6px;--vchasno-ui-spacing-8:8px;--vchasno-ui-spacing-10:10px;--vchasno-ui-spacing-12:12px;--vchasno-ui-spacing-16:16px;--vchasno-ui-spacing-20:20px;--vchasno-ui-spacing-24:24px;--vchasno-ui-spacing-32:32px;--vchasno-ui-spacing-40:40px;--vchasno-ui-spacing-48:48px;--vchasno-ui-spacing-52:52px;--vchasno-ui-spacing-120:120px;--vchasno-ui-color-brand-ttn-25:#f2f3fa;--vchasno-ui-color-brand-ttn-50:#d9d6f6;--vchasno-ui-color-brand-ttn-100:#c6c0f2;--vchasno-ui-color-brand-ttn-200:#b4abef;--vchasno-ui-color-brand-ttn-300:#9f93eb;--vchasno-ui-color-brand-ttn-400:#8e7fe8;--vchasno-ui-color-brand-ttn-500:#7b69e4;--vchasno-ui-color-brand-ttn-600:#604adf;--vchasno-ui-color-brand-ttn-700:#5443bc;--vchasno-ui-color-brand-edo-25:#fffbf5;--vchasno-ui-color-brand-edo-50:#fff3e0;--vchasno-ui-color-brand-edo-100:#ffe8c2;--vchasno-ui-color-brand-edo-400:#ffb200;--vchasno-ui-color-brand-edo-500:#ff9c01;--vchasno-ui-color-brand-edo-600:#f58700;--vchasno-ui-color-brand-qes-25:#fff5f5;--vchasno-ui-color-brand-qes-50:#ffe9ea;--vchasno-ui-color-brand-qes-100:#ffd8d9;--vchasno-ui-color-brand-qes-200:#ffc0c2;--vchasno-ui-color-brand-qes-300:#ffaeb0;--vchasno-ui-color-brand-qes-400:#ff9a9d;--vchasno-ui-color-brand-qes-500:#ff878b;--vchasno-ui-color-brand-qes-600:#ff7c80;--vchasno-ui-color-brand-qes-700:#ff5a5f;--vchasno-ui-color-brand-qes-800:#e75459;--vchasno-ui-color-brand-kadry-25:#f8fcfb;--vchasno-ui-color-brand-kadry-50:#e4f3f1;--vchasno-ui-color-brand-kadry-100:#c7eae5;--vchasno-ui-color-brand-kadry-200:#b1e3dc;--vchasno-ui-color-brand-kadry-300:#9bdcd3;--vchasno-ui-color-brand-kadry-400:#86d5ca;--vchasno-ui-color-brand-kadry-500:#70cec1;--vchasno-ui-color-brand-kadry-600:#5bc7b8;--vchasno-ui-color-brand-kadry-700:#12747d;--vchasno-ui-color-brand-kadry-800:#07626a;--vchasno-ui-color-brand-zvit-25:#fff8f5;--vchasno-ui-color-brand-zvit-50:#ffe8db;--vchasno-ui-color-brand-zvit-100:#ffd7c2;--vchasno-ui-color-brand-zvit-200:#ffc7a8;--vchasno-ui-color-brand-zvit-300:#ffb68f;--vchasno-ui-color-brand-zvit-400:#ffa675;--vchasno-ui-color-brand-zvit-500:#ff955c;--vchasno-ui-color-brand-zvit-600:#ff8542;--vchasno-ui-color-brand-zvit-700:#ff752a;--vchasno-ui-color-brand-zvit-800:#f55d0b;--vchasno-ui-color-brand-edi-25:#f5f9ff;--vchasno-ui-color-brand-edi-50:#e0eeff;--vchasno-ui-color-brand-edi-100:#b8dafc;--vchasno-ui-color-brand-edi-200:#9cccfa;--vchasno-ui-color-brand-edi-300:#80bdf8;--vchasno-ui-color-brand-edi-400:#63aef6;--vchasno-ui-color-brand-edi-500:#469ff4;--vchasno-ui-color-brand-edi-600:#007cef;--vchasno-ui-color-brand-edi-700:#1a66c8;--vchasno-ui-color-brand-kasa-25:#fff5fb;--vchasno-ui-color-brand-kasa-50:#ffeff8;--vchasno-ui-color-brand-kasa-100:#ffd3eb;--vchasno-ui-color-brand-kasa-200:#ffc0e3;--vchasno-ui-color-brand-kasa-300:#ffb5de;--vchasno-ui-color-brand-kasa-400:#f39ecd;--vchasno-ui-color-brand-kasa-500:#e582b8;--vchasno-ui-color-brand-kasa-600:#ce6fa3;--vchasno-ui-color-utility-blue-25:#f5f9ff;--vchasno-ui-color-utility-blue-50:#ecf4ff;--vchasno-ui-color-utility-blue-100:#dbe9fa;--vchasno-ui-color-utility-blue-200:#4e9aff;--vchasno-ui-color-utility-blue-500:#1a66c8;--vchasno-ui-color-utility-blue-600:#14509e;--vchasno-ui-color-utility-blue-700:#124587;--vchasno-ui-color-utility-green-50:#f5fdec;--vchasno-ui-color-utility-green-100:#d3efc8;--vchasno-ui-color-utility-green-200:#abdf96;--vchasno-ui-color-utility-green-300:#1cb800;--vchasno-ui-color-utility-green-400:#138000;--vchasno-ui-color-utility-red-50:#fee;--vchasno-ui-color-utility-red-100:#ffd8d6;--vchasno-ui-color-utility-red-200:#fb7a7a;--vchasno-ui-color-utility-red-300:#f54f4f;--vchasno-ui-color-utility-red-400:#c1261a;--vchasno-ui-color-utility-orange-50:#fff2d6;--vchasno-ui-color-utility-orange-100:#ffebcc;--vchasno-ui-color-utility-orange-400:#ffb200;--vchasno-ui-color-utility-orange-500:#f58700;--vchasno-ui-color-gray-0:#fff;--vchasno-ui-color-gray-25:#f3f8fb;--vchasno-ui-color-gray-50:#e2e9f3;--vchasno-ui-color-gray-100:#bfcede;--vchasno-ui-color-gray-200:#9aaabf;--vchasno-ui-color-gray-300:#8194ac;--vchasno-ui-color-gray-400:#6e809a;--vchasno-ui-color-gray-500:#3b4250;--vchasno-ui-color-gray-600:#252d3d;--vchasno-ui-color-gray-700:#1d1d1f;--vchasno-ui-color-surface-disabled-subtle:var(--vchasno-ui-color-gray-25);--vchasno-ui-color-surface-disabled-default:var(--vchasno-ui-color-gray-50);--vchasno-ui-color-surface-disabled-strong:var(--vchasno-ui-color-gray-100);--vchasno-ui-color-surface-disabled-1:var(--vchasno-ui-color-gray-200);--vchasno-ui-color-surface-success-muted:var(--vchasno-ui-color-utility-green-50);--vchasno-ui-color-surface-success-subtle:var(--vchasno-ui-color-utility-green-100);--vchasno-ui-color-surface-success-default:var(--vchasno-ui-color-utility-green-300);--vchasno-ui-color-surface-error-muted:var(--vchasno-ui-color-utility-red-50);--vchasno-ui-color-surface-error-subtle:var(--vchasno-ui-color-utility-red-100);--vchasno-ui-color-surface-error-default:var(--vchasno-ui-color-utility-red-300);--vchasno-ui-color-surface-info-muted:var(--vchasno-ui-color-utility-blue-50);--vchasno-ui-color-surface-info-subtle:var(--vchasno-ui-color-utility-blue-100);--vchasno-ui-color-surface-info-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-surface-warning-muted:var(--vchasno-ui-color-utility-orange-50);--vchasno-ui-color-surface-warning-subtle:var(--vchasno-ui-color-utility-orange-100);--vchasno-ui-color-surface-warning-default:var(--vchasno-ui-color-utility-orange-400);--vchasno-ui-color-surface-accent-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-content-disabled-default:var(--vchasno-ui-color-gray-200);--vchasno-ui-color-content-accent-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-content-error-default:var(--vchasno-ui-color-utility-red-400);--vchasno-ui-color-content-info-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-content-success-default:var(--vchasno-ui-color-utility-green-400);--vchasno-ui-color-content-warning-default:var(--vchasno-ui-color-utility-orange-500);--vchasno-ui-color-border-accent-default:var(--vchasno-ui-color-utility-blue-500);--vchasno-ui-color-border-error-default:var(--vchasno-ui-color-utility-red-300);--vchasno-ui-color-border-success-default:var(--vchasno-ui-color-utility-green-300);--vchasno-ui-color-border-warning-default:var(--vchasno-ui-color-utility-orange-400);--vchasno-ui-transition-duration-sec:0.3s;--vchasno-ui-btn-default-bg:transparent;--vchasno-ui-btn-default-hover-bg:#e1e4ff;--vchasno-ui-btn-default-color:#6e809a;--vchasno-ui-btn-disabled-color:#6e809a;--vchasno-ui-btn-default-hover-color:#604adf;--vchasno-ui-btn-primary-bg:#604adf;--vchasno-ui-btn-primary-disabled-bg:#e2e9f3;--vchasno-ui-btn-primary-hover-bg:#3f328c;--vchasno-ui-btn-primary-color:#fff;--vchasno-ui-btn-secondary-bg:hsla(0,0%,100%,.04);--vchasno-ui-btn-secondary-disabled-bg:#f3f8fb;--vchasno-ui-btn-pink-bg:#ff5a5f;--vchasno-ui-btn-pink-hover-bg:#e75459;--vchasno-ui-btn-secondary-border-color:#e2e9f3;--vchasno-ui-btn-secondary-hover-bg:#e0eeff;--vchasno-ui-btn-secondary-color:var(--vchasno-ui-color-border-accent-default);--vchasno-ui-btn-light-bg:#fff;--vchasno-ui-btn-light-hover-bg:rgba(96,74,223,.2);--vchasno-ui-btn-light-color:#604adf;--vchasno-ui-btn-font-size:14px;--vchasno-ui-btn-danger-color:#f54f4f;--vchasno-ui-btn-danger-bg:rgba(231,52,52,.1);--vchasno-ui-btn-danger-hover-bg:#f54f4f;--vchasno-ui-btn-danger-hover-color:#fff;--vchasno-ui-input-bg-color:#fff;--vchasno-ui-input-bg-color-disabled:#f3f8fb;--vchasno-ui-input-border-color-default:#e2e9f3;--vchasno-ui-input-border-color-focused:#1a66c8;--vchasno-ui-input-outline-color-focused:rgba(196,233,255,.4);--vchasno-ui-input-outline-color-error:#ffeaeb;--vchasno-ui-input-color-error:#f54f4f;--vchasno-ui-input-bg-error:hsla(1,82%,66%,.1);--vchasno-ui-input-font-size:14px;--vchasno-ui-input-font-color:#252d3d;--vchasno-ui-input-placeholder-color:#6e809a;--vchasno-ui-input-font-color-disabled:#bfcede;--vchasno-ui-label-color-default:#6e809a;--vchasno-ui-label-color-focused:#1a66c8;--vchasno-ui-checkbox-bg-color:var(--vchasno-ui-color-surface-accent-default);--vchasno-ui-checkbox-outline-color:rgba(196,233,255,.4);--vchasno-ui-checkbox-disabled-bg:#bfcede;--vchasno-ui-checkbox-border-color:#bfcede;--vchasno-ui-checkbox-icon-color:#fff;--vchasno-ui-checkbox-font-size:14px;--vchasno-ui-select-option-bg-selected:#f3f8fb;--vchasno-ui-select-option-color-selected:#252d3d;--vchasno-ui-select-menu-border-color:transparent;--vchasno-ui-calendar-color:#6b5fff;--vchasno-ui-calendar-select-color:#1a66c8;--vchasno-ui-calendar-default-icon-color:#6e809a;--vchasno-ui-calendar-bg-hover:#ff9c01;--vchasno-ui-text-primary-color:#252d3d;--vchasno-ui-text-secondary-color:#5a6a81;--vchasno-ui-text-success-color:#1cb800;--vchasno-ui-text-warning-color:#ff9c01;--vchasno-ui-text-error-color:#f54f4f;--vchasno-ui-text-link-color:var(--vchasno-ui-color-content-accent-default);--vchasno-ui-alert-info-color:#1a66c8;--vchasno-ui-alert-info-bg:#e0eeff;--vchasno-ui-alert-warning-color:#ff9c01;--vchasno-ui-alert-warning-bg:#fff2d6;--vchasno-ui-alert-error-color:#f54f4f;--vchasno-ui-alert-error-bg:#ffe8e8;--vchasno-ui-alert-success-color:#1cb800;--vchasno-ui-alert-success-bg:#e7f3d9;--vchasno-ui-alert-config-color:#1a66c8;--vchasno-ui-alert-config-bg:#f3f8fb;--vchasno-ui-tabs-active-color:var(--vchasno-ui-color-surface-accent-default);--vchasno-ui-pagination-border-color:#1a66c8;--vchasno-ui-pagination-hover-bg-color:rgba(0,0,0,.1);--vchasno-ui-pagination-focus-shadow-color:rgba(196,233,255,.4);--vchasno-ui-pagination-size:32px;--vchasno-ui-switch-height:30px;--vchasno-ui-switch-color-bg:#bfcede;--vchasno-ui-switch-spinner-color:#bfcede;--vchasno-ui-switch-circle-color:#fff;--vchasno-ui-switch-active-color-bg:var(--vchasno-ui-color-surface-accent-default);--vchasno-ui-pulse-dot-color:#604adf;--vchasno-ui-pulse-dot-size:35px;--vchasno-ui-menu-button-bg:#f3f8fb;--vchasno-ui-menu-item-hover-bg:#f3f8fb;--vchasno-ui-slider-color:var(--vchasno-ui-color-surface-accent-default);--vchasno-ui-slider-thumb-box-shadow-color:rgba(196,233,255,.4);--vchasno-ui-tooltip-font-size:14px;--vchasno-ui-tooltip-line-height:18px;--vchasno-ui-tooltip-padding:10px;--vchasno-ui-tooltip-bg-mui:rgba(37,45,61,.9);--vchasno-ui-tooltip-text-color:#fff;--vchasno-ui-snackbar-color-light:#fff;--vchasno-ui-snackbar-color-dark:#fff;--vchasno-ui-snackbar-color-info:#1a66c8;--vchasno-ui-snackbar-color-success:#1cb800;--vchasno-ui-snackbar-color-warning:#ff9c01;--vchasno-ui-snackbar-color-error:#f54f4f;--vchasno-ui-snackbar-color-transparent:hsla(0,0%,100%,.7);--vchasno-ui-snackbar-icon-color-info:var(--vchasno-ui-snackbar-color-info);--vchasno-ui-snackbar-icon-color-success:var(--vchasno-ui-snackbar-color-success);--vchasno-ui-snackbar-icon-color-warning:var(--vchasno-ui-snackbar-color-warning);--vchasno-ui-snackbar-icon-color-error:var(--vchasno-ui-snackbar-color-error);--vchasno-ui-snackbar-toast-min-width:335px;--vchasno-ui-snackbar-toast-width:auto;--vchasno-ui-snackbar-toast-max-width:560px;--vchasno-ui-snackbar-toast-offset:16px;--vchasno-ui-snackbar-toast-top:max(var(--vchasno-ui-snackbar-toast-offset),env(safe-area-inset-top));--vchasno-ui-snackbar-toast-right:max(var(--vchasno-ui-snackbar-toast-offset),env(safe-area-inset-right));--vchasno-ui-snackbar-toast-left:max(var(--vchasno-ui-snackbar-toast-offset),env(safe-area-inset-left));--vchasno-ui-snackbar-toast-bottom:max(var(--vchasno-ui-snackbar-toast-offset),env(safe-area-inset-bottom));--vchasno-ui-snackbar-toast-background:rgba(0,0,0,.9);--vchasno-ui-snackbar-toast-min-height:24px;--vchasno-ui-snackbar-toast-max-height:800px;--vchasno-ui-snackbar-toast-bd-radius:var(--vchasno-ui-border-radius-md);--vchasno-ui-snackbar-font-family:sans-serif;--vchasno-ui-snackbar-z-index:9999;--vchasno-ui-snackbar-text-color-light:#757575;--vchasno-ui-snackbar-text-color-dark:#fff;--vchasno-ui-snackbar-text-color-info:#fff;--vchasno-ui-snackbar-text-color-success:#fff;--vchasno-ui-snackbar-text-color-warning:#fff;--vchasno-ui-snackbar-text-color-error:#fff;--vchasno-ui-snackbar-spinner-color:#616161;--vchasno-ui-snackbar-spinner-color-empty-area:#e0e0e0;--vchasno-ui-snackbar-color-progress-light:linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);--vchasno-ui-snackbar-color-progress-dark:#bb86fc;--vchasno-ui-snackbar-color-progress-info:var(--vchasno-ui-snackbar-color-info);--vchasno-ui-snackbar-color-progress-success:var(--vchasno-ui-snackbar-color-success);--vchasno-ui-snackbar-color-progress-warning:var(--vchasno-ui-snackbar-color-warning);--vchasno-ui-snackbar-color-progress-error:var(--vchasno-ui-snackbar-color-error);--vchasno-ui-snackbar-color-progress-bgo:0.2;--vchasno-ui-snackbar-action-button-color:#0094ff;--vchasno-pulse-animation-color:107 95 255;--vchasno-pulse-animation-duration:1.5s;--vchasno-ui-full-screen-modal-z-index:998;--vchasno-ui-full-screen-modal-header-height:60px;--vchasno-ui-full-screen-modal-bg-color:#fff}[data-brand=edo]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-edo-500);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-edo-500);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-edo-600);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-edo-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-edo-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-edo-500)}[data-brand=qes]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-qes-700);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-qes-700);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-qes-800);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-qes-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-qes-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-qes-700)}[data-brand=ttn]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-ttn-500);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-ttn-600);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-ttn-700);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-ttn-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-ttn-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-ttn-500)}[data-brand=kadry]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-kadry-700);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-kadry-700);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-kadry-800);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-kadry-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-kadry-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-kadry-700)}[data-brand=zvit]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-zvit-600);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-zvit-700);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-zvit-800);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-zvit-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-zvit-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-zvit-600)}[data-brand=edi]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-edi-600);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-edi-600);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-edi-700);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-edi-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-edi-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-edi-600)}[data-brand=kasa]{--vchasno-ui-color-content-brand-default:var(--vchasno-ui-color-brand-kasa-500);--vchasno-ui-color-surface-brand-default:var(--vchasno-ui-color-brand-kasa-500);--vchasno-ui-color-surface-brand-default-hover:var(--vchasno-ui-color-brand-kasa-600);--vchasno-ui-color-surface-brand-muted:var(--vchasno-ui-color-brand-kasa-25);--vchasno-ui-color-surface-brand-muted-hover:var(--vchasno-ui-color-brand-kasa-50);--vchasno-ui-color-border-brand-default:var(--vchasno-ui-color-brand-kasa-500)}.vchasno-ui-scrollable-box{-webkit-overflow-scrolling:touch;box-sizing:border-box;max-height:unset}.vchasno-ui-scrollable-box__shadow{display:block;height:0;pointer-events:none;position:sticky;width:100%;z-index:2}.vchasno-ui-scrollable-box__shadow:after{content:"";display:block;height:10px;left:0;position:absolute;right:0}.vchasno-ui-scrollable-box__shadow.--top{top:0}.vchasno-ui-scrollable-box__shadow.--top:after{box-shadow:inset 0 10px 10px -10px rgba(0,0,0,.1);top:0}.vchasno-ui-scrollable-box__shadow.--bottom{bottom:0}.vchasno-ui-scrollable-box__shadow.--bottom:after{bottom:0;box-shadow:inset 0 -10px 10px -10px rgba(0,0,0,.1)}.vchasno-ui-scrollable-box.--is-scrollable{overflow-y:auto;transform:translateZ(0)}.vchasno-ui-scrollable-box.--hide-scroll{-ms-overflow-style:none;scrollbar-width:none}.vchasno-ui-scrollable-box.--hide-scroll::-webkit-scrollbar{display:none}.vchasno-ui-scrollable-box.--prevent-parent-scroll{overscroll-behavior-y:contain}.vchasno-ui-scrollable-box.--smooth-scroll{scroll-behavior:smooth}.vchasno-ui-full-screen-modal{background-color:var(--vchasno-ui-full-screen-modal-bg-color);height:100%;left:0;position:fixed;top:0;width:100%;z-index:var(--vchasno-ui-full-screen-modal-z-index)}.vchasno-ui-full-screen-modal__header{align-items:center;border-bottom:1px solid var(--vchasno-ui-input-border-color-default);box-sizing:border-box;display:flex;height:var(--vchasno-ui-full-screen-modal-header-height);justify-content:space-between;padding-left:20px;padding-right:20px}.vchasno-ui-full-screen-modal__content{box-sizing:border-box;height:calc(100% - var(--vchasno-ui-full-screen-modal-header-height));overflow-y:auto}.vchasno-ui-full-screen-modal--animation{animation:vchasno-full-screen-modal-show var(--vchasno-ui-transition-duration-sec) ease-in-out}@keyframes vchasno-full-screen-modal-show{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.vchasno-ui-overflow-hidden{overflow:hidden}.vchasno-ui-alert{align-items:center;border-left:3px solid transparent;border-radius:var(--vchasno-ui-border-radius-sm);box-sizing:border-box;display:inline-flex;flex-shrink:0;font-size:14px;gap:12px;line-height:20px;min-height:40px;padding:12px 16px}.vchasno-ui-alert b,.vchasno-ui-alert strong{font-weight:700}.vchasno-ui-alert.--wide{width:100%}.vchasno-ui-alert.--left-border{border-left-width:4px}.vchasno-ui-alert__close-icon,.vchasno-ui-alert__icon-wrapper{align-items:center;display:flex;flex-shrink:0;font-size:20px;height:20px;justify-content:center;line-height:20px;width:20px}.vchasno-ui-alert.--info{background-color:var(--vchasno-ui-alert-info-bg,#e0eeff);border-color:var(--vchasno-ui-alert-info-color,#1a66c8)}.vchasno-ui-alert.--warning{background-color:var(--vchasno-ui-alert-warning-bg,#fff2d6);border-color:var(--vchasno-ui-alert-warning-color,#ff9c01)}.vchasno-ui-alert.--error{background-color:var(--vchasno-ui-alert-error-bg,#ffe8e8);border-color:var(--vchasno-ui-alert-error-color,#f54f4f)}.vchasno-ui-alert.--success{background-color:var(--vchasno-ui-alert-success-bg,#e7f3d9);border-color:var(--vchasno-ui-alert-success-color,#00b700)}.vchasno-ui-alert.--config{background-color:var(--vchasno-ui-alert-config-bg,#f3f8fb);border-color:var(--vchasno-ui-alert-config-color,#1a66c8)}.vchasno-ui-alert__close-icon{border-radius:var(--vchasno-ui-border-radius-sm);height:30px;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s);width:30px}.vchasno-ui-alert__close-icon:hover{background-color:hsla(0,0%,100%,.5);cursor:pointer}.vchasno-ui-alert.--close{display:none}.vchasno-ui-BubbleBox{--vchasno-ui-bubble-height:40px;--vchasno-ui-bubble-width:40px;--vchasno-ui-bubble-shadow:2px 4px 6px rgba(0,0,0,.2);box-sizing:border-box;min-height:calc(var(--vchasno-ui-bubble-height)*2);position:relative}.vchasno-ui-BubbleBox,.vchasno-ui-BubbleBox__svg{transition:var(--vchasno-ui-transition-duration-sec)}.vchasno-ui-BubbleBox__svg{left:0;overflow:visible;pointer-events:none;position:absolute;top:0;transform:translateZ(0);z-index:-1}.vchasno-ui-BubbleBox__svg path{transition:var(--vchasno-ui-transition-duration-sec)}.vchasno-ui-BubbleBox__svg.vchasno-ui-BubbleBox__shadow{filter:drop-shadow(var(--vchasno-ui-bubble-shadow))}.vchasno-ui-BubbleBox__bubble{align-items:center;border:0;border-radius:var(--vchasno-ui-border-radius-full);bottom:0;cursor:pointer;display:flex;height:var(--vchasno-ui-bubble-height);justify-content:center;margin:0;padding:0;position:absolute;right:0;transition:var(--vchasno-ui-transition-duration-sec);width:var(--vchasno-ui-bubble-width);z-index:1}.vchasno-ui-spinner{display:inline-block;height:20px;position:relative;width:20px}.vchasno-ui-spinner__svg{height:100%;inset:0;margin:auto;pointer-events:none;position:absolute;transform-origin:center center;width:100%}.vchasno-ui-spinner--circle .vchasno-ui-spinner__svg{animation:spinner-rotate 1.3s linear infinite}.vchasno-ui-spinner--circle .vchasno-ui-spinner__svg__circle{stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;stroke-width:5px;animation:spinner-rotate-dash 2s ease-in-out infinite}.vchasno-ui-spinner--logo .vchasno-ui-spinner__svg__path{stroke-dasharray:200;stroke-dashoffset:200;animation:spinner-logo-draw 2s ease-in-out infinite alternate,spinner-logo-pulse 2s linear infinite;animation-delay:0s,1s}.vchasno-ui-spinner--logo .vchasno-ui-spinner__svg{transform:scale(2)}@keyframes spinner-rotate{to{transform:rotate(1turn)}}@keyframes spinner-rotate-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}@keyframes spinner-logo-draw{0%{stroke-dashoffset:195}to{stroke-dashoffset:0}}@keyframes spinner-logo-pulse{0%,50%,to{opacity:1}25%,75%{opacity:.5}}.vchasno-ui-button{align-items:center;background-color:var(--vchasno-ui-btn-default-bg);border:0;border-radius:var(--vchasno-ui-border-radius-md);color:var(--vchasno-ui-btn-default-color);display:inline-flex;font-size:var(--vchasno-ui-btn-font-size);font-weight:500;gap:5px;justify-content:center;min-height:40px;transition:min-height var(--vchasno-ui-transition-duration-sec,.3s),padding var(--vchasno-ui-transition-duration-sec,.3s),background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s);user-select:none}.vchasno-ui-button:disabled{cursor:not-allowed;opacity:.8}.vchasno-ui-button:not(:disabled):hover{background-color:var(--vchasno-ui-btn-default-hover-bg);color:var(--vchasno-ui-btn-default-hover-color);cursor:pointer}.vchasno-ui-button.--sm{min-width:40px;padding:0 15px}.vchasno-ui-button.--md{min-width:40px;padding:0 24px}.vchasno-ui-button.--lg{min-height:50px;min-width:50px;padding:0 32px}.vchasno-ui-button.--wide{width:100%}.vchasno-ui-button.--primary{background-color:var(--vchasno-ui-btn-primary-bg);border:1px solid transparent;color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-button.--primary.--outline{background-color:transparent;border:1px solid var(--vchasno-ui-btn-primary-bg);box-shadow:none;color:var(--vchasno-ui-btn-primary-bg)}.vchasno-ui-button.--secondary{background-color:var(--vchasno-ui-btn-secondary-bg);border:1px solid var(--vchasno-ui-btn-secondary-border-color);color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-button:disabled.--pink,.vchasno-ui-button:disabled.--primary,.vchasno-ui-button:disabled.--secondary{color:var(--vchasno-ui-btn-disabled-color)}.vchasno-ui-button:disabled.--primary{background-color:var(--vchasno-ui-btn-primary-disabled-bg)}.vchasno-ui-button:disabled.--secondary{background-color:var(--vchasno-ui-btn-secondary-disabled-bg)}.vchasno-ui-button.--primary:not(:disabled):hover{background-color:var(--vchasno-ui-btn-primary-hover-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-button.--primary.--outline:not(:disabled):hover{background-color:var(--vchasno-ui-btn-default-hover-bg);border:1px solid var(--vchasno-ui-btn-primary-bg);color:var(--vchasno-ui-btn-primary-bg)}.vchasno-ui-button.--secondary.--outline{background-color:transparent;border:1px solid var(--vchasno-ui-btn-secondary-bg);box-shadow:none;color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-button.--secondary:not(:disabled):hover{background-color:var(--vchasno-ui-btn-secondary-hover-bg);color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-button.--pink{background-color:var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-button.--pink.--outline{background-color:transparent;border:1px solid var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-pink-bg)}.vchasno-ui-button.--pink:disabled{background-color:var(--vchasno-ui-btn-primary-disabled-bg)}.vchasno-ui-button.--pink:not(:disabled):hover{background-color:var(--vchasno-ui-btn-pink-hover-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-button.--pink.--outline:not(:disabled):hover{background-color:transparent;border:1px solid var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-pink-bg)}.vchasno-ui-button.--danger{background-color:var(--vchasno-ui-btn-danger-bg);border:0;color:var(--vchasno-ui-btn-danger-color)}.vchasno-ui-button.--danger.--outline{background-color:transparent;border:1px solid var(--vchasno-ui-btn-danger-color);color:var(--vchasno-ui-btn-danger-color)}.vchasno-ui-button:disabled.--danger{background-color:rgba(182,202,219,.2);border:1px solid #bfcede;color:#bfcede}.vchasno-ui-button.--danger:not(:disabled):hover{background-color:var(--vchasno-ui-btn-danger-hover-bg);color:var(--vchasno-ui-btn-danger-hover-color)}.vchasno-ui-button.--danger.--outline:not(:disabled):hover{background-color:rgba(0,0,0,.1);border:1px solid var(--vchasno-ui-btn-danger-color,#ef6562);color:var(--vchasno-ui-btn-danger-color,#ef6562)}.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-btn-default-color);transition:stroke var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-btn-default-hover-color)}.vchasno-ui-button:disabled.--transparent{color:#bfcede}.vchasno-ui-button.--light{background-color:var(--vchasno-ui-btn-light-bg,#fff);border:1px solid transparent;color:var(--vchasno-ui-btn-light-color)}.vchasno-ui-button:disabled.--light{background-color:rgba(182,202,219,.2);border:none;color:#bfcede}.vchasno-ui-button.--light.--outline{background-color:var(--vchasno-ui-btn-primary-color);border:1px solid var(--vchasno-ui-btn-primary-bg);color:var(--vchasno-ui-btn-primary-bg)}.vchasno-ui-button.--light:not(:disabled):hover{background-color:var(--vchasno-ui-btn-light-hover-bg);color:var(--vchasno-ui-btn-primary-bg)}.vchasno-ui-button.--suppress-padding{padding:0}.vchasno-ui-checkbox{align-items:center;cursor:pointer;display:inline-flex;gap:8px;user-select:none}.vchasno-ui-checkbox__box{align-items:center;border:1px solid var(--vchasno-ui-checkbox-border-color);border-radius:var(--vchasno-ui-border-radius-xs);display:inline-flex;flex-shrink:0;height:16px;justify-content:center;outline:2px solid transparent;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),border var(--vchasno-ui-transition-duration-sec,.3s),outline var(--vchasno-ui-transition-duration-sec,.3s);width:16px}.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-checkbox-bg-color)}.vchasno-ui-checkbox__svg{color:transparent;transform:scale(0) translateZ(0);transition:color var(--vchasno-ui-transition-duration-sec),transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(.12,.4,.29,1.46)}.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg{display:none}.vchasno-ui-checkbox>input:checked+.vchasno-ui-checkbox__box{background-color:var(--vchasno-ui-checkbox-bg-color);border-color:var(--vchasno-ui-input-border-color-focused)}.vchasno-ui-checkbox>input:checked+.vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg{color:var(--vchasno-ui-checkbox-icon-color);transform:scale(1) translateZ(0)}.vchasno-ui-checkbox.--hover>input:not(:disabled)+.vchasno-ui-checkbox__box,.vchasno-ui-checkbox:hover>input:not(:disabled)+.vchasno-ui-checkbox__box,.vchasno-ui-checkbox>input:not(:disabled):active+.vchasno-ui-checkbox__box{border-color:var(--vchasno-ui-input-border-color-focused);outline:2px solid var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-checkbox>input:disabled:checked+.vchasno-ui-checkbox__box{background-color:var(--vchasno-ui-checkbox-disabled-bg,#bfcede);border-color:var(--vchasno-ui-checkbox-disabled-bg,#bfcede)}.vchasno-ui-checkbox>input:disabled:not(:checked)+.vchasno-ui-checkbox__box{border-color:var(--vchasno-ui-checkbox-disabled-border-color,#e2e9f3)}.vchasno-ui-checkbox>input:checked+.vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-checkbox-icon-color)}.vchasno-ui-checkbox__label{font-size:var(--vchasno-ui-checkbox-font-size);line-height:1;user-select:none}.vchasno-ui-checkbox.--disabled{color:var(--vchasno-ui-checkbox-disabled-bg,#bfcede);cursor:not-allowed}.vchasno-ui-meta{display:block;font-size:calc(var(--vchasno-ui-input-font-size)*.8);height:calc(var(--vchasno-ui-input-font-size)*.9);line-height:calc(var(--vchasno-ui-input-font-size)*.9);max-width:100%;padding-left:16px}.vchasno-ui-meta__error,.vchasno-ui-meta__hint{display:inline-block;max-width:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vchasno-ui-meta__hint{color:var(--vchasno-ui-label-color-default)}.vchasno-ui-meta__error{color:var(--vchasno-ui-input-color-error)}.vchasno-ui-label-text{align-self:flex-start;background-color:var(--vchasno-ui-input-bg-color);border-radius:var(--vchasno-ui-border-radius-sm);color:var(--vchasno-ui-label-color-default);display:inline-flex;font-size:var(--vchasno-ui-input-font-size);gap:3px;left:12px;line-height:calc(var(--vchasno-ui-input-font-size)*1.2);max-width:calc(100% - 20px);padding:0 4px;pointer-events:none;position:absolute;text-overflow:ellipsis;top:50%;transform:translateY(-50%);transition:color var(--vchasno-ui-transition-duration-sec,.3s),top .3s,font-size .3s;white-space:nowrap;z-index:1}.vchasno-ui-select .vchasno-ui-label-text{max-width:calc(100% - 40px)}.vchasno-ui-select__floating-label,[class^=vchasno-ui-]:focus:not(.--disabled,[aria-hidden])+*+.vchasno-ui-label-text,[class^=vchasno-ui-]:focus:not(.--disabled,[aria-hidden])+.vchasno-ui-label-text,[class^=vchasno-ui-]:not(:placeholder-shown,[aria-hidden])+*+.vchasno-ui-label-text,[class^=vchasno-ui-]:not(:placeholder-shown,[aria-hidden])+.vchasno-ui-label-text{background-color:var(--vchasno-ui-input-bg-color);font-size:12px;top:0}.vchasno-ui-date-picker.--disabled:not(.--not-empty) .vchasno-ui-label-text,.vchasno-ui-input__wrapper:has(input:disabled):has(:placeholder-shown) .vchasno-ui-label-text,.vchasno-ui-select:not(:has(.vchasno-ui-select__value-container--has-value)).--disabled .vchasno-ui-label-text{background-color:var(--vchasno-ui-input-bg-color-disabled)}label[class^=vchasno-ui-]:not(.--error):focus-within .vchasno-ui-label-text{color:var(--vchasno-ui-label-color-focused)}label[class^=vchasno-ui-]:not(.--disabled).--error .vchasno-ui-label-text{color:var(--vchasno-ui-input-color-error)}label[class^=vchasno-ui-]:not(.--disabled).--required .vchasno-ui-label-text:hover{cursor:text}.vchasno-ui-label-text sup{color:var(--vchasno-ui-input-color-error);display:none;font-size:calc(var(--vchasno-ui-input-font-size)*1.4);position:relative;top:-.2em;vertical-align:top}label[class^=vchasno-ui-].--required .vchasno-ui-label-text sup{display:inline-block}.vchasno-ui-label-text__title-icon{color:var(--vchasno-ui-label-color-default);display:none;transform:scale(.8)}.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon{display:block}.vchasno-ui-label-text__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.react-datepicker__triangle{left:50px;position:absolute}.react-datepicker-popper[data-placement^=bottom]{margin-top:-6px}.react-datepicker-popper[data-placement^=top]{margin-top:6px}.react-datepicker-popper[data-placement^=right]{margin-left:-6px}.react-datepicker-popper[data-placement^=left]{margin-left:6px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{margin-left:-6px;position:absolute}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before{border:6px solid transparent;box-sizing:content-box;height:0;position:absolute;width:1px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before{border-bottom-color:var(--vchasno-ui-calendar-color);border-width:6px;content:"";left:-6px;z-index:-1}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{margin-top:-6px;top:0}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before{border-bottom-color:var(--vchasno-ui-input-bg-color);border-top:none}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before{border-bottom-color:var(--vchasno-ui-calendar-color);top:-1px}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:after{background-color:var(--vchasno-ui-input-bg-color);content:"";display:block;height:7px;left:-3px;position:absolute;top:1px;transform:rotate(45deg);width:7px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow{bottom:0;margin-bottom:-6px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before{border-bottom:none;border-top-color:var(--vchasno-ui-input-bg-color)}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before{border-top-color:var(--vchasno-ui-calendar-color);bottom:-1px}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:after{background-color:var(--vchasno-ui-input-bg-color);bottom:1px;content:"";display:block;height:7px;left:-3px;position:absolute;transform:rotate(45deg);width:7px}.react-datepicker{background-color:var(--vchasno-ui-input-bg-color);border:1px solid var(--vchasno-ui-input-border-color-default);border-radius:var(--vchasno-ui-border-radius-md);box-shadow:0 4px 10px 0 #252d3d26;color:var(--vchasno-ui-input-font-color);display:inline-flex;font-size:14px;padding:10px;position:relative}.react-datepicker__time-container{float:right;width:85px}.react-datepicker__time-container--with-today-button{border:1px solid #aeaeae;border-radius:var(--vchasno-ui-border-radius-sm);display:inline;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{background:#fff;border-bottom-right-radius:var(--vchasno-ui-border-radius-sm);position:relative}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{border-bottom-right-radius:var(--vchasno-ui-border-radius-sm);margin:0 auto;overflow-x:hidden;text-align:center;width:85px}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{box-sizing:content-box;height:calc(195px + .85rem);list-style:none;margin:0;overflow-y:scroll;padding-left:0;padding-right:0;width:100%}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{border-radius:var(--vchasno-ui-border-radius-md);height:30px;line-height:20px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{background-color:#f0f0f0;cursor:pointer}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:var(--vchasno-ui-calendar-color);color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:var(--vchasno-ui-calendar-color)}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{background-color:transparent;cursor:default}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:var(--vchasno-ui-border-radius-none)}.react-datepicker__header{padding-top:5px;position:relative;text-align:center}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:var(--vchasno-ui-border-radius-sm)}@media (width <= 480px){.react-datepicker{padding:0}}.react-datepicker-popper{z-index:100}.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle{left:auto;right:42px}.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle{left:42px;right:auto}.react-datepicker-time__header,.react-datepicker__current-month{color:var(--vchasno-ui-input-font-color);font-size:14px;font-weight:500;margin-top:0;padding:8px 0 15px;text-transform:capitalize}.react-datepicker__month-container{float:left}.react-datepicker__aria-live{display:none}.react-datepicker__month{display:flex;flex-direction:column;gap:1px;margin:0;text-align:center}.react-datepicker__day-names,.react-datepicker__week{white-space:nowrap}.react-datepicker__week{display:flex;gap:1px}.react-datepicker__day-name{text-transform:none}.react-datepicker__day,.react-datepicker__day-name,.react-datepicker__time-name{box-sizing:border-box;color:var(--vchasno-ui-input-font-color);cursor:pointer;display:inline-block;height:32px;line-height:30px;text-align:center;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s);width:32px}.react-datepicker__day-names .react-datepicker__day-name{font-weight:700;text-transform:capitalize}.react-datepicker__day:hover{background-color:#f2f6f7;border-radius:var(--vchasno-ui-border-radius-md)}.react-datepicker__day--today{border:1px solid var(--vchasno-ui-calendar-select-color);border-radius:var(--vchasno-ui-border-radius-md);font-weight:500}.react-datepicker__day--weekend{font-weight:400}.react-datepicker__day--outside-month{color:var(--vchasno-ui-color-surface-disabled-1)}.react-datepicker__day--disabled{color:#bfcede;cursor:not-allowed}.react-datepicker__day--disabled:hover{background-color:transparent}.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected{background-color:var(--vchasno-ui-calendar-select-color);border-radius:var(--vchasno-ui-border-radius-md);color:#fff;font-weight:700}.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover{background-color:var(--vchasno-ui-calendar-select-color)}.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected){background-color:var(--vchasno-ui-calendar-select-color);border-radius:var(--vchasno-ui-border-radius-md);color:#fff}.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover{background-color:var(--vchasno-ui-calendar-select-color)}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range){background-color:rgba(33,107,165,.5)}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range){background-color:#f0f0f0;color:var(--vchasno-ui-input-font-color)}.react-datepicker__input-container{position:relative}.react-datepicker__close-icon{background-color:transparent;border:0;bottom:0;cursor:pointer;height:20px;margin:auto;outline:none;position:absolute;right:35px;top:0;width:20px}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;clear:left;cursor:pointer;font-weight:700;padding:5px 0;text-align:center}.react-datepicker__portal{align-items:center;background-color:rgba(0,0,0,.8);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:2147483647}.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:3rem;width:3rem}@media (height <= 550px),(width <= 400px){.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__time-name{line-height:2rem;width:2rem}}.react-datepicker__portal .react-datepicker-time__header,.react-datepicker__portal .react-datepicker__current-month{font-size:14px}.react-datepicker__navigation{align-items:center;background-size:cover;border:none;border-radius:var(--vchasno-ui-border-radius-md);cursor:pointer;display:flex;height:30px;justify-content:center;line-height:1;position:absolute;top:15px;width:30px;z-index:1}.react-datepicker__navigation:hover{background-color:#f2f6f7}.react-datepicker__navigation--previous{left:10px}.react-datepicker__navigation-icon{display:none}.react-datepicker__navigation--next:before,.react-datepicker__navigation--previous:before{height:10px;inset:0;margin:auto;position:absolute;width:10px}.react-datepicker__navigation--previous:before{color:var(--vchasno-ui-calendar-default-icon-color);content:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCA0Ljk5MmMwLS4yNi4xLS41MS4yOS0uNzFsNC0zLjk5Yy4zOS0uMzkgMS4wMy0uMzkgMS40MiAwIC4zOS4zOS4zOSAxLjAzIDAgMS40MmwtMy4yOSAzLjI4IDMuMjkgMy4yOWMuMzkuMzkuMzkgMS4wMyAwIDEuNDItLjM5LjM5LTEuMDMuMzktMS40MiAwTC4zIDUuNzEyYy0uMi0uMi0uMy0uNDYtLjMtLjcyWiIgZmlsbD0iIzZlODA5YSIvPjwvc3ZnPg==")}.react-datepicker__navigation--next{color:var(--vchasno-ui-calendar-default-icon-color);right:10px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:110px}.react-datepicker__navigation--next:before{content:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi4wMDMgNS4wMDNjMCAuMjYtLjEuNTEtLjI5LjcxbC00IDMuOTljLS4zOS4zOS0xLjAzLjM5LTEuNDIgMC0uMzktLjM5LS4zOS0xLjAzIDAtMS40MmwzLjI5LTMuMjgtMy4yOS0zLjI5Yy0uMzktLjM5LS4zOS0xLjAzIDAtMS40Mi4zOS0uMzkgMS4wMy0uMzkgMS40MiAwbDMuOTkgMy45OWMuMi4yLjMuNDYuMy43MloiIGZpbGw9IiM2ZTgwOWEiLz48L3N2Zz4=")}.react-datepicker__input-container input{appearance:none;background:var(--vchasno-ui-input-bg-color);border:1px solid var(--vchasno-ui-input-border-color-default,#bfcede);border-radius:var(--vchasno-ui-border-radius-md);box-sizing:border-box;font-size:var(--vchasno-ui-input-font-size,.8rem);height:30px;line-height:calc(var(--vchasno-ui-input-font-size, .8rem)*2);outline:1px solid transparent;padding:10px 15px;transition:border var(--vchasno-ui-transition-duration-sec,.3s),outline-color var(--vchasno-ui-transition-duration-sec,.3s);vertical-align:middle;width:100%}.react-datepicker__input-container input:disabled{background:var(--vchasno-ui-input-bg-color-disabled);color:var(--vchasno-ui-input-font-color)}.react-datepicker__input-container input:hover{cursor:default}.react-datepicker__input-container input:focus{border-color:var(--vchasno-ui-input-border-color-focused);outline:2px solid var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-date-picker{display:inline-flex;flex-direction:column;gap:5px}.vchasno-ui-date-picker.--wide{width:100%}.vchasno-ui-date-picker .vchasno-ui-date-picker__picker{height:50px}.vchasno-ui-date-picker__wrapper{border-radius:var(--vchasno-ui-border-radius-md);position:relative}.vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__custom-close-icon{color:var(--vchasno-ui-input-border-color-default);height:20px;pointer-events:none;position:absolute;right:35px;top:50%;transform:translateY(-50%) scale(0);transition:color var(--vchasno-ui-transition-duration-sec,.3s),transform var(--vchasno-ui-transition-duration-sec,.3s);width:20px}.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon) .vchasno-ui-date-picker__custom-close-icon{transform:translateY(-50%) scale(1)}@supports not selector(.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon)){.vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__custom-close-icon{transform:translateY(-50%) scale(1)}}.vchasno-ui-date-picker:not(.--disabled) .vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon:hover) .vchasno-ui-date-picker__custom-close-icon{color:var(--vchasno-ui-calendar-default-icon-color)}.vchasno-ui-date-picker.--not-empty .vchasno-ui-label-text,.vchasno-ui-date-picker.--with-mask .vchasno-ui-label-text,.vchasno-ui-date-picker__wrapper:focus-within .vchasno-ui-label-text{font-size:var(--vchasno-ui-font-size-xs);top:0}.vchasno-ui-date-picker__wrapper>.vchasno-ui-date-picker__custom-calendar-icon{color:var(--vchasno-ui-calendar-default-icon-color);pointer-events:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper>.vchasno-ui-spinner{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle{stroke:var(--vchasno-ui-calendar-color)}.vchasno-ui-date-picker .react-datepicker__input-container input{color:var(--vchasno-ui-input-font-color);font-size:var(--vchasno-ui-input-font-size);line-height:calc(var(--vchasno-ui-input-font-size)*1.2);overflow:hidden;padding:var(--vchasno-ui-spacing-16);padding-right:24px;text-overflow:ellipsis;white-space:nowrap}.vchasno-ui-date-picker .react-datepicker__aria-live{display:none}.vchasno-ui-date-picker.--disabled,.vchasno-ui-date-picker.--disabled .vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__picker{cursor:not-allowed;opacity:.8}.vchasno-ui-date-picker:not(.--disabled):hover,.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__picker{cursor:pointer}.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input{border-color:var(--vchasno-ui-input-border-color-focused);outline:2px solid var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-date-picker:not(.--disabled).--error .react-datepicker__input-container input{border-color:var(--vchasno-ui-input-color-error);color:var(--vchasno-ui-input-color-error);outline-color:var(--vchasno-ui-input-outline-color-error)}.vchasno-ui-date-picker.--is-label input::placeholder{visibility:hidden}.vchasno-ui-date-picker.--is-label:focus-within input::placeholder{visibility:visible}.vchasno-ui-date-picker[class*="--today-button-"] .react-datepicker{display:flex;flex-direction:column}.vchasno-ui-date-picker[class*="--today-button-"] .react-datepicker__today-button{align-items:center;border:0;border-radius:var(--vchasno-ui-border-radius-md);cursor:pointer;display:flex;font-size:var(--vchasno-ui-btn-font-size);font-weight:500;gap:5px;justify-content:center;margin-top:12px;min-height:40px;padding:0 24px;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-date-picker.--today-button-primary .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-primary-bg);border:1px solid transparent;color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-date-picker.--today-button-secondary .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-secondary-bg);border:1px solid var(--vchasno-ui-btn-secondary-border-color);color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-date-picker.--today-button-danger .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-danger-bg);border:0;color:var(--vchasno-ui-btn-danger-color)}.vchasno-ui-date-picker.--today-button-pink .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-date-picker.--today-button-primary .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-primary-hover-bg)}.vchasno-ui-date-picker.--today-button-secondary .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-secondary-hover-bg)}.vchasno-ui-date-picker.--today-button-danger .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-danger-hover-bg);color:var(--vchasno-ui-btn-danger-hover-color)}.vchasno-ui-date-picker.--today-button-pink .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-pink-hover-bg)}.vchasno-ui-datepicker-popper--today-button-danger .react-datepicker,.vchasno-ui-datepicker-popper--today-button-pink .react-datepicker,.vchasno-ui-datepicker-popper--today-button-primary .react-datepicker,.vchasno-ui-datepicker-popper--today-button-secondary .react-datepicker{display:flex;flex-direction:column}.vchasno-ui-datepicker-popper--today-button-danger .react-datepicker__today-button,.vchasno-ui-datepicker-popper--today-button-pink .react-datepicker__today-button,.vchasno-ui-datepicker-popper--today-button-primary .react-datepicker__today-button,.vchasno-ui-datepicker-popper--today-button-secondary .react-datepicker__today-button{align-items:center;border:0;border-radius:var(--vchasno-ui-border-radius-md);cursor:pointer;display:flex;font-size:var(--vchasno-ui-btn-font-size);font-weight:500;gap:5px;justify-content:center;margin-top:12px;min-height:40px;padding:0 24px;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-datepicker-popper--today-button-primary .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-primary-bg);border:1px solid transparent;color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-datepicker-popper--today-button-secondary .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-secondary-bg);border:1px solid var(--vchasno-ui-btn-secondary-border-color);color:var(--vchasno-ui-btn-secondary-color)}.vchasno-ui-datepicker-popper--today-button-danger .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-danger-bg);border:0;color:var(--vchasno-ui-btn-danger-color)}.vchasno-ui-datepicker-popper--today-button-pink .react-datepicker__today-button{background-color:var(--vchasno-ui-btn-pink-bg);color:var(--vchasno-ui-btn-primary-color)}.vchasno-ui-datepicker-popper--today-button-primary .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-primary-hover-bg)}.vchasno-ui-datepicker-popper--today-button-secondary .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-secondary-hover-bg)}.vchasno-ui-datepicker-popper--today-button-danger .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-danger-hover-bg);color:var(--vchasno-ui-btn-danger-hover-color)}.vchasno-ui-datepicker-popper--today-button-pink .react-datepicker__today-button:hover{background-color:var(--vchasno-ui-btn-pink-hover-bg)}.vchasno-ui-select{display:inline-flex;flex-direction:column;gap:5px;position:relative}.vchasno-ui-select .vchasno-ui-label-text{top:0;transform:translateY(16px);transition:font-size .3s,transform .3s}.vchasno-ui-select:focus-within .vchasno-ui-label-text,.vchasno-ui-select:has(.vchasno-ui-select__value-container--has-value) .vchasno-ui-label-text{font-size:12px;transform:translateY(-8px)}@supports not selector(.vchasno-ui-select:has(.vchasno-ui-select__value-container--has-value)){.vchasno-ui-select .vchasno-ui-label-text{font-size:12px;transform:translateY(-42px)}}.vchasno-ui-select.--wide{width:100%}.vchasno-ui-select .vchasno-ui-select__control{border-color:var(--vchasno-ui-input-border-color-default);border-radius:var(--vchasno-ui-border-radius-md);cursor:pointer;font-family:Roboto,Arial,Tahoma,Helvetica,Liberation Sans,sans-serif;min-height:50px;min-width:200px;outline:3px solid transparent;transition:border var(--vchasno-ui-transition-duration-sec,.3s),outline var(--vchasno-ui-transition-duration-sec,.3s)}.--pulse .vchasno-ui-select__control{animation:box-shadow-pulse 1.5s infinite;box-shadow:0 0 0 0 rgb(var(--vchasno-pulse-animation-color)/30%)}.vchasno-ui-select .vchasno-ui-select__control:has(.vchasno-ui-select__input){cursor:text}.vchasno-ui-select.--disabled .vchasno-ui-select__control{background-color:var(--vchasno-ui-input-bg-color-disabled);border:1px solid var(--vchasno-ui-input-border-color-default)}.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled{opacity:.8}.vchasno-ui-select .vchasno-ui-select__option,.vchasno-ui-select__menu-portal .vchasno-ui-select__option{transition:opacity var(--vchasno-ui-transition-duration-sec,.3s),background-color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select.--disabled .vchasno-ui-select__option,.vchasno-ui-select__menu-portal.--disabled .vchasno-ui-select__option{background-color:#f3f8fb;opacity:.8;pointer-events:none}.vchasno-ui-select .vchasno-ui-select__menu,.vchasno-ui-select__menu-portal .vchasno-ui-select__menu{border:1px solid var(--vchasno-ui-input-border-color-default);border-radius:var(--vchasno-ui-border-radius-md);box-shadow:none;margin-bottom:6px;margin-top:4px;transition:border var(--vchasno-ui-transition-duration-sec,.3s);z-index:100}.vchasno-ui-select .vchasno-ui-select__control--menu-is-open{border-color:red;outline-color:var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-select.--error .vchasno-ui-select__control,.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open{border:1px solid var(--vchasno-ui-text-error-color);outline-color:var(--vchasno-ui-input-outline-color-error)}.vchasno-ui-select .vchasno-ui-select__control:hover{border-color:var(--vchasno-ui-input-border-color-focused);outline-color:var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-select .vchasno-ui-select__dropdown-indicator,.vchasno-ui-select .vchasno-ui-select__input-container{color:var(--vchasno-ui-input-font-color)}.vchasno-ui-select.--error .vchasno-ui-select__control:hover{border-color:var(--vchasno-ui-text-error-color);outline-color:var(--vchasno-ui-input-outline-color-error)}.vchasno-ui-select .vchasno-ui-select__control--menu-is-open .vchasno-ui-select__dropdown-indicator{transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator{color:var(--vchasno-ui-text-error-color)}.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open .vchasno-ui-select__dropdown-indicator{color:var(--vchasno-ui-text-error-color);transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select.--error .vchasno-ui-select__control:hover .vchasno-ui-select__dropdown-indicator,.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover{color:var(--vchasno-ui-text-error-color)}.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open+.vchasno-ui-select__menu,.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open{border:1px solid var(--vchasno-ui-text-error-color)}.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused{border-color:var(--vchasno-ui-input-border-color-focused);box-shadow:none;outline-color:var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-select .vchasno-ui-spinner__svg__circle{stroke:var(--vchasno-ui-input-border-color-focused)}.vchasno-ui-select .vchasno-ui-select__placeholder{color:var(--vchasno-ui-input-placeholder-color);font-size:var(--vchasno-ui-input-font-size);font-weight:400}.vchasno-ui-select:not(:focus-within,:not(:has(.vchasno-ui-label-text))) .vchasno-ui-select__placeholder{visibility:hidden}.vchasno-ui-select .vchasno-ui-select__clear-indicator{border-radius:var(--vchasno-ui-border-radius-sm);color:var(--vchasno-ui-input-font-color);padding:0;transition:color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover{color:var(--vchasno-ui-input-color-error);cursor:pointer}.vchasno-ui-select .vchasno-ui-select__option--is-focused,.vchasno-ui-select .vchasno-ui-select__option--is-selected,.vchasno-ui-select .vchasno-ui-select__option:hover,.vchasno-ui-select__menu-portal .vchasno-ui-select__option--is-focused,.vchasno-ui-select__menu-portal .vchasno-ui-select__option--is-selected,.vchasno-ui-select__menu-portal .vchasno-ui-select__option:hover{background-color:var(--vchasno-ui-select-option-bg-selected);color:var(--vchasno-ui-select-option-color-selected)}.vchasno-ui-select .vchasno-ui-select__option:hover,.vchasno-ui-select__menu-portal .vchasno-ui-select__option:hover{cursor:pointer}.vchasno-ui-select.--disabled{cursor:not-allowed}.vchasno-ui-select .vchasno-ui-select__multi-value{background-color:var(--vchasno-ui-select-option-bg-selected);border-radius:var(--vchasno-ui-border-radius-md);outline:1px solid var(--vchasno-ui-select-menu-border-color,transparent)}.vchasno-ui-select .vchasno-ui-select__multi-value__remove{background-color:transparent;color:var(--vchasno-ui-label-color-default);padding:0 3px 0 0;transition:color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover{background-color:transparent;color:var(--vchasno-ui-input-color-error);cursor:pointer}.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg{height:20px;width:20px}.vchasno-ui-select .vchasno-ui-select__indicators{padding-right:5px}.vchasno-ui-select .vchasno-ui-select__value-container{padding:5px 14px}.vchasno-ui-select .vchasno-ui-select__multi-value__label{font-size:14px;padding:6px 0 6px 6px}.vchasno-ui-select .vchasno-ui-select .vchasno-ui-select__multi-value__remove{font-size:14px;padding:6px}.vchasno-ui-date-range-picker{display:inline-flex;flex-direction:column;gap:5px;max-width:260px;width:100%}.vchasno-ui-date-range-picker .vchasno-ui-date-range-picker__picker{height:50px}.vchasno-ui-date-range-picker__wrapper{border-radius:var(--vchasno-ui-border-radius-md);position:relative}.vchasno-ui-date-range-picker__wrapper>.vchasno-ui-date-range-picker__custom-calendar-icon{background-color:var(--vchasno-ui-btn-light-bg);color:var(--vchasno-ui-calendar-default-icon-color);pointer-events:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-date-range-picker.--loading .vchasno-ui-date-range-picker__wrapper>.vchasno-ui-spinner{height:18px;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.vchasno-ui-date-range-picker.--loading .vchasno-ui-date-range-picker__wrapper .vchasno-ui-spinner circle{stroke:var(--vchasno-ui-calendar-color)}.vchasno-ui-date-range-picker__clear-btn{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;justify-content:center;padding:0}.vchasno-ui-date-range-picker__wrapper .vchasno-ui-date-range-picker__custom-close-icon{background-color:var(--vchasno-ui-btn-light-bg);color:var(--vchasno-ui-input-border-color-default);cursor:pointer;height:20px;position:absolute;right:35px;top:50%;transform:translateY(-50%);transition:color var(--vchasno-ui-transition-duration-sec,.3s);width:20px}.vchasno-ui-date-range-picker__wrapper .vchasno-ui-date-range-picker__custom-close-icon:hover{color:var(--vchasno-ui-calendar-default-icon-color)}.vchasno-ui-date-range-picker__preset-select .vchasno-ui-label-text,.vchasno-ui-date-range-picker__preset-select:focus-within .vchasno-ui-label-text{font-size:var(--vchasno-ui-input-font-size);top:50%;transform:translateY(-50%)}.vchasno-ui-date-range-picker.--filled .vchasno-ui-label-text,.vchasno-ui-date-range-picker.--not-empty .vchasno-ui-label-text,.vchasno-ui-date-range-picker__wrapper:focus-within .vchasno-ui-label-text{font-size:var(--vchasno-ui-font-size-xs);top:0}.vchasno-ui-date-range-picker.--disabled,.vchasno-ui-date-range-picker.--disabled .vchasno-ui-date-range-picker__wrapper .vchasno-ui-date-range-picker__picker{cursor:not-allowed;opacity:.8}.vchasno-ui-date-range-picker:not(.--disabled) .react-datepicker__input-container input,.vchasno-ui-date-range-picker:not(.--disabled) .react-datepicker__input-container input:hover{cursor:text}.vchasno-ui-date-range-picker:not(.--disabled):hover{cursor:pointer}.vchasno-ui-date-range-picker:not(.--disabled):hover .react-datepicker__input-container input{border-color:var(--vchasno-ui-input-border-color-focused);outline:2px solid var(--vchasno-ui-input-outline-color-focused)}.vchasno-ui-date-range-picker:not(.--disabled).--error .react-datepicker__input-container input{border-color:var(--vchasno-ui-input-color-error);color:var(--vchasno-ui-input-color-error);outline-color:var(--vchasno-ui-input-outline-color-error)}.vchasno-ui-date-range-picker.--is-label input::placeholder{visibility:hidden}.vchasno-ui-date-range-picker.--is-label:focus-within input::placeholder{visibility:visible}.vchasno-ui-date-range-picker.--preset-label .vchasno-ui-date-range-picker__wrapper .react-datepicker__input-container input{caret-color:transparent;color:transparent}.vchasno-ui-date-range-picker__preset-label{align-items:center;color:var(--vchasno-ui-input-font-color);display:flex;font-size:var(--vchasno-ui-input-font-size);inset:0;line-height:normal;overflow:hidden;padding:0 45px 0 16px;pointer-events:none;position:absolute;text-overflow:ellipsis;white-space:nowrap}.vchasno-ui-date-range-picker-popper .react-datepicker{display:grid;grid:". ." "buttons buttons";grid-auto-columns:1fr;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;padding:0}.vchasno-ui-date-range-picker .react-datepicker__children-container{align-items:start;border-top:1px solid var(--vchasno-ui-input-border-color-default);display:flex;gap:16px;grid-area:buttons;padding:20px 12px}.vchasno-ui-date-range-picker .react-datepicker__week{gap:1px 0}.vchasno-ui-date-range-picker.--wide{width:100%}.vchasno-ui-date-range-picker-popper .react-datepicker__month-container{float:none;padding:8px}.vchasno-ui-date-range-picker__presets{width:100%}.vchasno-ui-date-range-picker__preset-select .vchasno-ui-select__control{height:40px;min-height:auto}.vchasno-ui-date-range-picker__preset-select .vchasno-ui-select__value-container{padding:0 14px}.vchasno-ui-date-range-picker__actions{display:flex;gap:8px;justify-content:flex-end;width:100%}.vchasno-ui-date-range-picker__cancel-btn{background-color:var(--vchasno-ui-btn-secondary-bg);border:1px solid var(--vchasno-ui-btn-secondary-border-color);border-radius:var(--vchasno-ui-border-radius-md);color:var(--vchasno-ui-btn-secondary-color);cursor:pointer;font-size:var(--vchasno-ui-btn-font-size);font-weight:500;min-height:40px;padding:0 24px;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-date-range-picker__cancel-btn:hover{background-color:var(--vchasno-ui-btn-secondary-hover-bg)}.vchasno-ui-date-range-picker__save-btn{background-color:var(
|
|
2
2
|
--vchasno-ui-color-surface-brand-default,var(--vchasno-ui-btn-primary-bg)
|
|
3
3
|
);border:1px solid transparent;border-radius:var(--vchasno-ui-border-radius-md);color:var(--vchasno-ui-btn-primary-color);cursor:pointer;font-size:var(--vchasno-ui-btn-font-size);font-weight:500;min-height:40px;padding:0 24px;transition:background-color var(--vchasno-ui-transition-duration-sec,.3s),color var(--vchasno-ui-transition-duration-sec,.3s)}.vchasno-ui-date-range-picker__save-btn:hover{background-color:var(
|
|
4
4
|
--vchasno-ui-color-surface-brand-default-hover,var(--vchasno-ui-btn-primary-hover-bg)
|