@bpmn-io/form-js-viewer 1.3.0 → 1.3.3

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