@bpmn-io/form-js-viewer 1.3.2 → 1.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 (15) hide show
  1. package/LICENSE +22 -22
  2. package/README.md +189 -164
  3. package/dist/assets/form-js-base.css +1016 -987
  4. package/dist/assets/form-js.css +29 -0
  5. package/dist/index.cjs +5659 -5466
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.es.js +5655 -5468
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/types/index.d.ts +1 -1
  10. package/dist/types/render/components/form-fields/Separator.d.ts +12 -0
  11. package/dist/types/render/components/form-fields/parts/SkipLink.d.ts +1 -0
  12. package/dist/types/render/components/index.d.ts +6 -1
  13. package/dist/types/types.d.ts +35 -35
  14. package/dist/types/util/index.d.ts +34 -3
  15. package/package.json +2 -2
package/dist/assets/form-js-base.css CHANGED
@@ -1,987 +1,1016 @@
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 .fjs-input[type='text'],
434
- .fjs-container .fjs-input[type='email'],
435
- .fjs-container .fjs-input[type='tel'],
436
- .fjs-container .fjs-input[type='number'],
437
- .fjs-container .fjs-button[type='submit'],
438
- .fjs-container .fjs-button[type='reset'],
439
- .fjs-container .fjs-textarea,
440
- .fjs-container .fjs-select {
441
- display: block;
442
- width: 100%;
443
- padding: 8px;
444
- margin: 4px 0;
445
- border: var(--border-definition);
446
- border-radius: 3px;
447
- }
448
-
449
- .fjs-container .fjs-input-group .fjs-input[type='text'],
450
- .fjs-container .fjs-input-group .fjs-input[type='email'],
451
- .fjs-container .fjs-input-group .fjs-input[type='tel'],
452
- .fjs-container .fjs-input-group .fjs-input[type='number'],
453
- .fjs-container .fjs-select {
454
- height: var(--form-field-height);
455
- }
456
-
457
- .fjs-container .fjs-taglist {
458
- min-height: var(--form-field-height);
459
- }
460
-
461
- .fjs-container .fjs-datepicker,
462
- .fjs-container .fjs-timepicker {
463
- width: 100%;
464
- }
465
-
466
- .fjs-container .fjs-datetime-subsection {
467
- min-width: 0;
468
- flex: 1;
469
- }
470
-
471
- .fjs-container .fjs-datetime-separator {
472
- width: 10px;
473
- }
474
-
475
- .fjs-container .fjs-timepicker-anchor {
476
- height: 100%;
477
- display: flex;
478
- }
479
-
480
- .fjs-container .fjs-form-field-datetime .fjs-input-adornment svg {
481
- color: var(--color-icon-base);
482
- }
483
-
484
- .fjs-container .fjs-input-group {
485
- display: flex;
486
- width: 100%;
487
- height: var(--form-field-height);
488
- margin: 4px 0;
489
- border: var(--border-definition);
490
- border-radius: 3px;
491
- }
492
-
493
-
494
- .fjs-container .fjs-input-group .fjs-input[type='text'],
495
- .fjs-container .fjs-input-group .fjs-input[type='email'],
496
- .fjs-container .fjs-input-group .fjs-input[type='tel'],
497
- .fjs-container .fjs-input-group .fjs-input[type='number'],
498
- .fjs-container .fjs-input-group .fjs-taglist,
499
- .fjs-container .fjs-input-group .fjs-select {
500
- height: unset;
501
- min-width: min(60px, 40%);
502
- width: 100%;
503
- }
504
-
505
- .fjs-container .fjs-taglist .fjs-taglist-input,
506
- .fjs-container .fjs-input-group .fjs-input {
507
- border: none;
508
- border-radius: 0;
509
- margin: 0;
510
- outline: 0;
511
- width: auto;
512
- flex: 1;
513
- }
514
-
515
- .fjs-container .fjs-input-group .fjs-select-display {
516
- line-height: var(--line-height-base);
517
- user-select: none;
518
- padding: 8px;
519
- flex: 1;
520
- }
521
-
522
- .fjs-container .fjs-input-group .fjs-select-display.fjs-select-placeholder,
523
- .fjs-container .fjs-disabled .fjs-input-group .fjs-select-display,
524
- .fjs-container .fjs-readonly .fjs-input-group .fjs-select-display {
525
- color: var(--color-text-lighter);
526
- line-height: var(--line-height-input);
527
- }
528
-
529
- .fjs-container .fjs-input-group .fjs-input-adornment {
530
- border-width: 0;
531
- }
532
-
533
- .fjs-container .fjs-input-group .fjs-input-adornment.border-left {
534
- border-left-width: 1px;
535
- }
536
-
537
- .fjs-container .fjs-input-group .fjs-input-adornment.border-right {
538
- border-right-width: 1px;
539
- }
540
-
541
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-right {
542
- border-radius: 0 3px 3px 0;
543
- }
544
-
545
- .fjs-container .fjs-input-group .fjs-input-adornment.border-radius-left {
546
- border-radius: 3px 0 0 3px;
547
- }
548
-
549
- .fjs-container .fjs-input-group .fjs-input {
550
- border-radius: 3px;
551
- }
552
-
553
- .fjs-container .flatpickr-wrapper {
554
- width: 100%;
555
- height: 100%;
556
- display: flex;
557
- position: relative;
558
- }
559
-
560
- .fjs-container .fjs-textarea {
561
- resize: none;
562
- overflow: hidden;
563
- height: 75px;
564
- }
565
-
566
- .fjs-container .fjs-select-cross,
567
- .fjs-container .fjs-select-arrow {
568
- padding: 6px 10px;
569
- }
570
-
571
- .fjs-container .fjs-number-arrow-container {
572
- display: flex;
573
- flex-direction: column;
574
- border-radius: 0 2px 2px 0;
575
- width: clamp(16px, 40%, 23px);
576
- overflow: clip;
577
- border-left: var(--border-definition-adornment);
578
- }
579
-
580
- .fjs-container .fjs-number-arrow-separator {
581
- height: 1px;
582
- background-color: var(--color-borders-adornment);
583
- }
584
-
585
- .fjs-container .fjs-number-arrow-container button {
586
- border: none;
587
- flex: 1;
588
- color: var(--color-text);
589
- background-color: var(--color-background);
590
- font-weight: bold;
591
- font-size: 10px;
592
- line-height: 15px;
593
- }
594
-
595
- .fjs-container .fjs-number-arrow-container button:hover {
596
- background-color: var(--color-background-inverted-hover);
597
- color: var(--cds-text-inverse, var(--color-text));
598
- }
599
-
600
- .fjs-container .fjs-form-field-number.fjs-readonly .fjs-number-arrow-container {
601
- display: none;
602
- }
603
-
604
- .fjs-container .fjs-radio {
605
- display: flex;
606
- flex-direction: column;
607
- }
608
-
609
- .fjs-container .fjs-input[type='checkbox'],
610
- .fjs-container .fjs-input[type='radio'] {
611
- margin: 6px 10px 6px 4px;
612
- }
613
-
614
- .fjs-container .fjs-button[type='submit'] {
615
- color: var(--cds-text-inverse, var(--color-white));
616
- background-color: var(--color-accent);
617
- border-color: var(--color-accent);
618
- }
619
-
620
- .fjs-container .fjs-button[type='reset'] {
621
- color: var(--color-text);
622
- background-color: transparent;
623
- border-color: var(--color-borders);
624
- }
625
-
626
- .fjs-container .fjs-button[type='submit'],
627
- .fjs-container .fjs-button[type='reset'] {
628
- min-width: 100px;
629
- width: auto;
630
- }
631
-
632
- .fjs-container .fjs-button[type='submit'] {
633
- font-weight: 600;
634
- }
635
-
636
- .fjs-container .fjs-taglist:focus-within,
637
- .fjs-container .fjs-input-group:focus-within,
638
- .fjs-container .fjs-input[type='text']:focus,
639
- .fjs-container .fjs-input[type='email']:focus,
640
- .fjs-container .fjs-input[type='tel']:focus,
641
- .fjs-container .fjs-input[type='number']:focus,
642
- .fjs-container .fjs-button[type='submit']:focus,
643
- .fjs-container .fjs-button[type='reset']:focus,
644
- .fjs-container .fjs-textarea:focus,
645
- .fjs-container .fjs-select:focus {
646
- outline: var(--outline-definition);
647
- }
648
-
649
- .fjs-container .fjs-input-group .fjs-input,
650
- .fjs-container .fjs-input-group .fjs-input:focus {
651
- outline: none;
652
- }
653
-
654
- .fjs-container .fjs-input-group .fjs-input,
655
- .fjs-container .fjs-input-group .fjs-input:focus {
656
- outline: none;
657
- }
658
-
659
- .fjs-container .fjs-button[type='submit']:focus {
660
- border-color: var(--color-accent);
661
- }
662
-
663
- .fjs-container .fjs-input:disabled,
664
- .fjs-container .fjs-textarea:disabled,
665
- .fjs-container .fjs-select:disabled,
666
- .fjs-container .fjs-number-arrow-container.fjs-disabled button,
667
- .fjs-container .fjs-taglist.fjs-disabled,
668
- .fjs-container .fjs-disabled .fjs-input-group {
669
- color: var(--color-text-disabled);
670
- background-color: var(--cds-field, var(--color-background-disabled));
671
- border-color: var(--color-borders-disabled);
672
- }
673
-
674
- .fjs-container .fjs-number-arrow-container.fjs-disabled button {
675
- background-color: var(--cds-toggle-off, var(--color-background-disabled));
676
- }
677
-
678
- .fjs-container .fjs-readonly .fjs-input:read-only:not(:disabled),
679
- .fjs-container .fjs-readonly .fjs-textarea:read-only:not(:disabled),
680
- .fjs-container .fjs-readonly .fjs-select:read-only:not(:disabled),
681
- .fjs-container .fjs-number-arrow-container.fjs-readonly button,
682
- .fjs-container .fjs-taglist.fjs-readonly,
683
- .fjs-container .fjs-readonly .fjs-input-group {
684
- background-color: var(--color-background-readonly);
685
- border-color: var(--color-borders-readonly);
686
- }
687
-
688
- .fjs-container .fjs-form-field-checkbox.fjs-readonly,
689
- .fjs-container .fjs-form-field-checklist.fjs-readonly,
690
- .fjs-container .fjs-form-field-radio.fjs-readonly {
691
- pointer-events: none;
692
- }
693
-
694
- .fjs-container .fjs-form-field-checkbox.fjs-readonly .fjs-input:not(:disabled),
695
- .fjs-container .fjs-form-field-checklist.fjs-readonly .fjs-input:not(:disabled),
696
- .fjs-container .fjs-form-field-radio.fjs-readonly .fjs-input:not(:disabled) {
697
- opacity: 0.4;
698
- accent-color: var(--color-accent-readonly);
699
- }
700
-
701
- .fjs-container .fjs-button[type='submit']:disabled,
702
- .fjs-container .fjs-button[type='reset']:disabled {
703
- color: var(--cds-text-on-color-disabled, var(--color-text-light));
704
- background-color: var(--color-background-disabled);
705
- border-color: var(--color-borders-disabled);
706
- }
707
-
708
- .fjs-container .fjs-button[type='submit']:read-only,
709
- .fjs-container .fjs-button[type='reset']:read-only {
710
- color: var(--text-light);
711
- background-color: var(--color-background-readonly);
712
- border-color: var(--color-borders-readonly);
713
- }
714
-
715
- .fjs-container .fjs-disabled .fjs-input-group .fjs-input-adornment,
716
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container,
717
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-separator {
718
- border-color: var(--color-borders-disabled);
719
- }
720
-
721
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-up,
722
- .fjs-container .fjs-disabled .fjs-input-group .fjs-number-arrow-container .fjs-number-arrow-down {
723
- pointer-events: none;
724
- }
725
-
726
- .fjs-container .fjs-readonly .fjs-input-group .fjs-input-adornment,
727
- .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-container,
728
- .fjs-container .fjs-readonly .fjs-input-group .fjs-number-arrow-separator {
729
- border-color: var(--color-borders-readonly);
730
- }
731
-
732
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
733
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-select,
734
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea,
735
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-taglist,
736
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group,
737
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-group .fjs-input {
738
- border-color: var(--color-warning);
739
- outline-color: var(--color-warning);
740
- }
741
-
742
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container {
743
- border-color: var(--color-red-360-100-92);
744
- }
745
-
746
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-separator {
747
- background-color: var(--color-red-360-100-92);
748
- }
749
-
750
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button {
751
- background-color: var(--color-red-360-100-97);
752
- }
753
-
754
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-number-arrow-container button:hover {
755
- background-color: var(--color-red-360-100-95);
756
- }
757
-
758
- .fjs-container .fjs-form-field.fjs-has-errors .fjs-input-adornment {
759
- border-color: var(--color-warning-light);
760
- }
761
-
762
- .fjs-container .fjs-form-field-error {
763
- color: var(--color-warning);
764
- }
765
-
766
- .fjs-container .fjs-form-field-error > ul {
767
- list-style-type: none;
768
- margin: 0;
769
- padding: 0;
770
- }
771
-
772
- .fjs-container .fjs-form-field-error > ul > li {
773
- list-style-type: none;
774
- }
775
-
776
- .fjs-container .fjs-form-field-text {
777
- overflow-wrap: break-word;
778
- }
779
-
780
- .fjs-container .fjs-form-field-text a {
781
- color: var(--color-accent);
782
- }
783
-
784
- .fjs-container .fjs-form-field-text a {
785
- color: var(--color-accent);
786
- }
787
-
788
- .fjs-container .fjs-form-field-text .fjs-disabled-link {
789
- pointer-events: none;
790
- cursor: default;
791
- }
792
-
793
- .fjs-container .fjs-taglist-anchor,
794
- .fjs-container .fjs-select-anchor,
795
- .fjs-container .fjs-timepicker-anchor {
796
- position: relative;
797
- }
798
-
799
- .fjs-container .fjs-taglist-anchor .fjs-dropdownlist,
800
- .fjs-container .fjs-select-anchor .fjs-dropdownlist {
801
- position: absolute;
802
- top: -5px;
803
- }
804
-
805
- .fjs-container .fjs-select-hidden-input {
806
- width: 0;
807
- overflow: hidden;
808
- opacity: 0;
809
- padding: 0;
810
- border: none;
811
- }
812
-
813
- .fjs-container .fjs-taglist {
814
- display: flex;
815
- flex-wrap: wrap;
816
- gap: 5px;
817
- border: var(--color-borders) solid 1px;
818
- border-radius: 3px;
819
- margin: 4px 0;
820
- padding: 5px;
821
- background-color: var(--color-background);
822
- }
823
-
824
- .fjs-container .fjs-taglist .fjs-taglist-tag {
825
- display: flex;
826
- overflow: hidden;
827
- user-select: none;
828
- color: var(--color-text-inverted);
829
- background-color: var(--color-background-inverted);
830
- border-radius: 2px;
831
- }
832
-
833
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag,
834
- .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag {
835
- background-color: var(--color-background-inverted);
836
- }
837
-
838
- .fjs-container .fjs-taglist .fjs-taglist-tags {
839
- display: flex;
840
- flex-wrap: wrap;
841
- gap: 5px;
842
- }
843
-
844
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-label {
845
- padding: 2px 6px 2px 8px;
846
- }
847
-
848
- .fjs-container .fjs-taglist.fjs-disabled .fjs-taglist-tag .fjs-taglist-tag-label,
849
- .fjs-container .fjs-taglist.fjs-readonly .fjs-taglist-tag .fjs-taglist-tag-label {
850
- padding: 2px 8px;
851
- }
852
-
853
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove {
854
- overflow: clip;
855
- width: 24px;
856
- height: 24px;
857
- text-align: center;
858
- line-height: 28px;
859
- background-color: var(--cds-background-inverse, var(--color-grey-225-10-80));
860
- border: none;
861
- padding: 1px 0;
862
- }
863
-
864
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove > svg {
865
- margin-bottom: 4px;
866
- opacity: 0.6;
867
- color: var(--color-icon-inverted);
868
- }
869
-
870
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover,
871
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
872
- background-color: var(--color-background-active);
873
- }
874
-
875
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:hover > svg,
876
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible > svg {
877
- opacity: 1;
878
- }
879
-
880
- .fjs-container .fjs-taglist .fjs-taglist-tag .fjs-taglist-tag-remove:focus-visible {
881
- outline: none;
882
- }
883
-
884
- .fjs-container .fjs-taglist .fjs-taglist-input {
885
- border: none;
886
- background-color: transparent;
887
- min-width: 100px;
888
- height: 22px;
889
- margin: 1px 0;
890
- flex-grow: 1;
891
- }
892
-
893
- .fjs-container .fjs-dropdownlist {
894
- z-index: 1;
895
- position: absolute;
896
- user-select: none;
897
- overflow-y: auto;
898
- width: 100%;
899
- border-radius: 3px;
900
- margin-top: 3px;
901
- box-shadow: 0px 0px 5px var(--color-shadow);
902
- background-color: var(--color-layer);
903
- }
904
-
905
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item {
906
- padding: 6px 8px;
907
- border-bottom: 1px solid var(--color-borders-inverted);
908
- color: var(--color-text-light);
909
- }
910
-
911
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item:last-child {
912
- border-bottom: none;
913
- }
914
-
915
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-item.focused {
916
- background-color: var(--color-background-inverted);
917
- color: var(--color-text-inverted);
918
- }
919
-
920
- .fjs-container .fjs-dropdownlist .fjs-dropdownlist-empty {
921
- padding: 6px 8px;
922
- color: var(--color-text-lightest);
923
- }
924
-
925
- .fjs-container .fjs-image-container {
926
- width: fit-content;
927
- height: fit-content;
928
- }
929
-
930
- .fjs-container .fjs-image {
931
- object-fit: contain;
932
- }
933
-
934
- .fjs-container .fjs-image-placeholder {
935
- height: 64px;
936
- margin: 4px 0;
937
- }
938
-
939
- /**
940
- * Flatpickr style adjustments
941
- */
942
-
943
- .fjs-container .flatpickr-day.today {
944
- border-color: transparent;
945
- background-color: transparent;
946
- font-weight: bold;
947
- }
948
-
949
- .fjs-container .flatpickr-day.today:hover,
950
- .fjs-container .flatpickr-day.today:focus {
951
- border-color: var(--color-borders);
952
- background-color: var(--color-datepicker-focused-day);
953
- color: var(--color-text-inverted);
954
- }
955
-
956
- .fjs-container .flatpickr-day.selected {
957
- border-color: var(--color-accent);
958
- background-color: inherit;
959
- color: inherit;
960
- font-weight: normal;
961
- }
962
-
963
- .fjs-container .flatpickr-day.selected.today {
964
- font-weight: bold;
965
- }
966
-
967
- .fjs-container .flatpickr-day.selected:hover,
968
- .fjs-container .flatpickr-day.selected:focus {
969
- background-color: var(--color-accent);
970
- font-weight: bold;
971
- color: var(--color-text-inverted);
972
- border-color: var(--color-accent);
973
- }
974
-
975
- .fjs-container .flatpickr-days, .flatpickr-weekdays {
976
- padding: 10px;
977
- width: 100%;
978
- }
979
-
980
- .fjs-container .flatpickr-calendar.hasTime.noCalendar {
981
- width: auto;
982
- max-width: 250px;
983
- }
984
-
985
- .fjs-container .flatpickr-calendar {
986
- width: 326px;
987
- }
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
+ /**
969
+ * Flatpickr style adjustments
970
+ */
971
+
972
+ .fjs-container .flatpickr-day.today {
973
+ border-color: transparent;
974
+ background-color: transparent;
975
+ font-weight: bold;
976
+ }
977
+
978
+ .fjs-container .flatpickr-day.today:hover,
979
+ .fjs-container .flatpickr-day.today:focus {
980
+ border-color: var(--color-borders);
981
+ background-color: var(--color-datepicker-focused-day);
982
+ color: var(--color-text-inverted);
983
+ }
984
+
985
+ .fjs-container .flatpickr-day.selected {
986
+ border-color: var(--color-accent);
987
+ background-color: inherit;
988
+ color: inherit;
989
+ font-weight: normal;
990
+ }
991
+
992
+ .fjs-container .flatpickr-day.selected.today {
993
+ font-weight: bold;
994
+ }
995
+
996
+ .fjs-container .flatpickr-day.selected:hover,
997
+ .fjs-container .flatpickr-day.selected:focus {
998
+ background-color: var(--color-accent);
999
+ font-weight: bold;
1000
+ color: var(--color-text-inverted);
1001
+ border-color: var(--color-accent);
1002
+ }
1003
+
1004
+ .fjs-container .flatpickr-days, .flatpickr-weekdays {
1005
+ padding: 10px;
1006
+ width: 100%;
1007
+ }
1008
+
1009
+ .fjs-container .flatpickr-calendar.hasTime.noCalendar {
1010
+ width: auto;
1011
+ max-width: 250px;
1012
+ }
1013
+
1014
+ .fjs-container .flatpickr-calendar {
1015
+ width: 326px;
1016
+ }