@import "https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"; /* 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(255, 255, 255, 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=icon][data-appearance=icon][data-state=readonly][data-state=readonly] { pointer-events: none; } [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; } /* apps/finverity-platform-app/white-labeling/finverity/styles/app-theme.scss */ :root { --fin-font-family: "Manrope", sans-serif; --fin-font-feature-settings: normal; --fin-font-variation-settings: normal; --fin-color-base-white: #ffffff; --fin-color-base-black: #303344; --fin-color-gray-cool-25: #f9fafa; --fin-color-gray-cool-50: #f3f3f4; --fin-color-gray-cool-100: #e7e8ea; --fin-color-gray-cool-200: #dcdde1; --fin-color-gray-cool-300: #afb0ba; --fin-color-gray-cool-400: #989aa6; --fin-color-gray-cool-500: #8d8f9c; --fin-color-gray-cool-600: #6a6d7f; --fin-color-gray-cool-700: #606271; --fin-color-gray-cool-800: #484c62; --fin-color-gray-cool-900: #303344; --fin-color-primary-light-25: #f2f8ff; --fin-color-primary-light-50: #edf5fd; --fin-color-primary-light-100: #dcedfc; --fin-color-primary-light-200: #b9dafc; --fin-color-primary-light-300: #9eccff; --fin-color-primary-light-400: #70b6f6; --fin-color-primary-light-500: #4190e6; --fin-color-primary-light-600: #1b75d8; --fin-color-primary-light-700: #0465cf; --fin-color-primary-light-800: #0055b1; --fin-color-primary-light-900: #014084; --fin-color-primary-dark-25: #f5f8ff; --fin-color-primary-dark-50: #eff4ff; --fin-color-primary-dark-100: #ccd8e3; --fin-color-primary-dark-200: #99b1c6; --fin-color-primary-dark-300: #7987a6; --fin-color-primary-dark-400: #4c5f89; --fin-color-primary-dark-500: #1f376b; --fin-color-primary-dark-600: #122b61; --fin-color-primary-dark-700: #002544; --fin-color-primary-dark-800: #00182d; --fin-color-primary-dark-900: #101828; --fin-color-gray-warm-25: #fafafa; --fin-color-gray-warm-50: #f6f6f6; --fin-color-gray-warm-100: #ededed; --fin-color-gray-warm-200: #e0e0e0; --fin-color-gray-warm-300: #b0b0b0; --fin-color-gray-warm-400: #959595; --fin-color-gray-warm-500: #808080; --fin-color-gray-warm-600: #6e6d6d; --fin-color-gray-warm-700: #575757; --fin-color-gray-warm-800: #333; --fin-color-gray-warm-900: #000; --fin-color-info-25: #f2f8ff; --fin-color-info-50: #edf5fd; --fin-color-info-100: #dcedfc; --fin-color-info-200: #b9dafc; --fin-color-info-300: #9eccff; --fin-color-info-400: #70b6f6; --fin-color-info-500: #4190e6; --fin-color-info-600: #1b75d8; --fin-color-info-700: #0465cf; --fin-color-info-800: #0055b1; --fin-color-info-900: #014084; --fin-color-error-25: #fffbfa; --fin-color-error-50: #fef3f2; --fin-color-error-100: #fdeae4; --fin-color-error-200: #fcd6ca; --fin-color-error-300: #fabba7; --fin-color-error-400: #ff8c67; --fin-color-error-500: #f45725; --fin-color-error-600: #d92d20; --fin-color-error-700: #b42318; --fin-color-error-800: #912018; --fin-color-error-900: #7a271a; --fin-color-warning-25: #fefbf1; --fin-color-warning-50: #fef7e0; --fin-color-warning-100: #fef1c1; --fin-color-warning-200: #fee797; --fin-color-warning-300: #ffc700; --fin-color-warning-400: #fdb022; --fin-color-warning-500: #ff8a00; --fin-color-warning-600: #dc6803; --fin-color-warning-700: #b54708; --fin-color-warning-800: #93370d; --fin-color-warning-900: #7a2e0e; --fin-color-success-25: #f5fbf9; --fin-color-success-50: #dcfff2; --fin-color-success-100: #bdffe7; --fin-color-success-200: #8af9d1; --fin-color-success-300: #5debb7; --fin-color-success-400: #4ac99b; --fin-color-success-500: #3aa981; --fin-color-success-600: #29966f; --fin-color-success-700: #1e8862; --fin-color-success-800: #136e4d; --fin-color-success-900: #0c5d40; --fin-complimentary-purple-25: #808080; --fin-complimentary-purple-50: #bbb0fd; --fin-complimentary-purple-100: #9282f5; --fin-complimentary-purple-200: #7c6be8; --fin-complimentary-purple-300: #5f4dce; --fin-complimentary-purple-400: #4938ae; --fin-complimentary-purple-500: #382a8f; --fin-complimentary-purple-600: #ee8b03; --fin-complimentary-purple-700: #d17900; --fin-complimentary-purple-800: #20127c; --fin-complimentary-purple-900: #190c69; --fin-complimentary-light-blue-25: #d3fbff; --fin-complimentary-light-blue-50: #b2f2f8; --fin-complimentary-light-blue-100: #88eef8; --fin-complimentary-light-blue-200: #5ae7f5; --fin-complimentary-light-blue-300: #17d1e3; --fin-complimentary-light-blue-400: #03b8ca; --fin-complimentary-light-blue-500: #0099a8; --fin-complimentary-light-blue-600: #00828e; --fin-complimentary-light-blue-700: #005c65; --fin-complimentary-light-blue-800: #004046; --fin-complimentary-light-blue-900: #013338; --fin-complimentary-dark-blue-25: #f2f8ff; --fin-complimentary-dark-blue-50: #edf5fd; --fin-complimentary-dark-blue-100: #dcedfc; --fin-complimentary-dark-blue-200: #b9dafc; --fin-complimentary-dark-blue-300: #9eccff; --fin-complimentary-dark-blue-400: #70b6f6; --fin-complimentary-dark-blue-500: #4190e6; --fin-complimentary-dark-blue-600: #1b75d8; --fin-complimentary-dark-blue-700: #0465cf; --fin-complimentary-dark-blue-800: #0055b1; --fin-complimentary-dark-blue-900: #014084; --fin-shadow-1: 0px 2px 3px 0px rgba(72, 76, 98, 0.1); --fin-shadow-2: 0px 2px 5px 0px rgba(72, 76, 98, 0.16); --fin-shadow-3: 0px 4px 24px 0px rgba(72, 76, 98, 0.12); --fin-shadow-4: 0px 4px 24px 0px rgba(0, 0, 0, 0.12); --fin-shadow-5: 0px 3px 6px 0px rgba(0, 0, 0, 0.05), 0px 11px 11px rgba(0, 0, 0, 0.04), 0px 25px 15px rgba(0, 0, 0, 0.03); --fin-shadow-6: 0px 12px 36px 0px rgba(72, 76, 98, 0.2); --fin-shadow-7: 0px 12px 36px 0px rgba(0, 0, 0, 0.2); --fin-shadow-8: 0px 18px 30px 0px rgba(72, 76, 98, 0.5); } /* libs/finverity-platform-app-ui-kit/src/lib/styles/ui-kit-themes.scss */ [tuiWrapper][data-appearance=fin-btn-primary] { --fin-button-primary-bg-color: var(--fin-color-primary-light-500); --fin-button-primary-text-color: var(--fin-color-base-white); --fin-button-primary-hover-bg-color: var(--fin-color-primary-light-400); --fin-button-primary-hover-text-color: var(--fin-color-base-white); --fin-button-primary-active-bg-color: var(--fin-color-primary-dark-500); --fin-button-primary-active-text-color: var(--fin-color-base-white); --fin-button-primary-focus-bg-color: var(--fin-color-primary-light-400); --fin-button-primary-focus-border-color: var(--fin-color-primary-light-700); --fin-button-primary-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-primary-disabled-text-color: var(--fin-color-gray-cool-300); } [tuiWrapper][data-appearance=fin-btn-secondary] { --fin-button-secondary-bg-color: var(--fin-color-primary-light-50); --fin-button-secondary-text-color: var(--fin-color-primary-light-500); --fin-button-secondary-hover-bg-color: var(--fin-color-primary-light-100); --fin-button-secondary-hover-text-color: var(--fin-color-primary-light-500); --fin-button-secondary-active-bg-color: var(--fin-color-primary-light-400); --fin-button-secondary-active-text-color: var(--fin-color-base-white); --fin-button-secondary-focus-bg-color: var(--fin-color-primary-light-100); --fin-button-secondary-focus-border-color: var(--fin-color-primary-light-500); --fin-button-secondary-focus-text-color: var(--fin-color-primary-light-500); --fin-button-secondary-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-secondary-disabled-text-color: var(--fin-color-gray-cool-300); } [tuiWrapper][data-appearance=fin-btn-outline] { --fin-button-outline-bg-color: var(--fin-color-base-white); --fin-button-outline-border-color: var(--fin-color-primary-light-500); --fin-button-outline-text-color: var(--fin-color-primary-light-500); --fin-button-outline-hover-bg-color: var(--fin-color-primary-light-50); --fin-button-outline-hover-border-color: var(--fin-color-primary-light-500); --fin-button-outline-hover-text-color: var(--fin-color-primary-light-500); --fin-button-outline-active-bg-color: var(--fin-color-primary-light-100); --fin-button-outline-active-border-color: var(--fin-color-primary-light-700); --fin-button-outline-active-text-color: var(--fin-color-primary-light-700); --fin-button-outline-focus-bg-color: var(--fin-color-primary-light-100); --fin-button-outline-focus-border-color: var(--fin-color-primary-light-500); --fin-button-outline-focus-text-color: var(--fin-color-primary-light-500); --fin-button-outline-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-outline-disabled-border-color: var(--fin-color-gray-cool-200); --fin-button-outline-disabled-text-color: var(--fin-color-gray-cool-300); } [tuiWrapper][data-appearance=fin-btn-flat] { --fin-button-flat-bg-color: var(--fin-color-base-white); --fin-button-flat-text-color: var(--fin-color-primary-light-500); --fin-button-flat-hover-bg-color: var(--fin-color-primary-light-50); --fin-button-flat-hover-text-color: var(--fin-color-primary-light-500); --fin-button-flat-active-bg-color: var(--fin-color-primary-light-100); --fin-button-flat-active-text-color: var(--fin-color-primary-light-700); --fin-button-flat-focus-bg-color: var(--fin-color-primary-light-50); --fin-button-flat-focus-border-color: var(--fin-color-primary-light-500); --fin-button-flat-focus-text-color: var(--fin-color-primary-light-500); --fin-button-flat-disabled-bg-color: var(--fin-color-base-white); --fin-button-flat-disabled-text-color: var(--fin-color-gray-cool-300); } [tuiWrapper][data-appearance=fin-btn-secondary-gray] { --fin-button-secondary-gray-bg-color: var(--fin-color-gray-warm-50); --fin-button-secondary-gray-text-color: var(--fin-color-gray-cool-500); --fin-button-secondary-gray-hover-bg-color: var(--fin-color-gray-cool-100); --fin-button-secondary-gray-hover-text-color: var(--fin-color-gray-cool-500); --fin-button-secondary-gray-active-bg-color: var(--fin-color-gray-cool-200); --fin-button-secondary-gray-active-text-color: var(--fin-color-gray-cool-700); --fin-button-secondary-gray-focus-bg-color: var(--fin-color-gray-cool-100); --fin-button-secondary-gray-focus-border-color: var(--fin-color-gray-cool-500); --fin-button-secondary-gray-focus-text-color: var(--fin-color-gray-cool-500); --fin-button-secondary-gray-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-secondary-gray-disabled-text-color: var(--fin-color-gray-cool-300); } [tuiWrapper][data-appearance=fin-btn-outline-gray] { --fin-button-outline-gray-bg-color: var(--fin-color-base-white); --fin-button-outline-gray-border-color: var(--fin-color-gray-cool-300); --fin-button-outline-gray-text-color: var(--fin-color-gray-cool-500); --fin-button-outline-gray-hover-bg-color: var(--fin-color-gray-warm-100); --fin-button-outline-gray-hover-border-color: var(--fin-color-gray-warm-100); --fin-button-outline-gray-hover-text-color: var(--fin-color-gray-cool-500); --fin-button-outline-gray-active-bg-color: var(--fin-color-gray-warm-100); --fin-button-outline-gray-active-border-color: var(--fin-color-gray-warm-100); --fin-button-outline-gray-active-text-color: var(--fin-color-gray-cool-700); --fin-button-outline-gray-focus-bg-color: var(--fin-color-gray-warm-100); --fin-button-outline-gray-focus-border-color: var(--fin-color-gray-cool-500); --fin-button-outline-gray-focus-text-color: var(--fin-color-gray-cool-500); --fin-button-outline-gray-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-outline-gray-disabled-border-color: var(--fin-color-gray-cool-200); --fin-button-outline-gray-disabled-text-color: var(--fin-color-gray-cool-300); } [tuiWrapper][data-appearance=fin-btn-flat-gray] { --fin-button-flat-gray-bg-color: var(--fin-color-base-white); --fin-button-flat-gray-text-color: var(--fin-color-gray-cool-500); --fin-button-flat-gray-hover-bg-color: var(--fin-color-gray-warm-100); --fin-button-flat-gray-hover-text-color: var(--fin-color-gray-cool-500); --fin-button-flat-gray-active-bg-color: var(--fin-color-gray-warm-100); --fin-button-flat-gray-active-text-color: var(--fin-color-gray-cool-700); --fin-button-flat-gray-focus-bg-color: var(--fin-color-gray-warm-100); --fin-button-flat-gray-focus-border-color: var(--fin-color-gray-cool-500); --fin-button-flat-gray-focus-text-color: var(--fin-color-gray-cool-500); --fin-button-flat-gray-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-flat-gray-disabled-text-color: var(--fin-color-gray-cool-300); } [tuiWrapper][data-appearance=fin-btn-accent] { --fin-button-accent-bg-color: var(--fin-color-error-500); --fin-button-accent-text-color: var(--fin-color-base-white); --fin-button-accent-hover-bg-color: var(--fin-color-error-400); --fin-button-accent-active-bg-color: var(--fin-color-error-600); --fin-button-accent-focus-border-color: var(--fin-color-error-700); --fin-button-accent-disabled-bg-color: var(--fin-color-error-300); --fin-button-accent-disabled-text-color: var(--fin-color-base-white); } [tuiWrapper][data-appearance=fin-btn-outline-accent] { --fin-button-outline-accent-bg-color: var(--fin-color-base-white); --fin-button-outline-accent-border-color: var(--fin-color-error-500); --fin-button-outline-accent-text-color: var(--fin-color-error-500); --fin-button-outline-accent-hover-bg-color: var(--fin-color-error-50); --fin-button-outline-accent-hover-border-color: var(--fin-color-error-500); --fin-button-outline-accent-hover-text-color: var(--fin-color-error-500); --fin-button-outline-accent-active-bg-color: var(--fin-color-error-100); --fin-button-outline-accent-active-border-color: var(--fin-color-error-700); --fin-button-outline-accent-active-text-color: var(--fin-color-error-700); --fin-button-outline-accent-focus-bg-color: var(--fin-color-error-100); --fin-button-outline-accent-focus-border-color: var(--fin-color-error-500); --fin-button-outline-accent-focus-text-color: var(--fin-color-error-500); --fin-button-outline-accent-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-outline-accent-disabled-border-color: var(--fin-color-gray-cool-200); --fin-button-outline-accent-disabled-text-color: var(--fin-color-gray-cool-300); } [tuiWrapper][data-appearance=fin-icon-btn-accent] { --fin-icon-button-accent-bg-color: var(--fin-color-gray-cool-100); --fin-icon-button-accent-icon-color: var(--fin-color-gray-cool-500); --fin-icon-button-accent-hover-bg-color: var(--fin-color-error-200); --fin-icon-button-accent-hover-icon-color: var(--fin-color-error-500); --fin-icon-button-accent-active-bg-color: var(--fin-color-error-300); --fin-icon-button-accent-active-icon-color: var(--fin-color-error-700); --fin-icon-button-accent-focus-bg-color: var(--fin-color-error-200); --fin-icon-button-accent-focus-icon-color: var(--fin-color-error-500); --fin-icon-button-accent-focus-border-color: var(--fin-color-error-500); --fin-icon-button-accent-disabled-bg-color: var(--fin-color-gray-cool-50); --fin-icon-button-accent-disabled-icon-color: var(--fin-color-gray-cool-200); } [tuiWrapper][data-appearance=fin-btn-flat-accent] { --fin-button-flat-gray-bg-color: var(--fin-color-base-white); --fin-button-flat-gray-text-color: var(--fin-color-error-500); --fin-button-flat-gray-hover-bg-color: var(--fin-color-error-50); --fin-button-flat-gray-hover-text-color: var(--fin-color-error-500); --fin-button-flat-gray-active-bg-color: var(--fin-color-error-100); --fin-button-flat-gray-active-text-color: var(--fin-color-error-700); --fin-button-flat-gray-focus-bg-color: var(--fin-color-error-50); --fin-button-flat-gray-focus-border-color: var(--fin-color-error-500); --fin-button-flat-gray-focus-text-color: var(--fin-color-error-500); --fin-button-flat-gray-disabled-bg-color: var(--fin-color-base-white); --fin-button-flat-gray-disabled-text-color: var(--fin-color-gray-cool-300); } fin-button-group { --fin-button-group-border-color: var(--fin-color-gray-cool-200); } fin-button-group [tuiWrapper][data-appearance=fin-button-group-item], fin-button-group [tuiWrapper][data-appearance=fin-button-group-item-with-description] { --fin-button-group-item-border-color: var(--fin-color-gray-cool-100); --fin-button-group-item-text-color: var(--fin-color-base-black); --fin-button-group-item-bg-color: var(--fin-color-base-white); --fin-button-group-item-hover-text-color: var(--fin-color-gray-cool-700); --fin-button-group-item-hover-bg-color: var(--fin-color-gray-cool-25); --fin-button-group-item-pressed-text-color: var(--fin-color-gray-cool-900); --fin-button-group-item-pressed-bg-color: var(--fin-color-gray-cool-50); --fin-button-group-item-focus-text-color: var(--fin-color-base-black); --fin-button-group-item-focus-bg-color: var(--fin-color-gray-cool-25); --fin-button-group-item-focus-border-color: var(--fin-color-gray-cool-200); --fin-button-group-item-disabled-text-color: var(--fin-color-gray-cool-300); --fin-button-group-item-disabled-bg-color: var(--fin-color-gray-cool-25); --fin-button-group-item-count-badge-text-color: var(--fin-color-gray-cool-500); --fin-button-group-item-count-badge-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-item-count-badge-hover-text-color: var(--fin-color-gray-cool-500); --fin-button-group-item-count-badge-hover-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-item-count-badge-pressed-text-color: var(--fin-color-gray-cool-500); --fin-button-group-item-count-badge-pressed-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-item-count-badge-focus-text-color: var(--fin-color-gray-cool-500); --fin-button-group-item-count-badge-focus-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-item-count-badge-disabled-text-color: var(--fin-color-gray-cool-300); --fin-button-group-item-count-badge-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-item-active-text-color: var(--fin-color-primary-light-500); --fin-button-group-item-active-bg-color: var(--fin-color-base-white); --fin-button-group-item-active-hover-text-color: var(--fin-color-primary-light-400); --fin-button-group-item-active-hover-bg-color: var(--fin-color-primary-light-25); --fin-button-group-item-active-pressed-text-color: var(--fin-color-primary-light-700); --fin-button-group-item-active-pressed-bg-color: var(--fin-color-primary-light-50); --fin-button-group-item-active-focus-text-color: var(--fin-color-primary-light-500); --fin-button-group-item-active-focus-bg-color: var(--fin-color-primary-light-25); --fin-button-group-item-active-focus-border-color: var(--fin-color-primary-light-200); --fin-button-group-item-active-disabled-text-color: var(--fin-color-gray-cool-300); --fin-button-group-item-active-disabled-bg-color: var(--fin-color-gray-cool-25); --fin-button-group-item-active-count-badge-text-color: var(--fin-color-primary-light-500); --fin-button-group-item-active-count-badge-bg-color: var(--fin-color-primary-light-100); --fin-button-group-item-active-count-badge-hover-text-color: var(--fin-color-primary-light-400); --fin-button-group-item-active-count-badge-hover-bg-color: var(--fin-color-primary-light-100); --fin-button-group-item-active-count-badge-pressed-text-color: var(--fin-color-primary-light-700); --fin-button-group-item-active-count-badge-pressed-bg-color: var(--fin-color-primary-light-100); --fin-button-group-item-active-count-badge-focus-text-color: var(--fin-color-primary-light-500); --fin-button-group-item-active-count-badge-focus-bg-color: var(--fin-color-primary-light-100); --fin-button-group-item-active-count-badge-disabled-text-color: var(--fin-color-gray-cool-300); --fin-button-group-item-active-count-badge-disabled-bg-color: var(--fin-color-gray-cool-100); } fin-button-group [tuiWrapper][data-appearance=fin-button-group-secondary-gray] { --fin-button-group-secondary-gray-border-color: var(--fin-color-gray-cool-200); --fin-button-group-secondary-gray-text-color: var(--fin-color-gray-cool-500); --fin-button-group-secondary-gray-bg-color: var(--fin-color-gray-warm-50); --fin-button-group-secondary-gray-hover-text-color: var(--fin-color-gray-cool-500); --fin-button-group-secondary-gray-hover-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-secondary-gray-pressed-text-color: var(--fin-color-gray-cool-700); --fin-button-group-secondary-gray-pressed-bg-color: var(--fin-color-gray-cool-200); --fin-button-group-secondary-gray-focus-text-color: var(--fin-color-gray-cool-500); --fin-button-group-secondary-gray-focus-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-secondary-gray-focus-border-color: var(--fin-color-gray-cool-500); --fin-button-group-secondary-gray-disabled-text-color: var(--fin-color-gray-cool-300); --fin-button-group-secondary-gray-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-secondary-gray-count-badge-text-color: var(--fin-color-gray-cool-500); --fin-button-group-secondary-gray-count-badge-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-secondary-gray-count-badge-hover-text-color: var(--fin-color-gray-cool-500); --fin-button-group-secondary-gray-count-badge-hover-bg-color: var(--fin-color-gray-cool-200); --fin-button-group-secondary-gray-count-badge-pressed-text-color: var(--fin-color-gray-cool-900); --fin-button-group-secondary-gray-count-badge-pressed-bg-color: var(--fin-color-gray-cool-300); --fin-button-group-secondary-gray-count-badge-focus-text-color: var(--fin-color-gray-cool-900); --fin-button-group-secondary-gray-count-badge-focus-bg-color: var(--fin-color-gray-cool-300); --fin-button-group-secondary-gray-count-badge-disabled-text-color: var(--fin-color-gray-cool-300); --fin-button-group-secondary-gray-count-badge-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-button-group-secondary-gray-active-text-color: var(--fin-color-base-black); --fin-button-group-secondary-gray-active-bg-color: var(--fin-color-gray-warm-50); --fin-button-group-secondary-gray-active-hover-text-color: var(--fin-color-gray-warm-700); --fin-button-group-secondary-gray-active-hover-bg-color: var(--fin-color-gray-warm-100); --fin-button-group-secondary-gray-active-pressed-text-color: var(--fin-color-base-black); --fin-button-group-secondary-gray-active-pressed-bg-color: var(--fin-color-gray-warm-200); --fin-button-group-secondary-gray-active-focus-text-color: var(--fin-color-gray-warm-50); --fin-button-group-secondary-gray-active-focus-bg-color: var(--fin-color-gray-warm-200); --fin-button-group-secondary-gray-active-focus-border-color: var(--fin-color-primary-light-200); --fin-button-group-secondary-gray-active-disabled-text-color: var(--fin-color-gray-cool-300); --fin-button-group-secondary-gray-active-disabled-bg-color: var(--fin-color-gray-cool-25); --fin-button-group-secondary-gray-active-count-badge-text-color: var(--fin-color-base-black); --fin-button-group-secondary-gray-active-count-badge-bg-color: var(--fin-color-gray-warm-100); --fin-button-group-secondary-gray-active-count-badge-hover-text-color: var(--fin-color-gray-warm-700); --fin-button-group-secondary-gray-active-count-badge-hover-bg-color: var(--fin-color-gray-warm-200); --fin-button-group-secondary-gray-active-count-badge-pressed-text-color: var(--fin-color-gray-warm-800); --fin-button-group-secondary-gray-active-count-badge-pressed-bg-color: var(--fin-color-gray-warm-300); --fin-button-group-secondary-gray-active-count-badge-focus-text-color: var(--fin-color-base-black); --fin-button-group-secondary-gray-active-count-badge-focus-bg-color: var(--fin-color-gray-warm-300); --fin-button-group-secondary-gray-active-count-badge-disabled-text-color: var(--fin-color-gray-cool-300); --fin-button-group-secondary-gray-active-count-badge-disabled-bg-color: var(--fin-color-gray-cool-100); } label._control, label.fin-input-field-label._control { --fin-input-field-label-text-color: var(--fin-color-gray-cool-600); --fin-input-field-label-required-indicator-color: var(--fin-color-error-500); } [tuiWrapper][data-appearance=fin-textfield] { --fin-input-field-text-color: var(--fin-color-base-black); --fin-input-field-bg-color: var(--fin-color-base-white); --fin-input-field-border-color: var(--fin-color-gray-cool-200); --fin-input-field-placeholder-color: var(--fin-color-gray-cool-300); --fin-input-field-icon-cleaner-color: var(--fin-color-gray-cool-300); --fin-input-field-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1); --fin-input-field-hover-text-color: var(--fin-color-base-black); --fin-input-field-hover-bg-color: var(--fin-color-base-white); --fin-input-field-hover-border-color: var(--fin-color-gray-cool-200); --fin-input-field-box-hover-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16); --fin-input-field-active-text-color: var(--fin-color-base-black); --fin-input-field-active-bg-color: var(--fin-color-base-white); --fin-input-field-active-border-color: var(--fin-color-primary-light-500); --fin-input-field-active-box-shadow: none; --fin-input-field-disabled-text-color: var(--fin-color-gray-cool-300); --fin-input-field-disabled-bg-color: var(--fin-color-gray-cool-50); --fin-input-field-disabled-border-color: var(--fin-color-gray-cool-200); --fin-input-field-disabled-box-shadow: none; --fin-input-field-error-text-color: var(--fin-color-base-black); --fin-input-field-error-bg-color: var(--fin-color-base-white); --fin-input-field-error-border-color: var(--fin-color-error-500); --fin-input-field-error-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16); } tui-error { --fin-error-color: var(--fin-color-error-700); } fin-step { --fin-step-normal-line-bg-color: var(--fin-color-gray-cool-200); --fin-step-normal-label-text-color: var(--fin-color-gray-cool-300); --fin-step-normal-radio-bg-color: var(--fin-color-base-white); --fin-step-normal-radio-border-color: var(--fin-color-gray-cool-200); --fin-step-normal-line-hover-bg-color: var(--fin-color-gray-cool-300); --fin-step-normal-label-text-hover-color: var(--fin-color-gray-cool-300); --fin-step-normal-radio-hover-border-color: var(--fin-color-gray-cool-300); --fin-step-normal-line-active-bg-color: var(--fin-color-gray-cool-500); --fin-step-normal-label-text-active-color: var(--fin-color-gray-cool-500); --fin-step-normal-radio-active-border-color: var(--fin-color-gray-cool-500); --fin-step-normal-line-focus-bg-color: var(--fin-color-gray-cool-400); --fin-step-normal-label-text-focus-color: var(--fin-color-gray-cool-400); --fin-step-normal-radio-focus-border-color: var(--fin-color-gray-cool-400); --fin-step-normal-readonly-line-bg-color: var(--fin-color-gray-cool-200); --fin-step-normal-readonly-label-text-color: var(--fin-color-gray-cool-300); --fin-step-normal-readonly-radio-border-color: var(--fin-color-gray-cool-200); --fin-step-active-line-bg-color: var(--fin-color-primary-light-500); --fin-step-active-label-text-color: var(--fin-color-primary-light-500); --fin-step-active-radio-bg-color: var(--fin-color-base-white); --fin-step-active-radio-border-color: var(--fin-color-primary-light-500); --fin-step-active-line-hover-bg-color: var(--fin-color-primary-light-400); --fin-step-active-label-text-hover-color: var(--fin-color-primary-light-400); --fin-step-active-radio-hover-border-color: var(--fin-color-primary-light-400); --fin-step-active-line-active-bg-color: var(--fin-color-primary-dark-500); --fin-step-active-label-text-active-color: var(--fin-color-primary-dark-500); --fin-step-active-radio-active-border-color: var(--fin-color-primary-dark-500); --fin-step-active-line-focus-bg-color: var(--fin-color-primary-light-700); --fin-step-active-label-text-focus-color: var(--fin-color-primary-light-700); --fin-step-active-radio-focus-border-color: var(--fin-color-primary-light-700); --fin-step-active-readonly-line-bg-color: var(--fin-color-primary-light-300); --fin-step-active-readonly-label-text-color: var(--fin-color-primary-light-300); --fin-step-active-readonly-radio-border-color: var(--fin-color-primary-light-300); --fin-step-passed-line-bg-color: var(--fin-color-gray-cool-500); --fin-step-passed-label-text-color: var(--fin-color-gray-cool-500); --fin-step-passed-checkbox-color: var(--fin-color-base-white); --fin-step-passed-checkbox-bg-color: var(--fin-color-gray-cool-500); --fin-step-passed-line-hover-bg-color: var(--fin-color-gray-cool-300); --fin-step-passed-label-text-hover-color: var(--fin-color-gray-cool-500); --fin-step-passed-checkbox-hover-bg-color: var(--fin-color-gray-cool-300); --fin-step-passed-line-active-bg-color: var(--fin-color-gray-cool-700); --fin-step-passed-label-text-active-color: var(--fin-color-gray-cool-700); --fin-step-passed-checkbox-active-bg-color: var(--fin-color-gray-cool-700); --fin-step-passed-line-focus-bg-color: var(--fin-color-gray-cool-600); --fin-step-passed-label-text-focus-color: var(--fin-color-gray-cool-600); --fin-step-passed-checkbox-focus-bg-color: var(--fin-color-gray-cool-600); --fin-step-passed-readonly-line-bg-color: var(--fin-color-gray-cool-200); --fin-step-passed-readonly-label-text-color: var(--fin-color-gray-cool-300); --fin-step-passed-readonly-checkbox-bg-color: var(--fin-color-gray-cool-100); } tui-hint[data-appearance=fin-hint-white] { --fin-hint-content-bg-color: var(--fin-color-base-white); --fin-hint-content-text-color: var(--fin-color-base-black); --fin-hint-content-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.16), 0px 24px 16px 0px rgba(0, 0, 0, 0.03), 0px 12px 12px 0px rgba(0, 0, 0, 0.04), 0px 4px 6px 0px rgba(0, 0, 0, 0.05); } tui-checkbox-labeled { --fin-checkbox-label-text-color: var(--fin-color-base-black); --fin-checkbox-desc-text-color: var(--fin-color-gray-cool-500); } [tuiWrapper][data-appearance=fin-checkbox-unselected] { --fin-checkbox-unselected-text-color: var(--fin-color-base-white); --fin-checkbox-unselected-bg-color: var(--fin-color-gray-cool-50); --fin-checkbox-unselected-border-color: var(--fin-color-gray-cool-200); --fin-checkbox-unselected-hover-bg-color: var(--fin-color-gray-cool-100); --fin-checkbox-unselected-hover-border-color: var(--fin-color-gray-cool-300); --fin-checkbox-unselected-active-bg-color: var(--fin-color-gray-cool-200); --fin-checkbox-unselected-active-border-color: var(--fin-color-gray-cool-500); --fin-checkbox-unselected-focus-bg-color: var(--fin-color-gray-cool-100); --fin-checkbox-unselected-focus-border-color: var(--fin-color-gray-cool-300); --fin-checkbox-unselected-disabled-bg-color: var(--fin-color-gray-cool-25); --fin-checkbox-unselected-disabled-border-color: var(--fin-color-gray-cool-100); } [tuiWrapper][data-appearance=fin-checkbox-selected] { --fin-checkbox-selected-text-color: var(--fin-color-base-white); --fin-checkbox-selected-bg-color: var(--fin-color-primary-light-500); --fin-checkbox-selected-border-color: transparent; --fin-checkbox-selected-hover-bg-color: var(--fin-color-primary-light-400); --fin-checkbox-selected-hover-border-color: transparent; --fin-checkbox-selected-active-bg-color: var(--fin-color-primary-dark-500); --fin-checkbox-selected-active-border-color: transparent; --fin-checkbox-selected-focus-bg-color: var(--fin-color-primary-light-700); --fin-checkbox-selected-focus-border-color: transparent; --fin-checkbox-selected-disabled-bg-color: var(--fin-color-primary-light-200); --fin-checkbox-selected-disabled-border-color: transparent; } tui-radio-labeled { --fin-radio-label-text-color: var(--fin-color-base-black); --fin-radio-desc-text-color: var(--fin-color-gray-cool-500); } [tuiWrapper][data-appearance=fin-radio-button-unselected] { --fin-radio-unselected-text-color: var(--fin-color-base-white); --fin-radio-unselected-bg-color: var(--fin-color-gray-cool-50); --fin-radio-unselected-border-color: var(--fin-color-gray-cool-200); --fin-radio-unselected-hover-bg-color: var(--fin-color-gray-cool-100); --fin-radio-unselected-hover-border-color: var(--fin-color-gray-cool-300); --fin-radio-unselected-active-bg-color: var(--fin-color-gray-cool-200); --fin-radio-unselected-active-border-color: var(--fin-color-gray-cool-500); --fin-radio-unselected-focus-bg-color: var(--fin-color-gray-cool-100); --fin-radio-unselected-focus-border-color: var(--fin-color-gray-cool-300); --fin-radio-unselected-disabled-bg-color: var(--fin-color-gray-cool-25); --fin-radio-unselected-disabled-border-color: var(--fin-color-gray-cool-100); } [tuiWrapper][data-appearance=fin-radio-button-selected] { --fin-radio-selected-text-color: var(--fin-color-base-white); --fin-radio-selected-bg-color: var(--fin-color-primary-light-500); --fin-radio-selected-border-color: transparent; --fin-radio-selected-hover-bg-color: var(--fin-color-primary-light-400); --fin-radio-selected-hover-border-color: transparent; --fin-radio-selected-active-bg-color: var(--fin-color-primary-dark-500); --fin-radio-selected-active-border-color: transparent; --fin-radio-selected-focus-bg-color: var(--fin-color-primary-light-700); --fin-radio-selected-focus-border-color: transparent; --fin-radio-selected-disabled-bg-color: var(--fin-color-primary-light-200); --fin-radio-selected-disabled-border-color: transparent; } fin-toggle-labeled { --fin-toggle-label-text-color: var(--fin-color-base-black); --fin-toggle-desc-text-color: var(--fin-color-gray-cool-500); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected] { --fin-toggle-dark-unselected-bg-color: var(--fin-color-gray-cool-200); --fin-toggle-dark-unselected-border-color: var(--fin-color-gray-cool-100); --fin-toggle-dark-unselected-hover-bg-color: var(--fin-color-gray-cool-100); --fin-toggle-dark-unselected-hover-border-color: var(--fin-color-gray-cool-300); --fin-toggle-dark-unselected-active-bg-color: var(--fin-color-gray-cool-100); --fin-toggle-dark-unselected-active-border-color: var(--fin-color-gray-cool-500); --fin-toggle-dark-unselected-focus-bg-color: var(--fin-color-gray-cool-100); --fin-toggle-dark-unselected-focus-border-color: var(--fin-color-gray-cool-300); --fin-toggle-dark-unselected-disabled-bg-color: var(--fin-color-gray-cool-200); --fin-toggle-dark-unselected-disabled-border-color: var(--fin-color-gray-cool-100); } [tuiWrapper][data-appearance=fin-toggle-unselected] { --fin-toggle-unselected-bg-color: var(--fin-color-gray-cool-50); --fin-toggle-unselected-border-color: var(--fin-color-gray-cool-200); --fin-toggle-unselected-hover-bg-color: var(--fin-color-gray-cool-100); --fin-toggle-unselected-hover-border-color: var(--fin-color-gray-cool-300); --fin-toggle-unselected-active-bg-color: var(--fin-color-gray-cool-200); --fin-toggle-unselected-active-border-color: var(--fin-color-gray-cool-500); --fin-toggle-unselected-focus-bg-color: var(--fin-color-gray-cool-100); --fin-toggle-unselected-focus-border-color: var(--fin-color-gray-cool-300); --fin-toggle-unselected-disabled-bg-color: var(--fin-color-gray-cool-50); --fin-toggle-unselected-disabled-border-color: var(--fin-color-gray-cool-100); } [tuiWrapper][data-appearance=fin-toggle-selected] { --fin-toggle-selected-bg-color: var(--fin-color-primary-light-500); --fin-toggle-selected-border-color: transparent; --fin-toggle-selected-hover-bg-color: var(--fin-color-primary-light-400); --fin-toggle-selected-hover-border-color: transparent; --fin-toggle-selected-active-bg-color: var(--fin-color-primary-dark-500); --fin-toggle-selected-active-border-color: transparent; --fin-toggle-selected-focus-bg-color: var(--fin-color-primary-light-700); --fin-toggle-selected-focus-border-color: transparent; --fin-toggle-selected-disabled-bg-color: var(--fin-color-primary-light-200); --fin-toggle-selected-disabled-border-color: transparent; } .fin-dialog-container { --fin-dialog-header-text-color: var(--fin-color-base-black); --fin-dialog-actions-border-color: var(--fin-color-gray-warm-200); } .fin-confirm-dialog { --fin-confirm-dialog-bg-color: var(--fin-color-base-white); --fin-confirm-dialog-header-border-bottom-color: var(--fin-color-gray-warm-100); --fin-confirm-dialog-marker-icon-primary-bg-color: var(--fin-color-primary-light-100); --fin-confirm-dialog-marker-icon-primary-color: var(--fin-color-primary-light-500); --fin-confirm-dialog-marker-icon-warning-bg-color: var(--fin-color-error-100); --fin-confirm-dialog-marker-icon-warning-color: var(--fin-color-error-500); --fin-confirm-dialog-header-text-color: var(--fin-color-base-black); --fin-confirm-dialog-content-text-color: var(--fin-color-base-black); } .fin-info-dialog { --fin-info-dialog-bg-color: var(--fin-color-base-white); --fin-info-dialog-header-border-bottom-color: var(--fin-color-gray-warm-100); --fin-info-dialog-marker-icon-primary-bg-color: var(--fin-color-info-100); --fin-info-dialog-marker-icon-primary-color: var(--fin-color-info-500); --fin-info-dialog-marker-icon-warning-bg-color: var(--fin-color-error-100); --fin-info-dialog-marker-icon-warning-color: var(--fin-color-error-500); --fin-info-dialog-header-text-color: var(--fin-color-base-black); --fin-info-dialog-content-text-color: var(--fin-color-base-black); } fin-page-header { --fin-page-header-back-button-icon-color: var(--fin-color-gray-cool-300); --fin-page-header-title-text-color: var(--fin-color-base-black); --fin-page-header-desc-text-color: var(--fin-color-gray-cool-500); --fin-page-header-badge-bg-color: var(--fin-color-primary-light-50); --fin-page-header-badge-text-color: var(--fin-color-primary-light-500); } tui-accordion-item[finAccordionItem], tui-accordion-item[fin-accordion-item], fin-widget-wrapper { --fin-accordion-item-dark-header-bg-color: var(--fin-color-primary-dark-500); --fin-accordion-item-dark-header-hover-bg-color: var(--fin-color-primary-dark-400); --fin-accordion-item-dark-header-active-bg-color: var(--fin-color-primary-dark-700); --fin-accordion-item-dark-header-focus-bg-color: var(--fin-color-primary-dark-500); --fin-accordion-item-dark-header-focus-border-color: var(--fin-color-primary-dark-200); --fin-accordion-item-dark-title-color: var(--fin-color-base-white); --fin-accordion-item-dark-description-color: var(--fin-color-gray-cool-200); --fin-accordion-item-dark-icon-color: var(--fin-color-base-white); --fin-accordion-item-dark-border-color: var(--fin-color-gray-warm-100); --fin-accordion-item-light-header-bg-color: var(--fin-color-gray-cool-50); --fin-accordion-item-light-header-hover-bg-color: var(--fin-color-gray-cool-100); --fin-accordion-item-light-header-active-bg-color: var(--fin-color-gray-cool-200); --fin-accordion-item-light-header-focus-bg-color: var(--fin-color-gray-cool-50); --fin-accordion-item-light-header-focus-border-color: var(--fin-color-gray-cool-500); --fin-accordion-item-light-title-color: var(--fin-color-gray-cool-700); --fin-accordion-item-light-description-color: var(--fin-color-gray-cool-500); --fin-accordion-item-light-icon-color: var(--fin-color-gray-cool-700); --fin-accordion-item-light-border-color: var(--fin-color-gray-warm-100); --fin-accordion-item-file-uploader-header-bg-color: var(--fin-color-base-white); --fin-accordion-item-file-uploader-header-hover-bg-color: var(--fin-color-gray-cool-25); --fin-accordion-item-file-uploader-header-active-bg-color: var(--fin-color-gray-cool-50); --fin-accordion-item-file-uploader-header-focus-bg-color: var(--fin-color-gray-cool-25); --fin-accordion-item-file-uploader-header-focus-border-color: var(--fin-color-gray-cool-500); --fin-accordion-item-file-uploader-title-color: var(--fin-color-gray-cool-700); --fin-accordion-item-file-uploader-description-color: var(--fin-color-gray-cool-500); --fin-accordion-item-file-uploader-icon-color: var(--fin-color-gray-cool-700); --fin-accordion-item-file-uploader-border-color: var(--fin-color-gray-warm-100); --fin-accordion-item-gray-header-bg-color: var(--fin-color-gray-cool-25); --fin-accordion-item-gray-header-hover-bg-color: var(--fin-color-gray-cool-50); --fin-accordion-item-gray-header-active-bg-color: var(--fin-color-gray-cool-100); --fin-accordion-item-gray-header-focus-bg-color: var(--fin-color-gray-cool-50); --fin-accordion-item-gray-header-focus-border-color: var(--fin-color-gray-cool-500); --fin-accordion-item-gray-title-color: var(--fin-color-base-black); --fin-accordion-item-gray-description-color: var(--fin-color-gray-cool-500); --fin-accordion-item-gray-icon-color: var(--fin-color-gray-cool-700); --fin-accordion-item-gray-border-color: var(--fin-color-gray-cool-100); --fin-accordion-item-self-onboarding-faq-header-bg-color: var(--fin-color-gray-cool-50); --fin-accordion-item-self-onboarding-faq-header-hover-bg-color: var(--fin-color-gray-cool-100); --fin-accordion-item-self-onboarding-faq-header-active-bg-color: var(--fin-color-gray-cool-200); --fin-accordion-item-self-onboarding-faq-header-focus-bg-color: var(--fin-color-gray-cool-100); --fin-accordion-item-self-onboarding-faq-title-color: var(--fin-color-base-black); --fin-accordion-item-self-onboarding-faq-description-color: var(--fin-color-gray-cool-600); --fin-accordion-item-self-onboarding-faq-icon-color: var(--fin-color-base-black); } [tuiWrapper][data-appearance=fin-accordion-btn-primary] { --fin-accordion-button-primary-bg-color: var(--fin-color-primary-light-500); --fin-accordion-button-primary-text-color: var(--fin-color-base-white); --fin-accordion-button-primary-hover-bg-color: var(--fin-color-primary-light-400); --fin-accordion-button-primary-hover-text-color: var(--fin-color-base-white); --fin-accordion-button-primary-active-bg-color: var(--fin-color-primary-light-700); --fin-accordion-button-primary-active-text-color: var(--fin-color-base-white); --fin-accordion-button-primary-focus-bg-color: var(--fin-color-primary-light-400); --fin-accordion-button-primary-focus-border-color: var(--fin-color-primary-light-700); --fin-accordion-button-primary-disabled-bg-color: var(--fin-color-primary-dark-400); --fin-accordion-button-primary-disabled-text-color: var(--fin-color-gray-cool-300); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat] { --fin-accordion-icon-button-accent-flat-bg-color: var(--fin-color-gray-cool-700); --fin-accordion-icon-button-accent-flat-icon-color: var(--fin-color-gray-cool-700); --fin-accordion-icon-button-accent-flat-hover-bg-color: var(--fin-color-error-200); --fin-accordion-icon-button-accent-flat-hover-icon-color: var(--fin-color-error-500); --fin-accordion-icon-button-accent-flat-active-bg-color: var(--fin-color-error-300); --fin-accordion-icon-button-accent-flat-active-icon-color: var(--fin-color-error-700); --fin-accordion-icon-button-accent-flat-focus-bg-color: var(--fin-color-error-200); --fin-accordion-icon-button-accent-flat-focus-icon-color: var(--fin-color-error-500); --fin-accordion-icon-button-accent-flat-focus-border-color: var(--fin-color-error-500); --fin-accordion-icon-button-accent-flat-disabled-bg-color: var(--fin-color-gray-cool-700); --fin-accordion-icon-button-accent-flat-disabled-icon-color: var(--fin-color-gray-cool-400); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent] { --fin-accordion-icon-button-accent-bg-color: var(--fin-color-gray-cool-700); --fin-accordion-icon-button-accent-icon-color: var(--fin-color-base-white); --fin-accordion-icon-button-accent-hover-bg-color: var(--fin-color-error-200); --fin-accordion-icon-button-accent-hover-icon-color: var(--fin-color-error-500); --fin-accordion-icon-button-accent-active-bg-color: var(--fin-color-error-300); --fin-accordion-icon-button-accent-active-icon-color: var(--fin-color-error-700); --fin-accordion-icon-button-accent-focus-bg-color: var(--fin-color-error-200); --fin-accordion-icon-button-accent-focus-icon-color: var(--fin-color-error-500); --fin-accordion-icon-button-accent-focus-border-color: var(--fin-color-error-500); --fin-accordion-icon-button-accent-disabled-bg-color: var(--fin-color-gray-cool-700); --fin-accordion-icon-button-accent-disabled-icon-color: var(--fin-color-base-white); } [tuiWrapper][data-appearance=fin-accordion-third-btn] { --fin-accordion-button-third-border-color: var(--fin-color-gray-cool-100); --fin-accordion-button-third-text-color: var(--fin-color-base-white); --fin-accordion-button-third-hover-border-color: var(--fin-color-gray-warm-100); --fin-accordion-button-third-hover-bg-color: var(--fin-color-primary-dark-400); --fin-accordion-button-third-hover-text-color: var(--fin-color-base-white); --fin-accordion-button-third-active-bg-color: var(--fin-color-primary-light-100); --fin-accordion-button-third-active-text-color: var(--fin-color-primary-light-700); --fin-accordion-button-third-active-border-color: var(--fin-color-gray-cool-100); --fin-accordion-button-third-focus-bg-color: var(--fin-color-primary-light-50); --fin-accordion-button-third-focus-border-color: var(--fin-color-primary-light-700); --fin-accordion-button-third-focus-text-color: var(--fin-color-primary-light-500); --fin-accordion-button-third-disabled-bg-color: var(--fin-color-primary-dark-400); --fin-accordion-button-third-disabled-text-color: var(--fin-color-gray-cool-300); } .fin-data-grid-table-pagination { --fin-data-grid-pagination-border-radius: 8px; --fin-data-grid-pagination-bg-color: var(--fin-color-base-white); --fin-data-grid-pagination-border-color: var(--fin-color-gray-warm-200); --fin-data-grid-pagination-total-pages-color: var(--fin-color-base-black); --fin-data-grid-pagination-total-items-color: var(--fin-color-base-black); } tui-notification[data-status=info] { --fin-notification-bg-color: var(--fin-color-info-50); --fin-notification-icon-color: var(--fin-color-info-400); } tui-notification[data-status=success] { --fin-notification-bg-color: var(--fin-color-success-50); --fin-notification-icon-color: var(--fin-color-success-500); } tui-notification[data-status=warning] { --fin-notification-bg-color: var(--fin-color-warning-50); --fin-notification-icon-color: var(--fin-color-warning-400); } tui-notification[data-status=error] { --fin-notification-bg-color: var(--fin-color-error-50); --fin-notification-icon-color: var(--fin-color-error-500); } tui-notification[data-status=neutral] { --fin-notification-bg-color: var(--fin-color-gray-warm-25); --fin-notification-icon-color: var(--fin-color-gray-warm-400); } tui-notification { --fin-notification-content-title-color: var(--fin-color-gray-warm-700); --fin-notification-content-message-color: var(--fin-color-gray-warm-700); --fin-notification-action-btn-disabled-bg-color: var(--fin-color-gray-cool-100); --fin-notification-action-btn-disabled-text-color: var(--fin-color-gray-cool-300); --fin-notification-action-btn-disabled-border-color: var(--fin-color-gray-cool-200); --fin-notification-action-btn-secondary-text-color: var(--fin-color-gray-cool-700); --fin-notification-action-btn-secondary-border-color: var(--fin-color-gray-cool-200); --fin-notification-action-btn-secondary-hover-bg-color: var(--fin-color-gray-warm-100); --fin-notification-action-btn-secondary-hover-text-color: var(--fin-color-gray-cool-700); --fin-notification-action-btn-secondary-hover-border-color: var(--fin-color-gray-warm-200); --fin-notification-action-btn-secondary-active-bg-color: var(--fin-color-gray-warm-100); --fin-notification-action-btn-secondary-active-text-color: var(--fin-color-gray-cool-700); --fin-notification-action-btn-secondary-active-border-color: var(--fin-color-gray-cool-100); --fin-notification-action-btn-secondary-focus-bg-color: var(--fin-color-gray-warm-100); --fin-notification-action-btn-secondary-focus-text-color: var(--fin-color-gray-cool-700); --fin-notification-action-btn-secondary-focus-border-color: var(var(--fin-color-gray-cool-500)); --fin-notification-link-btn-secondary-text-decoration-color: var(--fin-color-gray-cool-600); --fin-notification-link-btn-secondary-text-color: var(--fin-color-gray-cool-600); --fin-notification-link-btn-secondary-hover-text-color: var(--fin-color-gray-cool-400); --fin-notification-link-btn-secondary-active-text-color: var(--fin-color-gray-cool-800); --fin-notification-link-btn-secondary-focus-text-color: var(--fin-color-gray-cool-400); --fin-notification-link-btn-secondary-disabled-text-color: var(--fin-color-gray-cool-300); } tui-notification[data-status=info] { --fin-notification-action-btn-primary-text-color: var(--fin-color-info-500); --fin-notification-action-btn-primary-border-color: var(--fin-color-info-500); --fin-notification-action-btn-primary-hover-bg-color: var(--fin-color-info-50); --fin-notification-action-btn-primary-hover-text-color: var(--fin-color-info-500); --fin-notification-action-btn-primary-hover-border-color: var(--fin-color-info-500); --fin-notification-action-btn-primary-active-bg-color: var(--fin-color-info-100); --fin-notification-action-btn-primary-active-text-color: var(--fin-color-info-700); --fin-notification-action-btn-primary-active-border-color: var(--fin-color-info-700); --fin-notification-action-btn-primary-focus-bg-color: var(--fin-color-info-100); --fin-notification-action-btn-primary-focus-text-color: var(--fin-color-info-500); --fin-notification-action-btn-primary-focus-border-color: var(--fin-color-info-500); --fin-notification-link-btn-primary-text-decoration-color: var(--fin-color-info-300); --fin-notification-link-btn-primary-text-color: var(--fin-color-info-500); --fin-notification-link-btn-primary-hover-text-color: var(--fin-color-gray-cool-400); --fin-notification-link-btn-primary-hover-bg-color: var(--fin-color-info-100); --fin-notification-link-btn-primary-active-text-color: var(--fin-color-info-700); --fin-notification-link-btn-primary-focus-text-color: var(--fin-color-gray-cool-300); --fin-notification-link-btn-primary-disabled-text-color: var(--fin-color-gray-cool-300); } tui-notification[data-status=success] { --fin-notification-action-btn-primary-text-color: var(--fin-color-success-500); --fin-notification-action-btn-primary-border-color: var(--fin-color-success-500); --fin-notification-action-btn-primary-hover-bg-color: var(--fin-color-success-50); --fin-notification-action-btn-primary-hover-text-color: var(--fin-color-success-500); --fin-notification-action-btn-primary-hover-border-color: var(--fin-color-success-500); --fin-notification-action-btn-primary-active-bg-color: var(--fin-color-success-100); --fin-notification-action-btn-primary-active-text-color: var(--fin-color-success-700); --fin-notification-action-btn-primary-active-border-color: var(--fin-color-success-500); --fin-notification-action-btn-primary-focus-bg-color: var(--fin-color-success-100); --fin-notification-action-btn-primary-focus-text-color: var(--fin-color-success-500); --fin-notification-action-btn-primary-focus-border-color: var(--fin-color-success-500); --fin-notification-link-btn-primary-text-decoration-color: var(--fin-color-success-300); --fin-notification-link-btn-primary-text-color: var(--fin-color-success-500); --fin-notification-link-btn-primary-hover-text-color: var(--fin-color-success-500); --fin-notification-link-btn-primary-hover-bg-color: var(--fin-color-success-100); --fin-notification-link-btn-primary-active-text-color: var(--fin-color-success-700); --fin-notification-link-btn-primary-focus-text-color: var(--fin-color-success-500); --fin-notification-link-btn-primary-disabled-text-color: var(--fin-color-gray-cool-300); } tui-notification[data-status=warning] { --fin-notification-action-btn-primary-text-color: var(--fin-color-warning-400); --fin-notification-action-btn-primary-border-color: var(--fin-color-warning-400); --fin-notification-action-btn-primary-hover-bg-color: var(--fin-color-warning-25); --fin-notification-action-btn-primary-hover-text-color: var(--fin-color-warning-400); --fin-notification-action-btn-primary-hover-border-color: var(--fin-color-warning-400); --fin-notification-action-btn-primary-active-bg-color: var(--fin-color-warning-50); --fin-notification-action-btn-primary-active-text-color: var(--fin-color-warning-600); --fin-notification-action-btn-primary-active-border-color: var(--fin-color-warning-600); --fin-notification-action-btn-primary-focus-bg-color: var(--fin-color-warning-400); --fin-notification-action-btn-primary-focus-text-color: var(--fin-color-warning-400); --fin-notification-action-btn-primary-focus-border-color: var(--fin-color-warning-50); --fin-notification-link-btn-primary-text-decoration-color: var(--fin-color-warning-300); --fin-notification-link-btn-primary-text-color: var(--fin-color-warning-500); --fin-notification-link-btn-primary-hover-text-color: var(--fin-color-warning-500); --fin-notification-link-btn-primary-hover-bg-color: var(--fin-color-warning-100); --fin-notification-link-btn-primary-active-text-color: var(--fin-color-warning-700); --fin-notification-link-btn-primary-focus-text-color: var(--fin-color-warning-500); --fin-notification-link-btn-primary-disabled-text-color: var(--fin-color-gray-cool-300); } tui-notification[data-status=error] { --fin-notification-action-btn-primary-text-color: var(--fin-color-error-500); --fin-notification-action-btn-primary-border-color: var(--fin-color-error-500); --fin-notification-action-btn-primary-hover-bg-color: var(--fin-color-error-50); --fin-notification-action-btn-primary-hover-text-color: var(--fin-color-error-500); --fin-notification-action-btn-primary-hover-border-color: var(--fin-color-error-500); --fin-notification-action-btn-primary-active-bg-color: var(--fin-color-warning-50); --fin-notification-action-btn-primary-active-text-color: var(--fin-color-error-700); --fin-notification-action-btn-primary-active-border-color: var(--fin-color-error-700); --fin-notification-action-btn-primary-focus-bg-color: var(--fin-color-error-100); --fin-notification-action-btn-primary-focus-text-color: var(--fin-color-error-500); --fin-notification-action-btn-primary-focus-border-color: var(--fin-color-error-500); --fin-notification-link-btn-primary-text-decoration-color: var(--fin-color-error-300); --fin-notification-link-btn-primary-text-color: var(--fin-color-error-500); --fin-notification-link-btn-primary-hover-text-color: var(--fin-color-error-500); --fin-notification-link-btn-primary-hover-bg-color: var(--fin-color-error-100); --fin-notification-link-btn-primary-active-text-color: var(--fin-color-error-700); --fin-notification-link-btn-primary-focus-text-color: var(--fin-color-error-500); --fin-notification-link-btn-primary-disabled-text-color: var(--fin-color-gray-cool-300); } tui-radio-block { --fin-radio-block-border-color: var(--fin-color-gray-cool-100); --fin-radio-block-text-color: var(--fin-color-base-black); --fin-radio-block-bg-color: var(--fin-color-base-white); --fin-radio-block-hover-bg-color: var(--fin-color-gray-cool-25); --fin-radio-block-active-bg-color: var(--fin-color-gray-cool-50); --fin-radio-block-focus-bg-color: var(--fin-color-gray-cool-25); --fin-radio-block-focus-border-color: var(--fin-color-primary-light-300); --fin-radio-block-disabled-text-color: var(--fin-color-gray-cool-300); } tui-checkbox-block { --fin-checkbox-block-border-color: var(--fin-color-gray-cool-100); --fin-checkbox-block-text-color: var(--fin-color-base-black); --fin-checkbox-block-bg-color: var(--fin-color-base-white); --fin-checkbox-block-hover-bg-color: var(--fin-color-gray-cool-25); --fin-checkbox-block-active-bg-color: var(--fin-color-gray-cool-50); --fin-checkbox-block-focus-bg-color: var(--fin-color-gray-cool-25); --fin-checkbox-block-focus-border-color: var(--fin-color-primary-light-300); --fin-checkbox-block-disabled-text-color: var(--fin-color-gray-cool-300); --fin-checkbox-block-error-border-color: var(--fin-color-error-500); } fin-data-grid { --fin-data-grid-border: 1px solid var(--fin-color-gray-warm-200); --fin-data-grid-th-column-text-color: var(--fin-color-base-white); --fin-data-grid-th-column-bg-color: var(--fin-color-primary-dark-500); --fin-data-grid-tr-selected-bg-color: var(--fin-color-primary-light-25); --fin-data-grid-tr-disabled-bg-color: var(--fin-color-gray-warm-50); --fin-data-grid-td-column-text-color: var(--fin-color-base-black); --fin-data-grid-td-column-disabled-text-color: var(--fin-color-gray-warm-500); --fin-data-grid-td-column-loading-indicator-progress-color: var(--fin-color-primary-light-500); --fin-data-grid-filters-toggle-bar-bg-color: var(--fin-color-primary-light-500); --fin-data-grid-filters-toggle-bar-label-color: var(--fin-color-base-white); --fin-data-grid-filters-bar-td-column-bg-color: var(--fin-color-base-white); --fin-data-grid-th-column-checkbox-unselected-text-color: var(--fin-color-primary-dark-500); --fin-data-grid-th-column-checkbox-unselected-bg-color: var(--fin-color-primary-dark-25); --fin-data-grid-th-column-checkbox-unselected-border-color: none; --fin-data-grid-th-column-checkbox-unselected-hover-bg-color: var(--fin-color-primary-dark-400); --fin-data-grid-th-column-checkbox-unselected-hover-border-color: none; --fin-data-grid-th-column-checkbox-unselected-active-bg-color: var(--fin-color-primary-dark-600); --fin-data-grid-th-column-checkbox-unselected-active-border-color: none; --fin-data-grid-th-column-checkbox-unselected-focus-bg-color: var(--fin-color-primary-dark-400); --fin-data-grid-th-column-checkbox-unselected-focus-border-color: var(--fin-color-gray-cool-300); --fin-data-grid-th-column-checkbox-unselected-disabled-border-color: none; --fin-data-grid-th-column-checkbox-selected-text-color: var(--fin-color-primary-dark-500); --fin-data-grid-th-column-checkbox-selected-bg-color: var(--fin-color-primary-dark-25); --fin-data-grid-th-column-checkbox-selected-border-color: none; --fin-data-grid-th-column-checkbox-selected-hover-bg-color: var(--fin-color-primary-dark-300); --fin-data-grid-th-column-checkbox-selected-hover-border-color: none; --fin-data-grid-th-column-checkbox-selected-active-bg-color: var(--fin-color-primary-dark-500); --fin-data-grid-th-column-checkbox-selected-active-border-color: none; --fin-data-grid-th-column-checkbox-selected-focus-bg-color: var(--fin-color-primary-dark-300); --fin-data-grid-th-column-checkbox-selected-focus-border-color: var(--fin-color-gray-cool-300); --fin-data-grid-th-column-checkbox-selected-disabled-border-color: none; } .fin-data-grid-actions-cell-template-appearance { --fin-data-grid-actions-cell-primary-action-bg-color: transparent; --fin-data-grid-actions-cell-primary-action-color: var(--fin-color-gray-cool-400); --fin-data-grid-actions-cell-primary-action-hover-color: var(--fin-color-primary-light-500); --fin-data-grid-actions-cell-primary-action-active-color: var(--fin-color-primary-light-600); --fin-data-grid-actions-cell-primary-action-focus-border-color: var( --fin-data-grid-actions-cell-primary-action-color ); --fin-data-grid-actions-cell-primary-action-btn-bg-color: var(--fin-color-primary-light-50); --fin-data-grid-actions-cell-primary-action-btn-color: var(--fin-color-primary-light-500); --fin-data-grid-actions-cell-secondary-action-bg-color: transparent; --fin-data-grid-actions-cell-secondary-action-color: var(--fin-color-gray-cool-400); --fin-data-grid-actions-cell-secondary-action-hover-color: var(--fin-color-gray-cool-500); --fin-data-grid-actions-cell-secondary-action-active-color: var(--fin-color-gray-cool-600); --fin-data-grid-actions-cell-secondary-action-focus-border-color: var( --fin-data-grid-actions-cell-secondary-action-color ); --fin-data-grid-actions-cell-danger-action-bg-color: transparent; --fin-data-grid-actions-cell-danger-action-color: var(--fin-color-gray-cool-400); --fin-data-grid-actions-cell-danger-action-hover-color: var(--fin-color-error-500); --fin-data-grid-actions-cell-danger-action-active-color: var(--fin-color-error-600); --fin-data-grid-actions-cell-danger-action-focus-border-color: var(--fin-data-grid-actions-cell-danger-action-color); } /* libs/finverity-platform-app-ui-kit/src/lib/styles/ui-kit-global.scss */ button[tuiButton][data-shape=rounded], button[tuiIconButton][data-shape=rounded], a[tuiButton][data-shape=rounded], a[tuiIconButton][data-shape=rounded] { border-radius: 12px; } button[tuiButton][data-size=l], button[tuiIconButton][data-size=l], a[tuiButton][data-size=l], a[tuiIconButton][data-size=l] { height: 56px; --tui-padding: 36px; } button[tuiButton][data-size=m], button[tuiIconButton][data-size=m], a[tuiButton][data-size=m], a[tuiIconButton][data-size=m] { height: 44px; --tui-padding: 16px; } button[tuiButton][data-size=s], button[tuiIconButton][data-size=s], a[tuiButton][data-size=s], a[tuiIconButton][data-size=s] { height: 32px; --tui-padding: 12px; } button[tuiButton][data-size=xs], button[tuiIconButton][data-size=xs], a[tuiButton][data-size=xs], a[tuiIconButton][data-size=xs] { height: 24px; border-radius: 6px; --tui-padding: 6px; } [tuiWrapper][data-appearance=fin-btn-primary] { opacity: 1; background: var(--fin-button-primary-bg-color); color: var(--fin-button-primary-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-primary]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-primary][data-state=hover] { background: var(--fin-button-primary-hover-bg-color); color: var(--fin-button-primary-hover-text-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-primary], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-primary] { background: var(--fin-button-primary-focus-bg-color); color: var(--fin-button-primary-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-primary]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-primary]:after { border-width: 1px !important; border-color: var(--fin-button-primary-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-primary]:focus-visible:focus-visible { background: var(--fin-button-primary-focus-bg-color); color: var(--fin-button-primary-text-color); } [tuiWrapper][data-appearance=fin-btn-primary]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-primary-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-primary]._focused._focused { background: var(--fin-button-primary-focus-bg-color); color: var(--fin-button-primary-text-color); } [tuiWrapper][data-appearance=fin-btn-primary]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-primary-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-primary]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-primary][data-state=active], [tuiWrapper][data-appearance=fin-btn-primary][data-state=active]:hover { background: var(--fin-button-primary-active-bg-color); color: var(--fin-button-primary-active-text-color); } [tuiWrapper][data-appearance=fin-btn-primary]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-primary][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-primary-disabled-bg-color); color: var(--fin-button-primary-disabled-text-color); } [tuiWrapper][data-appearance=fin-btn-secondary] { opacity: 1; background: var(--fin-button-secondary-bg-color); color: var(--fin-button-secondary-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-secondary]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-secondary][data-state=hover] { background: var(--fin-button-secondary-hover-bg-color); color: var(--fin-button-secondary-hover-text-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-secondary], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-secondary] { background: var(--fin-button-secondary-focus-bg-color); color: var(--fin-button-secondary-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-secondary]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-secondary]:after { border-width: 1px !important; border-color: var(--fin-button-secondary-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-secondary]:focus-visible:focus-visible { background: var(--fin-button-secondary-focus-bg-color); color: var(--fin-button-secondary-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-secondary]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-secondary-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-secondary]._focused._focused { background: var(--fin-button-secondary-focus-bg-color); color: var(--fin-button-secondary-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-secondary]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-secondary-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-secondary]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-secondary][data-state=active], [tuiWrapper][data-appearance=fin-btn-secondary][data-state=active]:hover { background: var(--fin-button-secondary-active-bg-color); color: var(--fin-button-secondary-active-text-color); } [tuiWrapper][data-appearance=fin-btn-secondary]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-secondary][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-secondary-disabled-bg-color); color: var(--fin-button-secondary-disabled-text-color); } [tuiWrapper][data-appearance=fin-btn-outline] { opacity: 1; background: var(--fin-button-outline-bg-color); color: var(--fin-button-outline-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } [tuiWrapper][data-appearance=fin-btn-outline]:after { border: 1px solid var(--fin-button-outline-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-outline]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-outline][data-state=hover] { background: var(--fin-button-outline-hover-bg-color); color: var(--fin-button-outline-hover-text-color); } [tuiWrapper][data-appearance=fin-btn-outline]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-btn-outline][data-state=hover]:after { border-color: var(--fin-button-outline-hover-border-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-outline], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-outline] { background: var(--fin-button-outline-focus-bg-color); color: var(--fin-button-outline-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-outline]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-outline]:after { border-width: 1px !important; border-color: var(--fin-button-outline-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-outline]:focus-visible:focus-visible { background: var(--fin-button-outline-focus-bg-color); color: var(--fin-button-outline-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-outline]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-outline-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-outline]._focused._focused { background: var(--fin-button-outline-focus-bg-color); color: var(--fin-button-outline-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-outline]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-outline-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-outline]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-outline][data-state=active], [tuiWrapper][data-appearance=fin-btn-outline][data-state=active]:hover { background: var(--fin-button-outline-active-bg-color); color: var(--fin-button-outline-active-text-color); } [tuiWrapper][data-appearance=fin-btn-outline]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-btn-outline][data-state=active]:after, [tuiWrapper][data-appearance=fin-btn-outline][data-state=active]:hover:after { border-color: var(--fin-button-outline-active-border-color); } [tuiWrapper][data-appearance=fin-btn-outline]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-outline][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-outline-disabled-bg-color); color: var(--fin-button-outline-disabled-text-color); } [tuiWrapper][data-appearance=fin-btn-outline]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-btn-outline][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-button-outline-disabled-border-color); } [tuiWrapper][data-appearance=fin-btn-flat] { opacity: 1; background: var(--fin-button-flat-bg-color); color: var(--fin-button-flat-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-flat]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-flat][data-state=hover] { background: var(--fin-button-flat-hover-bg-color); color: var(--fin-button-flat-hover-text-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-flat], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-flat] { background: var(--fin-button-flat-focus-bg-color); color: var(--fin-button-flat-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-flat]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-flat]:after { border-width: 1px !important; border-color: var(--fin-button-flat-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-flat]:focus-visible:focus-visible { background: var(--fin-button-flat-focus-bg-color); color: var(--fin-button-flat-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-flat]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-flat-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-flat]._focused._focused { background: var(--fin-button-flat-focus-bg-color); color: var(--fin-button-flat-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-flat]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-flat-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-flat]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-flat][data-state=active], [tuiWrapper][data-appearance=fin-btn-flat][data-state=active]:hover { background: var(--fin-button-flat-active-bg-color); color: var(--fin-button-flat-active-text-color); } [tuiWrapper][data-appearance=fin-btn-flat]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-flat][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-flat-disabled-bg-color); color: var(--fin-button-flat-disabled-text-color); } [tuiWrapper][data-appearance=fin-btn-secondary-gray] { opacity: 1; background: var(--fin-button-secondary-gray-bg-color); color: var(--fin-button-secondary-gray-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-secondary-gray]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-secondary-gray][data-state=hover] { background: var(--fin-button-secondary-gray-hover-bg-color); color: var(--fin-button-secondary-gray-hover-text-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-secondary-gray], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-secondary-gray] { background: var(--fin-button-secondary-gray-focus-bg-color); color: var(--fin-button-secondary-gray-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-secondary-gray]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-secondary-gray]:after { border-width: 1px !important; border-color: var(--fin-button-secondary-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-secondary-gray]:focus-visible:focus-visible { background: var(--fin-button-secondary-gray-focus-bg-color); color: var(--fin-button-secondary-gray-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-secondary-gray]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-secondary-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-secondary-gray]._focused._focused { background: var(--fin-button-secondary-gray-focus-bg-color); color: var(--fin-button-secondary-gray-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-secondary-gray]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-secondary-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-secondary-gray]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-secondary-gray][data-state=active], [tuiWrapper][data-appearance=fin-btn-secondary-gray][data-state=active]:hover { background: var(--fin-button-secondary-gray-active-bg-color); color: var(--fin-button-secondary-gray-active-text-color); } [tuiWrapper][data-appearance=fin-btn-secondary-gray]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-secondary-gray][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-secondary-gray-disabled-bg-color); color: var(--fin-button-secondary-gray-disabled-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray] { opacity: 1; background: var(--fin-button-outline-gray-bg-color); color: var(--fin-button-outline-gray-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } [tuiWrapper][data-appearance=fin-btn-outline-gray]:after { border: 1px solid var(--fin-button-outline-gray-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-outline-gray]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-outline-gray][data-state=hover] { background: var(--fin-button-outline-gray-hover-bg-color); color: var(--fin-button-outline-gray-hover-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-btn-outline-gray][data-state=hover]:after { border-color: var(--fin-button-outline-gray-hover-border-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-outline-gray], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-outline-gray] { background: var(--fin-button-outline-gray-focus-bg-color); color: var(--fin-button-outline-gray-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-outline-gray]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-outline-gray]:after { border-width: 1px !important; border-color: var(--fin-button-outline-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray]:focus-visible:focus-visible { background: var(--fin-button-outline-gray-focus-bg-color); color: var(--fin-button-outline-gray-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-outline-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray]._focused._focused { background: var(--fin-button-outline-gray-focus-bg-color); color: var(--fin-button-outline-gray-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-outline-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-outline-gray][data-state=active], [tuiWrapper][data-appearance=fin-btn-outline-gray][data-state=active]:hover { background: var(--fin-button-outline-gray-active-bg-color); color: var(--fin-button-outline-gray-active-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-btn-outline-gray][data-state=active]:after, [tuiWrapper][data-appearance=fin-btn-outline-gray][data-state=active]:hover:after { border-color: var(--fin-button-outline-gray-active-border-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-outline-gray][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-outline-gray-disabled-bg-color); color: var(--fin-button-outline-gray-disabled-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-gray]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-btn-outline-gray][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-button-outline-gray-disabled-border-color); } [tuiWrapper][data-appearance=fin-btn-flat-gray] { opacity: 1; background: var(--fin-button-flat-gray-bg-color); color: var(--fin-button-flat-gray-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-flat-gray]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-flat-gray][data-state=hover] { background: var(--fin-button-flat-gray-hover-bg-color); color: var(--fin-button-flat-gray-hover-text-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-flat-gray], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-flat-gray] { background: var(--fin-button-flat-gray-focus-bg-color); color: var(--fin-button-flat-gray-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-flat-gray]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-flat-gray]:after { border-width: 1px !important; border-color: var(--fin-button-flat-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-flat-gray]:focus-visible:focus-visible { background: var(--fin-button-flat-gray-focus-bg-color); color: var(--fin-button-flat-gray-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-flat-gray]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-flat-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-flat-gray]._focused._focused { background: var(--fin-button-flat-gray-focus-bg-color); color: var(--fin-button-flat-gray-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-flat-gray]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-flat-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-flat-gray]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-flat-gray][data-state=active], [tuiWrapper][data-appearance=fin-btn-flat-gray][data-state=active]:hover { background: var(--fin-button-flat-gray-active-bg-color); color: var(--fin-button-flat-gray-active-text-color); } [tuiWrapper][data-appearance=fin-btn-flat-gray]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-flat-gray][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-flat-gray-disabled-bg-color); color: var(--fin-button-flat-gray-disabled-text-color); } [tuiWrapper][data-appearance=fin-btn-accent] { opacity: 1; background: var(--fin-button-accent-bg-color); color: var(--fin-button-accent-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-accent]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-accent][data-state=hover] { background: var(--fin-button-accent-hover-bg-color); color: var(--fin-button-accent-text-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-accent], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-accent] { background: var(--fin-button-accent-bg-color); color: var(--fin-button-accent-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-accent]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-accent]:after { border-width: 1px !important; border-color: var(--fin-button-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-accent]:focus-visible:focus-visible { background: var(--fin-button-accent-bg-color); color: var(--fin-button-accent-text-color); } [tuiWrapper][data-appearance=fin-btn-accent]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-accent]._focused._focused { background: var(--fin-button-accent-bg-color); color: var(--fin-button-accent-text-color); } [tuiWrapper][data-appearance=fin-btn-accent]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-accent]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-accent][data-state=active], [tuiWrapper][data-appearance=fin-btn-accent][data-state=active]:hover { background: var(--fin-button-accent-active-bg-color); color: var(--fin-button-accent-text-color); } [tuiWrapper][data-appearance=fin-btn-accent]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-accent][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-accent-disabled-bg-color); color: var(--fin-button-accent-disabled-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent] { opacity: 1; background: var(--fin-button-outline-accent-bg-color); color: var(--fin-button-outline-accent-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } [tuiWrapper][data-appearance=fin-btn-outline-accent]:after { border: 1px solid var(--fin-button-outline-accent-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-outline-accent]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-outline-accent][data-state=hover] { background: var(--fin-button-outline-accent-hover-bg-color); color: var(--fin-button-outline-accent-hover-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-btn-outline-accent][data-state=hover]:after { border-color: var(--fin-button-outline-accent-hover-border-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-outline-accent], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-outline-accent] { background: var(--fin-button-outline-accent-focus-bg-color); color: var(--fin-button-outline-accent-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-outline-accent]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-outline-accent]:after { border-width: 1px !important; border-color: var(--fin-button-outline-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent]:focus-visible:focus-visible { background: var(--fin-button-outline-accent-focus-bg-color); color: var(--fin-button-outline-accent-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-outline-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent]._focused._focused { background: var(--fin-button-outline-accent-focus-bg-color); color: var(--fin-button-outline-accent-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-outline-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-outline-accent][data-state=active], [tuiWrapper][data-appearance=fin-btn-outline-accent][data-state=active]:hover { background: var(--fin-button-outline-accent-active-bg-color); color: var(--fin-button-outline-accent-active-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-btn-outline-accent][data-state=active]:after, [tuiWrapper][data-appearance=fin-btn-outline-accent][data-state=active]:hover:after { border-color: var(--fin-button-outline-accent-active-border-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-outline-accent][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-outline-accent-disabled-bg-color); color: var(--fin-button-outline-accent-disabled-text-color); } [tuiWrapper][data-appearance=fin-btn-outline-accent]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-btn-outline-accent][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-button-outline-accent-disabled-border-color); } [tuiWrapper][data-appearance=fin-icon-btn-accent] { opacity: 1; background: var(--fin-icon-button-accent-bg-color); color: var(--fin-icon-button-accent-icon-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-icon-btn-accent]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-icon-btn-accent][data-state=hover] { background: var(--fin-icon-button-accent-hover-bg-color); color: var(--fin-icon-button-accent-hover-icon-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-icon-btn-accent], [data-focused=true] > [tuiWrapper][data-appearance=fin-icon-btn-accent] { background: var(--fin-icon-button-accent-focus-bg-color); color: var(--fin-icon-button-accent-focus-icon-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-icon-btn-accent]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-icon-btn-accent]:after { border-width:!important; border-color: var(--fin-icon-button-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-icon-btn-accent]:focus-visible:focus-visible { background: var(--fin-icon-button-accent-focus-bg-color); color: var(--fin-icon-button-accent-focus-icon-color); } [tuiWrapper][data-appearance=fin-icon-btn-accent]:focus-visible:focus-visible:after { border-width:!important; border-color: var(--fin-icon-button-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-icon-btn-accent]._focused._focused { background: var(--fin-icon-button-accent-focus-bg-color); color: var(--fin-icon-button-accent-focus-icon-color); } [tuiWrapper][data-appearance=fin-icon-btn-accent]._focused._focused:after { border-width:!important; border-color: var(--fin-icon-button-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-icon-btn-accent]:active:not(._no-active), [tuiWrapper][data-appearance=fin-icon-btn-accent][data-state=active], [tuiWrapper][data-appearance=fin-icon-btn-accent][data-state=active]:hover { background: var(--fin-icon-button-accent-active-bg-color); color: var(--fin-icon-button-accent-active-icon-color); } [tuiWrapper][data-appearance=fin-icon-btn-accent]:disabled:disabled, [tuiWrapper][data-appearance=fin-icon-btn-accent][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-icon-button-accent-disabled-bg-color); color: var(--fin-icon-button-accent-disabled-icon-color); } [tuiWrapper][data-appearance=fin-btn-flat-accent] { opacity: 1; background: var(--fin-button-flat-gray-bg-color); color: var(--fin-button-flat-gray-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-btn-flat-accent]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-btn-flat-accent][data-state=hover] { background: var(--fin-button-flat-gray-hover-bg-color); color: var(--fin-button-flat-gray-hover-text-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-flat-accent], [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-flat-accent] { background: var(--fin-button-flat-gray-focus-bg-color); color: var(--fin-button-flat-gray-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-btn-flat-accent]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-btn-flat-accent]:after { border-width: 1px !important; border-color: var(--fin-button-flat-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-flat-accent]:focus-visible:focus-visible { background: var(--fin-button-flat-gray-focus-bg-color); color: var(--fin-button-flat-gray-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-flat-accent]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-flat-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-flat-accent]._focused._focused { background: var(--fin-button-flat-gray-focus-bg-color); color: var(--fin-button-flat-gray-focus-text-color); } [tuiWrapper][data-appearance=fin-btn-flat-accent]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-flat-gray-focus-border-color); } [tuiWrapper][data-appearance=fin-btn-flat-accent]:active:not(._no-active), [tuiWrapper][data-appearance=fin-btn-flat-accent][data-state=active], [tuiWrapper][data-appearance=fin-btn-flat-accent][data-state=active]:hover { background: var(--fin-button-flat-gray-active-bg-color); color: var(--fin-button-flat-gray-active-text-color); } [tuiWrapper][data-appearance=fin-btn-flat-accent]:disabled:disabled, [tuiWrapper][data-appearance=fin-btn-flat-accent][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-flat-gray-disabled-bg-color); color: var(--fin-button-flat-gray-disabled-text-color); } button[appearance=fin-btn-dynamic] { max-width: 100%; } button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; opacity: 1; background: var(--fin-button-dynamic-bg-color); color: var(--fin-button-dynamic-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; font-family: var(--fin-button-dynamic-font-family); } button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic] .t-content { display: inline; line-height: 44px; } @media (hover: hover) { button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic]:hover:not(._no-hover), button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic][data-state=hover] { background: var(--fin-button-dynamic-hover-bg-color); color: var(--fin-button-dynamic-hover-text-color); } } :focus-visible:not([data-focused=false]) > button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic], [data-focused=true] > button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic] { background: var(--fin-button-dynamic-focus-bg-color); color: var(--fin-button-dynamic-focus-text-color); } :focus-visible:not([data-focused=false]) > button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic]:after, [data-focused=true] > button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic]:after { border-width: 1px !important; border-color: var(--fin-button-dynamic-focus-border-color); } button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic]:focus-visible:focus-visible { background: var(--fin-button-dynamic-focus-bg-color); color: var(--fin-button-dynamic-focus-text-color); } button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic]:focus-visible:focus-visible:after { border-width: 1px !important; border-color: var(--fin-button-dynamic-focus-border-color); } button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic]._focused._focused { background: var(--fin-button-dynamic-focus-bg-color); color: var(--fin-button-dynamic-focus-text-color); } button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic]._focused._focused:after { border-width: 1px !important; border-color: var(--fin-button-dynamic-focus-border-color); } button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic]:active:not(._no-active), button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic][data-state=active], button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic][data-state=active]:hover { background: var(--fin-button-dynamic-active-bg-color); color: var(--fin-button-dynamic-active-text-color); } button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic]:disabled:disabled, button[appearance=fin-btn-dynamic] [tuiWrapper][data-appearance=fin-btn-dynamic][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-button-dynamic-disabled-bg-color); color: var(--fin-button-dynamic-disabled-text-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected] { background: var(--fin-radio-unselected-bg-color); color: var(--fin-radio-unselected-text-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected]:after { border: 1px solid var(--fin-radio-unselected-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-radio-button-unselected]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-radio-button-unselected][data-state=hover] { background: var(--fin-radio-unselected-hover-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-radio-button-unselected][data-state=hover]:after { border-color: var(--fin-radio-unselected-hover-border-color); } } [tuiWrapper][data-appearance=fin-radio-button-unselected]:active:not(._no-active), [tuiWrapper][data-appearance=fin-radio-button-unselected][data-state=active], [tuiWrapper][data-appearance=fin-radio-button-unselected][data-state=active]:hover { background: var(--fin-radio-unselected-active-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-radio-button-unselected][data-state=active]:after, [tuiWrapper][data-appearance=fin-radio-button-unselected][data-state=active]:hover:after { border-color: var(--fin-radio-unselected-active-border-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected]:focus-visible:focus-visible { background: var(--fin-radio-unselected-focus-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected]:focus-visible:focus-visible:after { border: 1px solid var(--fin-radio-unselected-focus-border-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected]._focused._focused { background: var(--fin-radio-unselected-focus-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected]._focused._focused:after { border: 1px solid var(--fin-radio-unselected-focus-border-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected]:disabled:disabled, [tuiWrapper][data-appearance=fin-radio-button-unselected][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-radio-unselected-disabled-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-unselected]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-radio-button-unselected][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-radio-unselected-disabled-border-color); } [tuiWrapper][data-appearance=fin-radio-button-selected] { background: var(--fin-radio-selected-bg-color); color: var(--fin-radio-selected-text-color); } [tuiWrapper][data-appearance=fin-radio-button-selected]:after { border: 1px solid var(--fin-radio-selected-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-radio-button-selected]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-radio-button-selected][data-state=hover] { background: var(--fin-radio-selected-hover-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-selected]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-radio-button-selected][data-state=hover]:after { border-color: var(--fin-radio-selected-hover-border-color); } } [tuiWrapper][data-appearance=fin-radio-button-selected]:active:not(._no-active), [tuiWrapper][data-appearance=fin-radio-button-selected][data-state=active], [tuiWrapper][data-appearance=fin-radio-button-selected][data-state=active]:hover { background: var(--fin-radio-selected-active-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-selected]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-radio-button-selected][data-state=active]:after, [tuiWrapper][data-appearance=fin-radio-button-selected][data-state=active]:hover:after { border-color: var(--fin-radio-selected-active-border-color); } [tuiWrapper][data-appearance=fin-radio-button-selected]:focus-visible:focus-visible { background: var(--fin-radio-selected-focus-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-selected]:focus-visible:focus-visible:after { border: 1px solid var(--fin-radio-selected-focus-border-color); } [tuiWrapper][data-appearance=fin-radio-button-selected]._focused._focused { background: var(--fin-radio-selected-focus-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-selected]._focused._focused:after { border: 1px solid var(--fin-radio-selected-focus-border-color); } [tuiWrapper][data-appearance=fin-radio-button-selected]:disabled:disabled, [tuiWrapper][data-appearance=fin-radio-button-selected][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-radio-selected-disabled-bg-color); } [tuiWrapper][data-appearance=fin-radio-button-selected]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-radio-button-selected][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-radio-selected-disabled-border-color); } tui-checkbox-labeled .t-wrapper .t-content { color: var(--fin-checkbox-label-text-color); } [tuiWrapper][data-appearance=fin-checkbox-unselected] { background: var(--fin-checkbox-unselected-bg-color); color: var(--fin-checkbox-unselected-text-color); border-radius: 4px; } [tuiWrapper][data-appearance=fin-checkbox-unselected]:after { border: 1px solid var(--fin-checkbox-unselected-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-checkbox-unselected]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-checkbox-unselected][data-state=hover] { background: var(--fin-checkbox-unselected-hover-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-unselected]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-checkbox-unselected][data-state=hover]:after { border-color: var(--fin-checkbox-unselected-hover-border-color); } } [tuiWrapper][data-appearance=fin-checkbox-unselected]:active:not(._no-active), [tuiWrapper][data-appearance=fin-checkbox-unselected][data-state=active], [tuiWrapper][data-appearance=fin-checkbox-unselected][data-state=active]:hover { background: var(--fin-checkbox-unselected-active-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-unselected]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-checkbox-unselected][data-state=active]:after, [tuiWrapper][data-appearance=fin-checkbox-unselected][data-state=active]:hover:after { border-color: var(--fin-checkbox-unselected-active-border-color); } [tuiWrapper][data-appearance=fin-checkbox-unselected]:focus-visible:focus-visible { background: var(--fin-checkbox-unselected-focus-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-unselected]:focus-visible:focus-visible:after { border: 1px solid var(--fin-checkbox-unselected-focus-border-color); } [tuiWrapper][data-appearance=fin-checkbox-unselected]._focused._focused { background: var(--fin-checkbox-unselected-focus-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-unselected]._focused._focused:after { border: 1px solid var(--fin-checkbox-unselected-focus-border-color); } [tuiWrapper][data-appearance=fin-checkbox-unselected]:disabled:disabled, [tuiWrapper][data-appearance=fin-checkbox-unselected][data-state=disabled][data-state=disabled] { background: var(--fin-checkbox-unselected-disabled-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-unselected]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-checkbox-unselected][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-checkbox-unselected-disabled-border-color); } [tuiWrapper][data-appearance=fin-checkbox-selected] { background: var(--fin-checkbox-selected-bg-color); color: var(--fin-checkbox-selected-text-color); border-radius: 4px; } [tuiWrapper][data-appearance=fin-checkbox-selected]:after { border: 1px solid var(--fin-checkbox-selected-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-checkbox-selected]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-checkbox-selected][data-state=hover] { background: var(--fin-checkbox-selected-hover-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-selected]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-checkbox-selected][data-state=hover]:after { border-color: var(--fin-checkbox-selected-hover-border-color); } } [tuiWrapper][data-appearance=fin-checkbox-selected]:active:not(._no-active), [tuiWrapper][data-appearance=fin-checkbox-selected][data-state=active], [tuiWrapper][data-appearance=fin-checkbox-selected][data-state=active]:hover { background: var(--fin-checkbox-selected-active-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-selected]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-checkbox-selected][data-state=active]:after, [tuiWrapper][data-appearance=fin-checkbox-selected][data-state=active]:hover:after { border-color: var(--fin-checkbox-selected-active-border-color); } [tuiWrapper][data-appearance=fin-checkbox-selected]:focus-visible:focus-visible { background: var(--fin-checkbox-selected-focus-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-selected]:focus-visible:focus-visible:after { border: 1px solid var(--fin-checkbox-selected-focus-border-color); } [tuiWrapper][data-appearance=fin-checkbox-selected]._focused._focused { background: var(--fin-checkbox-selected-focus-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-selected]._focused._focused:after { border: 1px solid var(--fin-checkbox-selected-focus-border-color); } [tuiWrapper][data-appearance=fin-checkbox-selected]:disabled:disabled, [tuiWrapper][data-appearance=fin-checkbox-selected][data-state=disabled][data-state=disabled] { background: var(--fin-checkbox-selected-disabled-bg-color); } [tuiWrapper][data-appearance=fin-checkbox-selected]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-checkbox-selected][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-checkbox-selected-disabled-border-color); } [tuiWrapper][data-appearance=fin-toggle-unselected] { background: var(--fin-toggle-unselected-bg-color); } [tuiWrapper][data-appearance=fin-toggle-unselected]:after { border: 1px solid var(--fin-toggle-unselected-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-toggle-unselected]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-toggle-unselected][data-state=hover] { background: var(--fin-toggle-unselected-hover-bg-color); } [tuiWrapper][data-appearance=fin-toggle-unselected]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-toggle-unselected][data-state=hover]:after { border-color: var(--fin-toggle-unselected-hover-border-color); } } [tuiWrapper][data-appearance=fin-toggle-unselected]:active:not(._no-active), [tuiWrapper][data-appearance=fin-toggle-unselected][data-state=active], [tuiWrapper][data-appearance=fin-toggle-unselected][data-state=active]:hover { background: var(--fin-toggle-unselected-active-bg-color); } [tuiWrapper][data-appearance=fin-toggle-unselected]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-toggle-unselected][data-state=active]:after, [tuiWrapper][data-appearance=fin-toggle-unselected][data-state=active]:hover:after { border-color: var(--fin-toggle-unselected-active-border-color); } [tuiWrapper][data-appearance=fin-toggle-unselected]:focus-visible:focus-visible { background: var(--fin-toggle-unselected-focus-bg-color); } [tuiWrapper][data-appearance=fin-toggle-unselected]:focus-visible:focus-visible:after { border: 1px solid var(--fin-toggle-unselected-focus-border-color); } [tuiWrapper][data-appearance=fin-toggle-unselected]._focused._focused { background: var(--fin-toggle-unselected-focus-bg-color); } [tuiWrapper][data-appearance=fin-toggle-unselected]._focused._focused:after { border: 1px solid var(--fin-toggle-unselected-focus-border-color); } [tuiWrapper][data-appearance=fin-toggle-unselected]:disabled:disabled, [tuiWrapper][data-appearance=fin-toggle-unselected][data-state=disabled][data-state=disabled] { background: var(--fin-toggle-unselected-disabled-bg-color); } [tuiWrapper][data-appearance=fin-toggle-unselected]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-toggle-unselected][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-toggle-unselected-disabled-border-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected] { background: var(--fin-toggle-dark-unselected-bg-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]:after { border: 1px solid var(--fin-toggle-dark-unselected-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-toggle-dark-unselected]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-toggle-dark-unselected][data-state=hover] { background: var(--fin-toggle-dark-unselected-hover-bg-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-toggle-dark-unselected][data-state=hover]:after { border-color: var(--fin-toggle-dark-unselected-hover-border-color); } } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]:active:not(._no-active), [tuiWrapper][data-appearance=fin-toggle-dark-unselected][data-state=active], [tuiWrapper][data-appearance=fin-toggle-dark-unselected][data-state=active]:hover { background: var(--fin-toggle-dark-unselected-active-bg-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-toggle-dark-unselected][data-state=active]:after, [tuiWrapper][data-appearance=fin-toggle-dark-unselected][data-state=active]:hover:after { border-color: var(--fin-toggle-dark-unselected-active-border-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]:focus-visible:focus-visible { background: var(--fin-toggle-dark-unselected-focus-bg-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]:focus-visible:focus-visible:after { border: 1px solid var(--fin-toggle-dark-unselected-focus-border-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]._focused._focused { background: var(--fin-toggle-dark-unselected-focus-bg-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]._focused._focused:after { border: 1px solid var(--fin-toggle-dark-unselected-focus-border-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]:disabled:disabled, [tuiWrapper][data-appearance=fin-toggle-dark-unselected][data-state=disabled][data-state=disabled] { background: var(--fin-toggle-dark-unselected-disabled-bg-color); } [tuiWrapper][data-appearance=fin-toggle-dark-unselected]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-toggle-dark-unselected][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-toggle-dark-unselected-disabled-border-color); } [tuiWrapper][data-appearance=fin-toggle-selected] { background: var(--fin-toggle-selected-bg-color); } [tuiWrapper][data-appearance=fin-toggle-selected]:after { border: 1px solid var(--fin-toggle-selected-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-toggle-selected]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-toggle-selected][data-state=hover] { background: var(--fin-toggle-selected-hover-bg-color); } [tuiWrapper][data-appearance=fin-toggle-selected]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-toggle-selected][data-state=hover]:after { border-color: var(--fin-toggle-selected-hover-border-color); } } [tuiWrapper][data-appearance=fin-toggle-selected]:active:not(._no-active), [tuiWrapper][data-appearance=fin-toggle-selected][data-state=active], [tuiWrapper][data-appearance=fin-toggle-selected][data-state=active]:hover { background: var(--fin-toggle-selected-active-bg-color); } [tuiWrapper][data-appearance=fin-toggle-selected]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-toggle-selected][data-state=active]:after, [tuiWrapper][data-appearance=fin-toggle-selected][data-state=active]:hover:after { border-color: var(--fin-toggle-selected-active-border-color); } [tuiWrapper][data-appearance=fin-toggle-selected]:focus-visible:focus-visible { background: var(--fin-toggle-selected-focus-bg-color); } [tuiWrapper][data-appearance=fin-toggle-selected]:focus-visible:focus-visible:after { border: 1px solid var(--fin-toggle-selected-focus-border-color); } [tuiWrapper][data-appearance=fin-toggle-selected]._focused._focused { background: var(--fin-toggle-selected-focus-bg-color); } [tuiWrapper][data-appearance=fin-toggle-selected]._focused._focused:after { border: 1px solid var(--fin-toggle-selected-focus-border-color); } [tuiWrapper][data-appearance=fin-toggle-selected]:disabled:disabled, [tuiWrapper][data-appearance=fin-toggle-selected][data-state=disabled][data-state=disabled] { background: var(--fin-toggle-selected-disabled-bg-color); } [tuiWrapper][data-appearance=fin-toggle-selected]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-toggle-selected][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-toggle-selected-disabled-border-color); } label._control, label.fin-input-field-label._control { gap: 4px; } label._control .t-label, label.fin-input-field-label._control .t-label { margin-bottom: 0 !important; } tui-input, tui-select, tui-input-date, tui-input-date-range, tui-input-number, tui-input-tag { border-radius: 12px; } [tuiWrapper][data-appearance=fin-textfield] { border-radius: 12px; color: var(--fin-input-field-text-color); background: var(--fin-input-field-bg-color); box-shadow: var(--fin-input-field-box-shadow); font-size: 13px; font-style: normal; font-weight: 500; line-height: 20px; } [tuiWrapper][data-appearance=fin-textfield] label.t-placeholder { color: var(--fin-input-field-placeholder-color); } [tuiWrapper][data-appearance=fin-textfield]._autofilled { --tui-selection: var(--fin-color-primary-light-200); } [tuiWrapper][data-appearance=fin-textfield]:after { border: 1px solid var(--fin-input-field-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-textfield]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-textfield][data-state=hover] { color: var(--fin-input-field-hover-text-color); background: var(--fin-input-field-hover-bg-color); box-shadow: var(--fin-input-field-box-hover-shadow); } [tuiWrapper][data-appearance=fin-textfield]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-textfield][data-state=hover]:after { border-color: var(--fin-input-field-hover-border-color); } } [tuiWrapper][data-appearance=fin-textfield]._focused:not(._invalid):after { border-width: 2px; border-color: var(--fin-input-field-active-border-color); outline: none; } [tuiWrapper][data-appearance=fin-textfield]:invalid:invalid, [tuiWrapper][data-appearance=fin-textfield]._invalid._invalid { color: var(--fin-input-field-error-text-color); background: var(--fin-input-field-error-bg-color); box-shadow: var(--fin-input-field-error-box-shadow); } [tuiWrapper][data-appearance=fin-textfield]:invalid:invalid:after, [tuiWrapper][data-appearance=fin-textfield]._invalid._invalid:after { border-color: var(--fin-input-field-error-border-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-textfield], [data-focused=true] > [tuiWrapper][data-appearance=fin-textfield] { --tui-primary: var(--fin-input-field-active-border-color); color: var(--fin-input-field-active-text-color); background: var(--fin-input-field-active-bg-color); box-shadow: var(--fin-input-field-active-box-shadow); outline: none; } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-textfield] :after, [data-focused=true] > [tuiWrapper][data-appearance=fin-textfield] :after { border-width: 2px; outline: none; } [tuiWrapper][data-appearance=fin-textfield]:focus-visible:focus-visible { --tui-primary: var(--fin-input-field-active-border-color); color: var(--fin-input-field-active-text-color); background: var(--fin-input-field-active-bg-color); box-shadow: var(--fin-input-field-active-box-shadow); outline: none; } [tuiWrapper][data-appearance=fin-textfield]:focus-visible:focus-visible :after { border-width: 2px; outline: none; } [tuiWrapper][data-appearance=fin-textfield]._focused._focused { --tui-primary: var(--fin-input-field-active-border-color); color: var(--fin-input-field-active-text-color); background: var(--fin-input-field-active-bg-color); box-shadow: var(--fin-input-field-active-box-shadow); outline: none; } [tuiWrapper][data-appearance=fin-textfield]._focused._focused :after { border-width: 2px; outline: none; } [tuiWrapper][data-appearance=fin-textfield]:disabled:disabled, [tuiWrapper][data-appearance=fin-textfield][data-state=disabled][data-state=disabled] { color: var(--fin-input-field-disabled-text-color); background: var(--fin-input-field-disabled-bg-color); box-shadow: var(--fin-input-field-disabled-box-shadow); opacity: 1; } [tuiWrapper][data-appearance=fin-textfield]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-textfield][data-state=disabled][data-state=disabled]:after { border-width: 1px; border-color: var(--fin-input-field-disabled-border-color); } [tuiWrapper][data-appearance=fin-textfield][data-state=readonly][data-state=readonly] { color: var(--fin-input-field-disabled-text-color); background: var(--fin-input-field-disabled-bg-color); box-shadow: var(--fin-input-field-disabled-box-shadow); opacity: 1; } [tuiWrapper][data-appearance=fin-textfield][data-state=readonly][data-state=readonly] input { cursor: default; } [tuiWrapper][data-appearance=fin-textfield][data-state=readonly][data-state=readonly]:after { border-width: 1px; border-color: var(--fin-input-field-disabled-border-color); } tui-error .t-message-text { color: var(--fin-error-color); margin-top: 4px; font-size: 13px; font-style: normal; font-weight: 500; line-height: 20px; } tui-hint[data-appearance=fin-hint-white] { background: var(--fin-hint-content-bg-color); color: var(--fin-hint-content-text-color); box-shadow: var(--fin-hint-content-box-shadow); border-radius: 12px; } tui-tooltip[data-appearance=fin-hint-white] { width: 16px; height: 16px; } tui-tooltip[data-appearance=fin-hint-white] .t-tooltip-icon > tui-svg { width: 16px; height: 16px; } .fin-dialog-container .fin-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 8px; } .fin-dialog-container .fin-dialog-header h2.fin-dialog-header-title { color: var(--fin-dialog-header-text-color); font-size: 28px; font-style: normal; font-weight: 800; line-height: 32px; margin: 0; } .fin-dialog-container .fin-dialog-content { padding: 16px 24px; } .fin-dialog-container .fin-dialog-actions { display: flex; padding: 16px 24px; align-items: center; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--fin-dialog-actions-border-color); } tui-accordion[finAccordion] > .tui-group.t-group.tui-group_orientation_vertical { gap: 20px; } .tui-group_rounded tui-accordion-item[finAccordionItem] { border-radius: 8px !important; } .tui-group_rounded tui-accordion-item[finAccordionItem] .t-header { border-radius: 8px; } .tui-group_rounded tui-accordion-item[finAccordionItem] .t-header.t-header_open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition-property: border-radius; transition-duration: var(--tui-duration, 0.3s); transition-timing-function: ease-in-out; } tui-accordion-item[finAccordionItem][data-size=s] .t-header { min-height: 48px !important; padding: 8px 24px !important; } tui-accordion-item[finAccordionItem][data-size=s] tui-expand > .t-wrapper > .t-content { padding: 24px; } tui-accordion-item[finAccordionItem]._has-arrow .t-title { margin-right: 16px !important; } tui-accordion-item[finAccordionItem] .t-header { border-bottom: unset; min-height: 48px; } [finAccordion][data-appearance=dark] [finAccordionItem] .t-header { background: var(--fin-accordion-item-dark-header-bg-color); } [finAccordion][data-appearance=dark] [finAccordionItem] .t-header .fin-accordion-item-header-content .fin-accordion-header-title { color: var(--fin-accordion-item-dark-title-color); } [finAccordion][data-appearance=dark] [finAccordionItem] .t-header > .t-icon { color: var(--fin-accordion-item-dark-icon-color) !important; } [finAccordion][data-appearance=dark] [finAccordionItem] .t-header.t-header_hoverable:hover { background: var(--fin-accordion-item-dark-header-hover-bg-color) !important; } [finAccordion][data-appearance=dark] [finAccordionItem] .t-header.t-header_hoverable:active { background: var(--fin-accordion-item-dark-header-active-bg-color) !important; } [finAccordion][data-appearance=dark] [finAccordionItem] .t-header .t-header_hoverable:active:focus, [finAccordion][data-appearance=dark] [finAccordionItem] .t-header .t-header_hoverable:active:focus-visible { background: var(--fin-accordion-item-dark-header-focus-bg-color) !important; border-color: var(--fin-accordion-item-dark-header-focus-border-color) !important; } [finAccordion][data-appearance=dark] [finAccordionItem][data-size=s] .t-header { padding: 8px 24px !important; } [finAccordion][data-appearance=dark] [finAccordionItem][data-size=s] tui-expand > .t-wrapper > .t-content { padding: 24px; } [finAccordion][data-appearance=dark] [finAccordionItem] > .t-wrapper:after { border-color: var(--fin-accordion-item-dark-border-color); } [finAccordion][data-appearance=dark] [finAccordionItem] > .t-wrapper:hover > .t-header.t-header_hoverable { background: var(--fin-accordion-item-dark-header-hover-bg-color); cursor: pointer; } [finAccordion][data-appearance=light] [finAccordionItem] > .t-wrapper:after { border-color: var(--fin-accordion-item-light-border-color); } [finAccordion][data-appearance=light] [finAccordionItem] > .t-wrapper:hover > .t-header.t-header_hoverable { background: var(--fin-accordion-item-light-header-hover-bg-color); cursor: pointer; } [finAccordion][data-appearance=light] [finAccordionItem] .t-header { background: var(--fin-accordion-item-light-header-bg-color); } [finAccordion][data-appearance=light] [finAccordionItem] .t-header .fin-accordion-item-header-content .fin-accordion-header-title { color: var(--fin-accordion-item-light-title-color); } [finAccordion][data-appearance=light] [finAccordionItem] .t-header > .t-icon { color: var(--fin-accordion-item-light-icon-color) !important; } [finAccordion][data-appearance=light] [finAccordionItem] .t-header.t-header_hoverable:hover { background: var(--fin-accordion-item-light-header-hover-bg-color) !important; } [finAccordion][data-appearance=light] [finAccordionItem] .t-header.t-header_hoverable:active { background: var(--fin-accordion-item-light-header-active-bg-color) !important; } [finAccordion][data-appearance=light] [finAccordionItem] .t-header .t-header_hoverable:active:focus, [finAccordion][data-appearance=light] [finAccordionItem] .t-header .t-header_hoverable:active:focus-visible { background: var(--fin-accordion-item-light-header-focus-bg-color) !important; border-color: var(--fin-accordion-item-light-header-focus-border-color) !important; } [finAccordion][data-appearance=light] [finAccordionItem][data-size=s] .t-header { padding: 8px 24px !important; } [finAccordion][data-appearance=light] [finAccordionItem][data-size=s] tui-expand > .t-wrapper > .t-content { padding: 16px; } [finAccordion][data-appearance=file-uploader] [finAccordionItem] > .t-wrapper > tui-expand > .t-wrapper { background: var(--fin-accordion-item-file-uploader-header-bg-color); transition-property: background; transition-duration: var(--tui-duration, 0.3s); transition-timing-function: ease-in-out; } [finAccordion][data-appearance=file-uploader] [finAccordionItem] > .t-wrapper:after { border-color: var(--fin-accordion-item-file-uploader-border-color); } [finAccordion][data-appearance=file-uploader] [finAccordionItem] > .t-wrapper:hover > .t-header.t-header_hoverable { background: var(--fin-accordion-item-file-uploader-header-hover-bg-color); cursor: pointer; } [finAccordion][data-appearance=file-uploader] [finAccordionItem] > .t-wrapper:hover > tui-expand > .t-wrapper { cursor: pointer; background: var(--fin-accordion-item-file-uploader-header-hover-bg-color); } [finAccordion][data-appearance=file-uploader] [finAccordionItem] > .t-wrapper:hover > tui-expand > .t-wrapper { background: var(--fin-accordion-item-file-uploader-header-hover-bg-color) !important; } [finAccordion][data-appearance=file-uploader] [finAccordionItem] > .t-wrapper:active > tui-expand > .t-wrapper { background: var(--fin-accordion-item-file-uploader-header-active-bg-color) !important; } [finAccordion][data-appearance=file-uploader] [finAccordionItem] .t-header { background: var(--fin-accordion-item-file-uploader-header-bg-color); } [finAccordion][data-appearance=file-uploader] [finAccordionItem] .t-header .fin-accordion-item-header-content .fin-accordion-header-title { color: var(--fin-accordion-item-file-uploader-title-color); } [finAccordion][data-appearance=file-uploader] [finAccordionItem] .t-header > .t-icon { color: var(--fin-accordion-item-file-uploader-icon-color) !important; } [finAccordion][data-appearance=file-uploader] [finAccordionItem] .t-header.t-header_hoverable:hover { background: var(--fin-accordion-item-file-uploader-header-hover-bg-color) !important; } [finAccordion][data-appearance=file-uploader] [finAccordionItem] .t-header.t-header_hoverable:active { background: var(--fin-accordion-item-file-uploader-header-active-bg-color) !important; } [finAccordion][data-appearance=file-uploader] [finAccordionItem] .t-header .t-header_hoverable:active:focus, [finAccordion][data-appearance=file-uploader] [finAccordionItem] .t-header .t-header_hoverable:active:focus-visible { background: var(--fin-accordion-item-file-uploader-header-focus-bg-color) !important; border-color: var(--fin-accordion-item-file-uploader-header-focus-border-color) !important; } [finAccordion][data-appearance=file-uploader] [finAccordionItem][data-size=s] .t-header { padding: 8px 24px !important; } [finAccordion][data-appearance=file-uploader] [finAccordionItem][data-size=s] tui-expand > .t-wrapper > .t-content { padding: 16px; } [finAccordion][data-appearance=gray] [finAccordionItem] > .t-wrapper > tui-expand > .t-wrapper { background: var(--fin-accordion-item-gray-header-bg-color); transition-property: background; transition-duration: var(--tui-duration, 0.3s); transition-timing-function: ease-in-out; } [finAccordion][data-appearance=gray] [finAccordionItem] > .t-wrapper:after { border-color: var(--fin-accordion-item-gray-border-color); } [finAccordion][data-appearance=gray] [finAccordionItem] > .t-wrapper:hover > .t-header.t-header_hoverable { background: var(--fin-accordion-item-gray-header-hover-bg-color); cursor: pointer; } [finAccordion][data-appearance=gray] [finAccordionItem] .t-header { background: var(--fin-accordion-item-gray-header-bg-color); } [finAccordion][data-appearance=gray] [finAccordionItem] .t-header .fin-accordion-item-header-content .fin-accordion-header-title { color: var(--fin-accordion-item-gray-title-color); } [finAccordion][data-appearance=gray] [finAccordionItem] .t-header > .t-icon { color: var(--fin-accordion-item-gray-icon-color) !important; } [finAccordion][data-appearance=gray] [finAccordionItem] .t-header.t-header_hoverable:hover { background: var(--fin-accordion-item-gray-header-hover-bg-color) !important; } [finAccordion][data-appearance=gray] [finAccordionItem] .t-header.t-header_hoverable:active { background: var(--fin-accordion-item-gray-header-active-bg-color) !important; } [finAccordion][data-appearance=gray] [finAccordionItem] .t-header .t-header_hoverable:active:focus, [finAccordion][data-appearance=gray] [finAccordionItem] .t-header .t-header_hoverable:active:focus-visible { background: var(--fin-accordion-item-gray-header-focus-bg-color) !important; border-color: var(--fin-accordion-item-gray-header-focus-border-color) !important; } [finAccordion][data-appearance=gray] [finAccordionItem][data-size=s] .t-header { padding: 8px 24px !important; } [finAccordion][data-appearance=gray] [finAccordionItem][data-size=s] tui-expand > .t-wrapper > .t-content { padding: 16px; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header { transition: background 0.3s; background: var(--fin-accordion-item-self-onboarding-faq-header-bg-color); } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header .fin-accordion-item-header-content .fin-accordion-header-title { transition: color 0.3s; color: var(--fin-accordion-item-self-onboarding-faq-title-color); font-family: var(--fin-accordion-item-dynamic-font-family); } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header > .t-icon { transition: color 0.3s; color: var(--fin-accordion-item-self-onboarding-faq-icon-color) !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header.t-header_hoverable:hover { transition: background 0.3s; background: var(--fin-accordion-item-self-onboarding-faq-header-hover-bg-color) !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header.t-header_hoverable:active { transition: background 0.3s; background: var(--fin-accordion-item-self-onboarding-faq-header-active-bg-color) !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header .t-header_hoverable:active:focus, [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header .t-header_hoverable:active:focus-visible { transition: background 0.3s; background: var(--fin-accordion-item-self-onboarding-faq-header-focus-bg-color) !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header_open { background: var(--fin-accordion-item-dynamic-header-bg-color) !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header_open .fin-accordion-item-header-content .fin-accordion-header-title { color: var(--fin-accordion-item-dynamic-title-color); } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header_open > .t-icon { color: var(--fin-accordion-item-dynamic-icon-color) !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header_open.t-header_hoverable:hover { background: var(--fin-accordion-item-dynamic-header-hover-bg-color) !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header_open.t-header_hoverable:active { background: var(--fin-accordion-item-dynamic-header-active-bg-color) !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header_open .t-header_hoverable:active:focus, [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header_open .t-header_hoverable:active:focus-visible { background: var(--fin-accordion-item-dynamic-header-focus-bg-color) !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header + tui-expand > .t-wrapper { background: var(--fin-accordion-item-dynamic-header-bg-color) !important; transition-property: background; transition-duration: var(--tui-duration, 0.3s); transition-timing-function: ease-in-out; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header + tui-expand > .t-wrapper > .t-content { color: var(--fin-color-base-white); opacity: 0.8; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] > .t-wrapper:hover > .t-header_open.t-header_hoverable { background: var(--fin-accordion-item-dynamic-header-hover-bg-color) !important; cursor: pointer; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] > .t-wrapper > tui-expand > .t-wrapper { transition: background 0.3s; background: var(--fin-accordion-item-self-onboarding-faq-header-bg-color); transition-property: background; transition-duration: var(--tui-duration, 0.3s); transition-timing-function: ease-in-out; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] > .t-wrapper:after { border-color: transparent; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] > .t-wrapper:hover > .t-header.t-header_hoverable { transition: background 0.3s; background: var(--fin-accordion-item-self-onboarding-faq-header-hover-bg-color); cursor: pointer; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] .t-header .fin-accordion-item-header-content .fin-accordion-header-title { font-family: var(--fin-accordion-item-dynamic-font-family); } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem] tui-expand > .t-wrapper > .t-content { font-family: var(--fin-accordion-item-dynamic-font-family); } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem][data-size=s] .t-header { padding: 8px 24px !important; } [finAccordion][data-appearance=self-onboarding-faq] [finAccordionItem][data-size=s] tui-expand > .t-wrapper > .t-content { padding: 16px; } [tuiWrapper][data-appearance=fin-accordion-btn-primary] { opacity: 1; background: var(--fin-accordion-button-primary-bg-color); color: var(--fin-accordion-button-primary-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-accordion-btn-primary]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-accordion-btn-primary][data-state=hover] { background: var(--fin-accordion-button-primary-hover-bg-color); color: var(--fin-accordion-button-primary-hover-text-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-accordion-btn-primary], [data-focused=true] > [tuiWrapper][data-appearance=fin-accordion-btn-primary] { background: var(--fin-accordion-button-primary-focus-bg-color); color: var(--fin-accordion-button-primary-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-accordion-btn-primary]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-accordion-btn-primary]:after { border-width:!important; border-color: var(--fin-accordion-button-primary-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-btn-primary]:focus-visible:focus-visible { background: var(--fin-accordion-button-primary-focus-bg-color); color: var(--fin-accordion-button-primary-text-color); } [tuiWrapper][data-appearance=fin-accordion-btn-primary]:focus-visible:focus-visible:after { border-width:!important; border-color: var(--fin-accordion-button-primary-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-btn-primary]._focused._focused { background: var(--fin-accordion-button-primary-focus-bg-color); color: var(--fin-accordion-button-primary-text-color); } [tuiWrapper][data-appearance=fin-accordion-btn-primary]._focused._focused:after { border-width:!important; border-color: var(--fin-accordion-button-primary-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-btn-primary]:active:not(._no-active), [tuiWrapper][data-appearance=fin-accordion-btn-primary][data-state=active], [tuiWrapper][data-appearance=fin-accordion-btn-primary][data-state=active]:hover { background: var(--fin-accordion-button-primary-active-bg-color); color: var(--fin-accordion-button-primary-active-text-color); } [tuiWrapper][data-appearance=fin-accordion-btn-primary]:disabled:disabled, [tuiWrapper][data-appearance=fin-accordion-btn-primary][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-accordion-button-primary-disabled-bg-color); color: var(--fin-accordion-button-primary-disabled-text-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat] { opacity: 1; color: var(--fin-accordion-icon-button-accent-flat-icon-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; opacity: 0.7; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat][data-state=hover] { color: var(--fin-accordion-icon-button-accent-flat-hover-icon-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat], [data-focused=true] > [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat] { color: var(--fin-accordion-icon-button-accent-flat-focus-icon-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat]:after { border-width:!important; border-color: var(--fin-accordion-icon-button-accent-flat-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat]:focus-visible:focus-visible { color: var(--fin-accordion-icon-button-accent-flat-focus-icon-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat]:focus-visible:focus-visible:after { border-width:!important; border-color: var(--fin-accordion-icon-button-accent-flat-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat]._focused._focused { color: var(--fin-accordion-icon-button-accent-flat-focus-icon-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat]._focused._focused:after { border-width:!important; border-color: var(--fin-accordion-icon-button-accent-flat-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat]:active:not(._no-active), [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat][data-state=active], [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat][data-state=active]:hover { color: var(--fin-accordion-icon-button-accent-flat-active-icon-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat]:disabled:disabled, [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent-flat][data-state=disabled][data-state=disabled] { opacity: 1; color: var(--fin-accordion-icon-button-accent-flat-disabled-icon-color); opacity: 0.4; } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent] { opacity: 1; background: var(--fin-accordion-icon-button-accent-bg-color); color: var(--fin-accordion-icon-button-accent-icon-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; opacity: 0.7; } @media (hover: hover) { [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent][data-state=hover] { background: var(--fin-accordion-icon-button-accent-hover-bg-color); color: var(--fin-accordion-icon-button-accent-hover-icon-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent], [data-focused=true] > [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent] { background: var(--fin-accordion-icon-button-accent-focus-bg-color); color: var(--fin-accordion-icon-button-accent-focus-icon-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent]:after { border-width:!important; border-color: var(--fin-accordion-icon-button-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent]:focus-visible:focus-visible { background: var(--fin-accordion-icon-button-accent-focus-bg-color); color: var(--fin-accordion-icon-button-accent-focus-icon-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent]:focus-visible:focus-visible:after { border-width:!important; border-color: var(--fin-accordion-icon-button-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent]._focused._focused { background: var(--fin-accordion-icon-button-accent-focus-bg-color); color: var(--fin-accordion-icon-button-accent-focus-icon-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent]._focused._focused:after { border-width:!important; border-color: var(--fin-accordion-icon-button-accent-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent]:active:not(._no-active), [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent][data-state=active], [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent][data-state=active]:hover { background: var(--fin-accordion-icon-button-accent-active-bg-color); color: var(--fin-accordion-icon-button-accent-active-icon-color); } [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent]:disabled:disabled, [tuiWrapper][data-appearance=fin-accordion-icon-btn-accent][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-accordion-icon-button-accent-disabled-bg-color); color: var(--fin-accordion-icon-button-accent-disabled-icon-color); opacity: 0.4; } [tuiWrapper][data-appearance=fin-accordion-third-btn] { opacity: 1; color: var(--fin-accordion-button-third-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } [tuiWrapper][data-appearance=fin-accordion-third-btn]:after { border: 1px solid var(--fin-accordion-button-third-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-accordion-third-btn]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-accordion-third-btn][data-state=hover] { background: var(--fin-accordion-button-third-hover-bg-color); color: var(--fin-accordion-button-third-hover-text-color); } [tuiWrapper][data-appearance=fin-accordion-third-btn]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-accordion-third-btn][data-state=hover]:after { border-color: var(--fin-accordion-button-third-hover-border-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-accordion-third-btn], [data-focused=true] > [tuiWrapper][data-appearance=fin-accordion-third-btn] { background: var(--fin-accordion-button-third-focus-bg-color); color: var(--fin-accordion-button-third-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-accordion-third-btn]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-accordion-third-btn]:after { border-width:!important; border-color: var(--fin-accordion-button-third-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-third-btn]:focus-visible:focus-visible { background: var(--fin-accordion-button-third-focus-bg-color); color: var(--fin-accordion-button-third-focus-text-color); } [tuiWrapper][data-appearance=fin-accordion-third-btn]:focus-visible:focus-visible:after { border-width:!important; border-color: var(--fin-accordion-button-third-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-third-btn]._focused._focused { background: var(--fin-accordion-button-third-focus-bg-color); color: var(--fin-accordion-button-third-focus-text-color); } [tuiWrapper][data-appearance=fin-accordion-third-btn]._focused._focused:after { border-width:!important; border-color: var(--fin-accordion-button-third-focus-border-color); } [tuiWrapper][data-appearance=fin-accordion-third-btn]:active:not(._no-active), [tuiWrapper][data-appearance=fin-accordion-third-btn][data-state=active], [tuiWrapper][data-appearance=fin-accordion-third-btn][data-state=active]:hover { background: var(--fin-accordion-button-third-active-bg-color); color: var(--fin-accordion-button-third-active-text-color); } [tuiWrapper][data-appearance=fin-accordion-third-btn]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-accordion-third-btn][data-state=active]:after, [tuiWrapper][data-appearance=fin-accordion-third-btn][data-state=active]:hover:after { border-color: var(--fin-accordion-button-third-active-border-color); } [tuiWrapper][data-appearance=fin-accordion-third-btn]:disabled:disabled, [tuiWrapper][data-appearance=fin-accordion-third-btn][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-accordion-button-third-disabled-bg-color); color: var(--fin-accordion-button-third-disabled-text-color); } .fin-data-grid-table-pagination { padding: 14px 24px; border: 1px solid var(--fin-data-grid-pagination-border-color); border-top-width: 0; border-bottom-left-radius: var(--fin-data-grid-pagination-border-radius); border-bottom-right-radius: var(--fin-data-grid-pagination-border-radius); background-color: var(--fin-data-grid-pagination-bg-color); } .fin-data-grid-table-pagination._scrollable { border-top-width: 1px; } .fin-data-grid-table-pagination tui-table-pagination { height: 20px; } .fin-data-grid-table-pagination tui-table-pagination .t-pages { display: flex; gap: 8px; color: var(--fin-color-gray-cool-600); font-size: 13px; font-style: normal; font-weight: 500; line-height: 20px; } .fin-data-grid-table-pagination tui-table-pagination .t-pages .t-strong { color: var(--fin-data-grid-pagination-total-pages-color); font-size: 13px; font-style: normal; font-weight: 800; line-height: 20px; } .fin-data-grid-table-pagination tui-table-pagination span:nth-child(2) { gap: 10px !important; color: var(--fin-color-gray-cool-600); font-size: 13px; font-style: normal; font-weight: 500; line-height: 20px; } .fin-data-grid-table-pagination tui-table-pagination span:nth-child(2) > .t-strong { color: var(--fin-data-grid-pagination-total-items-color); font-size: 13px; font-style: normal; font-weight: 800; line-height: 20px; } .fin-data-grid-table-pagination tui-table-pagination .tui-table-pagination__lines-per-page-wrapper { color: var(--fin-color-gray-cool-600); font-size: 13px; font-style: normal; font-weight: 500; line-height: 20px; } .fin-data-grid-table-pagination tui-table-pagination span:nth-child(2) { display: flex; gap: 10px; } tui-badge.disable-badge-title-attr .t-text::after { content: ""; display: block; } .fin-confirm-dialog tui-marker-icon.info, .fin-confirm-dialog tui-marker-icon.warning { border-radius: 8px; width: 44px; height: 44px; } .fin-confirm-dialog tui-marker-icon.info tui-svg.t-icon, .fin-confirm-dialog tui-marker-icon.warning tui-svg.t-icon { transform: scale(1) !important; width: 28px; height: 28px; } .fin-confirm-dialog tui-marker-icon.info { background-color: var(--fin-confirm-dialog-marker-icon-primary-bg-color); color: var(--fin-confirm-dialog-marker-icon-primary-color); } .fin-confirm-dialog tui-marker-icon.warning { background-color: var(--fin-confirm-dialog-marker-icon-warning-bg-color); color: var(--fin-confirm-dialog-marker-icon-warning-color); } .fin-info-dialog tui-marker-icon.info, .fin-info-dialog tui-marker-icon.warning { border-radius: 8px; width: 44px; height: 44px; } .fin-info-dialog tui-marker-icon.info tui-svg.t-icon, .fin-info-dialog tui-marker-icon.warning tui-svg.t-icon { transform: scale(1) !important; width: 28px; height: 28px; } .fin-info-dialog tui-marker-icon.info { background-color: var(--fin-info-dialog-marker-icon-primary-bg-color); color: var(--fin-info-dialog-marker-icon-primary-color); } .fin-info-dialog tui-marker-icon.warning { background-color: var(--fin-info-dialog-marker-icon-warning-bg-color); color: var(--fin-info-dialog-marker-icon-warning-color); } tui-notification { border-radius: 12px !important; padding: 12px 16px !important; background: var(--fin-notification-bg-color) !important; color: var(--fin-notification-icon-color) !important; } tui-notification .buttons-container { display: flex; gap: 20px; margin-top: 12px; } [tuiWrapper][data-appearance=fin-notification-action-btn-primary] { opacity: 1; color: var(--fin-notification-action-btn-primary-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:after { border: 1px solid var(--fin-notification-action-btn-primary-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-notification-action-btn-primary][data-state=hover] { background: var(--fin-notification-action-btn-primary-hover-bg-color); color: var(--fin-notification-action-btn-primary-hover-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-notification-action-btn-primary][data-state=hover]:after { border-color: var(--fin-notification-action-btn-primary-hover-border-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-notification-action-btn-primary], [data-focused=true] > [tuiWrapper][data-appearance=fin-notification-action-btn-primary] { background: var(--fin-notification-action-btn-primary-focus-bg-color); color: var(--fin-notification-action-btn-primary-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:after { border-width: 2px !important; border-color: var(--fin-notification-action-btn-primary-focus-border-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:focus-visible:focus-visible { background: var(--fin-notification-action-btn-primary-focus-bg-color); color: var(--fin-notification-action-btn-primary-focus-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:focus-visible:focus-visible:after { border-width: 2px !important; border-color: var(--fin-notification-action-btn-primary-focus-border-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]._focused._focused { background: var(--fin-notification-action-btn-primary-focus-bg-color); color: var(--fin-notification-action-btn-primary-focus-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]._focused._focused:after { border-width: 2px !important; border-color: var(--fin-notification-action-btn-primary-focus-border-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:active:not(._no-active), [tuiWrapper][data-appearance=fin-notification-action-btn-primary][data-state=active], [tuiWrapper][data-appearance=fin-notification-action-btn-primary][data-state=active]:hover { background: var(--fin-notification-action-btn-primary-active-bg-color); color: var(--fin-notification-action-btn-primary-active-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-notification-action-btn-primary][data-state=active]:after, [tuiWrapper][data-appearance=fin-notification-action-btn-primary][data-state=active]:hover:after { border-color: var(--fin-notification-action-btn-primary-active-border-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:disabled:disabled, [tuiWrapper][data-appearance=fin-notification-action-btn-primary][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-notification-action-btn-disabled-bg-color); color: var(--fin-notification-action-btn-disabled-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-primary]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-notification-action-btn-primary][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-notification-action-btn-disabled-border-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary] { opacity: 1; color: var(--fin-notification-action-btn-secondary-text-color); font-size: 15px; font-style: normal; font-weight: 800; line-height: 24px; } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:after { border: 1px solid var(--fin-notification-action-btn-secondary-border-color); } @media (hover: hover) { [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:hover:not(._no-hover), [tuiWrapper][data-appearance=fin-notification-action-btn-secondary][data-state=hover] { background: var(--fin-notification-action-btn-secondary-hover-bg-color); color: var(--fin-notification-action-btn-secondary-hover-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:hover:not(._no-hover):after, [tuiWrapper][data-appearance=fin-notification-action-btn-secondary][data-state=hover]:after { border-color: var(--fin-notification-action-btn-secondary-hover-border-color); } } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-notification-action-btn-secondary], [data-focused=true] > [tuiWrapper][data-appearance=fin-notification-action-btn-secondary] { background: var(--fin-notification-action-btn-secondary-focus-bg-color); color: var(--fin-notification-action-btn-secondary-focus-text-color); } :focus-visible:not([data-focused=false]) > [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:after, [data-focused=true] > [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:after { border-width: 2px !important; border-color: var(--fin-notification-action-btn-secondary-focus-border-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:focus-visible:focus-visible { background: var(--fin-notification-action-btn-secondary-focus-bg-color); color: var(--fin-notification-action-btn-secondary-focus-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:focus-visible:focus-visible:after { border-width: 2px !important; border-color: var(--fin-notification-action-btn-secondary-focus-border-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]._focused._focused { background: var(--fin-notification-action-btn-secondary-focus-bg-color); color: var(--fin-notification-action-btn-secondary-focus-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]._focused._focused:after { border-width: 2px !important; border-color: var(--fin-notification-action-btn-secondary-focus-border-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:active:not(._no-active), [tuiWrapper][data-appearance=fin-notification-action-btn-secondary][data-state=active], [tuiWrapper][data-appearance=fin-notification-action-btn-secondary][data-state=active]:hover { background: var(--fin-notification-action-btn-secondary-active-bg-color); color: var(--fin-notification-action-btn-secondary-active-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:active:not(._no-active):after, [tuiWrapper][data-appearance=fin-notification-action-btn-secondary][data-state=active]:after, [tuiWrapper][data-appearance=fin-notification-action-btn-secondary][data-state=active]:hover:after { border-color: var(--fin-notification-action-btn-secondary-active-border-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:disabled:disabled, [tuiWrapper][data-appearance=fin-notification-action-btn-secondary][data-state=disabled][data-state=disabled] { opacity: 1; background: var(--fin-notification-action-btn-disabled-bg-color); color: var(--fin-notification-action-btn-disabled-text-color); } [tuiWrapper][data-appearance=fin-notification-action-btn-secondary]:disabled:disabled:after, [tuiWrapper][data-appearance=fin-notification-action-btn-secondary][data-state=disabled][data-state=disabled]:after { border-color: var(--fin-notification-action-btn-disabled-border-color); } button[tuiLink].notification-link-btn { display: flex; height: 24px; padding: 0; justify-content: center; align-items: center; border: none; background: transparent; } button[tuiLink].notification-link-btn .t-content { background: none !important; } button[tuiLink].notification-link-btn .link-button-content { padding: 0; text-align: center; font-size: 17px; font-style: normal; font-weight: 500; line-height: 24px; text-decoration-line: underline; } button[tuiLink].notification-link-btn .link-button-content.fin-notification-link-btn-primary { color: var(--fin-notification-link-btn-primary-text-color); } button[tuiLink].notification-link-btn .link-button-content.fin-notification-link-btn-secondary { color: var(--fin-notification-link-btn-secondary-text-color); } button[tuiLink].notification-link-btn:hover:not(:active):not(:disabled) .link-button-content.fin-notification-link-btn-primary { color: var(--fin-notification-link-btn-primary-hover-text-color); } button[tuiLink].notification-link-btn:hover:not(:active):not(:disabled) .link-button-content.fin-notification-link-btn-secondary { color: var(--fin-notification-link-btn-secondary-hover-text-color); } button[tuiLink].notification-link-btn:active .link-button-content.fin-notification-link-btn-primary { color: var(--fin-notification-link-btn-primary-active-text-color); } button[tuiLink].notification-link-btn:active .link-button-content.fin-notification-link-btn-secondary { color: var(--fin-notification-link-btn-secondary-active-text-color); } button[tuiLink].notification-link-btn:focus:not(:active):not(:disabled) .link-button-content.fin-notification-link-btn-primary { color: var(--fin-notification-link-btn-primary-focus-text-color); } button[tuiLink].notification-link-btn:focus:not(:active):not(:disabled) .link-button-content.fin-notification-link-btn-secondary { color: var(--fin-notification-link-btn-secondary-focus-text-color); } button[tuiLink].notification-link-btn:disabled .link-button-content.fin-notification-link-btn-primary { color: var(--fin-notification-link-btn-primary-disabled-text-color); } button[tuiLink].notification-link-btn:disabled .link-button-content.fin-notification-link-btn-secondary { color: var(--fin-notification-link-btn-secondary-disabled-text-color); } fin-radio-block .tui-group_rounded.tui-group_orientation_horizontal > *:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } fin-radio-block .tui-group_rounded.tui-group_orientation_horizontal > *:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } fin-radio-block tui-radio-block { flex-basis: content; } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock] { background: var(--fin-radio-block-bg-color); align-items: center; } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { color: var(--fin-radio-block-text-color); } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock]:after { border-color: var(--fin-radio-block-border-color); } @media (hover: hover) { fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock]:hover:not(._no-hover), fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock][data-state=hover] { background: var(--fin-radio-block-hover-bg-color); } } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock]:active:not(._no-active), fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock][data-state=active], fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock][data-state=active]:hover { background: var(--fin-radio-block-active-bg-color); } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock]:focus-visible:focus-visible { background: var(--fin-radio-block-focus-bg-color); } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock]:focus-visible:focus-visible:after { border-color: var(--fin-radio-block-focus-border-color); } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock]._focused._focused { background: var(--fin-radio-block-focus-bg-color); } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock]._focused._focused:after { border-color: var(--fin-radio-block-focus-border-color); } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock]:disabled:disabled, fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock][data-state=disabled][data-state=disabled] { opacity: 1; } fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock]:disabled:disabled > .t-label > .t-content, fin-radio-block tui-radio-block [tuiWrapper][data-appearance=whiteblock][data-state=disabled][data-state=disabled] > .t-label > .t-content { color: var(--fin-radio-block-disabled-text-color); } fin-radio-block tui-radio-block[data-size=s] [tuiWrapper][data-appearance=whiteblock] > tui-radio { margin: 8px 10px !important; } fin-radio-block tui-radio-block[data-size=s] [tuiWrapper][data-appearance=whiteblock] > .t-label { min-height: 16px; align-self: unset; } fin-radio-block tui-radio-block[data-size=s] [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { font-size: 13px; font-style: normal; font-weight: 500; line-height: 16px; } fin-radio-block tui-radio-block[data-size=m] [tuiWrapper][data-appearance=whiteblock] > tui-radio { margin: 10px 12px !important; } fin-radio-block tui-radio-block[data-size=m] [tuiWrapper][data-appearance=whiteblock] > .t-label { min-height: 24px; align-self: unset; } fin-radio-block tui-radio-block[data-size=m] [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { font-size: 15px; font-style: normal; font-weight: 500; line-height: 24px; } fin-radio-block tui-radio-block[data-size=l] [tuiWrapper][data-appearance=whiteblock] > tui-radio { margin: 12px 12px !important; } fin-radio-block tui-radio-block[data-size=l] [tuiWrapper][data-appearance=whiteblock] > .t-label { min-height: 24px; align-self: unset; } fin-radio-block tui-radio-block[data-size=l] [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { font-size: 15px; font-style: normal; font-weight: 500; line-height: 24px; } fin-radio-block tui-radio-block._readonly [tuiWrapper][data-appearance=whiteblock] { opacity: 1; } fin-radio-block tui-radio-block._readonly [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { color: var(--fin-radio-block-disabled-text-color); } fin-radio-block tui-radio._readonly [tuiWrapper][data-appearance=fin-radio-button-unselected] { opacity: 1; background: var(--fin-radio-unselected-disabled-bg-color); } fin-radio-block tui-radio._readonly [tuiWrapper][data-appearance=fin-radio-button-unselected]:after { border-color: var(--fin-radio-unselected-disabled-border-color); } fin-radio-block tui-radio._readonly [tuiWrapper][data-appearance=fin-radio-button-selected] { opacity: 1; background: var(--fin-radio-selected-disabled-bg-color); } fin-radio-block tui-radio._readonly [tuiWrapper][data-appearance=fin-radio-button-selected]:after { border-color: var(--fin-radio-selected-disabled-border-color); } fin-checkbox-block .tui-group_rounded.tui-group_orientation_horizontal > *:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } fin-checkbox-block .tui-group_rounded.tui-group_orientation_horizontal > *:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } fin-checkbox-block tui-checkbox-block { flex-basis: content !important; } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock] { background: var(--fin-checkbox-block-bg-color); align-items: center; } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { color: var(--fin-checkbox-block-text-color); } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]:after { border-color: var(--fin-checkbox-block-border-color); } @media (hover: hover) { fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]:hover:not(._no-hover), fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock][data-state=hover] { background: var(--fin-checkbox-block-hover-bg-color); } } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]:active:not(._no-active), fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock][data-state=active], fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock][data-state=active]:hover { background: var(--fin-checkbox-block-active-bg-color); } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]:focus-visible:focus-visible { background: var(--fin-checkbox-block-focus-bg-color); } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]:focus-visible:focus-visible:after { border-color: var(--fin-checkbox-block-focus-border-color); } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]._focused._focused { background: var(--fin-checkbox-block-focus-bg-color); } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]._focused._focused:after { border-color: var(--fin-checkbox-block-focus-border-color); } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]:disabled:disabled, fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock][data-state=disabled][data-state=disabled] { opacity: 1; } fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]:disabled:disabled > .t-label > .t-content, fin-checkbox-block tui-checkbox-block [tuiWrapper][data-appearance=whiteblock][data-state=disabled][data-state=disabled] > .t-label > .t-content { color: var(--fin-checkbox-block-disabled-text-color); } fin-checkbox-block tui-checkbox-block[data-size=s] [tuiWrapper][data-appearance=whiteblock] > tui-checkbox { margin: 8px 10px !important; } fin-checkbox-block tui-checkbox-block[data-size=s] [tuiWrapper][data-appearance=whiteblock] > .t-label { min-height: 16px; align-self: unset; } fin-checkbox-block tui-checkbox-block[data-size=s] [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { font-size: 13px; font-style: normal; font-weight: 500; line-height: 16px; } fin-checkbox-block tui-checkbox-block[data-size=m] [tuiWrapper][data-appearance=whiteblock] > tui-checkbox { margin: 10px 12px !important; } fin-checkbox-block tui-checkbox-block[data-size=m] [tuiWrapper][data-appearance=whiteblock] > .t-label { min-height: 24px; align-self: unset; } fin-checkbox-block tui-checkbox-block[data-size=m] [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { font-size: 15px; font-style: normal; font-weight: 500; line-height: 24px; } fin-checkbox-block tui-checkbox-block[data-size=l] [tuiWrapper][data-appearance=whiteblock] > tui-checkbox { margin: 12px 12px !important; } fin-checkbox-block tui-checkbox-block[data-size=l] [tuiWrapper][data-appearance=whiteblock] > .t-label { min-height: 24px; align-self: unset; } fin-checkbox-block tui-checkbox-block[data-size=l] [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { font-size: 15px; font-style: normal; font-weight: 500; line-height: 24px; } fin-checkbox-block tui-checkbox-block._readonly [tuiWrapper][data-appearance=whiteblock] > .t-label > .t-content { color: var(--fin-checkbox-block-disabled-text-color); } fin-checkbox-block.ng-invalid.ng-touched tui-checkbox-block [tuiWrapper][data-appearance=whiteblock]:after { border-color: var(--fin-checkbox-block-error-border-color); } .fin-data-grid-actions-cell-template-appearance { width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 4px; } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary] { background: var(--fin-data-grid-actions-cell-primary-action-bg-color); color: var(--fin-data-grid-actions-cell-primary-action-color); } @media (hover: hover) { .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary]:hover:not(._no-hover), .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary][data-state=hover] { color: var(--fin-data-grid-actions-cell-primary-action-hover-color); } } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary]:active:not(._no-active), .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary][data-state=active], .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary][data-state=active]:hover { color: var(--fin-data-grid-actions-cell-primary-action-active-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary]:disabled:disabled, .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary][data-state=disabled][data-state=disabled] { opacity: var(--tui-disabled-opacity); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary]:focus-visible:focus-visible { border-color: var(--fin-data-grid-actions-cell-primary-action-focus-border-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary]._focused._focused { border-color: var(--fin-data-grid-actions-cell-primary-action-focus-border-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn] { background: var(--fin-data-grid-actions-cell-primary-action-btn-bg-color); color: var(--fin-data-grid-actions-cell-primary-action-btn-color); } @media (hover: hover) { .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn]:hover:not(._no-hover), .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn][data-state=hover] { color: var(--fin-data-grid-actions-cell-primary-action-hover-color); } } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn]:active:not(._no-active), .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn][data-state=active], .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn][data-state=active]:hover { color: var(--fin-data-grid-actions-cell-prqwimary-action-active-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn]:disabled:disabled, .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn][data-state=disabled][data-state=disabled] { opacity: var(--tui-disabled-opacity); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn]:focus-visible:focus-visible { border-color: var(--fin-data-grid-actions-cell-primary-action-focus-border-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-primary-btn]._focused._focused { border-color: var(--fin-data-grid-actions-cell-primary-action-focus-border-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary] { background: var(--fin-data-grid-actions-cell-secondary-action-bg-color); color: var(--fin-data-grid-actions-cell-secondary-action-color); } @media (hover: hover) { .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary]:hover:not(._no-hover), .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary][data-state=hover] { color: var(--fin-data-grid-actions-cell-secondary-action-hover-color); } } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary]:active:not(._no-active), .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary][data-state=active], .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary][data-state=active]:hover { color: var(--fin-data-grid-actions-cell-secondary-action-active-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary]:disabled:disabled, .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary][data-state=disabled][data-state=disabled] { opacity: var(--tui-disabled-opacity); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary]:focus-visible:focus-visible { border-color: var(--fin-data-grid-actions-cell-secondary-action-focus-border-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-secondary]._focused._focused { border-color: var(--fin-data-grid-actions-cell-secondary-action-focus-border-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger] { background: var(--fin-data-grid-actions-cell-danger-action-bg-color); color: var(--fin-data-grid-actions-cell-danger-action-color); } @media (hover: hover) { .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger]:hover:not(._no-hover), .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger][data-state=hover] { color: var(--fin-data-grid-actions-cell-danger-action-hover-color); } } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger]:active:not(._no-active), .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger][data-state=active], .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger][data-state=active]:hover { color: var(--fin-data-grid-actions-cell-danger-action-active-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger]:disabled:disabled, .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger][data-state=disabled][data-state=disabled] { opacity: var(--tui-disabled-opacity); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger]:focus-visible:focus-visible { border-color: var(--fin-data-grid-actions-cell-danger-action-focus-border-color); } .fin-data-grid-actions-cell-template-appearance [tuiWrapper][data-appearance=fin-data-grid-actions-cell-danger]._focused._focused { border-color: var(--fin-data-grid-actions-cell-danger-action-focus-border-color); } /* apps/finverity-platform-app/src/styles/styles.scss */ :root { --tui-font-text: var(--fin-font-family); --tui-base-01: var(--fin-color-base-white); --tui-base-02: var(--fin-color-gray-cool-50); --tui-base-03: var(--fin-color-gray-cool-200); --tui-base-04: var(--fin-color-gray-cool-300); --tui-base-05: var(--fin-color-gray-cool-400); --tui-base-06: var(--fin-color-gray-cool-500); --tui-base-07: var(--fin-color-gray-cool-600); --tui-base-08: var(--fin-color-gray-cool-700); --tui-base-09: var(--fin-color-gray-cool-800); --tui-text-01: var(--fin-color-base-black); --tui-text-02: var(--fin-color-gray-cool-700); --tui-text-03: var(--fin-color-gray-cool-500); --tui-link: var(--fin-color-primary-light-500); --tui-link-hover: var(--fin-color-primary-light-400); --tui-positive: var(--fin-color-success-500); --tui-positive-hover: var(--fin-color-success-400); --tui-negative: var(--fin-color-error-500); --tui-negative-hover: var(--fin-color-error-400); --tui-primary: var(--fin-color-primary-light-500); --tui-primary-hover: var(--fin-color-primary-light-400); --tui-primary-active: var(--fin-color-primary-dark-500); --tui-primary-text: var(--fin-color-base-white); --tui-secondary: var(--fin-color-primary-light-50); --tui-secondary-hover: var(--fin-color-primary-light-100); --tui-secondary-active: var(--fin-color-primary-light-200); --tui-secondary-text: var(--fin-color-primary-light-500); --tui-accent: var(--fin-color-error-500); --tui-accent-hover: var(--fin-color-error-400); --tui-accent-active: var(--fin-color-error-700); --tui-accent-text: var(--fin-color-base-white); --tui-selection: var(--fin-color-primary-light-100); --tui-focus: var(--fin-color-gray-cool-300); --tui-autofill: var(--fin-color-primary-light-50); --tui-error-fill: var(--fin-color-error-500); --tui-error-bg: var(--fin-color-error-50); --tui-error-bg-hover: var(--fin-color-error-400); --tui-success-fill: var(--fin-color-success-500); --tui-success-bg: var(--fin-color-success-50); --tui-success-bg-hover: var(--fin-color-success-400); --tui-warning-fill: var(--fin-color-warning-400); --tui-warning-bg: var(--fin-color-warning-50); --tui-warning-bg-hover: var(--fin-color-warning-200); --tui-info-fill: var(--fin-color-primary-light-500); --tui-info-bg: var(--fin-color-primary-light-50); --tui-info-bg-hover: var(--fin-color-primary-light-400); --tui-neutral-fill: var(--fin-color-gray-cool-500); --tui-neutral-bg: var(--fin-color-gray-cool-50); --tui-neutral-bg-hover: var(--fin-color-gray-cool-300); --tui-support-01: var(--fin-color-primary-light-300); --tui-support-02: var(--fin-color-primary-light-500); --tui-support-03: var(--fin-color-success-300); --tui-support-04: var(--fin-color-success-500); --tui-support-05: var(--fin-color-error-300); --tui-support-06: var(--fin-color-error-500); --tui-support-07: var(--fin-color-warning-300); --tui-support-08: var(--fin-color-warning-500); --tui-support-11: var(--fin-color-warning-100); --tui-support-12: var(--fin-color-warning-300); --tui-support-15: var(--fin-color-success-400); --tui-support-16: var(--fin-color-success-600); --tui-support-19: var(--fin-color-success-50); --tui-support-20: var(--fin-color-success-200); --tui-support-21: var(--fin-color-primary-dark-100); --tui-shadow: var(--fin-shadow-3); --tui-shadow-hover: var(--fin-shadow-6); --tui-shadow-dropdown: var(--fin-shadow-1); --tui-shadow-modal: var(--fin-shadow-8); --tui-shadow-sidebar: var(--fin-shadow-3); --tui-shadow-navigation: var(--fin-shadow-3); --tui-shadow-sheet: var(--fin-shadow-8); --tui-elevation-01: var(--fin-color-base-white); --tui-elevation-02: var(--fin-color-base-white); } .row, .row-wrap { display: flex; } .col, .col-wrap { display: flex; flex-direction: column; } .row-wrap { flex-wrap: wrap; } .col-wrap { flex-wrap: wrap; } .justify-start { justify-content: start; } .justify-center { justify-content: center; } .justify-end { justify-content: end; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .align-start { align-items: start; } .align-flex-end { align-items: flex-end; } .align-center { align-items: center; } .align-end { align-items: end; } .cursor-pointer { cursor: pointer; } .truncate-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .truncate-text::after { content: ""; display: block; } .m-t-1 { margin-top: 1rem; } .w-full { width: 100%; } .is-hidden { visibility: hidden; } tui-dialog[data-appearance=funding-window-dialog][data-size=fullscreen] > .t-content { padding: 32px 64px 150px !important; } tui-dialog[data-appearance=instrument-upload-dialog][data-size=fullscreen] > .t-content { padding: 32px 32px 122px !important; } tui-dialog[data-appearance=customers-upload-dialog][data-size=fullscreen] > .t-content { padding: 32px 32px 122px !important; } tui-dialog[data-appearance=bulk-upload-leads-upload-dialog][data-size=fullscreen] > .t-content { padding: 32px 32px 122px !important; } tui-dialog[data-appearance=bulk-supporting-documents-upload-dialog][data-size=fullscreen] > .t-content { padding: 32px 32px 122px !important; } tui-dialog[data-appearance=configure-approval-workflow-settings-dialog][data-size=fullscreen] > .t-content { padding: 32px 32px 122px !important; } tui-dialog[data-appearance=instrument-details-dialog][data-size=page] { min-width: 471px !important; width: 1094px !important; } tui-dialog[data-appearance=audit-trail-details-dialog][data-size=page] > .t-content { padding: 32px !important; } tui-dialog[data-appearance=manage-webhook-configuration-dialog][data-size=page] > .t-content { padding: 16px 60px 32px 32px !important; } tui-dialog[data-appearance=campaigns-management-dialog][data-size=l] { min-width: 68rem !important; } tui-dialog[data-appearance=campaigns-management-dialog][data-size=l] > .t-content { padding: 24px 24px 0 24px !important; } .t-dialog:has(tui-dialog[data-appearance=instrument-details-dialog][data-size=page]) { left: initial !important; box-shadow: 0 18px 30px 0 rgba(51, 51, 51, 0.6392156863); } .t-dialog:has(tui-dialog[data-appearance=instrument-details-dialog][data-size=page]) + .t-overlay { opacity: 0 !important; } tui-dialog-host:has(fv-mfa-dialog-container) { z-index: 1 !important; } .cdk-drag-preview { border: none; box-sizing: border-box; border-radius: 4px; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .cdk-drag-placeholder { opacity: 0; } .cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .cdk-drop-list-dragging .cdk-drag { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .fin-drag-and-drop-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .auth-layout-background { background-color: var(--fin-color-gray-cool-25); } ._hidden input.t-input, .t-input tui-primitive-textfield._hidden, tui-primitive-textfield._hidden { -webkit-user-select: unset !important; } /* angular:styles/global:styles */ /*# sourceMappingURL=styles.css.map */