@bpmn-io/form-js-viewer 1.5.0 → 1.6.1

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 (46) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +189 -189
  3. package/dist/assets/form-js-base.css +1244 -1040
  4. package/dist/assets/form-js.css +219 -16
  5. package/dist/index.cjs +2305 -1089
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.es.js +2299 -1090
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/types/Form.d.ts +15 -4
  10. package/dist/types/core/FieldFactory.d.ts +2 -0
  11. package/dist/types/core/FormFieldRegistry.d.ts +1 -0
  12. package/dist/types/core/PathRegistry.d.ts +7 -3
  13. package/dist/types/features/{expression-language → expressionLanguage}/ConditionChecker.d.ts +8 -4
  14. package/dist/types/features/index.d.ts +4 -2
  15. package/dist/types/features/repeatRender/RepeatRenderManager.d.ts +21 -0
  16. package/dist/types/features/repeatRender/index.d.ts +7 -0
  17. package/dist/types/features/viewerCommands/ViewerCommands.d.ts +1 -1
  18. package/dist/types/index.d.ts +1 -1
  19. package/dist/types/render/components/Label.d.ts +21 -1
  20. package/dist/types/render/components/Util.d.ts +1 -1
  21. package/dist/types/render/components/form-fields/DynamicList.d.ts +18 -0
  22. package/dist/types/render/components/form-fields/Table.d.ts +71 -0
  23. package/dist/types/render/components/form-fields/parts/ChildrenRenderer.d.ts +1 -0
  24. package/dist/types/render/components/index.d.ts +3 -1
  25. package/dist/types/render/context/FormRenderContext.d.ts +4 -3
  26. package/dist/types/render/context/LocalExpressionContext.d.ts +7 -0
  27. package/dist/types/render/context/index.d.ts +1 -0
  28. package/dist/types/render/hooks/index.d.ts +1 -0
  29. package/dist/types/render/hooks/useExpressionEvaluation.d.ts +3 -3
  30. package/dist/types/render/hooks/useFilteredFormData.d.ts +1 -0
  31. package/dist/types/render/hooks/useScrollIntoView.d.ts +18 -0
  32. package/dist/types/render/hooks/useTemplateEvaluation.d.ts +1 -1
  33. package/dist/types/types.d.ts +35 -35
  34. package/dist/types/util/constants/OptionsSourceConstants.d.ts +19 -0
  35. package/dist/types/util/constants/index.d.ts +1 -1
  36. package/dist/types/util/getSchemaVariables.d.ts +39 -0
  37. package/dist/types/util/index.d.ts +3 -52
  38. package/dist/types/util/simple.d.ts +20 -0
  39. package/dist/types/util/structure.d.ts +1 -0
  40. package/package.json +4 -4
  41. package/dist/types/render/components/form-fields/parts/Grid.d.ts +0 -1
  42. package/dist/types/util/constants/ValuesSourceConstants.d.ts +0 -19
  43. /package/dist/types/features/{expression-language → expressionLanguage}/FeelExpressionLanguage.d.ts +0 -0
  44. /package/dist/types/features/{expression-language → expressionLanguage}/FeelersTemplating.d.ts +0 -0
  45. /package/dist/types/features/{expression-language → expressionLanguage}/index.d.ts +0 -0
  46. /package/dist/types/features/{expression-language → expressionLanguage}/variableExtractionHelpers.d.ts +0 -0
package/dist/assets/form-js-base.css CHANGED
@@ -1,1040 +1,1244 @@
1
- /**
2
- * Theming
3
- */
4
- .fjs-container {
5
- --color-grey-225-10-15: hsl(225, 10%, 15%);
6
- --color-grey-225-10-35: hsl(225, 10%, 35%);
7
- --color-grey-225-10-45: hsl(225, 10%, 45%);
8
- --color-grey-225-10-55: hsl(225, 10%, 55%);
9
- --color-grey-225-10-75: hsl(225, 10%, 75%);
10
- --color-grey-225-10-80: hsl(225, 10%, 80%);
11
- --color-grey-225-10-85: hsl(225, 10%, 85%);
12
- --color-grey-225-10-90: hsl(225, 10%, 90%);
13
- --color-grey-225-10-93: hsl(225, 10%, 93%);
14
- --color-grey-225-10-95: hsl(225, 10%, 95%);
15
- --color-grey-225-10-97: hsl(225, 10%, 97%);
16
-
17
- --color-blue-219-100-53: hsl(219, 99%, 53%);
18
- --color-blue-219-100-53-05: hsla(219, 99%, 53%, 0.5);
19
- --color-blue-205-100-40: hsl(205, 100%, 40%);
20
- --color-blue-205-100-45: hsl(205, 100%, 45%);
21
- --color-blue-205-100-50: hsl(205, 100%, 50%);
22
- --color-blue-205-100-80: hsl(205, 100%, 80%);
23
- --color-blue-205-100-95: hsl(205, 100%, 95%);
24
-
25
- --color-green-150-86-44: hsl(150, 86%, 44%);
26
-
27
- --color-red-360-100-40: hsl(360, 100%, 40%);
28
- --color-red-360-100-45: hsl(360, 100%, 45%);
29
- --color-red-360-100-92: hsl(360, 100%, 92%);
30
- --color-red-360-100-95: hsl(360, 100%, 95%);
31
- --color-red-360-100-97: hsl(360, 100%, 97%);
32
-
33
- --color-white: hsl(0, 0%, 100%);
34
- --color-black: hsl(0, 0%, 0%);
35
-
36
- /**
37
- * Specify color variables in the following schema:
38
- * 1 - use specified layer
39
- * 2 - use layer one
40
- * 3 - use fallback
41
- */
42
- --color-background: var(
43
- --cds-field,
44
- var(--cds-field-01, var(--color-white))
45
- );
46
- --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
47
- --color-background-readonly: var(--cds-background, var(--color-grey-225-10-95));
48
- --color-background-adornment: var(
49
- --cds-field,
50
- var(--cds-field-01, var(--color-grey-225-10-95))
51
- );
52
- --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
53
- --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
54
- --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
55
- --color-layer: var(
56
- --cds-layer,
57
- var(--cds-layer-01, var(--color-white))
58
- );
59
-
60
- --color-icon-base: var(--cds-icon-primary, var(--color-black));
61
- --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
62
- --color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
63
- --color-text-light: var(--cds-text-secondary, var(--color-grey-225-10-35));
64
- --color-text-lighter: var(--cds-text-secondary, var(--color-grey-225-10-45));
65
- --color-text-lightest: var(--cds-text-placeholder, var(--color-grey-225-10-55));
66
- --color-text-inverted: var(--cds-text-inverse, var(--color-text));
67
- --color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
68
-
69
- --color-borders: var(
70
- --cds-border-strong,
71
- var(--cds-border-strong-01, var(--color-grey-225-10-55))
72
- );
73
- --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
74
- --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
75
- --color-borders-adornment: var(
76
- --cds-border-subtle,
77
- var(--cds-border-subtle-01, var(--color-grey-225-10-85))
78
- );
79
- --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
80
- --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
81
-
82
- --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
83
- --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
84
- --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
85
- --color-accent-readonly: var(
86
- --cds-border-strong,
87
- var(--cds-border-strong-01, var(--color-grey-225-10-55))
88
- );
89
- --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
90
- --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
91
-
92
- --font-family: 'IBM Plex Sans', sans-serif;
93
-
94
- --font-size-group: 15px;
95
- --font-size-base: 14px;
96
- --font-size-input: 14px;
97
- --font-size-label: 12px;
98
-
99
- --line-height-base: 20px;
100
- --line-height-input: 18px;
101
- --line-height-label: 16px;
102
-
103
- --letter-spacing-base: .16px;
104
- --letter-spacing-input: .16px;
105
- --letter-spacing-label: .32px;
106
-
107
- --form-field-height: 36px;
108
-
109
- --border-definition: 1px solid var(--color-borders);
110
- --border-definition-adornment: 1px solid var(--color-borders-adornment);
111
- --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
112
- --border-definition-disabled: 1px solid var(--color-borders-disabled);
113
- --border-definition-readonly: 1px solid var(--color-borders-readonly);
114
-
115
- height: 100%;
116
- }
117
-
118
- .fjs-no-theme {
119
- --cds-field: initial;
120
- --cds-field-01: initial;
121
- --cds-background: initial;
122
- --cds-background-inverse: initial;
123
- --cds-background-inverse-hover: initial;
124
- --cds-background-active: initial;
125
- --cds-layer: initial;
126
- --cds-layer-01: initial;
127
- --cds-layer-02: initial;
128
- --cds-icon-primary: initial;
129
- --cds-icon-secondary: initial;
130
- --cds-icon-inverse: initial;
131
- --cds-text-primary: initial;
132
- --cds-text-secondary: initial;
133
- --cds-text-placeholder: initial;
134
- --cds-text-inverse: initial;
135
- --cds-text-disabled: initial;
136
- --cds-border-strong: initial;
137
- --cds-border-strong-01: initial;
138
- --cds-border-disabled: initial;
139
- --cds-border-subtle: initial;
140
- --cds-border-subtle-01: initial;
141
- --cds-border-inverse: initial;
142
- --cds-text-error: initial;
143
- --cds-link-primary: initial;
144
- --cds-button-primary: initial;
145
- --cds-shadow: initial;
146
- --cds-focus: initial;
147
- --cds-interactive: initial;
148
- --cds-border-interactive: initial;
149
- --cds-highlight: initial;
150
- --cds-field-02: initial;
151
- --cds-field-hover-02: initial;
152
- --cds-toggle-off: initial;
153
- }
154
-
155
- /**
156
- * Layout styles
157
- */
158
- .fjs-container .fjs-vertical-layout {
159
- display: flex;
160
- flex-direction: column;
161
- }
162
-
163
- .fjs-container .fjs-columns {
164
- display: flex;
165
- flex-direction: row;
166
- }
167
-
168
- .fjs-container .fjs-vertical-group {
169
- display: flex;
170
- flex: 1;
171
- width: 100%;
172
- }
173
-
174
- .fjs-container .fjs-layout-row {
175
- flex: auto;
176
- padding: 9px 0;
177
- position: relative;
178
- }
179
-
180
- .fjs-container .fjs-layout-row:empty {
181
- display: none;
182
- }
183
-
184
- .fjs-container .fjs-column {
185
- flex-grow: 1;
186
- }
187
-
188
- .fjs-container img {
189
- max-width: 100%;
190
- }
191
-
192
- .fjs-container .cds--grid {
193
- margin-left: initial;
194
- margin-right: initial;
195
- }
196
-
197
- .fjs-container .cds--grid .cds--row {
198
- align-items: start;
199
- margin-left: 0;
200
- margin-right: 0;
201
- }
202
-
203
- .fjs-container .cds--grid .cds--grid .cds--row {
204
- margin-left: -1rem;
205
- margin-right: -1rem;
206
- }
207
-
208
- @media (max-width: 66rem) {
209
- .cds--col {
210
- flex-basis: unset !important;
211
- }
212
- }
213
-
214
- /**
215
- * Visual styles
216
- */
217
- .fjs-container .fjs-form {
218
- font-family: var(--font-family);
219
- font-size: var(--font-size-base);
220
- line-height: var(--line-height-base);
221
- letter-spacing: var(--letter-spacing-base);
222
- font-weight: 400;
223
- color: var(--color-text);
224
- position: relative;
225
- padding: 0 4px;
226
- }
227
-
228
- .fjs-container .fjs-form * {
229
- box-sizing: border-box;
230
- }
231
-
232
- .fjs-container .fjs-children {
233
- display: flex;
234
- flex-direction: column;
235
- flex-grow: 1;
236
- min-height: 80px;
237
- }
238
-
239
- .fjs-container .fjs-element {
240
- display: flex;
241
- flex-direction: column;
242
- margin: 0 4px 5px 4px;
243
- padding: 2px 0px;
244
- }
245
-
246
- .fjs-container .fjs-form .fjs-element {
247
- margin: 0;
248
- }
249
-
250
- .fjs-container .fjs-element:first-of-type {
251
- margin-top: 8px;
252
- }
253
-
254
- .fjs-container .fjs-form-field:not(.fjs-powered-by) {
255
- margin: 1px 8px;
256
- }
257
-
258
- .fjs-container .fjs-powered-by {
259
- margin: 16px;
260
- }
261
-
262
- .fjs-container .fjs-form .fjs-element {
263
- margin: 0;
264
- }
265
-
266
- .fjs-container .fjs-input,
267
- .fjs-container .fjs-taglist-input,
268
- .fjs-container .fjs-textarea,
269
- .fjs-container .fjs-select {
270
- color: var(--color-text);
271
- border-color: var(--color-borders);
272
- background-color: var(--color-background);
273
- font-family: inherit;
274
- line-height: inherit;
275
- letter-spacing: inherit;
276
- }
277
-
278
- .fjs-container .fjs-button {
279
- font-family: inherit;
280
- line-height: inherit;
281
- letter-spacing: inherit;
282
- }
283
-
284
- .fjs-container .fjs-input::placeholder,
285
- .fjs-container .fjs-taglist-input::placeholder,
286
- .fjs-container .fjs-textarea::placeholder,
287
- .fjs-container .fjs-select > option:disabled,
288
- .fjs-container .fjs-select [disabled],
289
- .fjs-container .fjs-select > option:read-only,
290
- .fjs-container .fjs-select [read-only] {
291
- color: var(--color-text-lightest);
292
- font-size: var(--font-size-input);
293
- line-height: var(--line-height-input);
294
- letter-spacing: var(--letter-spacing-input);
295
- opacity: 1;
296
- }
297
-
298
- .fjs-container .fjs-form-field-label {
299
- display: flex;
300
- align-items: center;
301
- white-space: nowrap;
302
- overflow: hidden;
303
- color: var(--color-text-light);
304
- }
305
-
306
- .fjs-container .fjs-incollapsible-label {
307
- min-height: var(--line-height-label);
308
- }
309
-
310
- .fjs-container .fjs-form-field-label,
311
- .fjs-container .fjs-form-field-description,
312
- .fjs-container .fjs-form-field-error {
313
- font-size: var(--font-size-label);
314
- line-height: var(--line-height-label);
315
- letter-spacing: var(--letter-spacing-label);
316
- }
317
-
318
- .fjs-container .fjs-form-field-description {
319
- color: var(--color-text-lighter);
320
- }
321
-
322
- .fjs-container .fjs-form-field-group {
323
- padding: 10px 6px 0 6px;
324
- margin: 0 10px;
325
- }
326
-
327
- .fjs-container .fjs-form-field-group .cds--grid {
328
- padding: 4px 16px;
329
- }
330
-
331
- .fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
332
- .fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
333
- margin-left: -6px;
334
- }
335
-
336
- .fjs-container .fjs-form-field-group .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group),
337
- .fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
338
- margin-right: -6px;
339
- }
340
-
341
- .fjs-container .fjs-form-field-group .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
342
- margin-left: 11px;
343
- }
344
-
345
- .fjs-container .fjs-form-field-group .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-group:not(.fjs-editor-container .fjs-form-field-group) {
346
- margin-right: 11px;
347
- }
348
-
349
- .fjs-container .fjs-form-field-group.fjs-outlined {
350
- outline: solid var(--color-borders-group) 2px;
351
- }
352
-
353
- .fjs-container .fjs-form-field-group label {
354
- font-size: var(--font-size-label);
355
- }
356
-
357
- .fjs-container .fjs-form-field-group .fjs-form-field-group .cds--grid {
358
- padding-left: 2rem;
359
- padding-right: 2rem;
360
- }
361
-
362
- .fjs-container .fjs-form-field-group > label {
363
- font-size: var(--font-size-group);
364
- line-height: var(--line-height-input);
365
- margin-left: 7px;
366
- }
367
-
368
- .fjs-container .fjs-form-field-checkbox .fjs-form-field-label,
369
- .fjs-container .fjs-form-field-checklist .fjs-form-field-label:not(:first-child),
370
- .fjs-container .fjs-form-field-radio .fjs-form-field-label:not(:first-child) {
371
- font-size: var(--font-size-input);
372
- line-height: var(--line-height-input);
373
- letter-spacing: var(--letter-spacing-input);
374
- color: var(--color-text);
375
- }
376
-
377
- .fjs-container .fjs-form-field-checklist .fjs-form-field-label:first-child,
378
- .fjs-container .fjs-form-field-radio .fjs-form-field-label:first-child {
379
- margin-bottom: 4px;
380
- }
381
-
382
- .fjs-container .fjs-form-field.required label::after,
383
- .fjs-container .fjs-form-field.required .group-title::after {
384
- content: '*';
385
- }
386
-
387
- .fjs-container .fjs-checkbox.group.required label::after,
388
- .fjs-container .fjs-radio.required label::after {
389
- display: none;
390
- }
391
-
392
- .fjs-container .fjs-input,
393
- .fjs-container .fjs-textarea,
394
- .fjs-container .fjs-select {
395
- background-color: var(--color-background);
396
- font-size: var(--font-size-input);
397
- line-height: var(--line-height-input);
398
- letter-spacing: var(--letter-spacing-input);
399
- }
400
-
401
- .fjs-container .fjs-input-adornment {
402
- border-style: solid;
403
- border-color: var(--color-borders-adornment);
404
- background-color: var(--color-background-adornment);
405
- line-height: var(--line-height-input);
406
- color: var(--color-text-lighter);
407
- padding: 8px;
408
- width: auto !important;
409
- min-width: min(34px, 20%);
410
- display: flex;
411
- overflow: hidden;
412
- }
413
-
414
- .fjs-container .fjs-input-adornment span {
415
- width: 100%;
416
- text-align: center;
417
- overflow: hidden;
418
- text-overflow: ellipsis;
419
- white-space: nowrap;
420
- }
421
-
422
- .fjs-container .fjs-input-adornment svg {
423
- margin: auto;
424
- }
425
-
426
- .fjs-container .fjs-form-field-spacer {
427
- background-color: transparent;
428
- display: flex;
429
- align-items: center;
430
- justify-content: center;
431
- }
432
-
433
- .fjs-container hr {
434
- border: none;
435
- border-top: solid 2px var(--color-borders-group);
436
- }
437
-
438
- .fjs-container .fjs-form-field-separator hr {
439
- margin: 7px 2px;
440
- }
441
-
442
- .fjs-container .fjs-input[type='text'],
443
- .fjs-container .fjs-input[type='email'],
444
- .fjs-container .fjs-input[type='tel'],
445
- .fjs-container .fjs-input[type='number'],
446
- .fjs-container .fjs-button[type='submit'],
447
- .fjs-container .fjs-button[type='reset'],
448
- .fjs-container .fjs-textarea,
449
- .fjs-container .fjs-select {
450
- display: block;
451
- width: 100%;
452
- padding: 8px;
453
- margin: 4px 0;
454
- border: var(--border-definition);
455
- border-radius: 3px;
456
- }
457
-
458
- .fjs-container .fjs-input-group .fjs-input[type='text'],
459
- .fjs-container .fjs-input-group .fjs-input[type='email'],
460
- .fjs-container .fjs-input-group .fjs-input[type='tel'],
461
- .fjs-container .fjs-input-group .fjs-input[type='number'],
462
- .fjs-container .fjs-select {
463
- height: var(--form-field-height);
464
- }
465
-
466
- .fjs-container .fjs-taglist {
467
- min-height: var(--form-field-height);
468
- }
469
-
470
- .fjs-container .fjs-datepicker,
471
- .fjs-container .fjs-timepicker {
472
- width: 100%;
473
- }
474
-
475
- .fjs-container .fjs-datetime-subsection {
476
- min-width: 0;
477
- flex: 1;
478
- }
479
-
480
- .fjs-container .fjs-datetime-separator {
481
- width: 10px;
482
- }
483
-
484
- .fjs-container .fjs-timepicker-anchor {
485
- height: 100%;
486
- display: flex;
487
- }
488
-
489
- .fjs-container .fjs-form-field-datetime .fjs-input-adornment svg {
490
- color: var(--color-icon-base);
491
- }
492
-
493
- .fjs-container .fjs-input-group {
494
- display: flex;
495
- width: 100%;
496
- height: var(--form-field-height);
497
- margin: 4px 0;
498
- border: var(--border-definition);
499
- border-radius: 3px;
500
- }
501
-
502
-
503
- .fjs-container .fjs-input-group .fjs-input[type='text'],
504
- .fjs-container .fjs-input-group .fjs-input[type='email'],
505
- .fjs-container .fjs-input-group .fjs-input[type='tel'],
506
- .fjs-container .fjs-input-group .fjs-input[type='number'],
507
- .fjs-container .fjs-input-group .fjs-taglist,
508
- .fjs-container .fjs-input-group .fjs-select {
509
- height: unset;
510
- min-width: min(60px, 40%);
511
- width: 100%;
512
- }
513
-
514
- .fjs-container .fjs-taglist .fjs-taglist-input,
515
- .fjs-container .fjs-input-group .fjs-input {
516
- border: none;
517
- border-radius: 0;
518
- margin: 0;
519
- outline: 0;
520
- width: auto;
521
- flex: 1;
522
- }
523
-
524
- .fjs-container .fjs-input-group .fjs-select-display {
525
- line-height: var(--line-height-base);
526
- user-select: none;
527
- padding: 8px;
528
- flex: 1;
529
- }
530
-
531
- .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
532
- .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
533
- .fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
534
- color: var(--color-text-lighter);
535
- line-height: var(--line-height-input);
536
- }
537
-
538
- .fjs-container .fjs-input-group .fjs-input-adornment {
539
- border-width: 0;
540
- }
541
-
542
- .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
543
- border-left-width: 1px;
544
- }
545
-
546
- .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
547
- border-right-width: 1px;
548
- }
549
-
550
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
551
- border-radius: 0 3px 3px 0;
552
- }
553
-
554
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
555
- border-radius: 3px 0 0 3px;
556
- }
557
-
558
- .fjs-container .fjs-input-group .fjs-input {
559
- border-radius: 3px;
560
- }
561
-
562
- .fjs-container .flatpickr-wrapper {
563
- width: 100%;
564
- height: 100%;
565
- display: flex;
566
- position: relative;
567
- }
568
-
569
- .fjs-container .fjs-textarea {
570
- resize: none;
571
- overflow: hidden;
572
- height: 75px;
573
- }
574
-
575
- .fjs-container .fjs-select-cross,
576
- .fjs-container .fjs-select-arrow {
577
- padding: 6px 10px;
578
- }
579
-
580
- .fjs-container .fjs-number-arrow-container {
581
- display: flex;
582
- flex-direction: column;
583
- border-radius: 0 2px 2px 0;
584
- width: clamp(16px, 40%, 23px);
585
- overflow: clip;
586
- border-left: var(--border-definition-adornment);
587
- }
588
-
589
- .fjs-container .fjs-number-arrow-separator {
590
- height: 1px;
591
- background-color: var(--color-borders-adornment);
592
- }
593
-
594
- .fjs-container .fjs-number-arrow-container button {
595
- border: none;
596
- flex: 1;
597
- color: var(--color-text);
598
- background-color: var(--color-background);
599
- font-weight: bold;
600
- font-size: 10px;
601
- line-height: 15px;
602
- }
603
-
604
- .fjs-container .fjs-number-arrow-container button:hover {
605
- background-color: var(--color-background-inverted-hover);
606
- color: var(--cds-text-inverse, var(--color-text));
607
- }
608
-
609
- .fjs-container .fjs-form-field-number.fjs-readonly .fjs-number-arrow-container {
610
- display: none;
611
- }
612
-
613
- .fjs-container .fjs-radio {
614
- display: flex;
615
- flex-direction: column;
616
- }
617
-
618
- .fjs-container .fjs-input[type='checkbox'],
619
- .fjs-container .fjs-input[type='radio'] {
620
- margin: 6px 10px 6px 4px;
621
- }
622
-
623
- .fjs-container .fjs-button[type='submit'] {
624
- color: var(--cds-text-inverse, var(--color-white));
625
- background-color: var(--color-accent);
626
- border-color: var(--color-accent);
627
- }
628
-
629
- .fjs-container .fjs-button[type='reset'] {
630
- color: var(--color-text);
631
- background-color: transparent;
632
- border-color: var(--color-borders);
633
- }
634
-
635
- .fjs-container .fjs-button[type='submit'],
636
- .fjs-container .fjs-button[type='reset'] {
637
- min-width: 100px;
638
- width: auto;
639
- }
640
-
641
- .fjs-container .fjs-button[type='submit'] {
642
- font-weight: 600;
643
- }
644
-
645
- .fjs-container .fjs-taglist:focus-within,
646
- .fjs-container .fjs-input-group:focus-within,
647
- .fjs-container .fjs-input[type='text']:focus,
648
- .fjs-container .fjs-input[type='email']:focus,
649
- .fjs-container .fjs-input[type='tel']:focus,
650
- .fjs-container .fjs-input[type='number']:focus,
651
- .fjs-container .fjs-button[type='submit']:focus,
652
- .fjs-container .fjs-button[type='reset']:focus,
653
- .fjs-container .fjs-textarea:focus,
654
- .fjs-container .fjs-select:focus {
655
- outline: var(--outline-definition);
656
- }
657
-
658
- .fjs-container .fjs-input-group .fjs-input,
659
- .fjs-container .fjs-input-group .fjs-input:focus {
660
- outline: none;
661
- }
662
-
663
- .fjs-container .fjs-input-group .fjs-input,
664
- .fjs-container .fjs-input-group .fjs-input:focus {
665
- outline: none;
666
- }
667
-
668
- .fjs-container .fjs-button[type='submit']:focus {
669
- border-color: var(--color-accent);
670
- }
671
-
672
- .fjs-container .fjs-input:disabled,
673
- .fjs-container .fjs-textarea:disabled,
674
- .fjs-container .fjs-select:disabled,
675
- .fjs-container .fjs-number-arrow-container.fjs-disabled button,
676
- .fjs-container .fjs-taglist.fjs-disabled,
677
- .fjs-container .fjs-disabled .fjs-input-group {
678
- color: var(--color-text-disabled);
679
- background-color: var(--cds-field, var(--color-background-disabled));
680
- border-color: var(--color-borders-disabled);
681
- }
682
-
683
- .fjs-container .fjs-number-arrow-container.fjs-disabled button {
684
- background-color: var(--cds-toggle-off, var(--color-background-disabled));
685
- }
686
-
687
- .fjs-container .fjs-readonly .fjs-input:read-only:not(:disabled),
688
- .fjs-container .fjs-readonly .fjs-textarea:read-only:not(:disabled),
689
- .fjs-container .fjs-readonly .fjs-select:read-only:not(:disabled),
690
- .fjs-container .fjs-number-arrow-container.fjs-readonly button,
691
- .fjs-container .fjs-taglist.fjs-readonly,
692
- .fjs-container .fjs-readonly .fjs-input-group {
693
- background-color: var(--color-background-readonly);
694
- border-color: var(--color-borders-readonly);
695
- }
696
-
697
- .fjs-container .fjs-form-field-checkbox.fjs-readonly,
698
- .fjs-container .fjs-form-field-checklist.fjs-readonly,
699
- .fjs-container .fjs-form-field-radio.fjs-readonly {
700
- pointer-events: none;
701
- }
702
-
703
- .fjs-container .fjs-form-field-checkbox.fjs-readonly .fjs-input:not(:disabled),
704
- .fjs-container .fjs-form-field-checklist.fjs-readonly .fjs-input:not(:disabled),
705
- .fjs-container .fjs-form-field-radio.fjs-readonly .fjs-input:not(:disabled) {
706
- opacity: 0.4;
707
- accent-color: var(--color-accent-readonly);
708
- }
709
-
710
- .fjs-container .fjs-button[type='submit']:disabled,
711
- .fjs-container .fjs-button[type='reset']:disabled {
712
- color: var(--cds-text-on-color-disabled, var(--color-text-light));
713
- background-color: var(--color-background-disabled);
714
- border-color: var(--color-borders-disabled);
715
- }
716
-
717
- .fjs-container .fjs-button[type='submit']:read-only,
718
- .fjs-container .fjs-button[type='reset']:read-only {
719
- color: var(--text-light);
720
- background-color: var(--color-background-readonly);
721
- border-color: var(--color-borders-readonly);
722
- }
723
-
724
- .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
725
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
726
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
727
- border-color: var(--color-borders-disabled);
728
- }
729
-
730
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-up,
731
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-down {
732
- pointer-events: none;
733
- }
734
-
735
- .fjs-container .fjs-readonly .fjs-input-group .fjs-input-adornment,
736
- .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-container,
737
- .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-separator {
738
- border-color: var(--color-borders-readonly);
739
- }
740
-
741
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
742
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
743
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
744
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-taglist,
745
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
746
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
747
- border-color: var(--color-warning);
748
- outline-color: var(--color-warning);
749
- }
750
-
751
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
752
- border-color: var(--color-red-360-100-92);
753
- }
754
-
755
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
756
- background-color: var(--color-red-360-100-92);
757
- }
758
-
759
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
760
- background-color: var(--color-red-360-100-97);
761
- }
762
-
763
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
764
- background-color: var(--color-red-360-100-95);
765
- }
766
-
767
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
768
- border-color: var(--color-warning-light);
769
- }
770
-
771
- .fjs-container .fjs-form-field-error {
772
- color: var(--color-warning);
773
- }
774
-
775
- .fjs-container .fjs-form-field-error > ul {
776
- list-style-type: none;
777
- margin: 0;
778
- padding: 0;
779
- }
780
-
781
- .fjs-container .fjs-form-field-error > ul > li {
782
- list-style-type: none;
783
- }
784
-
785
- .fjs-container .fjs-form-field-text {
786
- overflow-wrap: break-word;
787
- }
788
-
789
- .fjs-container .fjs-form-field-text a {
790
- color: var(--color-accent);
791
- }
792
-
793
- .fjs-container .fjs-form-field-text a {
794
- color: var(--color-accent);
795
- }
796
-
797
- .fjs-container .fjs-form-field-text .fjs-disabled-link {
798
- pointer-events: none;
799
- cursor: default;
800
- }
801
-
802
- .fjs-container .fjs-taglist-anchor,
803
- .fjs-container .fjs-select-anchor,
804
- .fjs-container .fjs-timepicker-anchor {
805
- position: relative;
806
- }
807
-
808
- .fjs-container .fjs-taglist-anchor .fjs-dropdownlist,
809
- .fjs-container .fjs-select-anchor .fjs-dropdownlist {
810
- position: absolute;
811
- top: -5px;
812
- }
813
-
814
- .fjs-container .fjs-select-hidden-input {
815
- width: 0;
816
- overflow: hidden;
817
- opacity: 0;
818
- padding: 0;
819
- border: none;
820
- }
821
-
822
- .fjs-container .fjs-taglist {
823
- display: flex;
824
- flex-wrap: wrap;
825
- gap: 5px;
826
- border: var(--color-borders) solid 1px;
827
- border-radius: 3px;
828
- margin: 4px 0;
829
- padding: 5px;
830
- background-color: var(--color-background);
831
- }
832
-
833
- .fjs-container .fjs-taglist-skip-link {
834
- outline: none;
835
- border: none;
836
- background-color: transparent;
837
- color: transparent;
838
- height: 0px;
839
- width: 0px;
840
- position: absolute;
841
- left: -100px;
842
- }
843
-
844
- .fjs-container .fjs-taglist-skip-link:focus {
845
- position: relative;
846
- height: auto;
847
- width: auto;
848
- border: solid 1px var(--color-accent);
849
- color: var(--color-accent);
850
- left: 0;
851
- }
852
-
853
- .fjs-container .fjs-taglist .fjs-taglist-tag {
854
- display: flex;
855
- overflow: hidden;
856
- user-select: none;
857
- color: var(--color-text-inverted);
858
- background-color: var(--color-background-inverted);
859
- border-radius: 2px;
860
- }
861
-
862
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
863
- .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
864
- background-color: var(--color-background-inverted);
865
- }
866
-
867
- .fjs-container .fjs-taglist .fjs-taglist-tags {
868
- display: flex;
869
- flex-wrap: wrap;
870
- gap: 5px;
871
- }
872
-
873
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
874
- padding: 2px 6px 2px 8px;
875
- }
876
-
877
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label,
878
- .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag .fjs-taglist-tag-label {
879
- padding: 2px 8px;
880
- }
881
-
882
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
883
- overflow: clip;
884
- width: 24px;
885
- height: 24px;
886
- text-align: center;
887
- line-height: 28px;
888
- background-color: var(--cds-background-inverse, var(--color-grey-225-10-80));
889
- border: none;
890
- padding: 1px 0;
891
- }
892
-
893
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
894
- margin-bottom: 4px;
895
- opacity: 0.6;
896
- color: var(--color-icon-inverted);
897
- }
898
-
899
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
900
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
901
- background-color: var(--color-background-active);
902
- }
903
-
904
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
905
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
906
- opacity: 1;
907
- }
908
-
909
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
910
- outline: none;
911
- }
912
-
913
- .fjs-container .fjs-taglist .fjs-taglist-input {
914
- border: none;
915
- background-color: transparent;
916
- min-width: 100px;
917
- height: 22px;
918
- margin: 1px 0;
919
- flex-grow: 1;
920
- }
921
-
922
- .fjs-container .fjs-dropdownlist {
923
- z-index: 1;
924
- position: absolute;
925
- user-select: none;
926
- overflow-y: auto;
927
- width: 100%;
928
- border-radius: 3px;
929
- margin-top: 3px;
930
- box-shadow: 0px 0px 5px var(--color-shadow);
931
- background-color: var(--color-layer);
932
- }
933
-
934
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
935
- padding: 6px 8px;
936
- border-bottom: 1px solid var(--color-borders-inverted);
937
- color: var(--color-text-light);
938
- }
939
-
940
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
941
- border-bottom: none;
942
- }
943
-
944
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
945
- background-color: var(--color-background-inverted);
946
- color: var(--color-text-inverted);
947
- }
948
-
949
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
950
- padding: 6px 8px;
951
- color: var(--color-text-lightest);
952
- }
953
-
954
- .fjs-container .fjs-image-container {
955
- width: fit-content;
956
- height: fit-content;
957
- }
958
-
959
- .fjs-container .fjs-image {
960
- object-fit: contain;
961
- }
962
-
963
- .fjs-container .fjs-image-placeholder {
964
- height: 64px;
965
- margin: 4px 0;
966
- }
967
-
968
- .fjs-container .fjs-iframe {
969
- margin: 4px 0;
970
- width: 100%;
971
- border: 1px solid var(--color-borders-readonly);
972
- }
973
-
974
- .fjs-container .fjs-iframe-placeholder {
975
- margin: 4px 0;
976
- height: 90px;
977
- display: flex;
978
- justify-content: center;
979
- background: var(--color-background-readonly);
980
- color: var(--color-text-light);
981
- border: 1px solid var(--color-borders-readonly);
982
- }
983
-
984
- .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
985
- display: flex;
986
- align-items: center;
987
- justify-content: center;
988
- flex-wrap: wrap;
989
- overflow: hidden;
990
- }
991
-
992
- /**
993
- * Flatpickr style adjustments
994
- */
995
-
996
- .fjs-container .flatpickr-day.today {
997
- border-color: transparent;
998
- background-color: transparent;
999
- font-weight: bold;
1000
- }
1001
-
1002
- .fjs-container .flatpickr-day.today:hover,
1003
- .fjs-container .flatpickr-day.today:focus {
1004
- border-color: var(--color-borders);
1005
- background-color: var(--color-datepicker-focused-day);
1006
- color: var(--color-text-inverted);
1007
- }
1008
-
1009
- .fjs-container .flatpickr-day.selected {
1010
- border-color: var(--color-accent);
1011
- background-color: inherit;
1012
- color: inherit;
1013
- font-weight: normal;
1014
- }
1015
-
1016
- .fjs-container .flatpickr-day.selected.today {
1017
- font-weight: bold;
1018
- }
1019
-
1020
- .fjs-container .flatpickr-day.selected:hover,
1021
- .fjs-container .flatpickr-day.selected:focus {
1022
- background-color: var(--color-accent);
1023
- font-weight: bold;
1024
- color: var(--color-text-inverted);
1025
- border-color: var(--color-accent);
1026
- }
1027
-
1028
- .fjs-container .flatpickr-days, .flatpickr-weekdays {
1029
- padding: 10px;
1030
- width: 100%;
1031
- }
1032
-
1033
- .fjs-container .flatpickr-calendar.hasTime.noCalendar {
1034
- width: auto;
1035
- max-width: 250px;
1036
- }
1037
-
1038
- .fjs-container .flatpickr-calendar {
1039
- width: 326px;
1040
- }
1
+ /**
2
+ * Theming
3
+ */
4
+ .fjs-container {
5
+ --color-grey-225-10-15: hsl(225, 10%, 15%);
6
+ --color-grey-225-10-35: hsl(225, 10%, 35%);
7
+ --color-grey-225-10-45: hsl(225, 10%, 45%);
8
+ --color-grey-225-10-55: hsl(225, 10%, 55%);
9
+ --color-grey-225-10-75: hsl(225, 10%, 75%);
10
+ --color-grey-225-10-80: hsl(225, 10%, 80%);
11
+ --color-grey-225-10-85: hsl(225, 10%, 85%);
12
+ --color-grey-225-10-90: hsl(225, 10%, 90%);
13
+ --color-grey-225-10-93: hsl(225, 10%, 93%);
14
+ --color-grey-225-10-95: hsl(225, 10%, 95%);
15
+ --color-grey-225-10-97: hsl(225, 10%, 97%);
16
+ --color-grey-0-0-88: hsl(0, 0%, 88%);
17
+
18
+ --color-blue-219-100-53: hsl(219, 99%, 53%);
19
+ --color-blue-219-100-53-05: hsla(219, 99%, 53%, 0.5);
20
+ --color-blue-205-100-40: hsl(205, 100%, 40%);
21
+ --color-blue-205-100-45: hsl(205, 100%, 45%);
22
+ --color-blue-205-100-50: hsl(205, 100%, 50%);
23
+ --color-blue-205-100-80: hsl(205, 100%, 80%);
24
+ --color-blue-205-100-95: hsl(205, 100%, 95%);
25
+
26
+ --color-green-150-86-44: hsl(150, 86%, 44%);
27
+
28
+ --color-red-360-100-40: hsl(360, 100%, 40%);
29
+ --color-red-360-100-45: hsl(360, 100%, 45%);
30
+ --color-red-360-100-92: hsl(360, 100%, 92%);
31
+ --color-red-360-100-95: hsl(360, 100%, 95%);
32
+ --color-red-360-100-97: hsl(360, 100%, 97%);
33
+
34
+ --color-white: hsl(0, 0%, 100%);
35
+ --color-black: hsl(0, 0%, 0%);
36
+
37
+ /**
38
+ * Specify color variables in the following schema:
39
+ * 1 - use specified layer
40
+ * 2 - use layer one
41
+ * 3 - use fallback
42
+ */
43
+ --color-background: var(
44
+ --cds-field,
45
+ var(--cds-field-01, var(--color-white))
46
+ );
47
+ --color-background-disabled: var(--cds-background, var(--color-grey-225-10-95));
48
+ --color-background-readonly: var(--cds-background, var(--color-grey-225-10-95));
49
+ --color-background-adornment: var(
50
+ --cds-field,
51
+ var(--cds-field-01, var(--color-grey-225-10-95))
52
+ );
53
+ --color-background-inverted: var(--cds-background-inverse, var(--color-grey-225-10-90));
54
+ --color-background-inverted-hover: var(--cds-background-inverse-hover, var(--color-grey-225-10-93));
55
+ --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
56
+ --color-layer: var(--cds-layer,
57
+ var(--cds-layer-01, var(--color-white)));
58
+ --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
59
+
60
+ --color-icon-base: var(--cds-icon-primary, var(--color-black));
61
+ --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
62
+ --color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
63
+ --color-text-light: var(--cds-text-secondary, var(--color-grey-225-10-35));
64
+ --color-text-lighter: var(--cds-text-secondary, var(--color-grey-225-10-45));
65
+ --color-text-lightest: var(--cds-text-placeholder, var(--color-grey-225-10-55));
66
+ --color-text-inverted: var(--cds-text-inverse, var(--color-text));
67
+ --color-text-disabled: var(--cds-text-disabled, var(--color-text-light));
68
+
69
+ --color-borders: var(
70
+ --cds-border-strong,
71
+ var(--cds-border-strong-01, var(--color-grey-225-10-55))
72
+ );
73
+ --color-borders-group: var(--cds-border-subtle, var(--color-grey-225-10-85));
74
+ --color-borders-table: var(--color-borders-group);
75
+ --color-borders-disabled: var(--cds-border-disabled, var(--color-grey-225-10-75));
76
+ --color-borders-adornment: var(
77
+ --cds-border-subtle,
78
+ var(--cds-border-subtle-01, var(--color-grey-225-10-85))
79
+ );
80
+ --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
81
+ --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
82
+
83
+ --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
84
+ --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
85
+ --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
86
+ --color-accent-readonly: var(
87
+ --cds-border-strong,
88
+ var(--cds-border-strong-01, var(--color-grey-225-10-55))
89
+ );
90
+ --color-datepicker-focused-day: var(--cds-button-primary, var(--color-grey-225-10-55));
91
+ --color-shadow: var(--cds-shadow, var(--color-grey-225-10-85));
92
+
93
+ --font-family: 'IBM Plex Sans', sans-serif;
94
+
95
+ --font-size-group: 15px;
96
+ --font-size-base: 14px;
97
+ --font-size-input: 14px;
98
+ --font-size-label: 12px;
99
+
100
+ --line-height-base: 20px;
101
+ --line-height-input: 18px;
102
+ --line-height-label: 16px;
103
+
104
+ --letter-spacing-base: .16px;
105
+ --letter-spacing-input: .16px;
106
+ --letter-spacing-label: .32px;
107
+
108
+ --form-field-height: 36px;
109
+
110
+ --border-definition: 1px solid var(--color-borders);
111
+ --border-definition-adornment: 1px solid var(--color-borders-adornment);
112
+ --outline-definition: 1px solid var(--cds-focus, var(--color-borders));
113
+ --button-warning-outline-definition: 2px solid var(--color-warning);
114
+ --border-definition-disabled: 1px solid var(--color-borders-disabled);
115
+ --border-definition-readonly: 1px solid var(--color-borders-readonly);
116
+
117
+ height: 100%;
118
+ }
119
+
120
+ .fjs-no-theme {
121
+ --cds-field: initial;
122
+ --cds-field-01: initial;
123
+ --cds-background: initial;
124
+ --cds-background-inverse: initial;
125
+ --cds-background-inverse-hover: initial;
126
+ --cds-background-active: initial;
127
+ --cds-layer: initial;
128
+ --cds-layer-01: initial;
129
+ --cds-layer-02: initial;
130
+ --cds-icon-primary: initial;
131
+ --cds-icon-secondary: initial;
132
+ --cds-icon-inverse: initial;
133
+ --cds-text-primary: initial;
134
+ --cds-text-secondary: initial;
135
+ --cds-text-placeholder: initial;
136
+ --cds-text-inverse: initial;
137
+ --cds-text-disabled: initial;
138
+ --cds-border-strong: initial;
139
+ --cds-border-strong-01: initial;
140
+ --cds-border-disabled: initial;
141
+ --cds-border-subtle: initial;
142
+ --cds-border-subtle-01: initial;
143
+ --cds-border-inverse: initial;
144
+ --cds-text-error: initial;
145
+ --cds-link-primary: initial;
146
+ --cds-button-primary: initial;
147
+ --cds-shadow: initial;
148
+ --cds-focus: initial;
149
+ --cds-interactive: initial;
150
+ --cds-border-interactive: initial;
151
+ --cds-highlight: initial;
152
+ --cds-field-02: initial;
153
+ --cds-field-hover-02: initial;
154
+ --cds-toggle-off: initial;
155
+ }
156
+
157
+ /**
158
+ * Layout styles
159
+ */
160
+ .fjs-container .fjs-vertical-layout {
161
+ display: flex;
162
+ flex-direction: column;
163
+ }
164
+
165
+ .fjs-container .fjs-columns {
166
+ display: flex;
167
+ flex-direction: row;
168
+ }
169
+
170
+ .fjs-container .fjs-vertical-group {
171
+ display: flex;
172
+ flex: 1;
173
+ width: 100%;
174
+ }
175
+
176
+ .fjs-container .fjs-layout-row {
177
+ flex: auto;
178
+ padding: 9px 0;
179
+ position: relative;
180
+ }
181
+
182
+ .fjs-container .fjs-layout-row:empty {
183
+ display: none;
184
+ }
185
+
186
+ .fjs-container .fjs-column {
187
+ flex-grow: 1;
188
+ }
189
+
190
+ .fjs-container img {
191
+ max-width: 100%;
192
+ }
193
+
194
+ .fjs-container .cds--grid {
195
+ margin-left: initial;
196
+ margin-right: initial;
197
+ }
198
+
199
+ .fjs-container .cds--grid .cds--row {
200
+ align-items: start;
201
+ margin-left: 0;
202
+ margin-right: 0;
203
+ }
204
+
205
+ .fjs-container .cds--grid .cds--grid .cds--row {
206
+ margin-left: -1rem;
207
+ margin-right: -1rem;
208
+ }
209
+
210
+ @media (max-width: 66rem) {
211
+ .cds--col {
212
+ flex-basis: unset !important;
213
+ }
214
+ }
215
+
216
+ /**
217
+ * Visual styles
218
+ */
219
+ .fjs-container .fjs-form {
220
+ font-family: var(--font-family);
221
+ font-size: var(--font-size-base);
222
+ line-height: var(--line-height-base);
223
+ letter-spacing: var(--letter-spacing-base);
224
+ font-weight: 400;
225
+ color: var(--color-text);
226
+ position: relative;
227
+ padding: 0 4px;
228
+ }
229
+
230
+ .fjs-container .fjs-form * {
231
+ box-sizing: border-box;
232
+ }
233
+
234
+ .fjs-container .fjs-children {
235
+ display: flex;
236
+ flex-direction: column;
237
+ flex-grow: 1;
238
+ min-height: 80px;
239
+ }
240
+
241
+ .fjs-container .fjs-element {
242
+ display: flex;
243
+ flex-direction: column;
244
+ margin: 0 4px 5px 4px;
245
+ padding: 2px 0px;
246
+ }
247
+
248
+ .fjs-container .fjs-form .fjs-element {
249
+ margin: 0;
250
+ }
251
+
252
+ .fjs-container .fjs-element:first-of-type {
253
+ margin-top: 8px;
254
+ }
255
+
256
+ .fjs-container .fjs-form-field:not(.fjs-powered-by) {
257
+ margin: 1px 8px;
258
+ }
259
+
260
+ .fjs-container .fjs-powered-by {
261
+ margin: 16px;
262
+ }
263
+
264
+ .fjs-container .fjs-form .fjs-element {
265
+ margin: 0;
266
+ }
267
+
268
+ .fjs-container .fjs-input,
269
+ .fjs-container .fjs-taglist-input,
270
+ .fjs-container .fjs-textarea,
271
+ .fjs-container .fjs-select {
272
+ color: var(--color-text);
273
+ border-color: var(--color-borders);
274
+ background-color: var(--color-background);
275
+ font-family: inherit;
276
+ line-height: inherit;
277
+ letter-spacing: inherit;
278
+ }
279
+
280
+ .fjs-container .fjs-button {
281
+ font-family: inherit;
282
+ line-height: inherit;
283
+ letter-spacing: inherit;
284
+ }
285
+
286
+ .fjs-container .fjs-input::placeholder,
287
+ .fjs-container .fjs-taglist-input::placeholder,
288
+ .fjs-container .fjs-textarea::placeholder,
289
+ .fjs-container .fjs-select > option:disabled,
290
+ .fjs-container .fjs-select [disabled],
291
+ .fjs-container .fjs-select > option:read-only,
292
+ .fjs-container .fjs-select [read-only] {
293
+ color: var(--color-text-lightest);
294
+ font-size: var(--font-size-input);
295
+ line-height: var(--line-height-input);
296
+ letter-spacing: var(--letter-spacing-input);
297
+ opacity: 1;
298
+ }
299
+
300
+ .fjs-container .fjs-form-field-label {
301
+ display: flex;
302
+ align-items: center;
303
+ white-space: nowrap;
304
+ overflow: hidden;
305
+ color: var(--color-text-light);
306
+ }
307
+
308
+ .fjs-container .fjs-incollapsible-label {
309
+ min-height: var(--line-height-label);
310
+ }
311
+
312
+ .fjs-container .fjs-form-field-label,
313
+ .fjs-container .fjs-form-field-description,
314
+ .fjs-container .fjs-form-field-error {
315
+ font-size: var(--font-size-label);
316
+ line-height: var(--line-height-label);
317
+ letter-spacing: var(--letter-spacing-label);
318
+ }
319
+
320
+ .fjs-container .fjs-form-field-description {
321
+ color: var(--color-text-lighter);
322
+ }
323
+
324
+ .fjs-container .fjs-form-field-grouplike {
325
+ padding: 10px 6px 0 6px;
326
+ margin: 0 10px;
327
+ }
328
+
329
+ .fjs-container .fjs-form-field-grouplike .cds--grid {
330
+ padding: 4px 16px;
331
+ }
332
+
333
+ .fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
334
+ .fjs-container .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
335
+ margin-left: -6px;
336
+ }
337
+
338
+ .fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike),
339
+ .fjs-container .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
340
+ margin-right: -6px;
341
+ }
342
+
343
+ .fjs-container .fjs-form-field-grouplike .fjs-layout-column:first-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
344
+ margin-left: 11px;
345
+ }
346
+
347
+ .fjs-container .fjs-form-field-grouplike .fjs-layout-column:last-child > .fjs-element > .fjs-form-field-grouplike:not(.fjs-editor-container .fjs-form-field-grouplike) {
348
+ margin-right: 11px;
349
+ }
350
+
351
+ .fjs-container .fjs-form-field-grouplike.fjs-outlined {
352
+ outline: solid var(--color-borders-group) 2px;
353
+ }
354
+
355
+ .fjs-container .fjs-form-field-grouplike label {
356
+ font-size: var(--font-size-label);
357
+ }
358
+
359
+ .fjs-container .fjs-form-field-grouplike .fjs-form-field-grouplike .cds--grid {
360
+ padding-left: 2rem;
361
+ padding-right: 2rem;
362
+ }
363
+
364
+ .fjs-container .fjs-form-field-grouplike > label {
365
+ font-size: var(--font-size-group);
366
+ line-height: var(--line-height-input);
367
+ margin-left: 7px;
368
+ }
369
+
370
+ .fjs-container .fjs-form-field-checkbox .fjs-form-field-label,
371
+ .fjs-container .fjs-form-field-checklist .fjs-form-field-label:not(:first-child),
372
+ .fjs-container .fjs-form-field-radio .fjs-form-field-label:not(:first-child) {
373
+ font-size: var(--font-size-input);
374
+ line-height: var(--line-height-input);
375
+ letter-spacing: var(--letter-spacing-input);
376
+ color: var(--color-text);
377
+ }
378
+
379
+ .fjs-container .fjs-form-field-checklist .fjs-form-field-label:first-child,
380
+ .fjs-container .fjs-form-field-radio .fjs-form-field-label:first-child {
381
+ margin-bottom: 4px;
382
+ }
383
+
384
+ .fjs-container .fjs-form-field.required label::after,
385
+ .fjs-container .fjs-form-field.required .group-title::after {
386
+ content: '*';
387
+ }
388
+
389
+ .fjs-container .fjs-checkbox.group.required label::after,
390
+ .fjs-container .fjs-radio.required label::after {
391
+ display: none;
392
+ }
393
+
394
+ .fjs-container .fjs-input,
395
+ .fjs-container .fjs-textarea,
396
+ .fjs-container .fjs-select {
397
+ background-color: var(--color-background);
398
+ font-size: var(--font-size-input);
399
+ line-height: var(--line-height-input);
400
+ letter-spacing: var(--letter-spacing-input);
401
+ }
402
+
403
+ .fjs-container .fjs-input-adornment {
404
+ border-style: solid;
405
+ border-color: var(--color-borders-adornment);
406
+ background-color: var(--color-background-adornment);
407
+ line-height: var(--line-height-input);
408
+ color: var(--color-text-lighter);
409
+ padding: 8px;
410
+ width: auto !important;
411
+ min-width: min(34px, 20%);
412
+ display: flex;
413
+ overflow: hidden;
414
+ }
415
+
416
+ .fjs-container .fjs-input-adornment span {
417
+ width: 100%;
418
+ text-align: center;
419
+ overflow: hidden;
420
+ text-overflow: ellipsis;
421
+ white-space: nowrap;
422
+ }
423
+
424
+ .fjs-container .fjs-input-adornment svg {
425
+ margin: auto;
426
+ }
427
+
428
+ .fjs-container .fjs-form-field-spacer {
429
+ background-color: transparent;
430
+ display: flex;
431
+ align-items: center;
432
+ justify-content: center;
433
+ }
434
+
435
+ .fjs-container hr {
436
+ border: none;
437
+ border-top: solid 2px var(--color-borders-group);
438
+ }
439
+
440
+ .fjs-container .fjs-form-field-separator hr {
441
+ margin: 7px 2px;
442
+ }
443
+
444
+ .fjs-container .fjs-input[type='text'],
445
+ .fjs-container .fjs-input[type='email'],
446
+ .fjs-container .fjs-input[type='tel'],
447
+ .fjs-container .fjs-input[type='number'],
448
+ .fjs-container .fjs-button[type='submit'],
449
+ .fjs-container .fjs-button[type='reset'],
450
+ .fjs-container .fjs-textarea,
451
+ .fjs-container .fjs-select {
452
+ display: block;
453
+ width: 100%;
454
+ padding: 8px;
455
+ margin: 4px 0;
456
+ border: var(--border-definition);
457
+ border-radius: 3px;
458
+ }
459
+
460
+ .fjs-container .fjs-input-group .fjs-input[type='text'],
461
+ .fjs-container .fjs-input-group .fjs-input[type='email'],
462
+ .fjs-container .fjs-input-group .fjs-input[type='tel'],
463
+ .fjs-container .fjs-input-group .fjs-input[type='number'],
464
+ .fjs-container .fjs-select {
465
+ height: var(--form-field-height);
466
+ }
467
+
468
+ .fjs-container .fjs-taglist {
469
+ min-height: var(--form-field-height);
470
+ }
471
+
472
+ .fjs-container .fjs-datepicker,
473
+ .fjs-container .fjs-timepicker {
474
+ width: 100%;
475
+ }
476
+
477
+ .fjs-container .fjs-datetime-subsection {
478
+ min-width: 0;
479
+ flex: 1;
480
+ }
481
+
482
+ .fjs-container .fjs-datetime-separator {
483
+ width: 10px;
484
+ }
485
+
486
+ .fjs-container .fjs-timepicker-anchor {
487
+ height: 100%;
488
+ display: flex;
489
+ }
490
+
491
+ .fjs-container .fjs-form-field-datetime .fjs-input-adornment svg {
492
+ color: var(--color-icon-base);
493
+ }
494
+
495
+ .fjs-container .fjs-input-group {
496
+ display: flex;
497
+ width: 100%;
498
+ height: var(--form-field-height);
499
+ margin: 4px 0;
500
+ border: var(--border-definition);
501
+ border-radius: 3px;
502
+ }
503
+
504
+
505
+ .fjs-container .fjs-input-group .fjs-input[type='text'],
506
+ .fjs-container .fjs-input-group .fjs-input[type='email'],
507
+ .fjs-container .fjs-input-group .fjs-input[type='tel'],
508
+ .fjs-container .fjs-input-group .fjs-input[type='number'],
509
+ .fjs-container .fjs-input-group .fjs-taglist,
510
+ .fjs-container .fjs-input-group .fjs-select {
511
+ height: unset;
512
+ min-width: min(60px, 40%);
513
+ width: 100%;
514
+ }
515
+
516
+ .fjs-container .fjs-taglist .fjs-taglist-input,
517
+ .fjs-container .fjs-input-group .fjs-input {
518
+ border: none;
519
+ border-radius: 0;
520
+ margin: 0;
521
+ outline: 0;
522
+ width: auto;
523
+ flex: 1;
524
+ }
525
+
526
+ .fjs-container .fjs-input-group .fjs-select-display {
527
+ line-height: var(--line-height-base);
528
+ user-select: none;
529
+ padding: 8px;
530
+ flex: 1;
531
+ }
532
+
533
+ .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
534
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
535
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
536
+ color: var(--color-text-lighter);
537
+ line-height: var(--line-height-input);
538
+ }
539
+
540
+ .fjs-container .fjs-input-group .fjs-input-adornment {
541
+ border-width: 0;
542
+ }
543
+
544
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
545
+ border-left-width: 1px;
546
+ }
547
+
548
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
549
+ border-right-width: 1px;
550
+ }
551
+
552
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
553
+ border-radius: 0 3px 3px 0;
554
+ }
555
+
556
+ .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
557
+ border-radius: 3px 0 0 3px;
558
+ }
559
+
560
+ .fjs-container .fjs-input-group .fjs-input {
561
+ border-radius: 3px;
562
+ }
563
+
564
+ .fjs-container .flatpickr-wrapper {
565
+ width: 100%;
566
+ height: 100%;
567
+ display: flex;
568
+ position: relative;
569
+ }
570
+
571
+ .fjs-container .fjs-textarea {
572
+ resize: none;
573
+ overflow: hidden;
574
+ height: 75px;
575
+ }
576
+
577
+ .fjs-container .fjs-select-cross,
578
+ .fjs-container .fjs-select-arrow {
579
+ padding: 6px 10px;
580
+ }
581
+
582
+ .fjs-container .fjs-number-arrow-container {
583
+ display: flex;
584
+ flex-direction: column;
585
+ border-radius: 0 2px 2px 0;
586
+ width: clamp(16px, 40%, 23px);
587
+ overflow: clip;
588
+ border-left: var(--border-definition-adornment);
589
+ }
590
+
591
+ .fjs-container .fjs-number-arrow-separator {
592
+ height: 1px;
593
+ background-color: var(--color-borders-adornment);
594
+ }
595
+
596
+ .fjs-container .fjs-number-arrow-container button {
597
+ border: none;
598
+ flex: 1;
599
+ color: var(--color-text);
600
+ background-color: var(--color-background);
601
+ font-weight: bold;
602
+ font-size: 10px;
603
+ line-height: 15px;
604
+ }
605
+
606
+ .fjs-container .fjs-number-arrow-container button:hover {
607
+ background-color: var(--color-background-inverted-hover);
608
+ color: var(--cds-text-inverse, var(--color-text));
609
+ }
610
+
611
+ .fjs-container .fjs-form-field-number.fjs-readonly .fjs-number-arrow-container {
612
+ display: none;
613
+ }
614
+
615
+ .fjs-container .fjs-radio {
616
+ display: flex;
617
+ flex-direction: column;
618
+ }
619
+
620
+ .fjs-container .fjs-input[type='checkbox'],
621
+ .fjs-container .fjs-input[type='radio'] {
622
+ margin: 6px 10px 6px 4px;
623
+ }
624
+
625
+ .fjs-container .fjs-button[type='submit'] {
626
+ color: var(--cds-text-inverse, var(--color-white));
627
+ background-color: var(--color-accent);
628
+ border-color: var(--color-accent);
629
+ }
630
+
631
+ .fjs-container .fjs-button[type='reset'] {
632
+ color: var(--color-text);
633
+ background-color: transparent;
634
+ border-color: var(--color-borders);
635
+ }
636
+
637
+ .fjs-container .fjs-button[type='submit'],
638
+ .fjs-container .fjs-button[type='reset'] {
639
+ min-width: 100px;
640
+ width: auto;
641
+ }
642
+
643
+ .fjs-container .fjs-button[type='submit'] {
644
+ font-weight: 600;
645
+ }
646
+
647
+ .fjs-container .fjs-taglist:focus-within,
648
+ .fjs-container .fjs-input-group:focus-within,
649
+ .fjs-container .fjs-input[type='text']:focus,
650
+ .fjs-container .fjs-input[type='email']:focus,
651
+ .fjs-container .fjs-input[type='tel']:focus,
652
+ .fjs-container .fjs-input[type='number']:focus,
653
+ .fjs-container .fjs-button[type='submit']:focus,
654
+ .fjs-container .fjs-button[type='reset']:focus,
655
+ .fjs-container .fjs-textarea:focus,
656
+ .fjs-container .fjs-select:focus {
657
+ outline: var(--outline-definition);
658
+ }
659
+
660
+ .fjs-container .fjs-input-group .fjs-input,
661
+ .fjs-container .fjs-input-group .fjs-input:focus {
662
+ outline: none;
663
+ }
664
+
665
+ .fjs-container .fjs-input-group .fjs-input,
666
+ .fjs-container .fjs-input-group .fjs-input:focus {
667
+ outline: none;
668
+ }
669
+
670
+ .fjs-container .fjs-button[type='submit']:focus {
671
+ border-color: var(--color-accent);
672
+ }
673
+
674
+ .fjs-container .fjs-input:disabled,
675
+ .fjs-container .fjs-textarea:disabled,
676
+ .fjs-container .fjs-select:disabled,
677
+ .fjs-container .fjs-number-arrow-container.fjs-disabled button,
678
+ .fjs-container .fjs-taglist.fjs-disabled,
679
+ .fjs-container .fjs-disabled .fjs-input-group {
680
+ color: var(--color-text-disabled);
681
+ background-color: var(--cds-field, var(--color-background-disabled));
682
+ border-color: var(--color-borders-disabled);
683
+ }
684
+
685
+ .fjs-container .fjs-number-arrow-container.fjs-disabled button {
686
+ background-color: var(--cds-toggle-off, var(--color-background-disabled));
687
+ }
688
+
689
+ .fjs-container .fjs-readonly .fjs-input:read-only:not(:disabled),
690
+ .fjs-container .fjs-readonly .fjs-textarea:read-only:not(:disabled),
691
+ .fjs-container .fjs-readonly .fjs-select:read-only:not(:disabled),
692
+ .fjs-container .fjs-number-arrow-container.fjs-readonly button,
693
+ .fjs-container .fjs-taglist.fjs-readonly,
694
+ .fjs-container .fjs-readonly .fjs-input-group {
695
+ background-color: var(--color-background-readonly);
696
+ border-color: var(--color-borders-readonly);
697
+ }
698
+
699
+ .fjs-container .fjs-form-field-checkbox.fjs-readonly,
700
+ .fjs-container .fjs-form-field-checklist.fjs-readonly,
701
+ .fjs-container .fjs-form-field-radio.fjs-readonly {
702
+ pointer-events: none;
703
+ }
704
+
705
+ .fjs-container .fjs-form-field-checkbox.fjs-readonly .fjs-input:not(:disabled),
706
+ .fjs-container .fjs-form-field-checklist.fjs-readonly .fjs-input:not(:disabled),
707
+ .fjs-container .fjs-form-field-radio.fjs-readonly .fjs-input:not(:disabled) {
708
+ opacity: 0.4;
709
+ accent-color: var(--color-accent-readonly);
710
+ }
711
+
712
+ .fjs-container .fjs-button[type='submit']:disabled,
713
+ .fjs-container .fjs-button[type='reset']:disabled {
714
+ color: var(--cds-text-on-color-disabled, var(--color-text-light));
715
+ background-color: var(--color-background-disabled);
716
+ border-color: var(--color-borders-disabled);
717
+ }
718
+
719
+ .fjs-container .fjs-button[type='submit']:read-only,
720
+ .fjs-container .fjs-button[type='reset']:read-only {
721
+ color: var(--text-light);
722
+ background-color: var(--color-background-readonly);
723
+ border-color: var(--color-borders-readonly);
724
+ }
725
+
726
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
727
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
728
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
729
+ border-color: var(--color-borders-disabled);
730
+ }
731
+
732
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-up,
733
+ .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-down {
734
+ pointer-events: none;
735
+ }
736
+
737
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-input-adornment,
738
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-container,
739
+ .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-separator {
740
+ border-color: var(--color-borders-readonly);
741
+ }
742
+
743
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
744
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
745
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
746
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-taglist,
747
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
748
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
749
+ border-color: var(--color-warning);
750
+ outline-color: var(--color-warning);
751
+ }
752
+
753
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
754
+ border-color: var(--color-red-360-100-92);
755
+ }
756
+
757
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
758
+ background-color: var(--color-red-360-100-92);
759
+ }
760
+
761
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
762
+ background-color: var(--color-red-360-100-97);
763
+ }
764
+
765
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
766
+ background-color: var(--color-red-360-100-95);
767
+ }
768
+
769
+ .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
770
+ border-color: var(--color-warning-light);
771
+ }
772
+
773
+ .fjs-container .fjs-form-field-error {
774
+ color: var(--color-warning);
775
+ }
776
+
777
+ .fjs-container .fjs-form-field-error > ul {
778
+ list-style-type: none;
779
+ margin: 0;
780
+ padding: 0;
781
+ }
782
+
783
+ .fjs-container .fjs-form-field-error > ul > li {
784
+ list-style-type: none;
785
+ }
786
+
787
+ .fjs-container .fjs-form-field-text {
788
+ overflow-wrap: break-word;
789
+ }
790
+
791
+ .fjs-container .fjs-form-field-text a {
792
+ color: var(--color-accent);
793
+ }
794
+
795
+ .fjs-container .fjs-form-field-text a {
796
+ color: var(--color-accent);
797
+ }
798
+
799
+ .fjs-container .fjs-form-field-text .fjs-disabled-link {
800
+ pointer-events: none;
801
+ cursor: default;
802
+ }
803
+
804
+ .fjs-container .fjs-form-field-text table {
805
+ border-collapse: collapse;
806
+ width: auto;
807
+ }
808
+
809
+ .fjs-container .fjs-form-field-text table,
810
+ .fjs-container .fjs-form-field-text th,
811
+ .fjs-container .fjs-form-field-text td {
812
+ border: 1px solid var(--color-borders-table);
813
+ padding: 8px;
814
+ }
815
+
816
+ .fjs-container .fjs-form-field-text th {
817
+ font-weight: bold;
818
+ }
819
+
820
+ .fjs-container .fjs-form-field-text td {
821
+ white-space: nowrap;
822
+ }
823
+
824
+
825
+ .fjs-container .fjs-taglist-anchor,
826
+ .fjs-container .fjs-select-anchor,
827
+ .fjs-container .fjs-timepicker-anchor {
828
+ position: relative;
829
+ }
830
+
831
+ .fjs-container .fjs-taglist-anchor .fjs-dropdownlist,
832
+ .fjs-container .fjs-select-anchor .fjs-dropdownlist {
833
+ position: absolute;
834
+ top: -5px;
835
+ }
836
+
837
+ .fjs-container .fjs-select-hidden-input {
838
+ width: 0;
839
+ overflow: hidden;
840
+ opacity: 0;
841
+ padding: 0;
842
+ border: none;
843
+ }
844
+
845
+ .fjs-container .fjs-taglist {
846
+ display: flex;
847
+ flex-wrap: wrap;
848
+ gap: 5px;
849
+ border: var(--color-borders) solid 1px;
850
+ border-radius: 3px;
851
+ margin: 4px 0;
852
+ padding: 5px;
853
+ background-color: var(--color-background);
854
+ }
855
+
856
+ .fjs-container .fjs-taglist-skip-link {
857
+ outline: none;
858
+ border: none;
859
+ background-color: transparent;
860
+ color: transparent;
861
+ height: 0px;
862
+ width: 0px;
863
+ position: absolute;
864
+ left: -100px;
865
+ }
866
+
867
+ .fjs-container .fjs-taglist-skip-link:focus {
868
+ position: relative;
869
+ height: auto;
870
+ width: auto;
871
+ border: solid 1px var(--color-accent);
872
+ color: var(--color-accent);
873
+ left: 0;
874
+ }
875
+
876
+ .fjs-container .fjs-taglist .fjs-taglist-tag {
877
+ display: flex;
878
+ overflow: hidden;
879
+ user-select: none;
880
+ color: var(--color-text-inverted);
881
+ background-color: var(--color-background-inverted);
882
+ border-radius: 2px;
883
+ }
884
+
885
+ .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
886
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
887
+ background-color: var(--color-background-inverted);
888
+ }
889
+
890
+ .fjs-container .fjs-taglist .fjs-taglist-tags {
891
+ display: flex;
892
+ flex-wrap: wrap;
893
+ gap: 5px;
894
+ }
895
+
896
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
897
+ padding: 2px 6px 2px 8px;
898
+ }
899
+
900
+ .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label,
901
+ .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag .fjs-taglist-tag-label {
902
+ padding: 2px 8px;
903
+ }
904
+
905
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
906
+ overflow: clip;
907
+ width: 24px;
908
+ height: 24px;
909
+ text-align: center;
910
+ line-height: 28px;
911
+ background-color: var(--cds-background-inverse, var(--color-grey-225-10-80));
912
+ border: none;
913
+ padding: 1px 0;
914
+ }
915
+
916
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
917
+ margin-bottom: 4px;
918
+ opacity: 0.6;
919
+ color: var(--color-icon-inverted);
920
+ }
921
+
922
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
923
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
924
+ background-color: var(--color-background-active);
925
+ }
926
+
927
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
928
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
929
+ opacity: 1;
930
+ }
931
+
932
+ .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
933
+ outline: none;
934
+ }
935
+
936
+ .fjs-container .fjs-taglist .fjs-taglist-input {
937
+ border: none;
938
+ background-color: transparent;
939
+ min-width: 100px;
940
+ height: 22px;
941
+ margin: 1px 0;
942
+ flex-grow: 1;
943
+ }
944
+
945
+ .fjs-container .fjs-dropdownlist {
946
+ z-index: 1;
947
+ position: absolute;
948
+ user-select: none;
949
+ overflow-y: auto;
950
+ width: 100%;
951
+ border-radius: 3px;
952
+ margin-top: 3px;
953
+ box-shadow: 0px 0px 5px var(--color-shadow);
954
+ background-color: var(--color-layer);
955
+ }
956
+
957
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
958
+ padding: 6px 8px;
959
+ border-bottom: 1px solid var(--color-borders-inverted);
960
+ color: var(--color-text-light);
961
+ }
962
+
963
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
964
+ border-bottom: none;
965
+ }
966
+
967
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
968
+ background-color: var(--color-background-inverted);
969
+ color: var(--color-text-inverted);
970
+ }
971
+
972
+ .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
973
+ padding: 6px 8px;
974
+ color: var(--color-text-lightest);
975
+ }
976
+
977
+ .fjs-container .fjs-image-container {
978
+ width: fit-content;
979
+ height: fit-content;
980
+ }
981
+
982
+ .fjs-container .fjs-image {
983
+ object-fit: contain;
984
+ }
985
+
986
+ .fjs-container .fjs-image-placeholder {
987
+ height: 64px;
988
+ margin: 4px 0;
989
+ }
990
+
991
+ .fjs-container .fjs-iframe {
992
+ margin: 4px 0;
993
+ width: 100%;
994
+ border: 1px solid var(--color-borders-readonly);
995
+ }
996
+
997
+ .fjs-container .fjs-iframe-placeholder {
998
+ margin: 4px 0;
999
+ height: 90px;
1000
+ display: flex;
1001
+ justify-content: center;
1002
+ background: var(--color-background-readonly);
1003
+ color: var(--color-text-light);
1004
+ border: 1px solid var(--color-borders-readonly);
1005
+ }
1006
+
1007
+ .fjs-container .fjs-iframe-placeholder .fjs-iframe-placeholder-text {
1008
+ display: flex;
1009
+ align-items: center;
1010
+ justify-content: center;
1011
+ flex-wrap: wrap;
1012
+ overflow: hidden;
1013
+ }
1014
+
1015
+ .fjs-container .fjs-form-field-table {
1016
+ display: flex;
1017
+ flex-direction: column;
1018
+ row-gap: 4px;
1019
+ }
1020
+
1021
+ .fjs-container .fjs-table-middle-container {
1022
+ display: flex;
1023
+ flex-direction: column;
1024
+ overflow-x: hidden;
1025
+ border: 1px solid var(--color-borders-group);
1026
+ border-radius: 3px;
1027
+ }
1028
+
1029
+ .fjs-container .fjs-table-middle-container.fjs-table-empty {
1030
+ border: none;
1031
+ color: var(--color-text-disabled);
1032
+ padding-left: 16px;
1033
+ }
1034
+
1035
+ .fjs-container .fjs-table-inner-container {
1036
+ display: flex;
1037
+ flex-direction: column;
1038
+ overflow-x: auto;
1039
+ }
1040
+
1041
+ .fjs-container .fjs-table {
1042
+ overflow-y: auto;
1043
+ border-collapse: collapse;
1044
+ }
1045
+
1046
+ .fjs-container .fjs-table-head {
1047
+ background-color: var(--color-layer-accent);
1048
+ }
1049
+
1050
+ .fjs-container .fjs-table-th {
1051
+ min-width: 120px;
1052
+ cursor: pointer;
1053
+ }
1054
+
1055
+ .fjs-container .fjs-table-th-label {
1056
+ user-select: none;
1057
+ display: flex;
1058
+ align-items: center;
1059
+ flex-direction: row;
1060
+ justify-content: space-between;
1061
+ }
1062
+
1063
+ .fjs-container .fjs-table-th:focus {
1064
+ outline: var(--outline-definition);
1065
+ outline-offset: -1px;
1066
+ }
1067
+
1068
+ .fjs-container .fjs-table-th,
1069
+ .fjs-container .fjs-table-td {
1070
+ text-align: left;
1071
+ height: 32px;
1072
+ padding: 0 16px;
1073
+ }
1074
+
1075
+ .fjs-container .fjs-table-body .fjs-table-tr:not(:last-child) {
1076
+ border-bottom: 1px solid var(--color-borders-group);
1077
+ }
1078
+
1079
+ .fjs-container .fjs-table-nav {
1080
+ display: flex;
1081
+ flex-direction: row;
1082
+ align-items: center;
1083
+ justify-content: flex-end;
1084
+ border-top: 1px solid var(--color-borders-group);
1085
+ }
1086
+
1087
+ .fjs-container .fjs-table-nav-button {
1088
+ border: unset;
1089
+ background: unset;
1090
+ width: 32px;
1091
+ height: 32px;
1092
+ cursor: pointer;
1093
+ display: flex;
1094
+ align-items: center;
1095
+ justify-content: center;
1096
+ border-left: 1px solid var(--color-borders-group);
1097
+ }
1098
+
1099
+ .fjs-container .fjs-table-nav-button:first-of-type {
1100
+ margin-left: 16px;
1101
+ }
1102
+
1103
+ .fjs-container .fjs-table-nav-button:focus {
1104
+ outline: var(--outline-definition);
1105
+ outline-offset: -1px;
1106
+ }
1107
+
1108
+ .fjs-container .fjs-table-nav-button svg {
1109
+ width: 16px;
1110
+ }
1111
+
1112
+ .fjs-container .fjs-table-sort-icon-asc,
1113
+ .fjs-container .fjs-table-sort-icon-desc {
1114
+ width: 16px;
1115
+ }
1116
+
1117
+ .fjs-container .fjs-repeat-row-container {
1118
+ display: flex;
1119
+ flex-direction: row;
1120
+ gap: 1rem;
1121
+ }
1122
+
1123
+ .fjs-container .fjs-repeat-row-rows {
1124
+ flex: 1;
1125
+ margin-right: 1rem;
1126
+ }
1127
+
1128
+ .fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove {
1129
+ display: flex;
1130
+ cursor: pointer;
1131
+ background: transparent;
1132
+ border: none;
1133
+ width: 32px;
1134
+ color: var(--color-icon-base);
1135
+ align-items: center;
1136
+ justify-content: center;
1137
+ padding: 0;
1138
+ }
1139
+
1140
+ .fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible {
1141
+ outline: none;
1142
+ }
1143
+
1144
+ .fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove .fjs-repeat-row-remove-icon-container {
1145
+ display: flex;
1146
+ width: 24px;
1147
+ height: 24px;
1148
+ border-radius: 2px;
1149
+ align-items: center;
1150
+ justify-content: center;
1151
+ }
1152
+
1153
+ .fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible .fjs-repeat-row-remove-icon-container {
1154
+ outline: var(--button-warning-outline-definition);
1155
+ }
1156
+
1157
+ .fjs-container .fjs-repeat-row-container:hover .fjs-repeat-render-footer-spacer {
1158
+ width: 24px;
1159
+ }
1160
+
1161
+ .fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:hover,
1162
+ .fjs-container .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible {
1163
+ color: var(--color-warning);
1164
+ }
1165
+
1166
+ .fjs-container .fjs-repeat-render-footer {
1167
+ display: flex;
1168
+ flex-direction: row;
1169
+ align-items: center;
1170
+ justify-content: center;
1171
+ padding: 12px 4px;
1172
+ }
1173
+
1174
+ .fjs-container .fjs-repeat-render-footer.fjs-remove-allowed {
1175
+ margin-right: 32px;
1176
+ justify-content: space-between;
1177
+ }
1178
+
1179
+ .fjs-container .fjs-repeat-render-footer button {
1180
+ background: none;
1181
+ border: none;
1182
+ padding: 4px;
1183
+ margin: 0;
1184
+ font-family: inherit;
1185
+ font-size: inherit;
1186
+ cursor: pointer;
1187
+ color: var(--color-accent);
1188
+ display: flex;
1189
+ align-items: center;
1190
+ }
1191
+
1192
+ .fjs-container .fjs-repeat-render-footer button svg {
1193
+ margin-right: 4px;
1194
+ }
1195
+
1196
+ /**
1197
+ * Flatpickr style adjustments
1198
+ */
1199
+
1200
+ .fjs-container .flatpickr-day.today {
1201
+ border-color: transparent;
1202
+ background-color: transparent;
1203
+ font-weight: bold;
1204
+ }
1205
+
1206
+ .fjs-container .flatpickr-day.today:hover,
1207
+ .fjs-container .flatpickr-day.today:focus {
1208
+ border-color: var(--color-borders);
1209
+ background-color: var(--color-datepicker-focused-day);
1210
+ color: var(--color-text-inverted);
1211
+ }
1212
+
1213
+ .fjs-container .flatpickr-day.selected {
1214
+ border-color: var(--color-accent);
1215
+ background-color: inherit;
1216
+ color: inherit;
1217
+ font-weight: normal;
1218
+ }
1219
+
1220
+ .fjs-container .flatpickr-day.selected.today {
1221
+ font-weight: bold;
1222
+ }
1223
+
1224
+ .fjs-container .flatpickr-day.selected:hover,
1225
+ .fjs-container .flatpickr-day.selected:focus {
1226
+ background-color: var(--color-accent);
1227
+ font-weight: bold;
1228
+ color: var(--color-text-inverted);
1229
+ border-color: var(--color-accent);
1230
+ }
1231
+
1232
+ .fjs-container .flatpickr-days, .flatpickr-weekdays {
1233
+ padding: 10px;
1234
+ width: 100%;
1235
+ }
1236
+
1237
+ .fjs-container .flatpickr-calendar.hasTime.noCalendar {
1238
+ width: auto;
1239
+ max-width: 250px;
1240
+ }
1241
+
1242
+ .fjs-container .flatpickr-calendar {
1243
+ width: 326px;
1244
+ }