/* node_modules/@taiga-ui/core/styles/taiga-ui-theme.less */ :root { --tui-heading-font: "Manrope", -apple-system, "BlinkMacSystemFont", system-ui, "Roboto", "Segoe UI", "Helvetica Neue", sans-serif; --tui-text-font: "Manrope", -apple-system, "BlinkMacSystemFont", system-ui, "Roboto", "Segoe UI", "Helvetica Neue", sans-serif; --tui-font-heading: var(--tui-heading-font); --tui-font-heading-1: bold 3.125rem/3.5rem var(--tui-font-heading); --tui-font-heading-2: bold 2.75rem/3rem var(--tui-font-heading); --tui-font-heading-3: bold 2.25rem/2.5rem var(--tui-font-heading); --tui-font-heading-4: bold 1.75rem/2rem var(--tui-font-heading); --tui-font-heading-5: bold 1.5rem/1.75rem var(--tui-font-heading); --tui-font-heading-6: bold 1.25rem/1.5rem var(--tui-font-heading); --tui-font-text: var(--tui-text-font); --tui-font-text-xl: normal 1.1875rem/1.75rem var(--tui-font-text); --tui-font-text-l: normal 1.0625rem/1.75rem var(--tui-font-text); --tui-font-text-l-2: normal 1.0625rem/1.5rem var(--tui-font-text); --tui-font-text-m: normal 1rem/1.5rem var(--tui-font-text); --tui-font-text-m-2: normal 1rem/1.25rem var(--tui-font-text); --tui-font-text-s: normal 0.8125rem/1.25rem var(--tui-font-text); --tui-font-text-s-2: normal 0.8125rem/1rem var(--tui-font-text); --tui-font-text-xs: normal 0.6875rem/1rem var(--tui-font-text); --tui-font-text-xs-2: normal 0.6875rem/0.8125rem var(--tui-font-text); --tui-radius-xs: 0.25rem; --tui-radius-s: 0.5rem; --tui-radius-m: 0.75rem; --tui-radius-l: 0.75rem; --tui-radius-xl: 1.5rem; --tui-height-xs: 1.5rem; --tui-height-s: 2rem; --tui-height-m: 2.75rem; --tui-height-l: 3.5rem; --tui-padding-s: 0.75rem; --tui-padding-m: 0.75rem; --tui-padding-l: 1rem; --tui-duration: 0.3s; --tui-backdrop: none; --tui-disabled-opacity: 0.56; --tui-autofill: #fff5c0; --tui-base-01: #fff; --tui-base-02: #f6f6f6; --tui-base-03: #ededed; --tui-base-04: #d7d7d7; --tui-base-05: #b0b0b0; --tui-base-06: #959595; --tui-base-07: #808080; --tui-base-08: #333; --tui-base-09: #000; --tui-primary: #526ed3; --tui-primary-hover: #6c86e2; --tui-primary-active: #314692; --tui-primary-text: #fff; --tui-secondary: #ebefff; --tui-secondary-hover: #dfe3f3; --tui-secondary-active: #d8ddf2; --tui-accent: #ff7043; --tui-accent-hover: #ff9a94; --tui-accent-active: #e7716a; --tui-accent-text: #fff; --tui-selection: rgba(112, 182, 246, 0.12); --tui-focus: rgba(51, 51, 51, 0.64); --tui-clear: rgba(0, 0, 0, 0.04); --tui-clear-disabled: rgba(0, 0, 0, 0.04); --tui-clear-hover: rgba(0, 0, 0, 0.16); --tui-clear-active: rgba(0, 0, 0, 0.2); --tui-clear-inverse: rgba(255, 255, 255, 0.16); --tui-clear-inverse-hover: rgba(255, 255, 255, 0.24); --tui-clear-inverse-active: rgba(255, 255, 255, 0.4); --tui-elevation-01: #fff; --tui-elevation-02: #fff; --tui-error-fill: #f45725; --tui-error-bg: rgba(244, 87, 37, 0.12); --tui-error-bg-hover: rgba(244, 87, 37, 0.24); --tui-success-fill: #4ac99b; --tui-success-bg: rgba(74, 201, 155, 0.12); --tui-success-bg-hover: rgba(74, 201, 155, 0.24); --tui-warning-fill: #ffc700; --tui-warning-bg: rgba(255, 199, 0, 0.12); --tui-warning-bg-hover: rgba(255, 199, 0, 0.24); --tui-info-fill: #70b6f6; --tui-info-bg: rgba(112, 182, 246, 0.12); --tui-info-bg-hover: rgba(112, 182, 246, 0.24); --tui-neutral-fill: #79818c; --tui-neutral-bg: rgba(121, 129, 140, 0.12); --tui-neutral-bg-hover: rgba(121, 129, 140, 0.24); --tui-text-01: #1b1f3b; --tui-text-02: rgba(27, 31, 59, 0.65); --tui-text-03: rgba(27, 31, 59, 0.4); --tui-link: #526ed3; --tui-link-hover: #6c86e2; --tui-positive: #3aa981; --tui-positive-hover: #7ac5aa; --tui-negative: #dd4c1e; --tui-negative-hover: #e38163; --tui-error-fill-night: #ff8c67; --tui-error-bg-night: rgba(244, 87, 37, 0.32); --tui-error-bg-night-hover: rgba(244, 87, 37, 0.4); --tui-success-fill-night: #4ac99b; --tui-success-bg-night: rgba(74, 201, 155, 0.32); --tui-success-bg-night-hover: rgba(74, 201, 155, 0.4); --tui-warning-fill-night: #ffc700; --tui-warning-bg-night: rgba(255, 199, 0, 0.32); --tui-warning-bg-night-hover: rgba(255, 199, 0, 0.4); --tui-info-fill-night: #70b6f6; --tui-info-bg-night: rgba(112, 182, 246, 0.32); --tui-info-bg-night-hover: rgba(112, 182, 246, 0.4); --tui-neutral-fill-night: #959ba4; --tui-neutral-bg-night: rgba(149, 155, 164, 0.32); --tui-neutral-bg-night-hover: rgba(149, 155, 164, 0.48); --tui-autofill-night: #554a2a; --tui-text-01-night: #ffffff; --tui-text-02-night: rgba(255, 255, 255, 0.72); --tui-text-03-night: rgba(255, 255, 255, 0.6); --tui-link-night: #6788ff; --tui-link-night-hover: #526ed3; --tui-positive-night: #44c596; --tui-positive-night-hover: #3aa981; --tui-negative-night: #ff8c67; --tui-negative-night-hover: #bb593a; --tui-support-01: #a8cef1; --tui-support-02: #3682db; --tui-support-03: #8dda71; --tui-support-04: #34b41f; --tui-support-05: #e29398; --tui-support-06: #b8474e; --tui-support-07: #fcc068; --tui-support-08: #ff8a00; --tui-support-09: #dab3f9; --tui-support-10: #7b439e; --tui-support-11: #fee797; --tui-support-12: #fcbb14; --tui-support-13: #ea97c4; --tui-support-14: #bd65a4; --tui-support-15: #7fd7cc; --tui-support-16: #2fad96; --tui-support-17: #d4aca2; --tui-support-18: #9d6f64; --tui-support-19: #d2e9a2; --tui-support-20: #aadc42; --tui-support-21: #a0c5df; --tui-chart-0: var(--tui-primary); --tui-chart-1: var(--tui-support-13); --tui-chart-2: var(--tui-support-21); --tui-chart-3: var(--tui-support-11); --tui-chart-4: var(--tui-base-05); --tui-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12); --tui-shadow-hover: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.2); --tui-shadow-dropdown: 0 1.5rem 1rem rgba(0, 0, 0, 0.03), 0 0.75rem 0.75rem rgba(0, 0, 0, 0.04), 0 0.25rem 0.375rem rgba(0, 0, 0, 0.05); --tui-shadow-modal: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48); --tui-shadow-sidebar: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.12); --tui-shadow-navigation: 0 0.125rem 1rem rgba(0, 0, 0, 0.08); --tui-shadow-sheet: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24); } [tuiTheme=night] { --tui-base-01: #222; --tui-base-02: #333; --tui-base-03: #808080; --tui-base-04: #959595; --tui-base-05: #b0b0b0; --tui-base-06: #d7d7d7; --tui-base-07: #ededed; --tui-base-08: #f6f6f6; --tui-base-09: #fff; --tui-focus: rgba(51, 51, 51, 0.64); --tui-secondary: rgba(255, 255, 255, 0.16); --tui-secondary-hover: rgba(255, 255, 255, 0.24); --tui-secondary-active: rgba(255, 255, 255, 0.4); --tui-clear: rgba(255, 255, 255, 0.16); --tui-clear-disabled: rgba(255, 255, 255, 0.08); --tui-clear-hover: rgba(255, 255, 255, 0.24); --tui-clear-active: rgba(255, 255, 255, 0.4); --tui-error-fill: #ff8c67; --tui-error-bg: rgba(244, 87, 37, 0.32); --tui-error-bg-hover: rgba(244, 87, 37, 0.4); --tui-success-fill: #4ac99b; --tui-success-bg: rgba(74, 201, 155, 0.32); --tui-success-bg-hover: rgba(74, 201, 155, 0.4); --tui-warning-fill: #ffc700; --tui-warning-bg: rgba(255, 199, 0, 0.32); --tui-warning-bg-hover: rgba(255, 199, 0, 0.4); --tui-info-fill: #70b6f6; --tui-info-bg: rgba(112, 182, 246, 0.32); --tui-info-bg-hover: rgba(112, 182, 246, 0.4); --tui-neutral-fill: #959ba4; --tui-neutral-bg: rgba(149, 155, 164, 0.32); --tui-neutral-bg-hover: rgba(149, 155, 164, 0.48); --tui-text-01: #ffffff; --tui-text-02: rgba(255, 255, 255, 0.72); --tui-text-03: rgba(255, 255, 255, 0.6); --tui-link: #6788ff; --tui-link-hover: #526ed3; --tui-positive: #44c596; --tui-positive-hover: #3aa981; --tui-negative: #ff8c67; --tui-negative-hover: #bb593a; --tui-autofill: var(--tui-autofill-night); --tui-elevation-01: #222; --tui-elevation-02: #222; --tui-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.12); --tui-shadow-hover: 0 0.75rem 2.25rem rgba(0, 0, 0, 0.2); --tui-shadow-dropdown: 0 1.5rem 1rem rgba(0, 0, 0, 0.03), 0 0.75rem 0.75rem rgba(0, 0, 0, 0.04), 0 0.25rem 0.375rem rgba(0, 0, 0, 0.05); --tui-shadow-modal: 0 1.125rem 1.875rem rgba(0, 0, 0, 0.48); --tui-shadow-sidebar: 0.25rem 0 1.5rem rgba(0, 0, 0, 0.12); --tui-shadow-navigation: 0 0.125rem 1rem rgba(0, 0, 0, 0.08); --tui-shadow-sheet: 0 -1rem 1.75rem rgba(0, 0, 0, 0.24); } [tuiTheme=night] tui-notification { --tui-base-01: #000; } [tuiAppearance] { transition-property: color, background, opacity, box-shadow; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; position: relative; appearance: none; outline: 0.125rem solid transparent; outline-offset: -0.125rem; } [tuiAppearance]:focus-visible:not([data-focus=false]), [tuiAppearance][data-focus=true] { outline-color: var(--tui-focus); } [tuiAppearance]:disabled:not([data-state]), [tuiAppearance][data-state=disabled] { pointer-events: none; opacity: var(--tui-disabled-opacity); } [tuiAppearance][data-appearance=accent] { background: var(--tui-accent); color: var(--tui-accent-text); } @media (hover: hover) { [tuiAppearance][data-appearance=accent]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-accent-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=accent]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-accent-hover); } } [tuiAppearance][data-appearance=accent][data-state=hover] { background: var(--tui-accent-hover); } [tuiAppearance][data-appearance=accent]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-accent-active); } [tuiAppearance][data-appearance=accent]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-accent-active); } [tuiAppearance][data-appearance=accent][data-state=active] { background: var(--tui-accent-active); } [tuiAppearance][data-appearance=floating] { background: #fff; color: rgba(0, 0, 0, 0.8); box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } @media (hover: hover) { [tuiAppearance][data-appearance=floating]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14); } } @media (hover: hover) { [tuiAppearance][data-appearance=floating]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14); } } [tuiAppearance][data-appearance=floating][data-state=hover] { box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14); } [tuiAppearance][data-appearance=floating]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: #f6f7f8; box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } [tuiAppearance][data-appearance=floating]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: #f6f7f8; box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } [tuiAppearance][data-appearance=floating][data-state=active] { background: #f6f7f8; box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } [tuiAppearance][data-appearance=glass] { background: rgba(0, 0, 0, 0.4); color: #fff; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); --tui-focus: rgba(255, 255, 255, 0.64); } @media (hover: hover) { [tuiAppearance][data-appearance=glass]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: rgba(0, 0, 0, 0.48); } } @media (hover: hover) { [tuiAppearance][data-appearance=glass]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: rgba(0, 0, 0, 0.48); } } [tuiAppearance][data-appearance=glass][data-state=hover] { background: rgba(0, 0, 0, 0.48); } [tuiAppearance][data-appearance=glass]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: rgba(0, 0, 0, 0.6); } [tuiAppearance][data-appearance=glass]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: rgba(0, 0, 0, 0.6); } [tuiAppearance][data-appearance=glass][data-state=active] { background: rgba(0, 0, 0, 0.6); } [tuiTheme=night] [tuiAppearance][data-appearance=glass] { background: rgba(255, 255, 255, 0.3); } @media (hover: hover) { [tuiTheme=night] [tuiAppearance][data-appearance=glass]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: rgba(255, 255, 255, 0.4); } } @media (hover: hover) { [tuiTheme=night] [tuiAppearance][data-appearance=glass]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: rgba(255, 255, 255, 0.4); } } [tuiTheme=night] [tuiAppearance][data-appearance=glass][data-state=hover] { background: rgba(255, 255, 255, 0.4); } [tuiTheme=night] [tuiAppearance][data-appearance=glass]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: rgba(255, 255, 255, 0.5); } [tuiTheme=night] [tuiAppearance][data-appearance=glass]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: rgba(255, 255, 255, 0.5); } [tuiTheme=night] [tuiAppearance][data-appearance=glass][data-state=active] { background: rgba(255, 255, 255, 0.5); } [tuiAppearance][data-appearance=icon] { color: var(--tui-text-03); } @media (hover: hover) { [tuiAppearance][data-appearance=icon]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { color: var(--tui-text-02); } } @media (hover: hover) { [tuiAppearance][data-appearance=icon]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { color: var(--tui-text-02); } } [tuiAppearance][data-appearance=icon][data-state=hover] { color: var(--tui-text-02); } [tuiAppearance][data-appearance=icon]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { color: var(--tui-text-01); } [tuiAppearance][data-appearance=icon]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { color: var(--tui-text-01); } [tuiAppearance][data-appearance=icon][data-state=active] { color: var(--tui-text-01); } [tuiAppearance][data-appearance=whiteblock]:before, [tuiAppearance][data-appearance=neutral]:before, [tuiAppearance][data-appearance=floating]:before, [tuiAppearance][data-appearance=whiteblock]:after, [tuiAppearance][data-appearance=neutral]:after, [tuiAppearance][data-appearance=floating]:after { transition-property: color; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; color: var(--tui-text-03); } @media (hover: hover) { [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]):before, [tuiAppearance][data-appearance=neutral]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]):before, [tuiAppearance][data-appearance=floating]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]):before, [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]):after, [tuiAppearance][data-appearance=neutral]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]):after, [tuiAppearance][data-appearance=floating]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]):after { color: var(--tui-text-02); } } @media (hover: hover) { [tuiAppearance][data-appearance=whiteblock]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]):before, [tuiAppearance][data-appearance=neutral]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]):before, [tuiAppearance][data-appearance=floating]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]):before, [tuiAppearance][data-appearance=whiteblock]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]):after, [tuiAppearance][data-appearance=neutral]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]):after, [tuiAppearance][data-appearance=floating]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]):after { color: var(--tui-text-02); } } [tuiAppearance][data-appearance=whiteblock][data-state=hover]:before, [tuiAppearance][data-appearance=neutral][data-state=hover]:before, [tuiAppearance][data-appearance=floating][data-state=hover]:before, [tuiAppearance][data-appearance=whiteblock][data-state=hover]:after, [tuiAppearance][data-appearance=neutral][data-state=hover]:after, [tuiAppearance][data-appearance=floating][data-state=hover]:after { color: var(--tui-text-02); } [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]):before, [tuiAppearance][data-appearance=neutral]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]):before, [tuiAppearance][data-appearance=floating]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]):before, [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]):after, [tuiAppearance][data-appearance=neutral]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]):after, [tuiAppearance][data-appearance=floating]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]):after { color: var(--tui-text-01); } [tuiAppearance][data-appearance=whiteblock]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]):before, [tuiAppearance][data-appearance=neutral]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]):before, [tuiAppearance][data-appearance=floating]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]):before, [tuiAppearance][data-appearance=whiteblock]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]):after, [tuiAppearance][data-appearance=neutral]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]):after, [tuiAppearance][data-appearance=floating]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]):after { color: var(--tui-text-01); } [tuiAppearance][data-appearance=whiteblock][data-state=active]:before, [tuiAppearance][data-appearance=neutral][data-state=active]:before, [tuiAppearance][data-appearance=floating][data-state=active]:before, [tuiAppearance][data-appearance=whiteblock][data-state=active]:after, [tuiAppearance][data-appearance=neutral][data-state=active]:after, [tuiAppearance][data-appearance=floating][data-state=active]:after { color: var(--tui-text-01); } [tuiAppearance][data-appearance=link] { color: var(--tui-link); } @media (hover: hover) { [tuiAppearance][data-appearance=link]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { color: var(--tui-link-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=link]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { color: var(--tui-link-hover); } } [tuiAppearance][data-appearance=link][data-state=hover] { color: var(--tui-link-hover); } [tuiAppearance][data-appearance=link]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { color: var(--tui-link-hover); } [tuiAppearance][data-appearance=link]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { color: var(--tui-link-hover); } [tuiAppearance][data-appearance=link][data-state=active] { color: var(--tui-link-hover); } [tuiAppearance][data-appearance=opposite] { --tui-focus: rgba(255, 255, 255, 0.64); background: #000; color: #fff; } @media (hover: hover) { [tuiAppearance][data-appearance=opposite]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: #333; } } @media (hover: hover) { [tuiAppearance][data-appearance=opposite]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: #333; } } [tuiAppearance][data-appearance=opposite][data-state=hover] { background: #333; } [tuiAppearance][data-appearance=opposite]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: #5c636b; } [tuiAppearance][data-appearance=opposite]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: #5c636b; } [tuiAppearance][data-appearance=opposite][data-state=active] { background: #5c636b; } [tuiTheme=night] [tuiAppearance][data-appearance=opposite] { --tui-focus: rgba(51, 51, 51, 0.48); color: rgba(0, 0, 0, 0.8); background: #fff; } @media (hover: hover) { [tuiTheme=night] [tuiAppearance][data-appearance=opposite]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: #f3F4f6; } } @media (hover: hover) { [tuiTheme=night] [tuiAppearance][data-appearance=opposite]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: #f3F4f6; } } [tuiTheme=night] [tuiAppearance][data-appearance=opposite][data-state=hover] { background: #f3F4f6; } [tuiTheme=night] [tuiAppearance][data-appearance=opposite]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: #eaecee; } [tuiTheme=night] [tuiAppearance][data-appearance=opposite]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: #eaecee; } [tuiTheme=night] [tuiAppearance][data-appearance=opposite][data-state=active] { background: #eaecee; } [tuiAppearance][data-appearance=outline], [tuiAppearance][data-appearance=whiteblock] { background: transparent; color: var(--tui-link); box-shadow: inset 0 0 0 1px var(--tui-base-04); } @media (hover: hover) { [tuiAppearance][data-appearance=outline]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-clear); box-shadow: inset 0 0 0 1px var(--tui-base-05); cursor: pointer; } } @media (hover: hover) { [tuiAppearance][data-appearance=outline]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=whiteblock]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-clear); box-shadow: inset 0 0 0 1px var(--tui-base-05); cursor: pointer; } } [tuiAppearance][data-appearance=outline][data-state=hover], [tuiAppearance][data-appearance=whiteblock][data-state=hover] { background: var(--tui-clear); box-shadow: inset 0 0 0 1px var(--tui-base-05); cursor: pointer; } [tuiAppearance][data-appearance=outline]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=whiteblock]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-clear); box-shadow: inset 0 0 0 1px var(--tui-base-06); } [tuiAppearance][data-appearance=outline]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=whiteblock]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-clear); box-shadow: inset 0 0 0 1px var(--tui-base-06); } [tuiAppearance][data-appearance=outline][data-state=active], [tuiAppearance][data-appearance=whiteblock][data-state=active] { background: var(--tui-clear); box-shadow: inset 0 0 0 1px var(--tui-base-06); } [tuiAppearance][data-appearance=outline]:checked, [tuiAppearance][data-appearance=whiteblock]:checked, [tuiAppearance][data-appearance=outline]._checked, [tuiAppearance][data-appearance=whiteblock]._checked { box-shadow: inset 0 0 0 2px var(--tui-primary); } @media (hover: hover) { [tuiAppearance][data-appearance=outline]:checked:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=whiteblock]:checked:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=outline]._checked:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=whiteblock]._checked:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { box-shadow: inset 0 0 0 2px var(--tui-primary-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=outline]:checked:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=whiteblock]:checked:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=outline]._checked:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=whiteblock]._checked:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { box-shadow: inset 0 0 0 2px var(--tui-primary-hover); } } [tuiAppearance][data-appearance=outline]:checked[data-state=hover], [tuiAppearance][data-appearance=whiteblock]:checked[data-state=hover], [tuiAppearance][data-appearance=outline]._checked[data-state=hover], [tuiAppearance][data-appearance=whiteblock]._checked[data-state=hover] { box-shadow: inset 0 0 0 2px var(--tui-primary-hover); } [tuiAppearance][data-appearance=outline]:checked:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=whiteblock]:checked:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=outline]._checked:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=whiteblock]._checked:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { box-shadow: inset 0 0 0 2px var(--tui-primary-active); } [tuiAppearance][data-appearance=outline]:checked:-moz-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=whiteblock]:checked:-moz-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=outline]._checked:-moz-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=whiteblock]._checked:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { box-shadow: inset 0 0 0 2px var(--tui-primary-active); } [tuiAppearance][data-appearance=outline]:checked[data-state=active], [tuiAppearance][data-appearance=whiteblock]:checked[data-state=active], [tuiAppearance][data-appearance=outline]._checked[data-state=active], [tuiAppearance][data-appearance=whiteblock]._checked[data-state=active] { box-shadow: inset 0 0 0 2px var(--tui-primary-active); } [tuiAppearance][data-appearance=whiteblock] { color: var(--tui-text-01); } [tuiAppearance][data-appearance=primary] { background: var(--tui-primary); color: var(--tui-primary-text); } @media (hover: hover) { [tuiAppearance][data-appearance=primary]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-primary-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=primary]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-primary-hover); } } [tuiAppearance][data-appearance=primary][data-state=hover] { background: var(--tui-primary-hover); } [tuiAppearance][data-appearance=primary]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-primary-active); } [tuiAppearance][data-appearance=primary]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-primary-active); } [tuiAppearance][data-appearance=primary][data-state=active] { background: var(--tui-primary-active); } [tuiAppearance][data-appearance=secondary], [tuiAppearance][data-appearance=flat], [tuiAppearance][data-appearance=destructive] { background: var(--tui-secondary); color: var(--tui-link); } @media (hover: hover) { [tuiAppearance][data-appearance=secondary]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=flat]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=destructive]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-secondary-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=secondary]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=flat]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]), [tuiAppearance][data-appearance=destructive]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-secondary-hover); } } [tuiAppearance][data-appearance=secondary][data-state=hover], [tuiAppearance][data-appearance=flat][data-state=hover], [tuiAppearance][data-appearance=destructive][data-state=hover] { background: var(--tui-secondary-hover); } [tuiAppearance][data-appearance=secondary]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=flat]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=destructive]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-secondary-active); } [tuiAppearance][data-appearance=secondary]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=flat]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]), [tuiAppearance][data-appearance=destructive]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-secondary-active); } [tuiAppearance][data-appearance=secondary][data-state=active], [tuiAppearance][data-appearance=flat][data-state=active], [tuiAppearance][data-appearance=destructive][data-state=active] { background: var(--tui-secondary-active); } [tuiAppearance][data-appearance=flat] { background: transparent; } [tuiAppearance][data-appearance=destructive] { color: var(--tui-negative); } [tuiAppearance][data-appearance=error] { color: var(--tui-text-01); background: var(--tui-error-bg); } @media (hover: hover) { [tuiAppearance][data-appearance=error]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-error-bg-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=error]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-error-bg-hover); } } [tuiAppearance][data-appearance=error][data-state=hover] { background: var(--tui-error-bg-hover); } [tuiAppearance][data-appearance=error]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-error-bg-hover); } [tuiAppearance][data-appearance=error]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-error-bg-hover); } [tuiAppearance][data-appearance=error][data-state=active] { background: var(--tui-error-bg-hover); } [tuiAppearance][data-appearance=success] { color: var(--tui-text-01); background: var(--tui-success-bg); } @media (hover: hover) { [tuiAppearance][data-appearance=success]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-success-bg-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=success]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-success-bg-hover); } } [tuiAppearance][data-appearance=success][data-state=hover] { background: var(--tui-success-bg-hover); } [tuiAppearance][data-appearance=success]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-success-bg-hover); } [tuiAppearance][data-appearance=success]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-success-bg-hover); } [tuiAppearance][data-appearance=success][data-state=active] { background: var(--tui-success-bg-hover); } [tuiAppearance][data-appearance=warning] { color: var(--tui-text-01); background: var(--tui-warning-bg); } @media (hover: hover) { [tuiAppearance][data-appearance=warning]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-warning-bg-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=warning]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-warning-bg-hover); } } [tuiAppearance][data-appearance=warning][data-state=hover] { background: var(--tui-warning-bg-hover); } [tuiAppearance][data-appearance=warning]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-warning-bg-hover); } [tuiAppearance][data-appearance=warning]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-warning-bg-hover); } [tuiAppearance][data-appearance=warning][data-state=active] { background: var(--tui-warning-bg-hover); } [tuiAppearance][data-appearance=info] { color: var(--tui-text-01); background: var(--tui-info-bg); } @media (hover: hover) { [tuiAppearance][data-appearance=info]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-info-bg-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=info]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-info-bg-hover); } } [tuiAppearance][data-appearance=info][data-state=hover] { background: var(--tui-info-bg-hover); } [tuiAppearance][data-appearance=info]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-info-bg-hover); } [tuiAppearance][data-appearance=info]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-info-bg-hover); } [tuiAppearance][data-appearance=info][data-state=active] { background: var(--tui-info-bg-hover); } [tuiAppearance][data-appearance=neutral] { color: var(--tui-text-01); background: var(--tui-neutral-bg); } @media (hover: hover) { [tuiAppearance][data-appearance=neutral]:-webkit-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-neutral-bg-hover); } } @media (hover: hover) { [tuiAppearance][data-appearance=neutral]:-moz-any(a, button, select, textarea, input, label):hover:not([data-state]) { background: var(--tui-neutral-bg-hover); } } [tuiAppearance][data-appearance=neutral][data-state=hover] { background: var(--tui-neutral-bg-hover); } [tuiAppearance][data-appearance=neutral]:-webkit-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-neutral-bg-hover); } [tuiAppearance][data-appearance=neutral]:-moz-any(a, button, select, textarea, input, label):active:not([data-state]) { background: var(--tui-neutral-bg-hover); } [tuiAppearance][data-appearance=neutral][data-state=active] { background: var(--tui-neutral-bg-hover); } [tuiWrapper][data-appearance=icon][data-appearance=icon] { transition-property: opacity; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; color: var(--tui-text-01); opacity: 0.5; } [tuiWrapper]:not([data-state=readonly]):hover .t-textfield-icon [tuiWrapper][data-appearance=icon][data-appearance=icon]:not([data-state=disabled]) { opacity: 0.65; } [tuiWrapper][data-appearance=icon][data-appearance=icon][data-mode=onDark] { color: var(--tui-text-01-night); } [tuiWrapper]:not([data-state=readonly]):hover .t-textfield-icon [tuiWrapper][data-appearance=icon][data-appearance=icon][data-mode=onDark]:not([data-state=disabled]) { opacity: 1; } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=icon][data-appearance=icon][data-mode=onDark], [data-focused=true] > [tuiWrapper][data-appearance=icon][data-appearance=icon][data-mode=onDark] { --tui-focus: var(--tui-base-01); } [tuiWrapper][data-appearance=icon][data-appearance=icon][data-mode=onDark]:focus-visible:focus-visible { --tui-focus: var(--tui-base-01); } [tuiWrapper][data-appearance=icon][data-appearance=icon][data-mode=onDark]._focused._focused { --tui-focus: var(--tui-base-01); } @media (hover: hover) { [tuiWrapper][data-appearance=icon][data-appearance=icon][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=icon][data-appearance=icon][data-mode=onDark][data-state=hover] { opacity: 1; } } @media (hover: hover) { [tuiWrapper][data-appearance=icon][data-appearance=icon]:hover:not(._no-hover), [tuiWrapper][data-appearance=icon][data-appearance=icon][data-state=hover] { opacity: 0.65; } } [tuiWrapper][data-appearance=icon][data-appearance=icon]:active:not(._no-active), [tuiWrapper][data-appearance=icon][data-appearance=icon][data-state=active], [tuiWrapper][data-appearance=icon][data-appearance=icon][data-state=active]:hover { opacity: 1; } [tuiWrapper][data-appearance=icon][data-appearance=icon]:disabled:disabled, [tuiWrapper][data-appearance=icon][data-appearance=icon][data-state=disabled][data-state=disabled] { opacity: calc(0.5 * var(--tui-disabled-opacity)); } [tuiWrapper][data-appearance=outline] { background: transparent; color: var(--tui-text-01); } [tuiWrapper][data-appearance=outline]:after { color: var(--tui-base-04); } [tuiWrapper][data-appearance=outline][data-mode=onDark] { color: var(--tui-text-01-night); } [tuiWrapper][data-appearance=outline][data-mode=onDark]:after { color: var(--tui-text-01-night); } @media (hover: hover) { [tuiWrapper][data-appearance=outline][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=outline][data-mode=onDark][data-state=hover] { background: var(--tui-clear-inverse-hover); } [tuiWrapper][data-appearance=outline][data-mode=onDark]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=outline][data-mode=onDark][data-state=hover]:after { color: var(--tui-text-03-night); } } [tuiWrapper][data-appearance=outline][data-mode=onDark]:active:not(._no-active), [tuiWrapper][data-appearance=outline][data-mode=onDark][data-state=active], [tuiWrapper][data-appearance=outline][data-mode=onDark][data-state=active]:hover { background: var(--tui-clear-inverse-active); } [tuiWrapper][data-appearance=outline][data-mode=onDark]:active:not(._no-active):after, [tuiWrapper][data-appearance=outline][data-mode=onDark][data-state=active]:after, [tuiWrapper][data-appearance=outline][data-mode=onDark][data-state=active]:hover:after { color: var(--tui-text-03-night); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=outline][data-mode=onDark], [data-focused=true] > [tuiWrapper][data-appearance=outline][data-mode=onDark] { --tui-focus: var(--tui-text-01-night); } [tuiWrapper][data-appearance=outline][data-mode=onDark]:focus-visible:focus-visible { --tui-focus: var(--tui-text-01-night); } [tuiWrapper][data-appearance=outline][data-mode=onDark]._focused._focused { --tui-focus: var(--tui-text-01-night); } [tuiWrapper][data-appearance=outline][data-mode=onLight] { color: var(--tui-text-01); } [tuiWrapper][data-appearance=outline][data-mode=onLight]:after { color: var(--tui-text-01); } @media (hover: hover) { [tuiWrapper][data-appearance=outline][data-mode=onLight]:hover:not(._no-hover), [tuiWrapper][data-appearance=outline][data-mode=onLight][data-state=hover] { background: var(--tui-clear-hover); } [tuiWrapper][data-appearance=outline][data-mode=onLight]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=outline][data-mode=onLight][data-state=hover]:after { color: var(--tui-text-03); } } [tuiWrapper][data-appearance=outline][data-mode=onLight]:active:not(._no-active), [tuiWrapper][data-appearance=outline][data-mode=onLight][data-state=active], [tuiWrapper][data-appearance=outline][data-mode=onLight][data-state=active]:hover { background: var(--tui-clear-active); } [tuiWrapper][data-appearance=outline][data-mode=onLight]:active:not(._no-active):after, [tuiWrapper][data-appearance=outline][data-mode=onLight][data-state=active]:after, [tuiWrapper][data-appearance=outline][data-mode=onLight][data-state=active]:hover:after { color: var(--tui-text-03); } @media (hover: hover) { [tuiWrapper][data-appearance=outline]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=outline][data-state=hover]:after { color: var(--tui-base-05); } } [tuiWrapper][data-appearance=outline]:active:not(._no-active):after, [tuiWrapper][data-appearance=outline][data-state=active]:after, [tuiWrapper][data-appearance=outline][data-state=active]:hover:after { color: var(--tui-base-06); } [tuiWrapper][data-appearance=primary] { background: var(--tui-primary); color: var(--tui-primary-text); } @media (hover: hover) { [tuiWrapper][data-appearance=primary]:hover:not(._no-hover), [tuiWrapper][data-appearance=primary][data-state=hover] { background: var(--tui-primary-hover); } } [tuiWrapper][data-appearance=primary]:active:not(._no-active), [tuiWrapper][data-appearance=primary][data-state=active], [tuiWrapper][data-appearance=primary][data-state=active]:hover { background: var(--tui-primary-active); } [tuiWrapper][data-appearance=primary]:invalid:invalid, [tuiWrapper][data-appearance=primary]._invalid._invalid { color: var(--tui-negative-night); background: var(--tui-error-bg); } @media (hover: hover) { [tuiWrapper][data-appearance=primary]:invalid:invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=primary]._invalid._invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=primary]:invalid:invalid[data-state=hover], [tuiWrapper][data-appearance=primary]._invalid._invalid[data-state=hover] { background: var(--tui-error-bg-hover); } } [tuiWrapper][data-appearance=primary]:invalid:invalid:active:not(._no-active), [tuiWrapper][data-appearance=primary]._invalid._invalid:active:not(._no-active), [tuiWrapper][data-appearance=primary]:invalid:invalid[data-state=active], [tuiWrapper][data-appearance=primary]._invalid._invalid[data-state=active], [tuiWrapper][data-appearance=primary]:invalid:invalid[data-state=active]:hover, [tuiWrapper][data-appearance=primary]._invalid._invalid[data-state=active]:hover { background: var(--tui-error-bg-hover); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=primary]:invalid:invalid, :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=primary]._invalid._invalid, [data-focused=true] > [tuiWrapper][data-appearance=primary]:invalid:invalid, [data-focused=true] > [tuiWrapper][data-appearance=primary]._invalid._invalid { --tui-focus: var(--tui-error-fill); } [tuiWrapper][data-appearance=primary]:invalid:invalid:focus-visible:focus-visible, [tuiWrapper][data-appearance=primary]._invalid._invalid:focus-visible:focus-visible { --tui-focus: var(--tui-error-fill); } [tuiWrapper][data-appearance=primary]:invalid:invalid._focused._focused, [tuiWrapper][data-appearance=primary]._invalid._invalid._focused._focused { --tui-focus: var(--tui-error-fill); } [tuiWrapper][data-appearance=accent] { background: var(--tui-accent); color: var(--tui-accent-text); } @media (hover: hover) { [tuiWrapper][data-appearance=accent]:hover:not(._no-hover), [tuiWrapper][data-appearance=accent][data-state=hover] { background: var(--tui-accent-hover); } } [tuiWrapper][data-appearance=accent]:active:not(._no-active), [tuiWrapper][data-appearance=accent][data-state=active], [tuiWrapper][data-appearance=accent][data-state=active]:hover { background: var(--tui-accent-active); } [tuiWrapper][data-appearance=accent]:invalid:invalid, [tuiWrapper][data-appearance=accent]._invalid._invalid { color: var(--tui-negative-night); background: var(--tui-error-bg); } @media (hover: hover) { [tuiWrapper][data-appearance=accent]:invalid:invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=accent]._invalid._invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=accent]:invalid:invalid[data-state=hover], [tuiWrapper][data-appearance=accent]._invalid._invalid[data-state=hover] { background: var(--tui-error-bg-hover); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=accent]:invalid:invalid, :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=accent]._invalid._invalid, [data-focused=true] > [tuiWrapper][data-appearance=accent]:invalid:invalid, [data-focused=true] > [tuiWrapper][data-appearance=accent]._invalid._invalid { --tui-focus: var(--tui-error-fill); } [tuiWrapper][data-appearance=accent]:invalid:invalid:focus-visible:focus-visible, [tuiWrapper][data-appearance=accent]._invalid._invalid:focus-visible:focus-visible { --tui-focus: var(--tui-error-fill); } [tuiWrapper][data-appearance=accent]:invalid:invalid._focused._focused, [tuiWrapper][data-appearance=accent]._invalid._invalid._focused._focused { --tui-focus: var(--tui-error-fill); } [tuiWrapper][data-appearance=floating] { transition-property: background, box-shadow; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; background: #fff; color: rgba(0, 0, 0, 0.8); box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } @media (hover: hover) { [tuiWrapper][data-appearance=floating]:hover:not(._no-hover), [tuiWrapper][data-appearance=floating][data-state=hover] { box-shadow: 0 0.875rem 2.625rem rgba(0, 0, 0, 0.14); } } [tuiWrapper][data-appearance=floating]:active:not(._no-active), [tuiWrapper][data-appearance=floating][data-state=active], [tuiWrapper][data-appearance=floating][data-state=active]:hover { background: #f6f7f8; box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1); } [tuiWrapper][data-appearance=glass] { background: rgba(0, 0, 0, 0.4); color: #fff; -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); --tui-focus: rgba(255, 255, 255, 0.64); } @media (hover: hover) { [tuiWrapper][data-appearance=glass]:hover:not(._no-hover), [tuiWrapper][data-appearance=glass][data-state=hover] { background: rgba(0, 0, 0, 0.48); } } [tuiWrapper][data-appearance=glass]:active:not(._no-active), [tuiWrapper][data-appearance=glass][data-state=active], [tuiWrapper][data-appearance=glass][data-state=active]:hover { background: rgba(0, 0, 0, 0.6); } [tuiWrapper][data-appearance=glass][data-mode=onDark] { background: rgba(255, 255, 255, 0.3); } @media (hover: hover) { [tuiWrapper][data-appearance=glass][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=glass][data-mode=onDark][data-state=hover] { background: rgba(255, 255, 255, 0.4); } } [tuiWrapper][data-appearance=glass][data-mode=onDark]:active:not(._no-active), [tuiWrapper][data-appearance=glass][data-mode=onDark][data-state=active], [tuiWrapper][data-appearance=glass][data-mode=onDark][data-state=active]:hover { background: rgba(255, 255, 255, 0.5); } [tuiWrapper][data-appearance=secondary], [tuiWrapper][data-appearance=flat], [tuiWrapper][data-appearance=destructive] { background: var(--tui-secondary); color: var(--tui-link); } [tuiWrapper][data-appearance=secondary][data-mode=onDark], [tuiWrapper][data-appearance=flat][data-mode=onDark], [tuiWrapper][data-appearance=destructive][data-mode=onDark] { background: var(--tui-clear-inverse); color: var(--tui-text-01-night); } @media (hover: hover) { [tuiWrapper][data-appearance=secondary][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=flat][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=destructive][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=secondary][data-mode=onDark][data-state=hover], [tuiWrapper][data-appearance=flat][data-mode=onDark][data-state=hover], [tuiWrapper][data-appearance=destructive][data-mode=onDark][data-state=hover] { background: var(--tui-clear-inverse-hover); } } [tuiWrapper][data-appearance=secondary][data-mode=onDark]:active:not(._no-active), [tuiWrapper][data-appearance=flat][data-mode=onDark]:active:not(._no-active), [tuiWrapper][data-appearance=destructive][data-mode=onDark]:active:not(._no-active), [tuiWrapper][data-appearance=secondary][data-mode=onDark][data-state=active], [tuiWrapper][data-appearance=flat][data-mode=onDark][data-state=active], [tuiWrapper][data-appearance=destructive][data-mode=onDark][data-state=active], [tuiWrapper][data-appearance=secondary][data-mode=onDark][data-state=active]:hover, [tuiWrapper][data-appearance=flat][data-mode=onDark][data-state=active]:hover, [tuiWrapper][data-appearance=destructive][data-mode=onDark][data-state=active]:hover { background: var(--tui-clear-inverse-active); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=secondary][data-mode=onDark], :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=flat][data-mode=onDark], :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=destructive][data-mode=onDark], [data-focused=true] > [tuiWrapper][data-appearance=secondary][data-mode=onDark], [data-focused=true] > [tuiWrapper][data-appearance=flat][data-mode=onDark], [data-focused=true] > [tuiWrapper][data-appearance=destructive][data-mode=onDark] { --tui-focus: var(--tui-text-01-night); } [tuiWrapper][data-appearance=secondary][data-mode=onDark]:focus-visible:focus-visible, [tuiWrapper][data-appearance=flat][data-mode=onDark]:focus-visible:focus-visible, [tuiWrapper][data-appearance=destructive][data-mode=onDark]:focus-visible:focus-visible { --tui-focus: var(--tui-text-01-night); } [tuiWrapper][data-appearance=secondary][data-mode=onDark]._focused._focused, [tuiWrapper][data-appearance=flat][data-mode=onDark]._focused._focused, [tuiWrapper][data-appearance=destructive][data-mode=onDark]._focused._focused { --tui-focus: var(--tui-text-01-night); } [tuiWrapper][data-appearance=secondary][data-mode=onLight], [tuiWrapper][data-appearance=flat][data-mode=onLight], [tuiWrapper][data-appearance=destructive][data-mode=onLight] { background: var(--tui-clear); color: var(--tui-text-01); } @media (hover: hover) { [tuiWrapper][data-appearance=secondary][data-mode=onLight]:hover:not(._no-hover), [tuiWrapper][data-appearance=flat][data-mode=onLight]:hover:not(._no-hover), [tuiWrapper][data-appearance=destructive][data-mode=onLight]:hover:not(._no-hover), [tuiWrapper][data-appearance=secondary][data-mode=onLight][data-state=hover], [tuiWrapper][data-appearance=flat][data-mode=onLight][data-state=hover], [tuiWrapper][data-appearance=destructive][data-mode=onLight][data-state=hover] { background: var(--tui-clear-hover); } } [tuiWrapper][data-appearance=secondary][data-mode=onLight]:active:not(._no-active), [tuiWrapper][data-appearance=flat][data-mode=onLight]:active:not(._no-active), [tuiWrapper][data-appearance=destructive][data-mode=onLight]:active:not(._no-active), [tuiWrapper][data-appearance=secondary][data-mode=onLight][data-state=active], [tuiWrapper][data-appearance=flat][data-mode=onLight][data-state=active], [tuiWrapper][data-appearance=destructive][data-mode=onLight][data-state=active], [tuiWrapper][data-appearance=secondary][data-mode=onLight][data-state=active]:hover, [tuiWrapper][data-appearance=flat][data-mode=onLight][data-state=active]:hover, [tuiWrapper][data-appearance=destructive][data-mode=onLight][data-state=active]:hover { background: var(--tui-clear-active); } @media (hover: hover) { [tuiWrapper][data-appearance=secondary]:hover:not(._no-hover), [tuiWrapper][data-appearance=flat]:hover:not(._no-hover), [tuiWrapper][data-appearance=destructive]:hover:not(._no-hover), [tuiWrapper][data-appearance=secondary][data-state=hover], [tuiWrapper][data-appearance=flat][data-state=hover], [tuiWrapper][data-appearance=destructive][data-state=hover] { background: var(--tui-secondary-hover); } } [tuiWrapper][data-appearance=secondary]:active:not(._no-active), [tuiWrapper][data-appearance=flat]:active:not(._no-active), [tuiWrapper][data-appearance=destructive]:active:not(._no-active), [tuiWrapper][data-appearance=secondary][data-state=active], [tuiWrapper][data-appearance=flat][data-state=active], [tuiWrapper][data-appearance=destructive][data-state=active], [tuiWrapper][data-appearance=secondary][data-state=active]:hover, [tuiWrapper][data-appearance=flat][data-state=active]:hover, [tuiWrapper][data-appearance=destructive][data-state=active]:hover { background: var(--tui-secondary-active); } [tuiWrapper][data-appearance=secondary]:invalid:invalid, [tuiWrapper][data-appearance=flat]:invalid:invalid, [tuiWrapper][data-appearance=destructive]:invalid:invalid, [tuiWrapper][data-appearance=secondary]._invalid._invalid, [tuiWrapper][data-appearance=flat]._invalid._invalid, [tuiWrapper][data-appearance=destructive]._invalid._invalid { color: var(--tui-negative); background: var(--tui-error-bg); } @media (hover: hover) { [tuiWrapper][data-appearance=secondary]:invalid:invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=flat]:invalid:invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=destructive]:invalid:invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=secondary]._invalid._invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=flat]._invalid._invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=destructive]._invalid._invalid:hover:not(._no-hover), [tuiWrapper][data-appearance=secondary]:invalid:invalid[data-state=hover], [tuiWrapper][data-appearance=flat]:invalid:invalid[data-state=hover], [tuiWrapper][data-appearance=destructive]:invalid:invalid[data-state=hover], [tuiWrapper][data-appearance=secondary]._invalid._invalid[data-state=hover], [tuiWrapper][data-appearance=flat]._invalid._invalid[data-state=hover], [tuiWrapper][data-appearance=destructive]._invalid._invalid[data-state=hover] { background: var(--tui-error-bg-hover); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=secondary]:invalid:invalid, :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=flat]:invalid:invalid, :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=destructive]:invalid:invalid, :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=secondary]._invalid._invalid, :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=flat]._invalid._invalid, :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=destructive]._invalid._invalid, [data-focused=true] > [tuiWrapper][data-appearance=secondary]:invalid:invalid, [data-focused=true] > [tuiWrapper][data-appearance=flat]:invalid:invalid, [data-focused=true] > [tuiWrapper][data-appearance=destructive]:invalid:invalid, [data-focused=true] > [tuiWrapper][data-appearance=secondary]._invalid._invalid, [data-focused=true] > [tuiWrapper][data-appearance=flat]._invalid._invalid, [data-focused=true] > [tuiWrapper][data-appearance=destructive]._invalid._invalid { --tui-focus: var(--tui-negative); } [tuiWrapper][data-appearance=secondary]:invalid:invalid:focus-visible:focus-visible, [tuiWrapper][data-appearance=flat]:invalid:invalid:focus-visible:focus-visible, [tuiWrapper][data-appearance=destructive]:invalid:invalid:focus-visible:focus-visible, [tuiWrapper][data-appearance=secondary]._invalid._invalid:focus-visible:focus-visible, [tuiWrapper][data-appearance=flat]._invalid._invalid:focus-visible:focus-visible, [tuiWrapper][data-appearance=destructive]._invalid._invalid:focus-visible:focus-visible { --tui-focus: var(--tui-negative); } [tuiWrapper][data-appearance=secondary]:invalid:invalid._focused._focused, [tuiWrapper][data-appearance=flat]:invalid:invalid._focused._focused, [tuiWrapper][data-appearance=destructive]:invalid:invalid._focused._focused, [tuiWrapper][data-appearance=secondary]._invalid._invalid._focused._focused, [tuiWrapper][data-appearance=flat]._invalid._invalid._focused._focused, [tuiWrapper][data-appearance=destructive]._invalid._invalid._focused._focused { --tui-focus: var(--tui-negative); } [tuiWrapper][data-appearance=flat] { background: transparent; } [tuiWrapper][data-appearance=flat][data-mode=onDark], [tuiWrapper][data-appearance=flat][data-mode=onLight] { background: transparent; } [tuiWrapper][data-appearance=destructive] { color: var(--tui-negative); background: var(--tui-error-bg); } @media (hover: hover) { [tuiWrapper][data-appearance=destructive]:hover:not(._no-hover), [tuiWrapper][data-appearance=destructive][data-state=hover] { background: var(--tui-error-bg-hover); } } [tuiWrapper][data-appearance=destructive]:active:not(._no-active), [tuiWrapper][data-appearance=destructive][data-state=active], [tuiWrapper][data-appearance=destructive][data-state=active]:hover { background: var(--tui-error-bg-hover); } [tuiWrapper][data-appearance=destructive][data-mode=onDark] { color: var(--tui-negative-night); background: var(--tui-error-bg-night); } @media (hover: hover) { [tuiWrapper][data-appearance=destructive][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=destructive][data-mode=onDark][data-state=hover] { background: var(--tui-error-bg-night-hover); } } [tuiWrapper][data-appearance=destructive][data-mode=onDark]:active:not(._no-active), [tuiWrapper][data-appearance=destructive][data-mode=onDark][data-state=active], [tuiWrapper][data-appearance=destructive][data-mode=onDark][data-state=active]:hover { background: var(--tui-error-bg-night-hover); } tui-wrapper[data-appearance=secondary-destructive], [tuiWrapper][data-appearance=secondary-destructive] { background: var(--tui-error-bg); color: var(--tui-negative); } tui-wrapper[data-appearance=secondary-destructive][data-mode=onDark], [tuiWrapper][data-appearance=secondary-destructive][data-mode=onDark] { background: var(--tui-error-bg-night); color: var(--tui-negative-night); } @media (hover: hover) { tui-wrapper[data-appearance=secondary-destructive][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=secondary-destructive][data-mode=onDark]:hover:not(._no-hover), tui-wrapper[data-appearance=secondary-destructive][data-mode=onDark][data-state=hover], [tuiWrapper][data-appearance=secondary-destructive][data-mode=onDark][data-state=hover] { background: var(--tui-error-bg-night-hover); } } tui-wrapper[data-appearance=secondary-destructive][data-mode=onDark]:active:not(._no-active), [tuiWrapper][data-appearance=secondary-destructive][data-mode=onDark]:active:not(._no-active), tui-wrapper[data-appearance=secondary-destructive][data-mode=onDark][data-state=active], [tuiWrapper][data-appearance=secondary-destructive][data-mode=onDark][data-state=active], tui-wrapper[data-appearance=secondary-destructive][data-mode=onDark][data-state=active]:hover, [tuiWrapper][data-appearance=secondary-destructive][data-mode=onDark][data-state=active]:hover { background: var(--tui-error-bg-night-hover); } @media (hover: hover) { tui-wrapper[data-appearance=secondary-destructive]:hover:not(._no-hover), [tuiWrapper][data-appearance=secondary-destructive]:hover:not(._no-hover), tui-wrapper[data-appearance=secondary-destructive][data-state=hover], [tuiWrapper][data-appearance=secondary-destructive][data-state=hover] { background: var(--tui-error-bg-hover); } } tui-wrapper[data-appearance=secondary-destructive]:active:not(._no-active), [tuiWrapper][data-appearance=secondary-destructive]:active:not(._no-active), tui-wrapper[data-appearance=secondary-destructive][data-state=active], [tuiWrapper][data-appearance=secondary-destructive][data-state=active], tui-wrapper[data-appearance=secondary-destructive][data-state=active]:hover, [tuiWrapper][data-appearance=secondary-destructive][data-state=active]:hover { background: var(--tui-error-bg-hover); } [tuiWrapper][data-appearance=table] { border-radius: 0; background: transparent; color: var(--tui-text-01); } [tuiWrapper][data-appearance=table]:before, [tuiWrapper][data-appearance=table][data-appearance=table]:after { position: fixed; top: -0.5px; left: -1px; right: -0.5px; bottom: -1px; } [tuiWrapper][data-appearance=table]:before { transition-property: background; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; content: ""; z-index: -1; background-repeat: no-repeat; background-position: top right; background-size: 0.5rem 0.5rem; } table [tuiWrapper][data-appearance=table][data-appearance=table]:not(._focused):after { border-width: 0; } table [tuiWrapper][data-appearance=table]._focused { z-index: 1; } [tuiWrapper][data-appearance=table][data-appearance=table]:after { border-width: 1px; color: var(--tui-base-04); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=table][data-mode=onDark], [data-focused=true] > [tuiWrapper][data-appearance=table][data-mode=onDark] { --tui-focus: var(--tui-text-01-night); } [tuiWrapper][data-appearance=table][data-mode=onDark]:focus-visible:focus-visible { --tui-focus: var(--tui-text-01-night); } [tuiWrapper][data-appearance=table][data-mode=onDark]._focused._focused { --tui-focus: var(--tui-text-01-night); } @media (hover: hover) { [tuiWrapper][data-appearance=table]:hover:not(._no-hover):not(._focused):before, [tuiWrapper][data-appearance=table][data-state=hover]:not(._focused):before { background-color: var(--tui-clear); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=table], [data-focused=true] > [tuiWrapper][data-appearance=table] { background: transparent; } [tuiWrapper][data-appearance=table]:focus-visible:focus-visible { background: transparent; } [tuiWrapper][data-appearance=table]._focused._focused { background: transparent; } [tuiWrapper][data-appearance=table]:invalid:invalid:before, [tuiWrapper][data-appearance=table]._invalid._invalid:before { background-image: linear-gradient( to top right, transparent 0%, transparent 50%, var(--tui-error-fill) 50%, var(--tui-error-fill) 100%); } [tuiWrapper][data-appearance=table]:invalid:invalid:not(._focused):before, [tuiWrapper][data-appearance=table]._invalid._invalid:not(._focused):before { background-color: var(--tui-error-bg); } @media (hover: hover) { [tuiWrapper][data-appearance=table]:invalid:invalid:hover:not(._no-hover):not(._focused):before, [tuiWrapper][data-appearance=table]._invalid._invalid:hover:not(._no-hover):not(._focused):before, [tuiWrapper][data-appearance=table]:invalid:invalid[data-state=hover]:not(._focused):before, [tuiWrapper][data-appearance=table]._invalid._invalid[data-state=hover]:not(._focused):before { background-color: var(--tui-error-bg-hover); } } [tuiWrapper][data-appearance=table]:invalid:invalid:disabled:disabled, [tuiWrapper][data-appearance=table]._invalid._invalid:disabled:disabled, [tuiWrapper][data-appearance=table]:invalid:invalid[data-state=disabled][data-state=disabled], [tuiWrapper][data-appearance=table]._invalid._invalid[data-state=disabled][data-state=disabled] { background: transparent; } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=table]:invalid:invalid, :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=table]._invalid._invalid, [data-focused=true] > [tuiWrapper][data-appearance=table]:invalid:invalid, [data-focused=true] > [tuiWrapper][data-appearance=table]._invalid._invalid { background: transparent; --tui-focus: var(--tui-error-fill); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=table]:invalid:invalid:after, :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=table]._invalid._invalid:after, [data-focused=true] > [tuiWrapper][data-appearance=table]:invalid:invalid:after, [data-focused=true] > [tuiWrapper][data-appearance=table]._invalid._invalid:after { border-width: 1px; } [tuiWrapper][data-appearance=table]:invalid:invalid:focus-visible:focus-visible, [tuiWrapper][data-appearance=table]._invalid._invalid:focus-visible:focus-visible { background: transparent; --tui-focus: var(--tui-error-fill); } [tuiWrapper][data-appearance=table]:invalid:invalid:focus-visible:focus-visible:after, [tuiWrapper][data-appearance=table]._invalid._invalid:focus-visible:focus-visible:after { border-width: 1px; } [tuiWrapper][data-appearance=table]:invalid:invalid._focused._focused, [tuiWrapper][data-appearance=table]._invalid._invalid._focused._focused { background: transparent; --tui-focus: var(--tui-error-fill); } [tuiWrapper][data-appearance=table]:invalid:invalid._focused._focused:after, [tuiWrapper][data-appearance=table]._invalid._invalid._focused._focused:after { border-width: 1px; } [tuiWrapper][data-appearance=textfield] { transition-property: box-shadow, background; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; background: var(--tui-base-01); color: var(--tui-text-01); box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1); } [tuiWrapper][data-appearance=textfield][data-appearance=textfield]:after { transition-property: color; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; color: var(--tui-base-03); } @media (hover: hover) { [tuiWrapper][data-appearance=textfield]:hover:not(._no-hover), [tuiWrapper][data-appearance=textfield][data-state=hover] { box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.16); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=textfield], [data-focused=true] > [tuiWrapper][data-appearance=textfield] { box-shadow: none; } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=textfield]:after, [data-focused=true] > [tuiWrapper][data-appearance=textfield]:after { --tui-focus: var(--tui-primary); } [tuiWrapper][data-appearance=textfield]:focus-visible:focus-visible { box-shadow: none; } [tuiWrapper][data-appearance=textfield]:focus-visible:focus-visible:after { --tui-focus: var(--tui-primary); } [tuiWrapper][data-appearance=textfield]._focused._focused { box-shadow: none; } [tuiWrapper][data-appearance=textfield]._focused._focused:after { --tui-focus: var(--tui-primary); } [tuiWrapper][data-appearance=textfield][data-state=readonly][data-state=readonly] { box-shadow: none; } [tuiWrapper][data-appearance=textfield][data-state=readonly][data-state=readonly]:after { color: var(--tui-base-04); } [tuiWrapper][data-appearance=textfield]:disabled:disabled, [tuiWrapper][data-appearance=textfield][data-state=disabled][data-state=disabled] { box-shadow: none; } [tuiWrapper][data-appearance=textfield]:invalid:invalid:after, [tuiWrapper][data-appearance=textfield]._invalid._invalid:after { color: var(--tui-error-fill); --tui-focus: var(--tui-error-fill); } [tuiWrapper][data-appearance=textfield][data-mode=onDark] { background: var(--tui-clear-inverse); color: var(--tui-text-01-night); } [tuiWrapper][data-appearance=textfield][data-mode=onDark]:after { color: var(--tui-text-03-night); opacity: var(--tui-disabled-opacity); } @media (hover: hover) { [tuiWrapper][data-appearance=textfield][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=textfield][data-mode=onDark][data-state=hover] { background: var(--tui-clear-inverse-hover); } } [tuiWrapper][data-appearance=textfield][data-mode=onDark][data-state=readonly][data-state=readonly] { background: transparent; } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=textfield][data-mode=onDark], [data-focused=true] > [tuiWrapper][data-appearance=textfield][data-mode=onDark] { background: rgba(255, 255, 255, 0.08); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=textfield][data-mode=onDark]:after, [data-focused=true] > [tuiWrapper][data-appearance=textfield][data-mode=onDark]:after { transition: none; opacity: 1; --tui-focus: var(--tui-primary); } [tuiWrapper][data-appearance=textfield][data-mode=onDark]:focus-visible:focus-visible { background: rgba(255, 255, 255, 0.08); } [tuiWrapper][data-appearance=textfield][data-mode=onDark]:focus-visible:focus-visible:after { transition: none; opacity: 1; --tui-focus: var(--tui-primary); } [tuiWrapper][data-appearance=textfield][data-mode=onDark]._focused._focused { background: rgba(255, 255, 255, 0.08); } [tuiWrapper][data-appearance=textfield][data-mode=onDark]._focused._focused:after { transition: none; opacity: 1; --tui-focus: var(--tui-primary); } [tuiWrapper][data-appearance=textfield][data-mode=onDark]:invalid:invalid:after, [tuiWrapper][data-appearance=textfield][data-mode=onDark]._invalid._invalid:after { --tui-focus: var(--tui-error-fill-night); } [tuiWrapper][data-appearance=textfield][data-mode=onLight] { background: var(--tui-clear); } @media (hover: hover) { [tuiWrapper][data-appearance=textfield][data-mode=onLight]:hover:not(._no-hover), [tuiWrapper][data-appearance=textfield][data-mode=onLight][data-state=hover] { background: var(--tui-clear-hover); } } [tuiWrapper][data-appearance=textfield][data-mode=onLight][data-state=readonly][data-state=readonly] { background: transparent; } [tuiWrapper][data-appearance=textfield][data-mode=onLight]:invalid:invalid:after, [tuiWrapper][data-appearance=textfield][data-mode=onLight]._invalid._invalid:after { color: var(--tui-error-fill); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=textfield][data-mode=onLight], [data-focused=true] > [tuiWrapper][data-appearance=textfield][data-mode=onLight] { background: transparent; } [tuiWrapper][data-appearance=textfield][data-mode=onLight]:focus-visible:focus-visible { background: transparent; } [tuiWrapper][data-appearance=textfield][data-mode=onLight]._focused._focused { background: transparent; } [tuiWrapper][data-appearance=whiteblock], [tuiWrapper][data-appearance=whiteblock-active] { background: var(--tui-base-01); color: var(--tui-text-01); } [tuiWrapper][data-appearance=whiteblock]:after, [tuiWrapper][data-appearance=whiteblock-active]:after { color: var(--tui-base-04); } @media (hover: hover) { [tuiWrapper][data-appearance=whiteblock]:hover:not(._no-hover), [tuiWrapper][data-appearance=whiteblock-active]:hover:not(._no-hover), [tuiWrapper][data-appearance=whiteblock][data-state=hover], [tuiWrapper][data-appearance=whiteblock-active][data-state=hover] { background: var(--tui-base-02); } [tuiWrapper][data-appearance=whiteblock]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=whiteblock-active]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=whiteblock][data-state=hover]:after, [tuiWrapper][data-appearance=whiteblock-active][data-state=hover]:after { color: var(--tui-base-04); } } [tuiWrapper][data-appearance=whiteblock]:active:not(._no-active), [tuiWrapper][data-appearance=whiteblock-active]:active:not(._no-active), [tuiWrapper][data-appearance=whiteblock][data-state=active], [tuiWrapper][data-appearance=whiteblock-active][data-state=active], [tuiWrapper][data-appearance=whiteblock][data-state=active]:hover, [tuiWrapper][data-appearance=whiteblock-active][data-state=active]:hover { background: var(--tui-base-02); } [tuiWrapper][data-appearance=whiteblock]:active:not(._no-active):after, [tuiWrapper][data-appearance=whiteblock-active]:active:not(._no-active):after, [tuiWrapper][data-appearance=whiteblock][data-state=active]:after, [tuiWrapper][data-appearance=whiteblock-active][data-state=active]:after, [tuiWrapper][data-appearance=whiteblock][data-state=active]:hover:after, [tuiWrapper][data-appearance=whiteblock-active][data-state=active]:hover:after { color: var(--tui-base-04); } [tuiWrapper][data-appearance=whiteblock-active]:after { color: var(--tui-primary); border-width: 2px; } @media (hover: hover) { [tuiWrapper][data-appearance=whiteblock-active]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=whiteblock-active][data-state=hover]:after { color: var(--tui-primary-hover); } } [tuiWrapper][data-appearance=whiteblock-active]:active:not(._no-active):after, [tuiWrapper][data-appearance=whiteblock-active][data-state=active]:after, [tuiWrapper][data-appearance=whiteblock-active][data-state=active]:hover:after { color: var(--tui-primary-active); } [tuiWrapper][data-appearance=none]:after { border: none; } [tuiWrapper][data-appearance=opposite] { background: #000; color: #fff; --tui-focus: rgba(255, 255, 255, 0.64); } @media (hover: hover) { [tuiWrapper][data-appearance=opposite]:hover:not(._no-hover), [tuiWrapper][data-appearance=opposite][data-state=hover] { background: #333; } } [tuiWrapper][data-appearance=opposite]:active:not(._no-active), [tuiWrapper][data-appearance=opposite][data-state=active], [tuiWrapper][data-appearance=opposite][data-state=active]:hover { background: #5c636b; } [tuiWrapper][data-appearance=opposite][data-mode=onDark] { color: rgba(0, 0, 0, 0.8); background: #fff; --tui-focus: rgba(51, 51, 51, 0.48); } @media (hover: hover) { [tuiWrapper][data-appearance=opposite][data-mode=onDark]:hover:not(._no-hover), [tuiWrapper][data-appearance=opposite][data-mode=onDark][data-state=hover] { background: #f3F4f6; } } [tuiWrapper][data-appearance=opposite][data-mode=onDark]:active:not(._no-active), [tuiWrapper][data-appearance=opposite][data-mode=onDark][data-state=active], [tuiWrapper][data-appearance=opposite][data-mode=onDark][data-state=active]:hover { background: #eaecee; } [tuiWrapper] { transition-property: color, background, opacity; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; position: relative; display: block; height: 100%; width: 100%; appearance: none; border-radius: inherit; } [tuiWrapper]:after { transition-property: box-shadow, color; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: ""; border-radius: inherit; border: 1px solid currentColor; pointer-events: none; color: transparent; } :focus-visible:not([data-focused=false]) > [tuiWrapper]:after, [data-focused=true] > [tuiWrapper]:after { border-width: 2px; color: var(--tui-focus); } [tuiWrapper]:focus-visible:focus-visible:after { border-width: 2px; color: var(--tui-focus); } [tuiWrapper]._focused._focused:after { border-width: 2px; color: var(--tui-focus); } [tuiWrapper]:disabled:disabled, [tuiWrapper][data-state=disabled][data-state=disabled] { pointer-events: none; opacity: var(--tui-disabled-opacity); } @supports (-webkit-hyphens: none) { :focus-visible [tuiWrapper], [tuiWrapper]:focus-visible { --tui-focus: transparent !important; } } tui-wrapper[data-appearance=mono], [tuiWrapper][data-appearance=mono] { background: var(--tui-base-01); color: var(--tui-text-01); } @media (hover: hover) { tui-wrapper[data-appearance=mono]:hover:not(._no-hover), [tuiWrapper][data-appearance=mono]:hover:not(._no-hover), tui-wrapper[data-appearance=mono][data-state=hover], [tuiWrapper][data-appearance=mono][data-state=hover] { color: var(--tui-text-03); } } tui-wrapper[data-appearance=mono]:active:not(._no-active), [tuiWrapper][data-appearance=mono]:active:not(._no-active), tui-wrapper[data-appearance=mono][data-state=active], [tuiWrapper][data-appearance=mono][data-state=active], tui-wrapper[data-appearance=mono][data-state=active]:hover, [tuiWrapper][data-appearance=mono][data-state=active]:hover { color: var(--tui-text-02); } :focus-visible:not([data-focused=false]) > tui-wrapper[data-appearance=mono][data-mode=onDark], :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=mono][data-mode=onDark], [data-focused=true] > tui-wrapper[data-appearance=mono][data-mode=onDark], [data-focused=true] > [tuiWrapper][data-appearance=mono][data-mode=onDark] { --tui-focus: var(--tui-text-01-night); } tui-wrapper[data-appearance=mono][data-mode=onDark]:focus-visible:focus-visible, [tuiWrapper][data-appearance=mono][data-mode=onDark]:focus-visible:focus-visible { --tui-focus: var(--tui-text-01-night); } tui-wrapper[data-appearance=mono][data-mode=onDark]._focused._focused, [tuiWrapper][data-appearance=mono][data-mode=onDark]._focused._focused { --tui-focus: var(--tui-text-01-night); } tui-primitive-calendar [data-type=weekday] { color: var(--tui-text-01); } tui-primitive-calendar [data-type=weekend] { color: var(--tui-negative); } /* node_modules/@taiga-ui/core/styles/taiga-ui-fonts.less */ /* node_modules/@taiga-ui/styles/taiga-ui-global.less */ @keyframes tuiReveal { from { transform: scale(0); } to { transform: scale(1); } } @keyframes tuiFadeIn { from { opacity: 0; } to { opacity: 1; } } html { height: 100%; font-size: 16px; } body { height: 100%; min-height: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { -webkit-overflow-scrolling: touch; } ul, ol { list-style: none; padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } input, button, select, textarea { font-family: inherit; color: inherit; } hr { margin: 0; height: 1px; border: none; background: var(--tui-base-03); } iframe { border: none; } svg use { pointer-events: none; } ::selection { background-color: var(--tui-selection); } ::-ms-clear { display: none; } ::-ms-reveal { display: none; } @supports (-webkit-hyphens: none) and (text-align-last: right) { :after { content: none; } } .tui-container { margin-right: auto; margin-left: auto; } @media screen and (min-width: 80em) { .tui-container.tui-container_adaptive { width: 69rem; } } @media screen and (max-width: 79.9625em) { .tui-container.tui-container_adaptive { width: 51.5rem; } } @media screen and (max-width: 47.9625em) { .tui-container.tui-container_adaptive { width: 100%; padding: 0 1rem; box-sizing: border-box; } } @media screen and (min-width: 80em) { .tui-container { width: 69rem; } } @media screen and (max-width: 79.9625em) { .tui-container { width: 51.5rem; padding: 0 3rem; } } @media screen and (min-width: 80em) { .tui-container_menu { width: 69rem; } } @media (min-width: 64em) and (max-width: 79.9625em) { .tui-container_menu { width: 51.5rem; } } @media screen and (max-width: 47.9625em) { .tui-container_menu { width: auto; padding: 0 1rem; box-sizing: border-box; } } .tui-container_fullwidth { width: auto; padding: 0 1.5rem; } @media screen and (max-width: 47.9625em) { .tui-container_fullwidth { padding: 0 1rem; box-sizing: border-box; } } @media screen and (max-width: 79.9625em) { .tui-container_fixed { width: 69rem; } } .tui-form { } .tui-form__header { font: var(--tui-font-heading-5); margin-top: 2rem; margin-bottom: 1.25rem; } @media screen and (max-width: 47.9625em) { .tui-form__header { font: var(--tui-font-text-l); font-weight: bold; margin-bottom: 1rem; } } .tui-form__header_margin-top_none { margin-top: 0; } .tui-form__header_margin-bottom_none { margin-bottom: 0; } .tui-form__header_margin-bottom_small { margin-bottom: 1rem; } @media screen and (max-width: 47.9625em) { .tui-form__header_margin-bottom_small { margin-bottom: 0.75rem; } } .tui-form__row { margin-top: 1.25rem; } .tui-form__row:first-child { margin-top: 0; } .tui-form__row_multi-fields { display: flex; } @media screen and (max-width: 47.9625em) { .tui-form__row_multi-fields { flex-wrap: wrap; } } .tui-form__row_half-width { width: calc(50% - (1.25rem / 2)); } @media screen and (max-width: 47.9625em) { .tui-form__row_half-width { width: 100%; } } .tui-form__row_checkboxes { display: flex; flex-wrap: wrap; } @media screen and (max-width: 47.9625em) { .tui-form__row { margin-top: 1rem; } } .tui-form__multi-field { flex: 1 1 0; min-width: 0; margin-left: 1.25rem; } .tui-form__multi-field:first-child { margin-left: 0; } @media screen and (max-width: 47.9625em) { .tui-form__multi-field { flex-basis: 100%; margin-top: 1rem; margin-left: 0; } .tui-form__multi-field:first-child { margin-top: 0; } } .tui-form__field-note { font: var(--tui-font-text-s); margin-top: 0.25rem; color: var(--tui-text-02); } .tui-form__field-checkbox { margin-top: 0.5rem; } .tui-form__checkbox { flex: 1 1 calc(50% - 0.625rem); } .tui-form__checkbox:nth-child(even) { margin-left: 1.25rem; } .tui-form__checkbox:nth-child(n+3) { margin-top: 1rem; } .tui-form__buttons { display: flex; margin-top: 2rem; } .tui-form__buttons_align_end { justify-content: flex-end; } .tui-form__buttons_align_center { justify-content: center; } @media screen and (max-width: 47.9625em) { .tui-form__buttons { flex-direction: column; margin-top: 1.5rem; } } .tui-form__button { margin-left: 0.75rem; } .tui-form__button:first-child { margin-left: 0; } @media screen and (max-width: 47.9625em) { .tui-form__button { margin-top: 0.5rem; margin-left: 0; } } .tui-island { position: relative; border-radius: var(--tui-radius-xl); background-color: var(--tui-base-01); word-wrap: break-word; text-decoration: none; color: var(--tui-text-01); outline: none; box-sizing: content-box; } .tui-island:not(.tui-island_hoverable):before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; box-sizing: border-box; border: 1px solid var(--tui-base-03); border-radius: inherit; pointer-events: none; } .tui-island:focus:before, .tui-island:hover:focus:before { border-color: var(--tui-focus); } .tui-island_hoverable { box-shadow: var(--tui-shadow); transition-property: all; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; cursor: pointer; transition-property: transform, box-shadow; will-change: transform, box-shadow; background: var(--tui-elevation-02); } .tui-island_hoverable:hover { box-shadow: var(--tui-shadow-hover); transform: translateY(-0.25rem); } .tui-island_transparent { background-color: transparent; } .tui-island_size_s { --tui-radius-xl: calc(4 * var(--tui-radius-l) / 3); font: var(--tui-font-text-s); padding: 1rem; } .tui-island_size_m { --tui-radius-xl: calc(5 * var(--tui-radius-l) / 3); font: var(--tui-font-text-m); padding: 1rem; } .tui-island_size_l { font: var(--tui-font-text-m); padding: 1.25rem; } .tui-island_text-align_left { text-align: left; } .tui-island_text-align_center { text-align: center; } .tui-island_text-align_right { text-align: right; } .tui-island__content { display: flex; justify-content: space-between; } .tui-island_text-align_center .tui-island__content { display: block; } .tui-island__content > * { min-width: 0; } .tui-island__category { font-size: 0.6875rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.075em; margin: 0 0 0.5rem; color: var(--tui-text-02); } .tui-island_size_l .tui-island__category { margin: 0 0 0.75rem; } .tui-island__title { font: var(--tui-font-text-m); margin: 0 0 0.5rem; } .tui-island_size_m .tui-island__title { font: var(--tui-font-heading-6); margin: 0 0 0.75rem; } .tui-island_size_l .tui-island__title { font: var(--tui-font-heading-6); } .tui-island__paragraph { margin: 0; color: var(--tui-text-02); } .tui-island__paragraph_link.tui-island__paragraph { margin-top: 1rem; } .tui-island_size_l .tui-island__paragraph_link.tui-island__paragraph { margin: 1rem 0 0; } .tui-island__paragraph_button.tui-island__paragraph { margin-top: 1.25rem; } .tui-island_size_l .tui-island__paragraph_button.tui-island__paragraph { margin: 1.25rem 0 0; } .tui-island__figure { display: flex; justify-content: center; order: 1; flex-shrink: 0; margin: 0 0 0 1rem; } .tui-island_size_l .tui-island__figure { margin-left: 2.25rem; } .tui-island_text-align_center .tui-island__figure { margin: 0 0 0.75rem 0; } .tui-island__carousel-controls { display: flex; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--tui-base-03); white-space: nowrap; } .tui-island__carousel-pages { margin-left: auto; color: var(--tui-text-02); } .tui-island__carousel-button { margin-right: 0.5rem; } .tui-island .tui-island__footer-button { display: block; width: calc(100% + 1.875rem); margin: 1rem calc(-1rem + 1px) calc(-1rem + 1px); border-top: 1px solid var(--tui-base-03); border-radius: 0 0 var(--tui-radius-xl) var(--tui-radius-xl); } .tui-island_size_l .tui-island__footer-button { width: calc(100% + 2.375rem); margin: 1.25rem calc(-1.25rem + 1px) calc(-1.25rem + 1px); } .tui-island__marker:first-child:not(:only-child) { margin-right: 1.25rem; } .tui-island__marker:not(:first-child), .tui-island__marker:only-child { margin-left: 1.25rem; } .tui-list { font: var(--tui-font-text-m); line-height: 1.5rem; list-style-type: none; color: var(--tui-text-01); } .tui-list_large { font: var(--tui-font-text-l); line-height: 1.75rem; } .tui-list_small, .tui-list_extra-small { font: var(--tui-font-text-s); line-height: 1.25rem; } .tui-list_nested { margin: 0.75rem 0 0.75rem 1.25rem; color: var(--tui-text-02); } .tui-list_large .tui-list_nested { margin-left: 0.75rem; } .tui-list_small .tui-list_nested { margin-top: 0.5rem; margin-bottom: 0.5rem; } .tui-list_ordered { counter-reset: counter; } .tui-list__item { position: relative; padding-left: 1.5rem; word-wrap: break-word; margin-top: 0.75rem; } .tui-list__item:first-child { margin-top: 0; } .tui-list__item:before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 0.5rem; height: 0.5rem; border-radius: 100%; background-color: var(--tui-primary); } .tui-list_large > .tui-list__item:before { top: 0.625rem; } .tui-list_small > .tui-list__item:before { top: 0.325rem; } .tui-list_extra-small > .tui-list__item { margin-top: 0.5rem; } .tui-list_linear .tui-list__item { padding-left: 1.75rem; } .tui-list_linear .tui-list__item:before { content: "\2014"; left: 0; top: auto; width: auto; height: auto; background-color: transparent; } .tui-list_ordered .tui-list__item { padding-left: 1.25rem; } .tui-list_ordered .tui-list__item:before { content: counter(counter) "."; left: 0; top: auto; counter-increment: counter; width: auto; height: auto; color: var(--tui-text-03); background-color: transparent; } .tui-list_triangle > .tui-list__item { padding-left: 1.75rem; } .tui-list_triangle > .tui-list__item:before { content: "\25e4"; left: 0; top: 1px; width: auto; height: auto; background-color: transparent; color: var(--tui-base-06); font-size: 0.75rem; } .tui-list__item-title { font: var(--tui-font-heading-5); margin: 0; } .tui-list_small .tui-list__item-title { line-height: 1.25rem; font-weight: bold; } .tui-list__description { margin: 0.5rem 0 0; color: var(--tui-text-02); } .tui-list_small .tui-list__description { margin-top: 0.25rem; } .tui-list_large .tui-list__description { line-height: 1.75rem; margin-top: 0.75rem; } @media not screen and (max-width: 47.9625em) { .tui-mobile-only { display: none !important; } } .tui-required:after { content: "*"; } .tui-required_float:after { position: absolute; } .tui-required_spacing:after { content: "\a0*"; } .tui-row { display: flex; flex-wrap: wrap; } .tui-row_align_center { align-items: center; } .tui-row_align_start { align-items: flex-start; } .tui-row_align_end { align-items: flex-end; } @media screen and (min-width: 80em) { .tui-row_adaptive.tui-row { margin-left: -1.5rem; margin-right: -1.5rem; } } @media screen and (max-width: 79.9625em) { .tui-row_adaptive.tui-row { margin-left: -1.25rem; margin-right: -1.25rem; } } @media screen and (max-width: 47.9625em) { .tui-row_adaptive.tui-row { margin-left: -0.5rem; margin-right: -0.5rem; } } .tui-row_temporary.tui-row { margin-left: -1.25rem; margin-right: -1.25rem; } @media screen and (min-width: 80em) { .tui-row { margin-left: -1.5rem; margin-right: -1.5rem; } } @media screen and (max-width: 79.9625em) { .tui-row { margin-left: -1.25rem; margin-right: -1.25rem; } } .tui-col_1 { width: 8.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_2 { width: 16.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_3 { width: 25%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_4 { width: 33.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_5 { width: 41.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_6 { width: 50%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_7 { width: 58.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_8 { width: 66.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_9 { width: 75%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_10 { width: 83.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_11 { width: 91.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_12 { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-1 { width: 8.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-2 { width: 16.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-3 { width: 25%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-4 { width: 33.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-5 { width: 41.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-6 { width: 50%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-7 { width: 58.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-8 { width: 66.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-9 { width: 75%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-10 { width: 83.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-11 { width: 91.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_md-12 { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-col_stretch { display: flex; } @media screen and (min-width: 80em) { .tui-row_adaptive .tui-col_lg-1 { width: 8.33333333%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-2 { width: 16.66666667%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-3 { width: 25%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-4 { width: 33.33333333%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-5 { width: 41.66666667%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-6 { width: 50%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-7 { width: 58.33333333%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-8 { width: 66.66666667%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-9 { width: 75%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-10 { width: 83.33333333%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-11 { width: 91.66666667%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_lg-12 { width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } } @media screen and (max-width: 79.9625em) { .tui-row_adaptive .tui-col_md-1 { width: 8.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-2 { width: 16.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-3 { width: 25%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-4 { width: 33.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-5 { width: 41.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-6 { width: 50%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-7 { width: 58.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-8 { width: 66.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-9 { width: 75%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-10 { width: 83.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-11 { width: 91.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_md-12 { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } } @media screen and (max-width: 47.9625em) { .tui-row_adaptive .tui-col_xs-1 { width: 8.33333333%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-2 { width: 16.66666667%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-3 { width: 25%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-4 { width: 33.33333333%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-5 { width: 41.66666667%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-6 { width: 50%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-7 { width: 58.33333333%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-8 { width: 66.66666667%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-9 { width: 75%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-10 { width: 83.33333333%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-11 { width: 91.66666667%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } .tui-row_adaptive .tui-col_xs-12 { width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; box-sizing: border-box; } } .tui-row_temporary .tui-col_1 { width: 8.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_2 { width: 16.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_3 { width: 25%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_4 { width: 33.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_5 { width: 41.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_6 { width: 50%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_7 { width: 58.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_8 { width: 66.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_9 { width: 75%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_10 { width: 83.33333333%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_11 { width: 91.66666667%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } .tui-row_temporary .tui-col_12 { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; box-sizing: border-box; } @media screen and (min-width: 80em) { .tui-col_1 { width: 8.33333333%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_2 { width: 16.66666667%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_3 { width: 25%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_4 { width: 33.33333333%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_5 { width: 41.66666667%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_6 { width: 50%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_7 { width: 58.33333333%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_8 { width: 66.66666667%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_9 { width: 75%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_10 { width: 83.33333333%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_11 { width: 91.66666667%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } .tui-col_12 { width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; box-sizing: border-box; } } .tui-col-offset_1 { margin-left: 8.33333333%; } .tui-col-offset_2 { margin-left: 16.66666667%; } .tui-col-offset_3 { margin-left: 25%; } .tui-col-offset_4 { margin-left: 33.33333333%; } .tui-col-offset_5 { margin-left: 41.66666667%; } .tui-col-offset_6 { margin-left: 50%; } .tui-col-offset_7 { margin-left: 58.33333333%; } .tui-col-offset_8 { margin-left: 66.66666667%; } .tui-col-offset_9 { margin-left: 75%; } .tui-col-offset_10 { margin-left: 83.33333333%; } .tui-col-offset_11 { margin-left: 91.66666667%; } .tui-col-offset_12 { margin-left: 100%; } @media (min-width: 22.5em) and (max-width: 47.9625em) { .tui-col-offset_xs-1 { margin-left: 8.33333333%; } .tui-col-offset_xs-2 { margin-left: 16.66666667%; } .tui-col-offset_xs-3 { margin-left: 25%; } .tui-col-offset_xs-4 { margin-left: 33.33333333%; } .tui-col-offset_xs-5 { margin-left: 41.66666667%; } .tui-col-offset_xs-6 { margin-left: 50%; } .tui-col-offset_xs-7 { margin-left: 58.33333333%; } .tui-col-offset_xs-8 { margin-left: 66.66666667%; } .tui-col-offset_xs-9 { margin-left: 75%; } .tui-col-offset_xs-10 { margin-left: 83.33333333%; } .tui-col-offset_xs-11 { margin-left: 91.66666667%; } .tui-col-offset_xs-12 { margin-left: 100%; } } @media screen and (max-width: 79.9625em) { .tui-col-offset_md-1 { margin-left: 8.33333333%; } .tui-col-offset_md-2 { margin-left: 16.66666667%; } .tui-col-offset_md-3 { margin-left: 25%; } .tui-col-offset_md-4 { margin-left: 33.33333333%; } .tui-col-offset_md-5 { margin-left: 41.66666667%; } .tui-col-offset_md-6 { margin-left: 50%; } .tui-col-offset_md-7 { margin-left: 58.33333333%; } .tui-col-offset_md-8 { margin-left: 66.66666667%; } .tui-col-offset_md-9 { margin-left: 75%; } .tui-col-offset_md-10 { margin-left: 83.33333333%; } .tui-col-offset_md-11 { margin-left: 91.66666667%; } .tui-col-offset_md-12 { margin-left: 100%; } } @media screen and (min-width: 80em) { .tui-col-offset_lg-1 { margin-left: 8.33333333%; } .tui-col-offset_lg-2 { margin-left: 16.66666667%; } .tui-col-offset_lg-3 { margin-left: 25%; } .tui-col-offset_lg-4 { margin-left: 33.33333333%; } .tui-col-offset_lg-5 { margin-left: 41.66666667%; } .tui-col-offset_lg-6 { margin-left: 50%; } .tui-col-offset_lg-7 { margin-left: 58.33333333%; } .tui-col-offset_lg-8 { margin-left: 66.66666667%; } .tui-col-offset_lg-9 { margin-left: 75%; } .tui-col-offset_lg-10 { margin-left: 83.33333333%; } .tui-col-offset_lg-11 { margin-left: 91.66666667%; } .tui-col-offset_lg-12 { margin-left: 100%; } } .tui-skeleton { position: relative; color: transparent !important; background: transparent !important; pointer-events: none; -webkit-user-select: none; user-select: none; } .tui-skeleton:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: var(--tui-clear-hover); animation: tuiSkeletonVibe ease-in-out 1s infinite alternate; border-radius: var(--tui-skeleton-radius, 0); } .tui-skeleton_light:after { background-color: rgba(255, 255, 255, 0.24); } .tui-skeleton_rounded:after { border-radius: inherit; } .tui-skeleton_short:after { width: 40%; } .tui-skeleton_center:after { position: absolute; left: 50%; transform: translate(-50%, 0); width: 40%; } .tui-skeleton_text:before { content: "\a0"; } .tui-skeleton * { opacity: 0; visibility: hidden; } .tui-space_all-16 { margin: 4rem; } .tui-space_all-15 { margin: 3.75rem; } .tui-space_all-14 { margin: 3.5rem; } .tui-space_all-13 { margin: 3.25rem; } .tui-space_all-12 { margin: 3rem; } .tui-space_all-11 { margin: 2.75rem; } .tui-space_all-10 { margin: 2.5rem; } .tui-space_all-9 { margin: 2.25rem; } .tui-space_all-8 { margin: 2rem; } .tui-space_all-7 { margin: 1.75rem; } .tui-space_all-6 { margin: 1.5rem; } .tui-space_all-5 { margin: 1.25rem; } .tui-space_all-4 { margin: 1rem; } .tui-space_all-3 { margin: 0.75rem; } .tui-space_all-2 { margin: 0.5rem; } .tui-space_all-1 { margin: 0.25rem; } .tui-space_all-0 { margin: 0rem; } .tui-space_top-16 { margin-top: 4rem; } .tui-space_top-15 { margin-top: 3.75rem; } .tui-space_top-14 { margin-top: 3.5rem; } .tui-space_top-13 { margin-top: 3.25rem; } .tui-space_top-12 { margin-top: 3rem; } .tui-space_top-11 { margin-top: 2.75rem; } .tui-space_top-10 { margin-top: 2.5rem; } .tui-space_top-9 { margin-top: 2.25rem; } .tui-space_top-8 { margin-top: 2rem; } .tui-space_top-7 { margin-top: 1.75rem; } .tui-space_top-6 { margin-top: 1.5rem; } .tui-space_top-5 { margin-top: 1.25rem; } .tui-space_top-4 { margin-top: 1rem; } .tui-space_top-3 { margin-top: 0.75rem; } .tui-space_top-2 { margin-top: 0.5rem; } .tui-space_top-1 { margin-top: 0.25rem; } .tui-space_top-0 { margin-top: 0rem; } .tui-space_bottom-16 { margin-bottom: 4rem; } .tui-space_bottom-15 { margin-bottom: 3.75rem; } .tui-space_bottom-14 { margin-bottom: 3.5rem; } .tui-space_bottom-13 { margin-bottom: 3.25rem; } .tui-space_bottom-12 { margin-bottom: 3rem; } .tui-space_bottom-11 { margin-bottom: 2.75rem; } .tui-space_bottom-10 { margin-bottom: 2.5rem; } .tui-space_bottom-9 { margin-bottom: 2.25rem; } .tui-space_bottom-8 { margin-bottom: 2rem; } .tui-space_bottom-7 { margin-bottom: 1.75rem; } .tui-space_bottom-6 { margin-bottom: 1.5rem; } .tui-space_bottom-5 { margin-bottom: 1.25rem; } .tui-space_bottom-4 { margin-bottom: 1rem; } .tui-space_bottom-3 { margin-bottom: 0.75rem; } .tui-space_bottom-2 { margin-bottom: 0.5rem; } .tui-space_bottom-1 { margin-bottom: 0.25rem; } .tui-space_bottom-0 { margin-bottom: 0rem; } .tui-space_vertical-16 { margin-top: 4rem; margin-bottom: 4rem; } .tui-space_vertical-15 { margin-top: 3.75rem; margin-bottom: 3.75rem; } .tui-space_vertical-14 { margin-top: 3.5rem; margin-bottom: 3.5rem; } .tui-space_vertical-13 { margin-top: 3.25rem; margin-bottom: 3.25rem; } .tui-space_vertical-12 { margin-top: 3rem; margin-bottom: 3rem; } .tui-space_vertical-11 { margin-top: 2.75rem; margin-bottom: 2.75rem; } .tui-space_vertical-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; } .tui-space_vertical-9 { margin-top: 2.25rem; margin-bottom: 2.25rem; } .tui-space_vertical-8 { margin-top: 2rem; margin-bottom: 2rem; } .tui-space_vertical-7 { margin-top: 1.75rem; margin-bottom: 1.75rem; } .tui-space_vertical-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .tui-space_vertical-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; } .tui-space_vertical-4 { margin-top: 1rem; margin-bottom: 1rem; } .tui-space_vertical-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; } .tui-space_vertical-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .tui-space_vertical-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .tui-space_vertical-0 { margin-top: 0rem; margin-bottom: 0rem; } .tui-space_left-16 { margin-left: 4rem; } .tui-space_left-15 { margin-left: 3.75rem; } .tui-space_left-14 { margin-left: 3.5rem; } .tui-space_left-13 { margin-left: 3.25rem; } .tui-space_left-12 { margin-left: 3rem; } .tui-space_left-11 { margin-left: 2.75rem; } .tui-space_left-10 { margin-left: 2.5rem; } .tui-space_left-9 { margin-left: 2.25rem; } .tui-space_left-8 { margin-left: 2rem; } .tui-space_left-7 { margin-left: 1.75rem; } .tui-space_left-6 { margin-left: 1.5rem; } .tui-space_left-5 { margin-left: 1.25rem; } .tui-space_left-4 { margin-left: 1rem; } .tui-space_left-3 { margin-left: 0.75rem; } .tui-space_left-2 { margin-left: 0.5rem; } .tui-space_left-1 { margin-left: 0.25rem; } .tui-space_left-0 { margin-left: 0rem; } .tui-space_right-16 { margin-right: 4rem; } .tui-space_right-15 { margin-right: 3.75rem; } .tui-space_right-14 { margin-right: 3.5rem; } .tui-space_right-13 { margin-right: 3.25rem; } .tui-space_right-12 { margin-right: 3rem; } .tui-space_right-11 { margin-right: 2.75rem; } .tui-space_right-10 { margin-right: 2.5rem; } .tui-space_right-9 { margin-right: 2.25rem; } .tui-space_right-8 { margin-right: 2rem; } .tui-space_right-7 { margin-right: 1.75rem; } .tui-space_right-6 { margin-right: 1.5rem; } .tui-space_right-5 { margin-right: 1.25rem; } .tui-space_right-4 { margin-right: 1rem; } .tui-space_right-3 { margin-right: 0.75rem; } .tui-space_right-2 { margin-right: 0.5rem; } .tui-space_right-1 { margin-right: 0.25rem; } .tui-space_right-0 { margin-right: 0rem; } .tui-space_horizontal-16 { margin-right: 4rem; margin-left: 4rem; } .tui-space_horizontal-15 { margin-right: 3.75rem; margin-left: 3.75rem; } .tui-space_horizontal-14 { margin-right: 3.5rem; margin-left: 3.5rem; } .tui-space_horizontal-13 { margin-right: 3.25rem; margin-left: 3.25rem; } .tui-space_horizontal-12 { margin-right: 3rem; margin-left: 3rem; } .tui-space_horizontal-11 { margin-right: 2.75rem; margin-left: 2.75rem; } .tui-space_horizontal-10 { margin-right: 2.5rem; margin-left: 2.5rem; } .tui-space_horizontal-9 { margin-right: 2.25rem; margin-left: 2.25rem; } .tui-space_horizontal-8 { margin-right: 2rem; margin-left: 2rem; } .tui-space_horizontal-7 { margin-right: 1.75rem; margin-left: 1.75rem; } .tui-space_horizontal-6 { margin-right: 1.5rem; margin-left: 1.5rem; } .tui-space_horizontal-5 { margin-right: 1.25rem; margin-left: 1.25rem; } .tui-space_horizontal-4 { margin-right: 1rem; margin-left: 1rem; } .tui-space_horizontal-3 { margin-right: 0.75rem; margin-left: 0.75rem; } .tui-space_horizontal-2 { margin-right: 0.5rem; margin-left: 0.5rem; } .tui-space_horizontal-1 { margin-right: 0.25rem; margin-left: 0.25rem; } .tui-space_horizontal-0 { margin-right: 0rem; margin-left: 0rem; } .tui-space_auto { margin-left: auto; margin-right: auto; } .tui-table { width: 100%; } .tui-table_layout_fixed { table-layout: fixed; } .tui-table__tr { transition-property: background; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; outline: none; } .tui-table__tr:not(.tui-table__tr_hover_disabled):hover { background: var(--tui-base-02); } .tui-table__tr:not(.tui-table__tr_border_none) { border-bottom: 1px solid var(--tui-base-03); } .tui-table__tr_border_top { border-top: 1px solid var(--tui-base-03); } .tui-table__tr_cursor_pointer { cursor: pointer; } .tui-table__th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--tui-font-text-s); padding: 0.5rem 1rem; vertical-align: middle; height: 2.5rem; color: var(--tui-text-02); background: inherit; } .tui-table__th_font-size_l, .tui-table_font-size_l .tui-table__th { font: var(--tui-font-text-m); } .tui-table__td { font: var(--tui-font-text-m); padding: 1rem 1rem 0.875rem; vertical-align: top; word-wrap: break-word; height: 3.4375rem; color: var(--tui-text-01); background: inherit; } .tui-table__td_size_l, .tui-table_size_l .tui-table__td { height: 4.9375rem; } .tui-table__td_font-size_l, .tui-table_font-size_l .tui-table__td { font: var(--tui-font-text-l); } .tui-table__td_font-size_s, .tui-table_font-size_s .tui-table__td { font: var(--tui-font-text-s); } .tui-table__td_align_center { vertical-align: middle; } .tui-table__td, .tui-table__th { box-sizing: border-box; text-align: left; } .tui-table_size_l .tui-table__td:before, .tui-table_size_l .tui-table__th:before { width: 1rem; border-top-left-radius: 1rem; border-bottom-left-radius: 1rem; } .tui-table__td_first:before, .tui-table__th_first:before, .tui-table__td_last:before, .tui-table__th_last:before { content: ""; position: absolute; top: 0; width: 0.75rem; height: 100%; background: inherit; border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; } .tui-table__td_first, .tui-table__th_first { position: relative; padding-left: 0; overflow: visible; } .tui-table__td_first:before, .tui-table__th_first:before { right: 100%; } .tui-table__td_last, .tui-table__th_last { position: relative; padding-right: 0; overflow: visible; } .tui-table__td_last:before, .tui-table__th_last:before { left: 100%; transform: scaleX(-1); } .tui-table__td_text_center, .tui-table__th_text_center { text-align: center; } .tui-table__td_text_right, .tui-table__th_text_right { text-align: right; } .tui-table__td_text_overflow, .tui-table__th_text_overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tui-table__subtext { font: var(--tui-font-text-s); margin: 0.25rem 0 0 0; color: var(--tui-text-03); } .tui-table__sort { appearance: none; padding: 0; border: 0; background: none; font-size: inherit; line-height: inherit; text-decoration: none; transition-property: color; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; position: relative; display: inline-flex; align-items: center; outline: none; cursor: pointer; } .tui-table__sort:hover { color: var(--tui-text-01); } .tui-table__sort_active { color: var(--tui-link); } .tui-table__sort_active:hover { color: var(--tui-link-hover); } .tui-table__sort-icon { position: absolute; top: 50%; transform: translate(0, -50%); left: 100%; margin-left: 0.125rem; width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0; } .tui-table__sort_active .tui-table__sort-icon, .tui-table__sort:hover .tui-table__sort-icon { transition-property: transform; transition-duration: var(--tui-duration, 300ms); transition-timing-function: ease-in-out; opacity: 1; } .tui-table__sort_active.tui-table__sort_up .tui-table__sort-icon { transform: rotate(180deg) translateY(50%); } .tui-text_h1 { font: var(--tui-font-heading-1); } .tui-text_h2 { font: var(--tui-font-heading-2); } .tui-text_h3 { font: var(--tui-font-heading-3); } .tui-text_h4 { font: var(--tui-font-heading-4); } .tui-text_h5 { font: var(--tui-font-heading-5); } .tui-text_h6 { font: var(--tui-font-heading-6); } .tui-text_body-xl { font: var(--tui-font-text-xl); } .tui-text_body-l { font: var(--tui-font-text-l); } .tui-text_body-l-2 { font: var(--tui-font-text-l-2); } .tui-text_body-m { font: var(--tui-font-text-m); } .tui-text_body-m-2 { font: var(--tui-font-text-m-2); } .tui-text_body-s { font: var(--tui-font-text-s); } .tui-text_body-s-2 { font: var(--tui-font-text-s-2); } .tui-text_body-xs { font: var(--tui-font-text-xs); } .tui-text_bold { font-weight: bold; } /* src/styles.scss */ .toast-center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .toast-top-center { top: 0; right: 0; width: 100%; } .toast-bottom-center { bottom: 0; right: 0; width: 100%; } .toast-top-full-width { top: 0; right: 0; width: 100%; } .toast-bottom-full-width { bottom: 0; right: 0; width: 100%; } .toast-top-left { top: 12px; left: 12px; } .toast-top-right { top: 12px; right: 12px; } .toast-bottom-right { right: 12px; bottom: 12px; } .toast-bottom-left { bottom: 12px; left: 12px; } .toast-title { font-weight: bold; } .toast-message { word-wrap: break-word; } .toast-message a, .toast-message label { color: #FFFFFF; } .toast-message a:hover { color: #CCCCCC; text-decoration: none; } .toast-close-button { position: relative; right: -0.3em; top: -0.3em; float: right; font-size: 20px; font-weight: bold; color: #FFFFFF; text-shadow: 0 1px 0 #ffffff; } .toast-close-button:hover, .toast-close-button:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; } button.toast-close-button { padding: 0; cursor: pointer; background: transparent; border: 0; } .toast-container { pointer-events: none; position: fixed; z-index: 999999; } .toast-container * { box-sizing: border-box; } .toast-container .ngx-toastr { position: relative; overflow: hidden; margin: 0 0 6px; padding: 15px 15px 15px 50px; width: 300px; border-radius: 3px 3px 3px 3px; background-position: 15px center; background-repeat: no-repeat; background-size: 24px; box-shadow: 0 0 12px #999999; color: #FFFFFF; } .toast-container .ngx-toastr:hover { box-shadow: 0 0 12px #000000; opacity: 1; cursor: pointer; } .toast-info { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+); } .toast-error { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+); } .toast-success { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==); } .toast-warning { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==); } .toast-container.toast-top-center .ngx-toastr, .toast-container.toast-bottom-center .ngx-toastr { width: 300px; margin-left: auto; margin-right: auto; } .toast-container.toast-top-full-width .ngx-toastr, .toast-container.toast-bottom-full-width .ngx-toastr { width: 96%; margin-left: auto; margin-right: auto; } .ngx-toastr { background-color: #030303; pointer-events: auto; } .toast-success { background-color: #51A351; } .toast-error { background-color: #BD362F; } .toast-info { background-color: #2F96B4; } .toast-warning { background-color: #F89406; } .toast-progress { position: absolute; left: 0; bottom: 0; height: 4px; background-color: #000000; opacity: 0.4; } @media all and (max-width: 240px) { .toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 11em; } .toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 241px) and (max-width: 480px) { .toast-container .ngx-toastr.div { padding: 8px 8px 8px 50px; width: 18em; } .toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 481px) and (max-width: 768px) { .toast-container .ngx-toastr.div { padding: 15px 15px 15px 50px; width: 25em; } } html { box-sizing: border-box; } html, body { width: 100%; max-width: 100%; height: 100%; } *, *::after, *::before { box-sizing: inherit; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ul, ol { padding: 0; } body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd { margin: 0; } ul[class] { list-style: none; } img { display: block; } input:hover, input:focus, input:active, button:hover, button:focus, button:active { outline: none; } input, button, textarea, select { font: inherit; } a { text-decoration: none; color: inherit; transition: 0.3s; cursor: pointer; } a:active, a:focus, a:hover { opacity: 0.85; } html { height: 100%; } ul { list-style: none; } button { cursor: pointer; } :root { --background: #F3F3F3; --tui-primary: #33125b; --tui-primary-hover: #7957b9; --tui-primary-active: #7957b9; } body { width: 100%; height: 100%; font-family: "Calibri", sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: normal; color: #080729; background: var(--background); } .router-block { width: 100%; flex: 1 1 auto; box-sizing: border-box; max-height: 100vh; overflow-y: auto; overflow-x: hidden; padding: 40px 60px; } @media (max-width: 1024px) { .router-block { margin-left: 0px; max-height: none; overflow: unset; } } .page-header-wrap { display: flex; justify-content: space-between; margin-bottom: 2.5rem; } .page-header { color: var(--tui-text-01); font-size: 2rem; line-height: 125%; } .back { display: flex; align-items: center; margin-bottom: 20px; cursor: default; } .back tui-svg { cursor: pointer; margin-right: 15px; } .back span { font-size: 1.5rem; } .info { display: flex; flex-direction: column; max-width: 400px; margin-top: 20px; } .info-block__elem { max-width: 350px; } .info h3 { margin-bottom: 15px; font-size: 1.5rem; display: flex; align-items: center; justify-content: space-between; } .info_svg_cursor { cursor: pointer; } .info ul { margin-top: 25px; } .info ul li { font-weight: 600; font-size: 1rem; margin-bottom: 10px; } .info ul li span { font-weight: 400; } .info .bottom-button { margin-top: auto; } .form-group { margin-bottom: 20px; } .form-group:last-child { margin-bottom: 0; } .modal-content { margin-top: 20px; } .table-header { font-size: 1.5rem; margin-bottom: 25px; } .cursor-pointer { cursor: pointer; } /* angular:styles/global:styles */ /*# sourceMappingURL=styles.css.map */