fokus-styles 2.0.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +4 -3
  3. package/dist/css/components.css +532 -2
  4. package/dist/css/components.css.map +1 -1
  5. package/dist/css/components.min.css +1 -1
  6. package/dist/css/components.min.css.map +1 -1
  7. package/dist/css/fokus-components.css +4072 -0
  8. package/dist/css/fokus-components.css.map +1 -0
  9. package/dist/css/fokus-components.min.css +2 -0
  10. package/dist/css/fokus-components.min.css.map +1 -0
  11. package/dist/css/fokus-core.css +1585 -0
  12. package/dist/css/fokus-core.css.map +1 -0
  13. package/dist/css/fokus-core.min.css +2 -0
  14. package/dist/css/fokus-core.min.css.map +1 -0
  15. package/dist/css/fokus-dark.css +314 -0
  16. package/dist/css/fokus-dark.css.map +1 -0
  17. package/dist/css/fokus-dark.min.css +2 -0
  18. package/dist/css/fokus-dark.min.css.map +1 -0
  19. package/dist/css/fokus-rtl.css +8552 -0
  20. package/dist/css/fokus-rtl.css.map +1 -0
  21. package/dist/css/fokus-rtl.min.css +2 -0
  22. package/dist/css/fokus-rtl.min.css.map +1 -0
  23. package/dist/css/fokus-utilities.css +4198 -0
  24. package/dist/css/fokus-utilities.css.map +1 -0
  25. package/dist/css/fokus-utilities.min.css +2 -0
  26. package/dist/css/fokus-utilities.min.css.map +1 -0
  27. package/dist/css/fokus.css +1361 -53
  28. package/dist/css/fokus.css.map +1 -1
  29. package/dist/css/fokus.min.css +1 -1
  30. package/dist/css/fokus.min.css.map +1 -1
  31. package/dist/css/forms.css +137 -2
  32. package/dist/css/forms.css.map +1 -1
  33. package/dist/css/forms.min.css +1 -1
  34. package/dist/css/forms.min.css.map +1 -1
  35. package/dist/css/helpers.css +398 -2
  36. package/dist/css/helpers.css.map +1 -1
  37. package/dist/css/helpers.min.css +1 -1
  38. package/dist/css/helpers.min.css.map +1 -1
  39. package/dist/css/layout.css +582 -2
  40. package/dist/css/layout.css.map +1 -1
  41. package/dist/css/layout.min.css +1 -1
  42. package/dist/css/layout.min.css.map +1 -1
  43. package/dist/js/fokus.js +347 -12
  44. package/dist/js/fokus.js.map +4 -4
  45. package/dist/js/fokus.min.js +17 -17
  46. package/dist/js/fokus.min.js.map +4 -4
  47. package/docs/components/accordion.md +3 -0
  48. package/docs/components/avatar.md +13 -0
  49. package/docs/components/button-group.md +13 -0
  50. package/docs/components/close-button.md +13 -0
  51. package/docs/components/code.md +13 -0
  52. package/docs/components/icon-link.md +13 -0
  53. package/docs/components/list-group.md +13 -0
  54. package/docs/components/modal.md +3 -0
  55. package/docs/components/navbar.md +3 -0
  56. package/docs/components/pagination.md +3 -0
  57. package/docs/components/placeholder.md +13 -0
  58. package/docs/components/ratio.md +13 -0
  59. package/docs/components/scrollspy.md +13 -0
  60. package/docs/components/skeleton.md +3 -0
  61. package/docs/components/table.md +3 -0
  62. package/docs/guides/javascript-api.md +9 -0
  63. package/docs/guides/rtl-and-system-preferences.md +28 -0
  64. package/docs/guides/utility-api.md +9 -0
  65. package/docs/reference/size-baseline.json +13 -13
  66. package/mockup/assets/example-theme.css +3 -1
  67. package/mockup/assets/example-theme.js +2 -0
  68. package/mockup/assets/showcase-contracts.js +2 -2
  69. package/mockup/assets/showcase.css +4 -2
  70. package/mockup/assets/showcase.js +2 -0
  71. package/mockup/examples/js-foundation.html +25 -0
  72. package/mockup/examples/tables-navbar.html +12 -8
  73. package/mockup/examples/theming.html +2 -1
  74. package/mockup/foundations.html +2 -2
  75. package/package.json +15 -1
  76. package/packages/fokus-cli/bin/fokus.mjs +18 -1
  77. package/packages/fokus-cli/lib/build.mjs +12 -2
  78. package/packages/fokus-components/scss/components/_accordion.scss +19 -0
  79. package/packages/fokus-components/scss/components/_avatar.scss +22 -0
  80. package/packages/fokus-components/scss/components/_button-group.scss +14 -0
  81. package/packages/fokus-components/scss/components/_close-button.scss +22 -0
  82. package/packages/fokus-components/scss/components/_code.scss +19 -0
  83. package/packages/fokus-components/scss/components/_icon-link.scss +8 -0
  84. package/packages/fokus-components/scss/components/_index.scss +10 -0
  85. package/packages/fokus-components/scss/components/_list-group.scss +26 -0
  86. package/packages/fokus-components/scss/components/_modal.scss +36 -0
  87. package/packages/fokus-components/scss/components/_navbar.scss +48 -0
  88. package/packages/fokus-components/scss/components/_offcanvas.scss +19 -0
  89. package/packages/fokus-components/scss/components/_pagination.scss +10 -0
  90. package/packages/fokus-components/scss/components/_placeholder.scss +13 -0
  91. package/packages/fokus-components/scss/components/_progress.scss +8 -0
  92. package/packages/fokus-components/scss/components/_ratio.scss +10 -0
  93. package/packages/fokus-components/scss/components/_scrollspy.scss +5 -0
  94. package/packages/fokus-components/scss/components/_skeleton.scss +19 -0
  95. package/packages/fokus-components/scss/components/_spinner.scss +9 -53
  96. package/packages/fokus-components/scss/components/_tables.scss +20 -0
  97. package/packages/fokus-components/scss/forms/_forms.scss +29 -0
  98. package/packages/fokus-core/scss/base/_accessibility.scss +59 -0
  99. package/packages/fokus-core/scss/base/_index.scss +1 -0
  100. package/packages/fokus-core/scss/layout/_grid.scss +18 -0
  101. package/packages/fokus-core/scss/settings/_config.scss +43 -0
  102. package/packages/fokus-core/scss/settings/_index.scss +1 -0
  103. package/packages/fokus-core/scss/themes/_dark.scss +38 -2
  104. package/packages/fokus-core/scss/tokens/_root.scss +25 -0
  105. package/packages/fokus-core/scss/tools/_mixins.scss +8 -0
  106. package/packages/fokus-js/js/accordion.js +7 -1
  107. package/packages/fokus-js/js/core/focus.js +20 -0
  108. package/packages/fokus-js/js/core/overlay.d.ts +2 -0
  109. package/packages/fokus-js/js/core/overlay.js +10 -0
  110. package/packages/fokus-js/js/core/register.js +4 -2
  111. package/packages/fokus-js/js/focus-trap.d.ts +3 -0
  112. package/packages/fokus-js/js/focus-trap.js +1 -0
  113. package/packages/fokus-js/js/fokus.d.ts +7 -0
  114. package/packages/fokus-js/js/fokus.js +7 -0
  115. package/packages/fokus-js/js/form-validation.d.ts +7 -0
  116. package/packages/fokus-js/js/form-validation.js +20 -0
  117. package/packages/fokus-js/js/modal.js +16 -2
  118. package/packages/fokus-js/js/navbar.d.ts +10 -0
  119. package/packages/fokus-js/js/navbar.js +27 -0
  120. package/packages/fokus-js/js/offcanvas.d.ts +4 -0
  121. package/packages/fokus-js/js/offcanvas.js +16 -2
  122. package/packages/fokus-js/js/pagination.d.ts +7 -0
  123. package/packages/fokus-js/js/pagination.js +38 -0
  124. package/packages/fokus-js/js/scrollspy.d.ts +7 -0
  125. package/packages/fokus-js/js/scrollspy.js +26 -0
  126. package/packages/fokus-js/js/spinner.d.ts +9 -0
  127. package/packages/fokus-js/js/spinner.js +18 -0
  128. package/packages/fokus-js/js/theme.d.ts +9 -0
  129. package/packages/fokus-js/js/theme.js +19 -0
  130. package/packages/fokus-js/js/toast.js +4 -0
  131. package/packages/fokus-utilities/scss/utilities/_api.scss +48 -0
  132. package/packages/fokus-utilities/scss/utilities/_index.scss +2 -0
  133. package/packages/fokus-utilities/scss/utilities/_states.scss +19 -0
  134. package/packages/fokus-utilities/scss/utilities/_visibility.scss +24 -0
  135. package/scss/entries/core-entry.scss +5 -0
  136. package/scss/entries/dark-entry.scss +3 -0
  137. package/scss/entries/rtl-entry.scss +11 -0
@@ -0,0 +1,1585 @@
1
+ @layer reset, tokens, base, layout, components, utilities, overrides;
2
+ @layer tokens {
3
+ :root {
4
+ --fs-color-white: #ffffff;
5
+ --fs-color-black: #000000;
6
+ --fs-color-text: #1e293b;
7
+ --fs-color-muted: #64748b;
8
+ --fs-color-border: #e2e8f0;
9
+ --fs-color-surface: #ffffff;
10
+ --fs-color-subtle: #f8fafc;
11
+ --fs-font-sans: Plus Jakarta Sans, sans-serif;
12
+ --fs-font-mono: Source Code Pro, monospace;
13
+ --fs-font-size-md: 0.8125rem;
14
+ --fs-font-size-h1: 1.75rem;
15
+ --fs-font-size-h2: 1.5rem;
16
+ --fs-font-size-h3: 1.3125rem;
17
+ --fs-font-size-h4: 1.125rem;
18
+ --fs-font-size-h5: 1rem;
19
+ --fs-font-size-h6: 0.875rem;
20
+ --fs-font-weight-semibold: 600;
21
+ --fs-line-height-base: 1.5;
22
+ --fs-line-height-heading: 1.25;
23
+ --fs-radius-sm: 4px;
24
+ --fs-radius-md: 6px;
25
+ --fs-radius-lg: 8px;
26
+ --fs-gutter-x: 1.5rem;
27
+ --fs-gutter-y: 0px;
28
+ --fs-space-0: 0;
29
+ --fs-space-1: 0.25rem;
30
+ --fs-space-2: 0.5rem;
31
+ --fs-space-3: 1rem;
32
+ --fs-space-4: 1.5rem;
33
+ --fs-space-5: 3rem;
34
+ --fs-z-base: 0;
35
+ --fs-z-dropdown: 1000;
36
+ --fs-z-sticky: 1020;
37
+ --fs-z-modal: 1050;
38
+ --fs-z-offcanvas: 1060;
39
+ --fs-z-notification: 1080;
40
+ --fs-z-toast: 1090;
41
+ --fs-z-tooltip: 1100;
42
+ --fs-control-height: 38px;
43
+ --fs-control-height-sm: 30px;
44
+ --fs-control-height-lg: 46px;
45
+ --fs-control-padding-x: 12px;
46
+ --fs-control-padding-x-sm: 8px;
47
+ --fs-control-padding-x-lg: 16px;
48
+ --fs-focus-width: 2px;
49
+ --fs-focus-offset: 2px;
50
+ --fs-focus-color: var(--fs-color-primary);
51
+ --fs-focus-ring-size: 3px;
52
+ --fs-focus-ring-color: color-mix(in srgb, var(--fs-focus-color) 22%, transparent);
53
+ --fs-focus-ring-alpha: 22%;
54
+ --fs-transition-fast: 150ms;
55
+ --fs-transition-normal: 220ms;
56
+ --fs-motion-duration-fast: var(--fs-transition-fast);
57
+ --fs-motion-duration-normal: var(--fs-transition-normal);
58
+ --fs-motion-ease-standard: var(--fs-ease-standard);
59
+ --fs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
60
+ --fs-border-width: 1px;
61
+ --fs-disabled-opacity: 0.5;
62
+ --fs-safe-area-top: env(safe-area-inset-top, 0px);
63
+ --fs-safe-area-right: env(safe-area-inset-right, 0px);
64
+ --fs-safe-area-bottom: env(safe-area-inset-bottom, 0px);
65
+ --fs-safe-area-left: env(safe-area-inset-left, 0px);
66
+ --fs-component-control-height: var(--fs-control-height);
67
+ --fs-component-overlay-backdrop: rgb(0 0 0 / 55%);
68
+ --fs-component-panel-radius: var(--fs-radius-md);
69
+ --fs-component-panel-shadow: var(--fs-shadow-lg);
70
+ --fs-contrast-border-width: var(--fs-border-width);
71
+ --fs-contrast-focus-width: var(--fs-focus-width);
72
+ --fs-cq-sm: 320px;
73
+ --fs-cq-md: 480px;
74
+ --fs-cq-lg: 640px;
75
+ --fs-shadow-sm: 0 1px 3px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 10%);
76
+ --fs-shadow-md: 0 6px 12px rgb(0 0 0 / 15%), 0 3px 6px rgb(0 0 0 / 10%);
77
+ --fs-shadow-lg: 0 15px 30px rgb(0 0 0 / 18%), 0 6px 12px rgb(0 0 0 / 12%);
78
+ --fs-tooltip-bg: #1e293b;
79
+ --fs-tooltip-text: #ffffff;
80
+ --fs-color-primary: #1a61e6;
81
+ --fs-color-on-primary: #ffffff;
82
+ --fs-alert-primary-bg: rgb(220.3846532222, 232.689549371, 254.1042117072);
83
+ --fs-alert-primary-text: rgb(4.2540793692, 32.6552622518, 88.5748738661);
84
+ --fs-color-secondary: #64748b;
85
+ --fs-color-on-secondary: #ffffff;
86
+ --fs-alert-secondary-bg: rgb(230.2895610064, 233.0325853352, 236.9919508609);
87
+ --fs-alert-secondary-text: rgb(33.9166068747, 40.6437781967, 50.3140869721);
88
+ --fs-color-success: rgb(13, 209, 87);
89
+ --fs-color-on-success: #000000;
90
+ --fs-alert-success-bg: rgb(228.9046733915, 249.1514320752, 230.8709345684);
91
+ --fs-alert-success-text: rgb(1.6574790861, 79.745461506, 28.4507801755);
92
+ --fs-color-warning: #fab633;
93
+ --fs-color-on-warning: #000000;
94
+ --fs-alert-warning-bg: rgb(254.9170612621, 244.6528756631, 228.9710928247);
95
+ --fs-alert-warning-text: rgb(96.9838380187, 68.3933599001, 13.3146447009);
96
+ --fs-color-danger: #cc3335;
97
+ --fs-color-on-danger: #ffffff;
98
+ --fs-alert-danger-bg: rgb(251.9225977632, 226.389403069, 223.5618211362);
99
+ --fs-alert-danger-text: rgb(77.6432204678, 13.3146447009, 14.1555411162);
100
+ --fs-color-info: #5e5cc7;
101
+ --fs-color-on-info: #ffffff;
102
+ --fs-alert-info-bg: rgb(228.2395257626, 230.4806192824, 248.3934544766);
103
+ --fs-alert-info-text: rgb(31.3939176289, 30.5530212136, 75.5409794297);
104
+ --fs-feedback-primary-bg: #e6f0ff;
105
+ --fs-feedback-secondary-bg: #f8fafc;
106
+ --fs-feedback-success-bg: #e6fff2;
107
+ --fs-feedback-warning-bg: #fff9e6;
108
+ --fs-feedback-danger-bg: #fff2f3;
109
+ --fs-feedback-info-bg: #f2f2ff;
110
+ }
111
+ @supports (color: oklch(0% 0 0deg)) {
112
+ :root {
113
+ --fs-color-text: oklch(27.9495237712% 0.0368481257 260.0309873929deg);
114
+ --fs-color-muted: oklch(55.4391007662% 0.040717043 257.4166191214deg);
115
+ --fs-color-border: oklch(92.876126719% 0.0126187744 255.5078854448deg);
116
+ --fs-color-subtle: oklch(98.4151869501% 0.0034126992 247.8577745944deg);
117
+ --fs-tooltip-bg: oklch(27.9495237712% 0.0368481257 260.0309873929deg);
118
+ --fs-color-primary: oklch(53.5630074284% 0.2132145174 261.6264320248deg);
119
+ --fs-color-on-primary: #ffffff;
120
+ --fs-alert-primary-bg: oklch(93.0344511143% 0.0319821776 261.6264320248deg);
121
+ --fs-alert-primary-text: oklch(26.7815037142% 0.1066072587 261.6264320248deg);
122
+ --fs-color-secondary: oklch(55.4391007662% 0.040717043 257.4166191214deg);
123
+ --fs-color-on-secondary: #ffffff;
124
+ --fs-alert-secondary-bg: oklch(93.3158651149% 0.0061075564 257.4166191214deg);
125
+ --fs-alert-secondary-text: oklch(27.7195503831% 0.0203585215 257.4166191214deg);
126
+ --fs-color-success: oklch(75.151587899% 0.2146126169 148.125846236deg);
127
+ --fs-color-on-success: #000000;
128
+ --fs-alert-success-bg: oklch(96.2727381849% 0.0321918925 148.125846236deg);
129
+ --fs-alert-success-text: oklch(37.5757939495% 0.1073063085 148.125846236deg);
130
+ --fs-color-warning: oklch(81.9510815663% 0.1562613975 78.6575213966deg);
131
+ --fs-color-on-warning: #000000;
132
+ --fs-alert-warning-bg: oklch(97.2926622349% 0.0234392096 78.6575213966deg);
133
+ --fs-alert-warning-text: oklch(40.9755407832% 0.0781306987 78.6575213966deg);
134
+ --fs-color-danger: oklch(55.9653139301% 0.1897270855 25.2407937498deg);
135
+ --fs-color-on-danger: #ffffff;
136
+ --fs-alert-danger-bg: oklch(93.3947970895% 0.0284590628 25.2407937498deg);
137
+ --fs-alert-danger-text: oklch(27.982656965% 0.0948635427 25.2407937498deg);
138
+ --fs-color-info: oklch(53.3359780029% 0.1620131129 280.2231949375deg);
139
+ --fs-color-on-info: #ffffff;
140
+ --fs-alert-info-bg: oklch(93.0003967004% 0.0243019669 280.2231949375deg);
141
+ --fs-alert-info-text: oklch(26.6679890014% 0.0810065564 280.2231949375deg);
142
+ --fs-feedback-primary-bg: oklch(95.2067827456% 0.0228899025 258.359342143deg);
143
+ --fs-feedback-secondary-bg: oklch(98.4151869501% 0.0034126992 247.8577745944deg);
144
+ --fs-feedback-success-bg: oklch(97.8305614459% 0.0311593614 163.2740567608deg);
145
+ --fs-feedback-warning-bg: oklch(98.17094418% 0.025708244 92.3886876566deg);
146
+ --fs-feedback-danger-bg: oklch(97.1603097552% 0.0140720277 12.0135639679deg);
147
+ --fs-feedback-info-bg: oklch(96.4918490239% 0.0173174767 286.0707018324deg);
148
+ }
149
+ }
150
+ @media (prefers-contrast: more) {
151
+ :root {
152
+ --fs-contrast-border-width: 2px;
153
+ --fs-contrast-focus-width: 3px;
154
+ --fs-focus-width: var(--fs-contrast-focus-width);
155
+ --fs-border-width: var(--fs-contrast-border-width);
156
+ }
157
+ }
158
+ }
159
+ @layer tokens {
160
+ :root {
161
+ --fs-color-bg-surface: var(--fs-color-surface);
162
+ --fs-color-bg-subtle: var(--fs-color-subtle);
163
+ --fs-color-text-primary: var(--fs-color-text);
164
+ --fs-color-text-muted: var(--fs-color-muted);
165
+ --fs-color-border-default: var(--fs-color-border);
166
+ --fs-color-focus: var(--fs-color-primary);
167
+ --fs-color-surface-raised: var(--fs-color-surface);
168
+ --fs-color-surface-interactive: var(--fs-color-subtle);
169
+ --fs-color-action-primary: var(--fs-color-primary);
170
+ --fs-color-action-danger: var(--fs-color-danger);
171
+ }
172
+ }
173
+ @layer tokens {
174
+ :root {
175
+ --fs-chart-series-1: var(--fs-color-primary);
176
+ --fs-chart-series-2: var(--fs-color-success);
177
+ --fs-chart-series-3: var(--fs-color-warning);
178
+ --fs-chart-series-4: var(--fs-color-danger);
179
+ --fs-chart-series-5: var(--fs-color-info);
180
+ --fs-chart-series-6: var(--fs-color-secondary);
181
+ --fs-chart-grid: var(--fs-color-border);
182
+ --fs-chart-axis: var(--fs-color-muted);
183
+ --fs-chart-tooltip-bg: var(--fs-tooltip-bg);
184
+ --fs-chart-tooltip-text: var(--fs-tooltip-text);
185
+ }
186
+ }
187
+ @layer reset {
188
+ *,
189
+ *::before,
190
+ *::after {
191
+ box-sizing: border-box;
192
+ }
193
+ html {
194
+ line-height: var(--fs-line-height-base);
195
+ -webkit-text-size-adjust: 100%;
196
+ text-size-adjust: 100%;
197
+ }
198
+ body {
199
+ margin: 0;
200
+ color: var(--fs-color-text);
201
+ background-color: var(--fs-color-surface);
202
+ }
203
+ [hidden] {
204
+ display: none !important;
205
+ }
206
+ }
207
+ @layer base {
208
+ body,
209
+ button,
210
+ input,
211
+ select,
212
+ textarea {
213
+ font-family: var(--fs-font-sans);
214
+ font-size: var(--fs-font-size-md);
215
+ }
216
+ code,
217
+ kbd,
218
+ pre,
219
+ samp {
220
+ font-family: var(--fs-font-mono);
221
+ }
222
+ h1,
223
+ h2,
224
+ h3,
225
+ h4,
226
+ h5,
227
+ h6 {
228
+ margin-top: 0;
229
+ font-weight: var(--fs-font-weight-semibold);
230
+ line-height: var(--fs-line-height-heading);
231
+ }
232
+ h1 {
233
+ font-size: var(--fs-font-size-h1);
234
+ }
235
+ h2 {
236
+ font-size: var(--fs-font-size-h2);
237
+ }
238
+ h3 {
239
+ font-size: var(--fs-font-size-h3);
240
+ }
241
+ h4 {
242
+ font-size: var(--fs-font-size-h4);
243
+ }
244
+ h5 {
245
+ font-size: var(--fs-font-size-h5);
246
+ }
247
+ h6 {
248
+ font-size: var(--fs-font-size-h6);
249
+ }
250
+ }
251
+ @layer base {
252
+ @media (prefers-reduced-motion: reduce) {
253
+ *,
254
+ *::before,
255
+ *::after {
256
+ scroll-behavior: auto !important;
257
+ transition-duration: 0.01ms !important;
258
+ animation-duration: 0.01ms !important;
259
+ animation-iteration-count: 1 !important;
260
+ }
261
+ .fs-spinner,
262
+ .fs-progress-bar-animated,
263
+ .fs-progress-indeterminate .fs-progress-bar {
264
+ animation-duration: 1.5s !important;
265
+ animation-iteration-count: infinite !important;
266
+ }
267
+ }
268
+ }
269
+ /* stylelint-disable property-no-deprecated, selector-not-notation */
270
+ @layer reset {
271
+ :focus-visible {
272
+ outline: var(--fs-focus-width) solid var(--fs-focus-color);
273
+ outline-offset: var(--fs-focus-offset);
274
+ }
275
+ @media (forced-colors: active) {
276
+ :focus-visible {
277
+ outline: 2px solid CanvasText;
278
+ outline-offset: 2px;
279
+ }
280
+ button,
281
+ [role=button],
282
+ input,
283
+ select,
284
+ textarea,
285
+ .fs-btn {
286
+ border-color: ButtonText;
287
+ forced-color-adjust: auto;
288
+ }
289
+ .fs-u-focus-ring:focus-visible {
290
+ outline: 3px solid Highlight;
291
+ }
292
+ }
293
+ }
294
+ @layer utilities {
295
+ .fs-u-visually-hidden:not(:focus):not(:focus-within),
296
+ .fs-u-visually-hidden-focusable:not(:focus):not(:focus-within) {
297
+ position: absolute !important;
298
+ width: 1px !important;
299
+ height: 1px !important;
300
+ padding: 0 !important;
301
+ margin: -1px !important;
302
+ overflow: hidden !important;
303
+ clip-path: inset(50%) !important;
304
+ white-space: nowrap !important;
305
+ border: 0 !important;
306
+ }
307
+ .fs-skip-link {
308
+ position: fixed;
309
+ z-index: 1000;
310
+ inset-block-start: var(--fs-space-2);
311
+ inset-inline-start: var(--fs-space-2);
312
+ transform: translateY(-200%);
313
+ padding: var(--fs-space-2) var(--fs-space-3);
314
+ color: var(--fs-color-on-primary);
315
+ background: var(--fs-color-primary);
316
+ border-radius: var(--fs-radius-sm);
317
+ }
318
+ .fs-skip-link:focus {
319
+ transform: translateY(0);
320
+ }
321
+ }
322
+ @layer layout {
323
+ .fs-cluster {
324
+ display: flex;
325
+ flex-wrap: wrap;
326
+ align-items: center;
327
+ gap: var(--fs-cluster-gap, 0.5rem);
328
+ }
329
+ .fs-cluster-gap-0 {
330
+ --fs-cluster-gap: 0;
331
+ }
332
+ .fs-cluster-gap-1 {
333
+ --fs-cluster-gap: 0.25rem;
334
+ }
335
+ .fs-cluster-gap-2 {
336
+ --fs-cluster-gap: 0.5rem;
337
+ }
338
+ .fs-cluster-gap-3 {
339
+ --fs-cluster-gap: 1rem;
340
+ }
341
+ .fs-cluster-gap-4 {
342
+ --fs-cluster-gap: 1.5rem;
343
+ }
344
+ .fs-cluster-gap-5 {
345
+ --fs-cluster-gap: 3rem;
346
+ }
347
+ }
348
+ @layer layout {
349
+ .fs-container,
350
+ .fs-container-sm,
351
+ .fs-container-md,
352
+ .fs-container-lg,
353
+ .fs-container-xl,
354
+ .fs-container-xxl,
355
+ .fs-container-xxxl,
356
+ .fs-container-fluid {
357
+ width: 100%;
358
+ margin-right: auto;
359
+ margin-left: auto;
360
+ }
361
+ @media (min-width: 640px) {
362
+ .fs-container,
363
+ .fs-container-sm {
364
+ max-width: 600px;
365
+ }
366
+ }
367
+ @media (min-width: 768px) {
368
+ .fs-container,
369
+ .fs-container-md {
370
+ max-width: 720px;
371
+ }
372
+ }
373
+ @media (min-width: 1024px) {
374
+ .fs-container,
375
+ .fs-container-lg {
376
+ max-width: 960px;
377
+ }
378
+ }
379
+ @media (min-width: 1280px) {
380
+ .fs-container,
381
+ .fs-container-xl {
382
+ max-width: 1200px;
383
+ }
384
+ }
385
+ @media (min-width: 1536px) {
386
+ .fs-container,
387
+ .fs-container-xxl {
388
+ max-width: 1440px;
389
+ }
390
+ }
391
+ @media (min-width: 1920px) {
392
+ .fs-container,
393
+ .fs-container-xxxl {
394
+ max-width: 1800px;
395
+ }
396
+ }
397
+ }
398
+ @layer layout {
399
+ .fs-row {
400
+ display: flex;
401
+ flex-wrap: wrap;
402
+ margin-top: calc(var(--fs-gutter-y) * -1);
403
+ margin-right: calc(var(--fs-gutter-x) / -2);
404
+ margin-left: calc(var(--fs-gutter-x) / -2);
405
+ }
406
+ .fs-row > * {
407
+ margin-top: var(--fs-gutter-y);
408
+ padding-right: calc(var(--fs-gutter-x) / 2);
409
+ padding-left: calc(var(--fs-gutter-x) / 2);
410
+ }
411
+ .fs-row-fluid {
412
+ width: 100%;
413
+ }
414
+ .fs-col-fluid {
415
+ width: 100%;
416
+ }
417
+ .fs-row-cols-auto > * {
418
+ flex: 0 0 auto;
419
+ width: auto;
420
+ }
421
+ .fs-row-cols-1 > * {
422
+ flex: 0 0 auto;
423
+ width: 100%;
424
+ }
425
+ .fs-row-cols-2 > * {
426
+ flex: 0 0 auto;
427
+ width: 50%;
428
+ }
429
+ .fs-row-cols-3 > * {
430
+ flex: 0 0 auto;
431
+ width: 33.3333333333%;
432
+ }
433
+ .fs-row-cols-4 > * {
434
+ flex: 0 0 auto;
435
+ width: 25%;
436
+ }
437
+ .fs-row-cols-5 > * {
438
+ flex: 0 0 auto;
439
+ width: 20%;
440
+ }
441
+ .fs-row-cols-6 > * {
442
+ flex: 0 0 auto;
443
+ width: 16.6666666667%;
444
+ }
445
+ .fs-order-0 {
446
+ order: 0;
447
+ }
448
+ .fs-order-1 {
449
+ order: 1;
450
+ }
451
+ .fs-order-2 {
452
+ order: 2;
453
+ }
454
+ .fs-order-3 {
455
+ order: 3;
456
+ }
457
+ .fs-order-4 {
458
+ order: 4;
459
+ }
460
+ .fs-order-5 {
461
+ order: 5;
462
+ }
463
+ .fs-order-6 {
464
+ order: 6;
465
+ }
466
+ .fs-order-7 {
467
+ order: 7;
468
+ }
469
+ .fs-order-8 {
470
+ order: 8;
471
+ }
472
+ .fs-order-9 {
473
+ order: 9;
474
+ }
475
+ .fs-order-10 {
476
+ order: 10;
477
+ }
478
+ .fs-order-11 {
479
+ order: 11;
480
+ }
481
+ .fs-order-12 {
482
+ order: 12;
483
+ }
484
+ .fs-col {
485
+ flex: 1 0 0%;
486
+ }
487
+ .fs-col-auto {
488
+ flex: 0 0 auto;
489
+ width: auto;
490
+ }
491
+ .fs-col-1 {
492
+ flex: 0 0 auto;
493
+ width: 8.3333333333%;
494
+ }
495
+ .fs-col-2 {
496
+ flex: 0 0 auto;
497
+ width: 16.6666666667%;
498
+ }
499
+ .fs-col-3 {
500
+ flex: 0 0 auto;
501
+ width: 25%;
502
+ }
503
+ .fs-col-4 {
504
+ flex: 0 0 auto;
505
+ width: 33.3333333333%;
506
+ }
507
+ .fs-col-5 {
508
+ flex: 0 0 auto;
509
+ width: 41.6666666667%;
510
+ }
511
+ .fs-col-6 {
512
+ flex: 0 0 auto;
513
+ width: 50%;
514
+ }
515
+ .fs-col-7 {
516
+ flex: 0 0 auto;
517
+ width: 58.3333333333%;
518
+ }
519
+ .fs-col-8 {
520
+ flex: 0 0 auto;
521
+ width: 66.6666666667%;
522
+ }
523
+ .fs-col-9 {
524
+ flex: 0 0 auto;
525
+ width: 75%;
526
+ }
527
+ .fs-col-10 {
528
+ flex: 0 0 auto;
529
+ width: 83.3333333333%;
530
+ }
531
+ .fs-col-11 {
532
+ flex: 0 0 auto;
533
+ width: 91.6666666667%;
534
+ }
535
+ .fs-col-12 {
536
+ flex: 0 0 auto;
537
+ width: 100%;
538
+ }
539
+ @media (min-width: 640px) {
540
+ .fs-row-cols-sm-auto > * {
541
+ flex: 0 0 auto;
542
+ width: auto;
543
+ }
544
+ .fs-row-cols-sm-1 > * {
545
+ flex: 0 0 auto;
546
+ width: 100%;
547
+ }
548
+ .fs-row-cols-sm-2 > * {
549
+ flex: 0 0 auto;
550
+ width: 50%;
551
+ }
552
+ .fs-row-cols-sm-3 > * {
553
+ flex: 0 0 auto;
554
+ width: 33.3333333333%;
555
+ }
556
+ .fs-row-cols-sm-4 > * {
557
+ flex: 0 0 auto;
558
+ width: 25%;
559
+ }
560
+ .fs-row-cols-sm-5 > * {
561
+ flex: 0 0 auto;
562
+ width: 20%;
563
+ }
564
+ .fs-row-cols-sm-6 > * {
565
+ flex: 0 0 auto;
566
+ width: 16.6666666667%;
567
+ }
568
+ .fs-order-sm-0 {
569
+ order: 0;
570
+ }
571
+ .fs-order-sm-1 {
572
+ order: 1;
573
+ }
574
+ .fs-order-sm-2 {
575
+ order: 2;
576
+ }
577
+ .fs-order-sm-3 {
578
+ order: 3;
579
+ }
580
+ .fs-order-sm-4 {
581
+ order: 4;
582
+ }
583
+ .fs-order-sm-5 {
584
+ order: 5;
585
+ }
586
+ .fs-order-sm-6 {
587
+ order: 6;
588
+ }
589
+ .fs-order-sm-7 {
590
+ order: 7;
591
+ }
592
+ .fs-order-sm-8 {
593
+ order: 8;
594
+ }
595
+ .fs-order-sm-9 {
596
+ order: 9;
597
+ }
598
+ .fs-order-sm-10 {
599
+ order: 10;
600
+ }
601
+ .fs-order-sm-11 {
602
+ order: 11;
603
+ }
604
+ .fs-order-sm-12 {
605
+ order: 12;
606
+ }
607
+ .fs-col-sm {
608
+ flex: 1 0 0%;
609
+ }
610
+ .fs-col-sm-auto {
611
+ flex: 0 0 auto;
612
+ width: auto;
613
+ }
614
+ .fs-col-sm-1 {
615
+ flex: 0 0 auto;
616
+ width: 8.3333333333%;
617
+ }
618
+ .fs-col-sm-2 {
619
+ flex: 0 0 auto;
620
+ width: 16.6666666667%;
621
+ }
622
+ .fs-col-sm-3 {
623
+ flex: 0 0 auto;
624
+ width: 25%;
625
+ }
626
+ .fs-col-sm-4 {
627
+ flex: 0 0 auto;
628
+ width: 33.3333333333%;
629
+ }
630
+ .fs-col-sm-5 {
631
+ flex: 0 0 auto;
632
+ width: 41.6666666667%;
633
+ }
634
+ .fs-col-sm-6 {
635
+ flex: 0 0 auto;
636
+ width: 50%;
637
+ }
638
+ .fs-col-sm-7 {
639
+ flex: 0 0 auto;
640
+ width: 58.3333333333%;
641
+ }
642
+ .fs-col-sm-8 {
643
+ flex: 0 0 auto;
644
+ width: 66.6666666667%;
645
+ }
646
+ .fs-col-sm-9 {
647
+ flex: 0 0 auto;
648
+ width: 75%;
649
+ }
650
+ .fs-col-sm-10 {
651
+ flex: 0 0 auto;
652
+ width: 83.3333333333%;
653
+ }
654
+ .fs-col-sm-11 {
655
+ flex: 0 0 auto;
656
+ width: 91.6666666667%;
657
+ }
658
+ .fs-col-sm-12 {
659
+ flex: 0 0 auto;
660
+ width: 100%;
661
+ }
662
+ }
663
+ @media (min-width: 768px) {
664
+ .fs-row-cols-md-auto > * {
665
+ flex: 0 0 auto;
666
+ width: auto;
667
+ }
668
+ .fs-row-cols-md-1 > * {
669
+ flex: 0 0 auto;
670
+ width: 100%;
671
+ }
672
+ .fs-row-cols-md-2 > * {
673
+ flex: 0 0 auto;
674
+ width: 50%;
675
+ }
676
+ .fs-row-cols-md-3 > * {
677
+ flex: 0 0 auto;
678
+ width: 33.3333333333%;
679
+ }
680
+ .fs-row-cols-md-4 > * {
681
+ flex: 0 0 auto;
682
+ width: 25%;
683
+ }
684
+ .fs-row-cols-md-5 > * {
685
+ flex: 0 0 auto;
686
+ width: 20%;
687
+ }
688
+ .fs-row-cols-md-6 > * {
689
+ flex: 0 0 auto;
690
+ width: 16.6666666667%;
691
+ }
692
+ .fs-order-md-0 {
693
+ order: 0;
694
+ }
695
+ .fs-order-md-1 {
696
+ order: 1;
697
+ }
698
+ .fs-order-md-2 {
699
+ order: 2;
700
+ }
701
+ .fs-order-md-3 {
702
+ order: 3;
703
+ }
704
+ .fs-order-md-4 {
705
+ order: 4;
706
+ }
707
+ .fs-order-md-5 {
708
+ order: 5;
709
+ }
710
+ .fs-order-md-6 {
711
+ order: 6;
712
+ }
713
+ .fs-order-md-7 {
714
+ order: 7;
715
+ }
716
+ .fs-order-md-8 {
717
+ order: 8;
718
+ }
719
+ .fs-order-md-9 {
720
+ order: 9;
721
+ }
722
+ .fs-order-md-10 {
723
+ order: 10;
724
+ }
725
+ .fs-order-md-11 {
726
+ order: 11;
727
+ }
728
+ .fs-order-md-12 {
729
+ order: 12;
730
+ }
731
+ .fs-col-md {
732
+ flex: 1 0 0%;
733
+ }
734
+ .fs-col-md-auto {
735
+ flex: 0 0 auto;
736
+ width: auto;
737
+ }
738
+ .fs-col-md-1 {
739
+ flex: 0 0 auto;
740
+ width: 8.3333333333%;
741
+ }
742
+ .fs-col-md-2 {
743
+ flex: 0 0 auto;
744
+ width: 16.6666666667%;
745
+ }
746
+ .fs-col-md-3 {
747
+ flex: 0 0 auto;
748
+ width: 25%;
749
+ }
750
+ .fs-col-md-4 {
751
+ flex: 0 0 auto;
752
+ width: 33.3333333333%;
753
+ }
754
+ .fs-col-md-5 {
755
+ flex: 0 0 auto;
756
+ width: 41.6666666667%;
757
+ }
758
+ .fs-col-md-6 {
759
+ flex: 0 0 auto;
760
+ width: 50%;
761
+ }
762
+ .fs-col-md-7 {
763
+ flex: 0 0 auto;
764
+ width: 58.3333333333%;
765
+ }
766
+ .fs-col-md-8 {
767
+ flex: 0 0 auto;
768
+ width: 66.6666666667%;
769
+ }
770
+ .fs-col-md-9 {
771
+ flex: 0 0 auto;
772
+ width: 75%;
773
+ }
774
+ .fs-col-md-10 {
775
+ flex: 0 0 auto;
776
+ width: 83.3333333333%;
777
+ }
778
+ .fs-col-md-11 {
779
+ flex: 0 0 auto;
780
+ width: 91.6666666667%;
781
+ }
782
+ .fs-col-md-12 {
783
+ flex: 0 0 auto;
784
+ width: 100%;
785
+ }
786
+ }
787
+ @media (min-width: 1024px) {
788
+ .fs-row-cols-lg-auto > * {
789
+ flex: 0 0 auto;
790
+ width: auto;
791
+ }
792
+ .fs-row-cols-lg-1 > * {
793
+ flex: 0 0 auto;
794
+ width: 100%;
795
+ }
796
+ .fs-row-cols-lg-2 > * {
797
+ flex: 0 0 auto;
798
+ width: 50%;
799
+ }
800
+ .fs-row-cols-lg-3 > * {
801
+ flex: 0 0 auto;
802
+ width: 33.3333333333%;
803
+ }
804
+ .fs-row-cols-lg-4 > * {
805
+ flex: 0 0 auto;
806
+ width: 25%;
807
+ }
808
+ .fs-row-cols-lg-5 > * {
809
+ flex: 0 0 auto;
810
+ width: 20%;
811
+ }
812
+ .fs-row-cols-lg-6 > * {
813
+ flex: 0 0 auto;
814
+ width: 16.6666666667%;
815
+ }
816
+ .fs-order-lg-0 {
817
+ order: 0;
818
+ }
819
+ .fs-order-lg-1 {
820
+ order: 1;
821
+ }
822
+ .fs-order-lg-2 {
823
+ order: 2;
824
+ }
825
+ .fs-order-lg-3 {
826
+ order: 3;
827
+ }
828
+ .fs-order-lg-4 {
829
+ order: 4;
830
+ }
831
+ .fs-order-lg-5 {
832
+ order: 5;
833
+ }
834
+ .fs-order-lg-6 {
835
+ order: 6;
836
+ }
837
+ .fs-order-lg-7 {
838
+ order: 7;
839
+ }
840
+ .fs-order-lg-8 {
841
+ order: 8;
842
+ }
843
+ .fs-order-lg-9 {
844
+ order: 9;
845
+ }
846
+ .fs-order-lg-10 {
847
+ order: 10;
848
+ }
849
+ .fs-order-lg-11 {
850
+ order: 11;
851
+ }
852
+ .fs-order-lg-12 {
853
+ order: 12;
854
+ }
855
+ .fs-col-lg {
856
+ flex: 1 0 0%;
857
+ }
858
+ .fs-col-lg-auto {
859
+ flex: 0 0 auto;
860
+ width: auto;
861
+ }
862
+ .fs-col-lg-1 {
863
+ flex: 0 0 auto;
864
+ width: 8.3333333333%;
865
+ }
866
+ .fs-col-lg-2 {
867
+ flex: 0 0 auto;
868
+ width: 16.6666666667%;
869
+ }
870
+ .fs-col-lg-3 {
871
+ flex: 0 0 auto;
872
+ width: 25%;
873
+ }
874
+ .fs-col-lg-4 {
875
+ flex: 0 0 auto;
876
+ width: 33.3333333333%;
877
+ }
878
+ .fs-col-lg-5 {
879
+ flex: 0 0 auto;
880
+ width: 41.6666666667%;
881
+ }
882
+ .fs-col-lg-6 {
883
+ flex: 0 0 auto;
884
+ width: 50%;
885
+ }
886
+ .fs-col-lg-7 {
887
+ flex: 0 0 auto;
888
+ width: 58.3333333333%;
889
+ }
890
+ .fs-col-lg-8 {
891
+ flex: 0 0 auto;
892
+ width: 66.6666666667%;
893
+ }
894
+ .fs-col-lg-9 {
895
+ flex: 0 0 auto;
896
+ width: 75%;
897
+ }
898
+ .fs-col-lg-10 {
899
+ flex: 0 0 auto;
900
+ width: 83.3333333333%;
901
+ }
902
+ .fs-col-lg-11 {
903
+ flex: 0 0 auto;
904
+ width: 91.6666666667%;
905
+ }
906
+ .fs-col-lg-12 {
907
+ flex: 0 0 auto;
908
+ width: 100%;
909
+ }
910
+ }
911
+ @media (min-width: 1280px) {
912
+ .fs-row-cols-xl-auto > * {
913
+ flex: 0 0 auto;
914
+ width: auto;
915
+ }
916
+ .fs-row-cols-xl-1 > * {
917
+ flex: 0 0 auto;
918
+ width: 100%;
919
+ }
920
+ .fs-row-cols-xl-2 > * {
921
+ flex: 0 0 auto;
922
+ width: 50%;
923
+ }
924
+ .fs-row-cols-xl-3 > * {
925
+ flex: 0 0 auto;
926
+ width: 33.3333333333%;
927
+ }
928
+ .fs-row-cols-xl-4 > * {
929
+ flex: 0 0 auto;
930
+ width: 25%;
931
+ }
932
+ .fs-row-cols-xl-5 > * {
933
+ flex: 0 0 auto;
934
+ width: 20%;
935
+ }
936
+ .fs-row-cols-xl-6 > * {
937
+ flex: 0 0 auto;
938
+ width: 16.6666666667%;
939
+ }
940
+ .fs-order-xl-0 {
941
+ order: 0;
942
+ }
943
+ .fs-order-xl-1 {
944
+ order: 1;
945
+ }
946
+ .fs-order-xl-2 {
947
+ order: 2;
948
+ }
949
+ .fs-order-xl-3 {
950
+ order: 3;
951
+ }
952
+ .fs-order-xl-4 {
953
+ order: 4;
954
+ }
955
+ .fs-order-xl-5 {
956
+ order: 5;
957
+ }
958
+ .fs-order-xl-6 {
959
+ order: 6;
960
+ }
961
+ .fs-order-xl-7 {
962
+ order: 7;
963
+ }
964
+ .fs-order-xl-8 {
965
+ order: 8;
966
+ }
967
+ .fs-order-xl-9 {
968
+ order: 9;
969
+ }
970
+ .fs-order-xl-10 {
971
+ order: 10;
972
+ }
973
+ .fs-order-xl-11 {
974
+ order: 11;
975
+ }
976
+ .fs-order-xl-12 {
977
+ order: 12;
978
+ }
979
+ .fs-col-xl {
980
+ flex: 1 0 0%;
981
+ }
982
+ .fs-col-xl-auto {
983
+ flex: 0 0 auto;
984
+ width: auto;
985
+ }
986
+ .fs-col-xl-1 {
987
+ flex: 0 0 auto;
988
+ width: 8.3333333333%;
989
+ }
990
+ .fs-col-xl-2 {
991
+ flex: 0 0 auto;
992
+ width: 16.6666666667%;
993
+ }
994
+ .fs-col-xl-3 {
995
+ flex: 0 0 auto;
996
+ width: 25%;
997
+ }
998
+ .fs-col-xl-4 {
999
+ flex: 0 0 auto;
1000
+ width: 33.3333333333%;
1001
+ }
1002
+ .fs-col-xl-5 {
1003
+ flex: 0 0 auto;
1004
+ width: 41.6666666667%;
1005
+ }
1006
+ .fs-col-xl-6 {
1007
+ flex: 0 0 auto;
1008
+ width: 50%;
1009
+ }
1010
+ .fs-col-xl-7 {
1011
+ flex: 0 0 auto;
1012
+ width: 58.3333333333%;
1013
+ }
1014
+ .fs-col-xl-8 {
1015
+ flex: 0 0 auto;
1016
+ width: 66.6666666667%;
1017
+ }
1018
+ .fs-col-xl-9 {
1019
+ flex: 0 0 auto;
1020
+ width: 75%;
1021
+ }
1022
+ .fs-col-xl-10 {
1023
+ flex: 0 0 auto;
1024
+ width: 83.3333333333%;
1025
+ }
1026
+ .fs-col-xl-11 {
1027
+ flex: 0 0 auto;
1028
+ width: 91.6666666667%;
1029
+ }
1030
+ .fs-col-xl-12 {
1031
+ flex: 0 0 auto;
1032
+ width: 100%;
1033
+ }
1034
+ }
1035
+ @media (min-width: 1536px) {
1036
+ .fs-row-cols-xxl-auto > * {
1037
+ flex: 0 0 auto;
1038
+ width: auto;
1039
+ }
1040
+ .fs-row-cols-xxl-1 > * {
1041
+ flex: 0 0 auto;
1042
+ width: 100%;
1043
+ }
1044
+ .fs-row-cols-xxl-2 > * {
1045
+ flex: 0 0 auto;
1046
+ width: 50%;
1047
+ }
1048
+ .fs-row-cols-xxl-3 > * {
1049
+ flex: 0 0 auto;
1050
+ width: 33.3333333333%;
1051
+ }
1052
+ .fs-row-cols-xxl-4 > * {
1053
+ flex: 0 0 auto;
1054
+ width: 25%;
1055
+ }
1056
+ .fs-row-cols-xxl-5 > * {
1057
+ flex: 0 0 auto;
1058
+ width: 20%;
1059
+ }
1060
+ .fs-row-cols-xxl-6 > * {
1061
+ flex: 0 0 auto;
1062
+ width: 16.6666666667%;
1063
+ }
1064
+ .fs-order-xxl-0 {
1065
+ order: 0;
1066
+ }
1067
+ .fs-order-xxl-1 {
1068
+ order: 1;
1069
+ }
1070
+ .fs-order-xxl-2 {
1071
+ order: 2;
1072
+ }
1073
+ .fs-order-xxl-3 {
1074
+ order: 3;
1075
+ }
1076
+ .fs-order-xxl-4 {
1077
+ order: 4;
1078
+ }
1079
+ .fs-order-xxl-5 {
1080
+ order: 5;
1081
+ }
1082
+ .fs-order-xxl-6 {
1083
+ order: 6;
1084
+ }
1085
+ .fs-order-xxl-7 {
1086
+ order: 7;
1087
+ }
1088
+ .fs-order-xxl-8 {
1089
+ order: 8;
1090
+ }
1091
+ .fs-order-xxl-9 {
1092
+ order: 9;
1093
+ }
1094
+ .fs-order-xxl-10 {
1095
+ order: 10;
1096
+ }
1097
+ .fs-order-xxl-11 {
1098
+ order: 11;
1099
+ }
1100
+ .fs-order-xxl-12 {
1101
+ order: 12;
1102
+ }
1103
+ .fs-col-xxl {
1104
+ flex: 1 0 0%;
1105
+ }
1106
+ .fs-col-xxl-auto {
1107
+ flex: 0 0 auto;
1108
+ width: auto;
1109
+ }
1110
+ .fs-col-xxl-1 {
1111
+ flex: 0 0 auto;
1112
+ width: 8.3333333333%;
1113
+ }
1114
+ .fs-col-xxl-2 {
1115
+ flex: 0 0 auto;
1116
+ width: 16.6666666667%;
1117
+ }
1118
+ .fs-col-xxl-3 {
1119
+ flex: 0 0 auto;
1120
+ width: 25%;
1121
+ }
1122
+ .fs-col-xxl-4 {
1123
+ flex: 0 0 auto;
1124
+ width: 33.3333333333%;
1125
+ }
1126
+ .fs-col-xxl-5 {
1127
+ flex: 0 0 auto;
1128
+ width: 41.6666666667%;
1129
+ }
1130
+ .fs-col-xxl-6 {
1131
+ flex: 0 0 auto;
1132
+ width: 50%;
1133
+ }
1134
+ .fs-col-xxl-7 {
1135
+ flex: 0 0 auto;
1136
+ width: 58.3333333333%;
1137
+ }
1138
+ .fs-col-xxl-8 {
1139
+ flex: 0 0 auto;
1140
+ width: 66.6666666667%;
1141
+ }
1142
+ .fs-col-xxl-9 {
1143
+ flex: 0 0 auto;
1144
+ width: 75%;
1145
+ }
1146
+ .fs-col-xxl-10 {
1147
+ flex: 0 0 auto;
1148
+ width: 83.3333333333%;
1149
+ }
1150
+ .fs-col-xxl-11 {
1151
+ flex: 0 0 auto;
1152
+ width: 91.6666666667%;
1153
+ }
1154
+ .fs-col-xxl-12 {
1155
+ flex: 0 0 auto;
1156
+ width: 100%;
1157
+ }
1158
+ }
1159
+ @media (min-width: 1920px) {
1160
+ .fs-row-cols-xxxl-auto > * {
1161
+ flex: 0 0 auto;
1162
+ width: auto;
1163
+ }
1164
+ .fs-row-cols-xxxl-1 > * {
1165
+ flex: 0 0 auto;
1166
+ width: 100%;
1167
+ }
1168
+ .fs-row-cols-xxxl-2 > * {
1169
+ flex: 0 0 auto;
1170
+ width: 50%;
1171
+ }
1172
+ .fs-row-cols-xxxl-3 > * {
1173
+ flex: 0 0 auto;
1174
+ width: 33.3333333333%;
1175
+ }
1176
+ .fs-row-cols-xxxl-4 > * {
1177
+ flex: 0 0 auto;
1178
+ width: 25%;
1179
+ }
1180
+ .fs-row-cols-xxxl-5 > * {
1181
+ flex: 0 0 auto;
1182
+ width: 20%;
1183
+ }
1184
+ .fs-row-cols-xxxl-6 > * {
1185
+ flex: 0 0 auto;
1186
+ width: 16.6666666667%;
1187
+ }
1188
+ .fs-order-xxxl-0 {
1189
+ order: 0;
1190
+ }
1191
+ .fs-order-xxxl-1 {
1192
+ order: 1;
1193
+ }
1194
+ .fs-order-xxxl-2 {
1195
+ order: 2;
1196
+ }
1197
+ .fs-order-xxxl-3 {
1198
+ order: 3;
1199
+ }
1200
+ .fs-order-xxxl-4 {
1201
+ order: 4;
1202
+ }
1203
+ .fs-order-xxxl-5 {
1204
+ order: 5;
1205
+ }
1206
+ .fs-order-xxxl-6 {
1207
+ order: 6;
1208
+ }
1209
+ .fs-order-xxxl-7 {
1210
+ order: 7;
1211
+ }
1212
+ .fs-order-xxxl-8 {
1213
+ order: 8;
1214
+ }
1215
+ .fs-order-xxxl-9 {
1216
+ order: 9;
1217
+ }
1218
+ .fs-order-xxxl-10 {
1219
+ order: 10;
1220
+ }
1221
+ .fs-order-xxxl-11 {
1222
+ order: 11;
1223
+ }
1224
+ .fs-order-xxxl-12 {
1225
+ order: 12;
1226
+ }
1227
+ .fs-col-xxxl {
1228
+ flex: 1 0 0%;
1229
+ }
1230
+ .fs-col-xxxl-auto {
1231
+ flex: 0 0 auto;
1232
+ width: auto;
1233
+ }
1234
+ .fs-col-xxxl-1 {
1235
+ flex: 0 0 auto;
1236
+ width: 8.3333333333%;
1237
+ }
1238
+ .fs-col-xxxl-2 {
1239
+ flex: 0 0 auto;
1240
+ width: 16.6666666667%;
1241
+ }
1242
+ .fs-col-xxxl-3 {
1243
+ flex: 0 0 auto;
1244
+ width: 25%;
1245
+ }
1246
+ .fs-col-xxxl-4 {
1247
+ flex: 0 0 auto;
1248
+ width: 33.3333333333%;
1249
+ }
1250
+ .fs-col-xxxl-5 {
1251
+ flex: 0 0 auto;
1252
+ width: 41.6666666667%;
1253
+ }
1254
+ .fs-col-xxxl-6 {
1255
+ flex: 0 0 auto;
1256
+ width: 50%;
1257
+ }
1258
+ .fs-col-xxxl-7 {
1259
+ flex: 0 0 auto;
1260
+ width: 58.3333333333%;
1261
+ }
1262
+ .fs-col-xxxl-8 {
1263
+ flex: 0 0 auto;
1264
+ width: 66.6666666667%;
1265
+ }
1266
+ .fs-col-xxxl-9 {
1267
+ flex: 0 0 auto;
1268
+ width: 75%;
1269
+ }
1270
+ .fs-col-xxxl-10 {
1271
+ flex: 0 0 auto;
1272
+ width: 83.3333333333%;
1273
+ }
1274
+ .fs-col-xxxl-11 {
1275
+ flex: 0 0 auto;
1276
+ width: 91.6666666667%;
1277
+ }
1278
+ .fs-col-xxxl-12 {
1279
+ flex: 0 0 auto;
1280
+ width: 100%;
1281
+ }
1282
+ }
1283
+ }
1284
+ @layer layout {
1285
+ .fs-sidebar {
1286
+ display: flex;
1287
+ flex-wrap: wrap;
1288
+ gap: var(--fs-sidebar-gap, 1rem);
1289
+ }
1290
+ .fs-sidebar-aside {
1291
+ flex-basis: var(--fs-sidebar-width, 16rem);
1292
+ flex-grow: 1;
1293
+ }
1294
+ .fs-sidebar-content {
1295
+ flex-basis: 0;
1296
+ flex-grow: 999;
1297
+ min-width: 50%;
1298
+ }
1299
+ .fs-sidebar-reverse {
1300
+ flex-direction: row-reverse;
1301
+ }
1302
+ .fs-sidebar-gap-0 {
1303
+ --fs-sidebar-gap: 0;
1304
+ }
1305
+ .fs-sidebar-gap-1 {
1306
+ --fs-sidebar-gap: 0.25rem;
1307
+ }
1308
+ .fs-sidebar-gap-2 {
1309
+ --fs-sidebar-gap: 0.5rem;
1310
+ }
1311
+ .fs-sidebar-gap-3 {
1312
+ --fs-sidebar-gap: 1rem;
1313
+ }
1314
+ .fs-sidebar-gap-4 {
1315
+ --fs-sidebar-gap: 1.5rem;
1316
+ }
1317
+ .fs-sidebar-gap-5 {
1318
+ --fs-sidebar-gap: 3rem;
1319
+ }
1320
+ .fs-sidebar-width-sm {
1321
+ --fs-sidebar-width: 120px;
1322
+ }
1323
+ .fs-sidebar-width-md {
1324
+ --fs-sidebar-width: 240px;
1325
+ }
1326
+ .fs-sidebar-width-lg {
1327
+ --fs-sidebar-width: 360px;
1328
+ }
1329
+ .fs-sidebar-width-xl {
1330
+ --fs-sidebar-width: 480px;
1331
+ }
1332
+ .fs-sidebar-width-xxl {
1333
+ --fs-sidebar-width: 600px;
1334
+ }
1335
+ .fs-sidebar-width-xxxl {
1336
+ --fs-sidebar-width: 720px;
1337
+ }
1338
+ }
1339
+ @layer layout {
1340
+ .fs-stack {
1341
+ display: flex;
1342
+ flex-direction: column;
1343
+ gap: var(--fs-stack-gap, 1rem);
1344
+ }
1345
+ .fs-stack-gap-0 {
1346
+ --fs-stack-gap: 0;
1347
+ }
1348
+ .fs-stack-gap-1 {
1349
+ --fs-stack-gap: 0.25rem;
1350
+ }
1351
+ .fs-stack-gap-2 {
1352
+ --fs-stack-gap: 0.5rem;
1353
+ }
1354
+ .fs-stack-gap-3 {
1355
+ --fs-stack-gap: 1rem;
1356
+ }
1357
+ .fs-stack-gap-4 {
1358
+ --fs-stack-gap: 1.5rem;
1359
+ }
1360
+ .fs-stack-gap-5 {
1361
+ --fs-stack-gap: 3rem;
1362
+ }
1363
+ }
1364
+ @layer tokens {
1365
+ [data-fs-brand=violet] {
1366
+ --fs-color-primary: #6d28d9;
1367
+ --fs-alert-primary-bg: rgb(229.8834406263, 225.8717327657, 252.5458384302);
1368
+ --fs-alert-primary-text: rgb(37.7006407433, 8.7385189481, 83.109047167);
1369
+ --fs-feedback-primary-bg: rgb(229.8834406263, 225.8717327657, 252.5458384302);
1370
+ }
1371
+ [data-fs-brand=violet][data-theme=dark],
1372
+ [data-theme=dark] [data-fs-brand=violet] {
1373
+ --fs-color-primary: rgb(114.6495158739, 57.1165361442, 219.9746158745);
1374
+ --fs-alert-primary-bg: rgb(31.4819726714, 47.0564006856, 82.6607876597);
1375
+ --fs-alert-primary-text: rgb(167.4962913963, 147.746130571, 240.0249534535);
1376
+ --fs-feedback-primary-bg: rgb(31.4819726714, 47.0564006856, 82.6607876597);
1377
+ }
1378
+ @supports (color: oklch(0% 0 0deg)) {
1379
+ [data-fs-brand=violet] {
1380
+ --fs-color-primary: oklch(49.0666497236% 0.2412317343 292.5809393311deg);
1381
+ --fs-alert-primary-bg: oklch(92.3599974585% 0.0361847601 292.5809393311deg);
1382
+ --fs-alert-primary-text: oklch(24.5333248618% 0.1206158672 292.5809393311deg);
1383
+ --fs-feedback-primary-bg: oklch(92.3599974585% 0.0361847601 292.5809393311deg);
1384
+ }
1385
+ [data-fs-brand=violet][data-theme=dark],
1386
+ [data-theme=dark] [data-fs-brand=violet] {
1387
+ --fs-color-primary: oklch(51.6133172374% 0.2291701476 292.5809393311deg);
1388
+ --fs-alert-primary-bg: oklch(31.117092664% 0.067505667 264.9134801836deg);
1389
+ --fs-alert-primary-text: oklch(71.986657348% 0.1326774539 292.5809393311deg);
1390
+ --fs-feedback-primary-bg: oklch(31.117092664% 0.067505667 264.9134801836deg);
1391
+ }
1392
+ }
1393
+ [data-fs-brand=corporate] {
1394
+ --fs-color-primary: #1d4e89;
1395
+ --fs-alert-primary-bg: rgb(219.2237954153, 227.2186121739, 237.6990809983);
1396
+ --fs-alert-primary-text: rgb(5.0598830676, 24.6667463069, 49.4731905568);
1397
+ --fs-feedback-primary-bg: rgb(219.2237954153, 227.2186121739, 237.6990809983);
1398
+ }
1399
+ [data-fs-brand=corporate][data-theme=dark],
1400
+ [data-theme=dark] [data-fs-brand=corporate] {
1401
+ --fs-color-primary: rgb(40.8593466225, 86.5224214637, 143.0926598584);
1402
+ --fs-alert-primary-bg: rgb(31.2586947979, 46.3186220749, 70.1321749545);
1403
+ --fs-alert-primary-text: rgb(127.9940036809, 155.4045223568, 190.9765129762);
1404
+ --fs-feedback-primary-bg: rgb(31.2586947979, 46.3186220749, 70.1321749545);
1405
+ }
1406
+ [data-fs-brand=vibrant] {
1407
+ --fs-color-primary: #f2542d;
1408
+ --fs-alert-primary-bg: rgb(255, 231.3637253432, 224.6456124112);
1409
+ --fs-alert-primary-text: rgb(93.6202523577, 27.1894355526, 10.7919554552);
1410
+ --fs-feedback-primary-bg: rgb(255, 231.3637253432, 224.6456124112);
1411
+ }
1412
+ [data-fs-brand=vibrant][data-theme=dark],
1413
+ [data-theme=dark] [data-fs-brand=vibrant] {
1414
+ --fs-color-primary: rgb(244.0763687777, 94.774513804, 58.7750761343);
1415
+ --fs-alert-primary-bg: rgb(48.9487024594, 50.7990197305, 85.9119190034);
1416
+ --fs-alert-primary-text: rgb(255, 166.953251087, 144.6609410048);
1417
+ --fs-feedback-primary-bg: rgb(48.9487024594, 50.7990197305, 85.9119190034);
1418
+ }
1419
+ @supports (color: oklch(0% 0 0deg)) {
1420
+ [data-fs-brand=corporate] {
1421
+ --fs-color-primary: oklch(42.3377990386% 0.1112359961 255.1073474093deg);
1422
+ --fs-alert-primary-bg: oklch(91.3506698558% 0.0166853994 255.1073474093deg);
1423
+ --fs-alert-primary-text: oklch(21.1688995193% 0.055617998 255.1073474093deg);
1424
+ --fs-feedback-primary-bg: oklch(91.3506698558% 0.0166853994 255.1073474093deg);
1425
+ }
1426
+ [data-fs-brand=corporate][data-theme=dark],
1427
+ [data-theme=dark] [data-fs-brand=corporate] {
1428
+ --fs-color-primary: oklch(45.2209090867% 0.1056741963 255.1073474093deg);
1429
+ --fs-alert-primary-bg: oklch(30.1077650613% 0.0480063062 259.2924413953deg);
1430
+ --fs-alert-primary-text: oklch(68.2857894712% 0.0611797979 255.1073474093deg);
1431
+ --fs-feedback-primary-bg: oklch(30.1077650613% 0.0480063062 259.2924413953deg);
1432
+ }
1433
+ [data-fs-brand=vibrant] {
1434
+ --fs-color-primary: oklch(65.5786741493% 0.2007639921 34.7814711243deg);
1435
+ --fs-alert-primary-bg: oklch(94.8368011224% 0.0301145988 34.7814711243deg);
1436
+ --fs-alert-primary-text: oklch(32.7893370747% 0.1003819961 34.7814711243deg);
1437
+ --fs-feedback-primary-bg: oklch(94.8368011224% 0.0301145988 34.7814711243deg);
1438
+ }
1439
+ [data-fs-brand=vibrant][data-theme=dark],
1440
+ [data-theme=dark] [data-fs-brand=vibrant] {
1441
+ --fs-color-primary: oklch(67.2997404419% 0.1907257925 34.7814711243deg);
1442
+ --fs-alert-primary-bg: oklch(33.5938963279% 0.0614355056 280.2435599526deg);
1443
+ --fs-alert-primary-text: oklch(81.0682707821% 0.1104201957 34.7814711243deg);
1444
+ --fs-feedback-primary-bg: oklch(33.5938963279% 0.0614355056 280.2435599526deg);
1445
+ }
1446
+ }
1447
+ }
1448
+ @layer overrides {
1449
+ [data-fs-brand=vibrant] .fs-btn-primary,
1450
+ [data-fs-brand=vibrant] .fs-badge-primary {
1451
+ --fs-btn-color: #000000;
1452
+ --fs-badge-color: #000000;
1453
+ }
1454
+ [data-fs-brand=vibrant] .fs-check {
1455
+ --fs-check-mark: #000000;
1456
+ }
1457
+ }
1458
+ @layer tokens {
1459
+ [data-theme=dark],
1460
+ [data-fs-theme=dark] {
1461
+ --fs-color-text: #f1f3f4;
1462
+ --fs-color-muted: #bdc1c6;
1463
+ --fs-color-border: #3c4043;
1464
+ --fs-color-surface: #202124;
1465
+ --fs-color-subtle: #2b2c2f;
1466
+ --fs-color-bg-surface: var(--fs-color-surface);
1467
+ --fs-color-bg-subtle: var(--fs-color-subtle);
1468
+ --fs-color-surface-raised: var(--fs-color-surface);
1469
+ --fs-color-surface-interactive: var(--fs-color-subtle);
1470
+ --fs-color-text-primary: var(--fs-color-text);
1471
+ --fs-color-text-muted: var(--fs-color-muted);
1472
+ --fs-color-border-default: var(--fs-color-border);
1473
+ --fs-color-focus: var(--fs-color-primary);
1474
+ --fs-color-action-primary: var(--fs-color-primary);
1475
+ --fs-color-action-danger: var(--fs-color-danger);
1476
+ --fs-shadow-sm: 0 1px 3px rgb(0 0 0 / 50%), 0 1px 2px rgb(0 0 0 / 40%);
1477
+ --fs-shadow-md: 0 6px 12px rgb(0 0 0 / 55%), 0 3px 6px rgb(0 0 0 / 45%);
1478
+ --fs-shadow-lg: 0 15px 30px rgb(0 0 0 / 60%), 0 6px 12px rgb(0 0 0 / 50%);
1479
+ --fs-tooltip-bg: #f8fafc;
1480
+ --fs-tooltip-text: #1e293b;
1481
+ --fs-color-primary: rgb(39.8728684152, 106.2372587275, 232.1894887664);
1482
+ --fs-alert-primary-bg: rgb(30.765779113, 49.9974662348, 82.3021425489);
1483
+ --fs-alert-primary-text: rgb(130.6636212695, 172.0850768824, 246.4419684583);
1484
+ --fs-feedback-primary-bg: rgb(30.765779113, 49.9974662348, 82.3021425489);
1485
+ --fs-color-secondary: rgb(114.3557068426, 129.039220146, 150.1520317181);
1486
+ --fs-alert-secondary-bg: rgb(39.6548148226, 51.4270943358, 70.2648514061);
1487
+ --fs-alert-secondary-text: rgb(166.7597509121, 176.2809684237, 189.9919576187);
1488
+ --fs-feedback-secondary-bg: rgb(39.6548148226, 51.4270943358, 70.2648514061);
1489
+ --fs-color-success: rgb(134.4501166043, 226.9563331209, 149.6185042518);
1490
+ --fs-alert-success-bg: rgb(24.8621518491, 61.9088085702, 89.0318819222);
1491
+ --fs-alert-success-text: rgb(155.0475916512, 231.7231823866, 166.1609492581);
1492
+ --fs-feedback-success-bg: rgb(24.8621518491, 61.9088085702, 89.0318819222);
1493
+ --fs-color-warning: rgb(252.9400238762, 208.7461261831, 137.9221837268);
1494
+ --fs-alert-warning-bg: rgb(59.1359779173, 56.6792370273, 88.6687774507);
1495
+ --fs-alert-warning-text: rgb(253.5439861058, 216.1213263099, 157.1705651606);
1496
+ --fs-feedback-warning-bg: rgb(59.1359779173, 56.6792370273, 88.6687774507);
1497
+ --fs-color-danger: rgb(208.1189955268, 64.9740184262, 63.4302936954);
1498
+ --fs-alert-danger-bg: rgb(44.6823973866, 47.5125073063, 81.2083778204);
1499
+ --fs-alert-danger-text: rgb(235.4050745756, 149.9650253478, 142.4924034553);
1500
+ --fs-feedback-danger-bg: rgb(44.6823973866, 47.5125073063, 81.2083778204);
1501
+ --fs-color-info: #5e5cc7;
1502
+ --fs-alert-info-bg: rgb(35.0058091619, 49.6887857769, 78.5757788254);
1503
+ --fs-alert-info-text: rgb(160.628671266, 165.881962789, 227.610600335);
1504
+ --fs-feedback-info-bg: rgb(35.0058091619, 49.6887857769, 78.5757788254);
1505
+ }
1506
+ @supports (color: oklch(0% 0 0deg)) {
1507
+ [data-theme=dark],
1508
+ [data-fs-theme=dark] {
1509
+ --fs-color-text: oklch(96.2913383165% 0.002529697 228.7848682695deg);
1510
+ --fs-color-muted: oklch(80.9268110646% 0.0083071608 253.8653061211deg);
1511
+ --fs-color-border: oklch(36.8827622528% 0.0074489239 240.018838067deg);
1512
+ --fs-color-surface: oklch(24.7936263361% 0.0058460141 271.1764187765deg);
1513
+ --fs-color-subtle: oklch(29.3286259539% 0.0055990771 271.2234269855deg);
1514
+ --fs-color-bg-surface: var(--fs-color-surface);
1515
+ --fs-color-bg-subtle: var(--fs-color-subtle);
1516
+ --fs-color-surface-raised: var(--fs-color-surface);
1517
+ --fs-color-surface-interactive: var(--fs-color-subtle);
1518
+ --fs-color-text-primary: var(--fs-color-text);
1519
+ --fs-color-text-muted: var(--fs-color-muted);
1520
+ --fs-color-border-default: var(--fs-color-border);
1521
+ --fs-color-focus: var(--fs-color-primary);
1522
+ --fs-color-action-primary: var(--fs-color-primary);
1523
+ --fs-color-action-danger: var(--fs-color-danger);
1524
+ --fs-tooltip-bg: oklch(98.4151869501% 0.0034126992 247.8577745944deg);
1525
+ --fs-tooltip-text: oklch(27.9495237712% 0.0368481257 260.0309873929deg);
1526
+ --fs-color-primary: oklch(55.884857057% 0.2025537915 261.6264320248deg);
1527
+ --fs-alert-primary-bg: oklch(31.7915463198% 0.0633030844 260.2703040876deg);
1528
+ --fs-alert-primary-text: oklch(74.4596540856% 0.1172679846 261.6264320248deg);
1529
+ --fs-feedback-primary-bg: oklch(31.7915463198% 0.0633030844 260.2703040876deg);
1530
+ --fs-color-secondary: oklch(59.8951906896% 0.0366453387 257.4166191214deg);
1531
+ --fs-alert-secondary-bg: oklch(32.0729603204% 0.0374284633 259.6388321521deg);
1532
+ --fs-alert-secondary-text: oklch(75.4915054214% 0.0223943736 257.4166191214deg);
1533
+ --fs-feedback-secondary-bg: oklch(32.0729603204% 0.0374284633 259.6388321521deg);
1534
+ --fs-color-success: oklch(83.8485321344% 0.139498201 148.125846236deg);
1535
+ --fs-alert-success-bg: oklch(35.0298333903% 0.0635127994 243.2452162193deg);
1536
+ --fs-alert-success-text: oklch(86.3333733445% 0.1180369393 148.125846236deg);
1537
+ --fs-feedback-success-bg: oklch(35.0298333903% 0.0635127994 243.2452162193deg);
1538
+ --fs-color-warning: oklch(88.2682030181% 0.1015699084 78.6575213966deg);
1539
+ --fs-alert-warning-bg: oklch(36.0497574404% 0.0547601164 286.8249674934deg);
1540
+ --fs-alert-warning-text: oklch(90.0730948615% 0.0859437686 78.6575213966deg);
1541
+ --fs-feedback-warning-bg: oklch(36.0497574404% 0.0547601164 286.8249674934deg);
1542
+ --fs-color-danger: oklch(58.1670482336% 0.1802407312 25.2407937498deg);
1543
+ --fs-alert-danger-bg: oklch(32.151892295% 0.0597799696 278.8124583464deg);
1544
+ --fs-alert-danger-text: oklch(75.7809226615% 0.104349897 25.2407937498deg);
1545
+ --fs-feedback-danger-bg: oklch(32.151892295% 0.0597799696 278.8124583464deg);
1546
+ --fs-color-info: oklch(53.3359780029% 0.1620131129 280.2231949375deg);
1547
+ --fs-alert-info-bg: oklch(31.7574919059% 0.0556228738 263.0598185246deg);
1548
+ --fs-alert-info-text: oklch(74.3347879016% 0.0891072121 280.2231949375deg);
1549
+ --fs-feedback-info-bg: oklch(31.7574919059% 0.0556228738 263.0598185246deg);
1550
+ }
1551
+ }
1552
+ @media (prefers-color-scheme: dark) {
1553
+ [data-fs-theme=auto] {
1554
+ --fs-color-text: #f1f3f4;
1555
+ --fs-color-muted: #bdc1c6;
1556
+ --fs-color-border: #3c4043;
1557
+ --fs-color-surface: #202124;
1558
+ --fs-color-subtle: #2b2c2f;
1559
+ --fs-color-bg-surface: var(--fs-color-surface);
1560
+ --fs-color-bg-subtle: var(--fs-color-subtle);
1561
+ --fs-color-surface-raised: var(--fs-color-surface);
1562
+ --fs-color-surface-interactive: var(--fs-color-subtle);
1563
+ --fs-color-text-primary: var(--fs-color-text);
1564
+ --fs-color-text-muted: var(--fs-color-muted);
1565
+ --fs-color-border-default: var(--fs-color-border);
1566
+ --fs-color-focus: var(--fs-color-primary);
1567
+ --fs-tooltip-bg: #f8fafc;
1568
+ --fs-tooltip-text: #1e293b;
1569
+ }
1570
+ }
1571
+ @media (forced-colors: active) {
1572
+ :root,
1573
+ [data-theme=dark],
1574
+ [data-fs-theme=light],
1575
+ [data-fs-theme=dark],
1576
+ [data-fs-theme=auto] {
1577
+ --fs-color-border: CanvasText;
1578
+ --fs-color-text: CanvasText;
1579
+ --fs-color-surface: Canvas;
1580
+ --fs-color-subtle: Canvas;
1581
+ --fs-focus-color: Highlight;
1582
+ }
1583
+ }
1584
+ }
1585
+ /*# sourceMappingURL=fokus-core.css.map */