react-core-ts 2.1.42 → 2.1.44

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.
@@ -1,2889 +0,0 @@
1
- .qbs-visible {
2
- visibility: visible
3
- }
4
- .qbs-invisible {
5
- visibility: hidden
6
- }
7
- .qbs-absolute {
8
- position: absolute
9
- }
10
- .qbs-relative {
11
- position: relative
12
- }
13
- .qbs-sticky {
14
- position: sticky
15
- }
16
- .qbs-bottom-0 {
17
- bottom: 0px
18
- }
19
- .qbs-left-0 {
20
- left: 0px
21
- }
22
- .qbs-right-0 {
23
- right: 0px
24
- }
25
- .qbs-right-2 {
26
- right: 0.5rem
27
- }
28
- .qbs-right-\[1px\] {
29
- right: 1px
30
- }
31
- .qbs-start-\[14px\] {
32
- inset-inline-start: 14px
33
- }
34
- .qbs-top-0 {
35
- top: 0px
36
- }
37
- .qbs-top-1 {
38
- top: 0.25rem
39
- }
40
- .qbs-top-1\.5 {
41
- top: 0.375rem
42
- }
43
- .qbs-top-2 {
44
- top: 0.5rem
45
- }
46
- .qbs-top-6 {
47
- top: 1.5rem
48
- }
49
- .qbs-z-10 {
50
- z-index: 10
51
- }
52
- .qbs-z-50 {
53
- z-index: 50
54
- }
55
- .qbs-m-0 {
56
- margin: 0px
57
- }
58
- .-qbs-mt-2 {
59
- margin-top: -0.5rem
60
- }
61
- .qbs-mb-2 {
62
- margin-bottom: 0.5rem
63
- }
64
- .qbs-mb-3 {
65
- margin-bottom: 0.75rem
66
- }
67
- .qbs-me-2 {
68
- margin-inline-end: 0.5rem
69
- }
70
- .qbs-ml-2 {
71
- margin-left: 0.5rem
72
- }
73
- .qbs-mr-0 {
74
- margin-right: 0px
75
- }
76
- .qbs-mr-1 {
77
- margin-right: 0.25rem
78
- }
79
- .qbs-mr-2 {
80
- margin-right: 0.5rem
81
- }
82
- .qbs-mr-\[1px\] {
83
- margin-right: 1px
84
- }
85
- .qbs-mt-9 {
86
- margin-top: 2.25rem
87
- }
88
- .qbs-mt-\[1px\] {
89
- margin-top: 1px
90
- }
91
- .qbs-block {
92
- display: block
93
- }
94
- .qbs-inline-block {
95
- display: inline-block
96
- }
97
- .qbs-flex {
98
- display: flex
99
- }
100
- .qbs-inline-flex {
101
- display: inline-flex
102
- }
103
- .qbs-hidden {
104
- display: none
105
- }
106
- .qbs-h-10 {
107
- height: 2.5rem
108
- }
109
- .qbs-h-4 {
110
- height: 1rem
111
- }
112
- .qbs-h-5 {
113
- height: 1.25rem
114
- }
115
- .qbs-h-6 {
116
- height: 1.5rem
117
- }
118
- .qbs-h-\[20px\] {
119
- height: 20px
120
- }
121
- .qbs-h-\[25px\] {
122
- height: 25px
123
- }
124
- .qbs-h-\[34px\] {
125
- height: 34px
126
- }
127
- .qbs-h-auto {
128
- height: auto
129
- }
130
- .qbs-max-h-40 {
131
- max-height: 10rem
132
- }
133
- .qbs-min-h-6 {
134
- min-height: 1.5rem
135
- }
136
- .qbs-min-h-\[28px\] {
137
- min-height: 28px
138
- }
139
- .qbs-w-4 {
140
- width: 1rem
141
- }
142
- .qbs-w-5 {
143
- width: 1.25rem
144
- }
145
- .qbs-w-6 {
146
- width: 1.5rem
147
- }
148
- .qbs-w-\[54px\] {
149
- width: 54px
150
- }
151
- .qbs-w-auto {
152
- width: auto
153
- }
154
- .qbs-w-fit {
155
- width: -moz-fit-content;
156
- width: fit-content
157
- }
158
- .qbs-w-full {
159
- width: 100%
160
- }
161
- .qbs-min-w-0 {
162
- min-width: 0px
163
- }
164
- .qbs-min-w-6 {
165
- min-width: 1.5rem
166
- }
167
- .qbs-min-w-\[20px\] {
168
- min-width: 20px
169
- }
170
- .qbs-min-w-\[28px\] {
171
- min-width: 28px
172
- }
173
- .qbs-flex-1 {
174
- flex: 1 1 0%
175
- }
176
- .qbs-flex-shrink-0 {
177
- flex-shrink: 0
178
- }
179
- .qbs-flex-grow {
180
- flex-grow: 1
181
- }
182
- .qbs-origin-\[0\] {
183
- transform-origin: 0
184
- }
185
- .-qbs-translate-y-1 {
186
- --tw-translate-y: -0.25rem;
187
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
188
- }
189
- .-qbs-translate-y-4 {
190
- --tw-translate-y: -1rem;
191
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
192
- }
193
- .qbs-translate-x-1 {
194
- --tw-translate-x: 0.25rem;
195
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
196
- }
197
- .qbs-translate-y-0 {
198
- --tw-translate-y: 0px;
199
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
200
- }
201
- .qbs-translate-y-2 {
202
- --tw-translate-y: 0.5rem;
203
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
204
- }
205
- .qbs-rotate-180 {
206
- --tw-rotate: 180deg;
207
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
208
- }
209
- .qbs-transform {
210
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
211
- }
212
- @keyframes qbs-spin {
213
- to {
214
- transform: rotate(360deg)
215
- }
216
- }
217
- .qbs-animate-spin {
218
- animation: qbs-spin 1s linear infinite
219
- }
220
- .qbs-cursor-default {
221
- cursor: default
222
- }
223
- .qbs-cursor-not-allowed {
224
- cursor: not-allowed
225
- }
226
- .qbs-cursor-pointer {
227
- cursor: pointer
228
- }
229
- .qbs-cursor-text {
230
- cursor: text
231
- }
232
- .qbs-resize-none {
233
- resize: none
234
- }
235
- .qbs-list-none {
236
- list-style-type: none
237
- }
238
- .qbs-appearance-none {
239
- -webkit-appearance: none;
240
- -moz-appearance: none;
241
- appearance: none
242
- }
243
- .qbs-flex-col {
244
- flex-direction: column
245
- }
246
- .qbs-flex-wrap {
247
- flex-wrap: wrap
248
- }
249
- .qbs-items-center {
250
- align-items: center
251
- }
252
- .qbs-items-stretch {
253
- align-items: stretch
254
- }
255
- .qbs-justify-start {
256
- justify-content: flex-start
257
- }
258
- .qbs-justify-end {
259
- justify-content: flex-end
260
- }
261
- .qbs-justify-center {
262
- justify-content: center
263
- }
264
- .qbs-justify-between {
265
- justify-content: space-between
266
- }
267
- .qbs-gap-0 {
268
- gap: 0px
269
- }
270
- .qbs-gap-1 {
271
- gap: 0.25rem
272
- }
273
- .qbs-gap-2 {
274
- gap: 0.5rem
275
- }
276
- .qbs-gap-x-5 {
277
- -moz-column-gap: 1.25rem;
278
- column-gap: 1.25rem
279
- }
280
- .qbs-overflow-auto {
281
- overflow: auto
282
- }
283
- .qbs-overflow-x-auto {
284
- overflow-x: auto
285
- }
286
- .qbs-overflow-y-auto {
287
- overflow-y: auto
288
- }
289
- .qbs-truncate {
290
- overflow: hidden;
291
- text-overflow: ellipsis;
292
- white-space: nowrap
293
- }
294
- .qbs-whitespace-normal {
295
- white-space: normal
296
- }
297
- .qbs-break-words {
298
- overflow-wrap: break-word
299
- }
300
- .qbs-rounded-\[4px\] {
301
- border-radius: 4px
302
- }
303
- .qbs-rounded-full {
304
- border-radius: 9999px
305
- }
306
- .qbs-rounded-sm {
307
- border-radius: 0.125rem
308
- }
309
- .qbs-border {
310
- border-width: 1px
311
- }
312
- .qbs-border-b {
313
- border-bottom-width: 1px
314
- }
315
- .qbs-border-b-2 {
316
- border-bottom-width: 2px
317
- }
318
- .qbs-border-r {
319
- border-right-width: 1px
320
- }
321
- .qbs-border-none {
322
- border-style: none
323
- }
324
- .qbs-border-\[\#D0D5DD\] {
325
- --tw-border-opacity: 1;
326
- border-color: rgb(208 213 221 / var(--tw-border-opacity))
327
- }
328
- .qbs-bg-gray-100 {
329
- --tw-bg-opacity: 1;
330
- background-color: rgb(243 244 246 / var(--tw-bg-opacity))
331
- }
332
- .qbs-bg-orange-500 {
333
- --tw-bg-opacity: 1;
334
- background-color: rgb(249 115 22 / var(--tw-bg-opacity))
335
- }
336
- .qbs-bg-transparent {
337
- background-color: transparent
338
- }
339
- .qbs-bg-white {
340
- --tw-bg-opacity: 1;
341
- background-color: rgb(255 255 255 / var(--tw-bg-opacity))
342
- }
343
- .qbs-fill-blue-navy {
344
- fill: #001f3f
345
- }
346
- .qbs-p-0 {
347
- padding: 0px
348
- }
349
- .qbs-p-0\.5 {
350
- padding: 0.125rem
351
- }
352
- .qbs-p-1 {
353
- padding: 0.25rem
354
- }
355
- .qbs-px-0 {
356
- padding-left: 0px;
357
- padding-right: 0px
358
- }
359
- .qbs-px-1 {
360
- padding-left: 0.25rem;
361
- padding-right: 0.25rem
362
- }
363
- .qbs-px-1\.5 {
364
- padding-left: 0.375rem;
365
- padding-right: 0.375rem
366
- }
367
- .qbs-px-2 {
368
- padding-left: 0.5rem;
369
- padding-right: 0.5rem
370
- }
371
- .qbs-px-2\.5 {
372
- padding-left: 0.625rem;
373
- padding-right: 0.625rem
374
- }
375
- .qbs-px-3 {
376
- padding-left: 0.75rem;
377
- padding-right: 0.75rem
378
- }
379
- .qbs-px-3\.5 {
380
- padding-left: 0.875rem;
381
- padding-right: 0.875rem
382
- }
383
- .qbs-py-0 {
384
- padding-top: 0px;
385
- padding-bottom: 0px
386
- }
387
- .qbs-py-0\.5 {
388
- padding-top: 0.125rem;
389
- padding-bottom: 0.125rem
390
- }
391
- .qbs-py-1 {
392
- padding-top: 0.25rem;
393
- padding-bottom: 0.25rem
394
- }
395
- .qbs-py-1\.5 {
396
- padding-top: 0.375rem;
397
- padding-bottom: 0.375rem
398
- }
399
- .qbs-py-2 {
400
- padding-top: 0.5rem;
401
- padding-bottom: 0.5rem
402
- }
403
- .qbs-py-4 {
404
- padding-top: 1rem;
405
- padding-bottom: 1rem
406
- }
407
- .\!qbs-pl-\[45px\] {
408
- padding-left: 45px !important
409
- }
410
- .\!qbs-pt-\[10px\] {
411
- padding-top: 10px !important
412
- }
413
- .qbs-pl-2 {
414
- padding-left: 0.5rem
415
- }
416
- .qbs-pl-\[10px\] {
417
- padding-left: 10px
418
- }
419
- .qbs-ps-3 {
420
- padding-inline-start: 0.75rem
421
- }
422
- .qbs-ps-3\.5 {
423
- padding-inline-start: 0.875rem
424
- }
425
- .qbs-pt-16 {
426
- padding-top: 4rem
427
- }
428
- .qbs-pt-3 {
429
- padding-top: 0.75rem
430
- }
431
- .qbs-text-center {
432
- text-align: center
433
- }
434
- .qbs-text-right {
435
- text-align: right
436
- }
437
- .qbs-align-middle {
438
- vertical-align: middle
439
- }
440
- .qbs-text-\[10px\] {
441
- font-size: 10px
442
- }
443
- .qbs-text-\[11px\] {
444
- font-size: 11px
445
- }
446
- .qbs-text-base {
447
- font-size: 1rem;
448
- line-height: 1.5rem
449
- }
450
- .qbs-text-lg {
451
- font-size: 1.125rem;
452
- line-height: 1.75rem
453
- }
454
- .qbs-text-sm {
455
- font-size: 0.875rem;
456
- line-height: 1.25rem
457
- }
458
- .qbs-text-xs {
459
- font-size: 0.75rem;
460
- line-height: 1rem
461
- }
462
- .qbs-font-medium {
463
- font-weight: 500
464
- }
465
- .qbs-font-normal {
466
- font-weight: 400
467
- }
468
- .qbs-font-semibold {
469
- font-weight: 600
470
- }
471
- .qbs-uppercase {
472
- text-transform: uppercase
473
- }
474
- .qbs-leading-none {
475
- line-height: 1
476
- }
477
- .qbs-text-\[\#003C71\] {
478
- --tw-text-opacity: 1;
479
- color: rgb(0 60 113 / var(--tw-text-opacity))
480
- }
481
- .qbs-text-\[\#28B440\] {
482
- --tw-text-opacity: 1;
483
- color: rgb(40 180 64 / var(--tw-text-opacity))
484
- }
485
- .qbs-text-\[\#475467\] {
486
- --tw-text-opacity: 1;
487
- color: rgb(71 84 103 / var(--tw-text-opacity))
488
- }
489
- .qbs-text-\[\#667085\] {
490
- --tw-text-opacity: 1;
491
- color: rgb(102 112 133 / var(--tw-text-opacity))
492
- }
493
- .qbs-text-\[\#F94110\] {
494
- --tw-text-opacity: 1;
495
- color: rgb(249 65 16 / var(--tw-text-opacity))
496
- }
497
- .qbs-text-blue-navy {
498
- --tw-text-opacity: 1;
499
- color: rgb(0 31 63 / var(--tw-text-opacity))
500
- }
501
- .qbs-text-gray-500 {
502
- --tw-text-opacity: 1;
503
- color: rgb(107 114 128 / var(--tw-text-opacity))
504
- }
505
- .qbs-text-gray-700 {
506
- --tw-text-opacity: 1;
507
- color: rgb(55 65 81 / var(--tw-text-opacity))
508
- }
509
- .qbs-text-gray-900 {
510
- --tw-text-opacity: 1;
511
- color: rgb(17 24 39 / var(--tw-text-opacity))
512
- }
513
- .qbs-text-green-500 {
514
- --tw-text-opacity: 1;
515
- color: rgb(34 197 94 / var(--tw-text-opacity))
516
- }
517
- .qbs-text-table-hover {
518
- --tw-text-opacity: 1;
519
- color: rgb(248 248 248 / var(--tw-text-opacity))
520
- }
521
- .qbs-text-white {
522
- --tw-text-opacity: 1;
523
- color: rgb(255 255 255 / var(--tw-text-opacity))
524
- }
525
- .qbs-text-zinc-500 {
526
- --tw-text-opacity: 1;
527
- color: rgb(113 113 122 / var(--tw-text-opacity))
528
- }
529
- .qbs-opacity-70 {
530
- opacity: 0.7
531
- }
532
- .qbs-shadow-md {
533
- --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
534
- --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
535
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
536
- }
537
- .qbs-shadow-gray-300 {
538
- --tw-shadow-color: #d1d5db;
539
- --tw-shadow: var(--tw-shadow-colored)
540
- }
541
- .qbs-outline-none {
542
- outline: 2px solid transparent;
543
- outline-offset: 2px
544
- }
545
- .qbs-transition-colors {
546
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
547
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
548
- transition-duration: 150ms
549
- }
550
- .qbs-duration-200 {
551
- transition-duration: 200ms
552
- }
553
- .qbs-duration-300 {
554
- transition-duration: 300ms
555
- }
556
- .qbs-ease-in-out {
557
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
558
- }
559
- .placeholder\:qbs-normal-case::-moz-placeholder {
560
- text-transform: none
561
- }
562
- .placeholder\:qbs-normal-case::placeholder {
563
- text-transform: none
564
- }
565
- .last\:qbs-border-b-0:last-child {
566
- border-bottom-width: 0px
567
- }
568
- .focus\:qbs-border-\[\#667085\]:focus {
569
- --tw-border-opacity: 1;
570
- border-color: rgb(102 112 133 / var(--tw-border-opacity))
571
- }
572
- .focus\:qbs-border-blue-navy:focus {
573
- --tw-border-opacity: 1;
574
- border-color: rgb(0 31 63 / var(--tw-border-opacity))
575
- }
576
- .focus\:qbs-outline-none:focus {
577
- outline: 2px solid transparent;
578
- outline-offset: 2px
579
- }
580
- .focus\:qbs-ring-0:focus {
581
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
582
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
583
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
584
- }
585
- .focus-visible\:qbs-outline-slate-100:focus-visible {
586
- outline-color: #f1f5f9
587
- }
588
- .disabled\:qbs-opacity-70:disabled {
589
- opacity: 0.7
590
- }
591
- .qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-top-1\/2 {
592
- top: 50%
593
- }
594
- .qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-top-1\/2 {
595
- top: 50%
596
- }
597
- .qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-top-\[2px\] {
598
- top: 2px
599
- }
600
- .qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-top-\[2px\] {
601
- top: 2px
602
- }
603
- .qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-top-\[60\%\] {
604
- top: 60%
605
- }
606
- .qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-top-\[60\%\] {
607
- top: 60%
608
- }
609
- .qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:-qbs-translate-y-1\/2 {
610
- --tw-translate-y: -50%;
611
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
612
- }
613
- .qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:-qbs-translate-y-1\/2 {
614
- --tw-translate-y: -50%;
615
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
616
- }
617
- .qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-translate-y-0 {
618
- --tw-translate-y: 0px;
619
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
620
- }
621
- .qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-translate-y-0 {
622
- --tw-translate-y: 0px;
623
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
624
- }
625
- .qbs-peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:qbs-translate-y-2 {
626
- --tw-translate-y: 0.5rem;
627
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
628
- }
629
- .qbs-peer:placeholder-shown ~ .peer-placeholder-shown\:qbs-translate-y-2 {
630
- --tw-translate-y: 0.5rem;
631
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
632
- }
633
- .qbs-peer:focus ~ .peer-focus\:qbs-top-1\.5 {
634
- top: 0.375rem
635
- }
636
- .qbs-peer:focus ~ .peer-focus\:qbs-top-2 {
637
- top: 0.5rem
638
- }
639
- .qbs-peer:focus ~ .peer-focus\:-qbs-translate-y-4 {
640
- --tw-translate-y: -1rem;
641
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
642
- }
643
- .qbs-peer:focus ~ .peer-focus\:qbs-cursor-pointer {
644
- cursor: pointer
645
- }
646
- .qbs-peer:focus ~ .peer-focus\:qbs-text-blue-navy {
647
- --tw-text-opacity: 1;
648
- color: rgb(0 31 63 / var(--tw-text-opacity))
649
- }
650
- .qbs-peer:focus ~ .rtl\:peer-focus\:qbs-left-auto:where([dir="rtl"], [dir="rtl"] *) {
651
- left: auto
652
- }
653
- .qbs-peer:focus ~ .rtl\:peer-focus\:qbs-translate-x-1\/4:where([dir="rtl"], [dir="rtl"] *) {
654
- --tw-translate-x: 25%;
655
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
656
- }
657
- .\[\&_svg\]\:qbs-mr-0 svg {
658
- margin-right: 0px
659
- }
660
- .\[\&_svg\]\:qbs-h-5 svg {
661
- height: 1.25rem
662
- }
663
- .\[\&_svg\]\:qbs-w-5 svg {
664
- width: 1.25rem
665
- }
666
-
667
-
668
- /**
669
- * Self-contained modern TextField / Autocomplete input styles.
670
- * These used to live in host apps; the library must ship them for Vite / local preview.
671
- */
672
-
673
- /* Base peer input (height + border) */
674
- input.qbs-peer,
675
- .qbs-textfield input[class*='qbs-h-'] {
676
- box-sizing: border-box !important;
677
- display: block;
678
- width: 100%;
679
- height: 2.5rem !important;
680
- min-height: 2.5rem !important;
681
- margin: 0;
682
- border-style: solid;
683
- border-width: 1px;
684
- border-color: #d0d5dd;
685
- border-radius: 4px;
686
- background-color: #fff;
687
- color: #111827;
688
- font-size: 0.875rem;
689
- font-weight: 400;
690
- line-height: 1.25rem;
691
- padding-left: 0.875rem;
692
- padding-right: 0.875rem;
693
- padding-top: 0;
694
- padding-bottom: 0;
695
- outline: none;
696
- -webkit-appearance: none;
697
- appearance: none;
698
- }
699
-
700
- input.qbs-peer.qbs-h-\[34px\],
701
- .qbs-textfield input.qbs-h-\[34px\] {
702
- height: 34px !important;
703
- min-height: 34px !important;
704
- }
705
-
706
- input.qbs-peer.qbs-h-\[25px\],
707
- .qbs-textfield input.qbs-h-\[25px\] {
708
- height: 25px !important;
709
- min-height: 25px !important;
710
- font-size: 0.75rem;
711
- }
712
-
713
- input.qbs-peer:focus:not(.qbs-input-error) {
714
- border-color: #001f3f;
715
- }
716
-
717
- input.qbs-peer:disabled {
718
- color: #98a2b3;
719
- background-color: #f2f4f7;
720
- cursor: not-allowed;
721
- }
722
-
723
- /*
724
- * Error state — must beat `input.qbs-peer` / `:focus` (element+class specificity).
725
- * Broken Tailwind classes like `focus:qbs-border-error-[#FDA29B]` never ship in CSS.
726
- */
727
- input.qbs-peer.qbs-input-error,
728
- .qbs-textfield input.qbs-input-error,
729
- .qbs-autocomplete-container-table-view input.qbs-input-error {
730
- border-color: #fda29b !important;
731
- outline: none;
732
- }
733
-
734
- input.qbs-peer.qbs-input-error:focus,
735
- .qbs-textfield input.qbs-input-error:focus,
736
- .qbs-autocomplete-container-table-view input.qbs-input-error:focus {
737
- border-color: #fda29b !important;
738
- outline: none;
739
- box-shadow: 0 0 0 3px rgba(253, 162, 155, 0.35);
740
- }
741
-
742
- /* Host-token fallbacks (prefixed utilities that are not in default Tailwind theme) */
743
- .qbs-border-input-light {
744
- border-color: #d0d5dd;
745
- }
746
- .qbs-text-input-text {
747
- color: #111827;
748
- }
749
- .qbs-text-input-disabled,
750
- .disabled\:qbs-text-input-disabled:disabled {
751
- color: #98a2b3;
752
- }
753
- .qbs-bg-disabled,
754
- .disabled\:qbs-bg-disabled:disabled {
755
- background-color: #f2f4f7;
756
- }
757
- .qbs-text-grey-dark {
758
- color: #344054;
759
- }
760
- .qbs-text-error-light {
761
- color: #f04438;
762
- }
763
- .qbs-text-error-icon,
764
- .qbs-text-error-label {
765
- color: #f04438;
766
- }
767
- .qbs-text-warning-icon,
768
- .qbs-text-warning-label {
769
- color: #f79009;
770
- }
771
- .qbs-text-tick-label {
772
- color: #28b440;
773
- }
774
- .qbs-text-grey-medium {
775
- color: #667085;
776
- }
777
- .qbs-border-grey-light {
778
- border-color: #d0d5dd;
779
- }
780
- .qbs-text-table-bodyColor {
781
- color: #667085;
782
- }
783
- .placeholder-input-label::placeholder {
784
- color: #667085;
785
- }
786
- .qbs-bg-bodyBG {
787
- background-color: #f9fafb;
788
- }
789
- .qbs-text-xxs {
790
- font-size: 0.625rem;
791
- line-height: 0.875rem;
792
- }
793
- .qbs-input-outline {
794
- outline: none;
795
- }
796
- .text-common {
797
- font-size: 0.875rem;
798
- line-height: 1.25rem;
799
- }
800
- .text-error {
801
- color: #f04438;
802
- }
803
- .text-grey-secondary {
804
- color: #667085;
805
- }
806
- .text-text-primary {
807
- color: #101828;
808
- }
809
-
810
- /* Floating label: hide native placeholder when modern label is used */
811
- .placeholder-transparent::placeholder {
812
- color: transparent !important;
813
- }
814
- .placeholder-transparent::-webkit-input-placeholder {
815
- color: transparent !important;
816
- }
817
- .focus\:placeholder-grey-secondary:focus::placeholder {
818
- color: #98a2b3;
819
- }
820
-
821
- .modern-input-label-truncate {
822
- max-width: calc(100% - 1.75rem);
823
- overflow: hidden;
824
- text-overflow: ellipsis;
825
- white-space: nowrap;
826
- pointer-events: none;
827
- background-color: transparent;
828
- }
829
-
830
- .modern-input-label-size {
831
- font-size: 0.875rem;
832
- line-height: 1.25rem;
833
- }
834
-
835
- .modern-input-peer-focus-label-size,
836
- .peer-focus\:modern-input-peer-focus-label-size {
837
- font-size: 0.75rem;
838
- line-height: 1rem;
839
- }
840
-
841
- /* When peer has value / is focused, shrink label (Tailwind peer-focus variant class name) */
842
- .qbs-peer:focus ~ .peer-focus\:modern-input-peer-focus-label-size,
843
- .qbs-peer:not(:placeholder-shown) ~ .modern-input-peer-focus-label-size,
844
- .qbs-peer:not(:placeholder-shown) ~ label.modern-input-label-truncate {
845
- font-size: 0.75rem;
846
- line-height: 1rem;
847
- }
848
-
849
- .active-input-label-bg {
850
- background-color: #fff;
851
- padding-left: 0.25rem;
852
- padding-right: 0.25rem;
853
- }
854
-
855
- .disabled-input-label-bg {
856
- background-color: #f2f4f7;
857
- padding-left: 0.25rem;
858
- padding-right: 0.25rem;
859
- }
860
-
861
- /* Ensure bordered utility actually draws a border */
862
- .qbs-border {
863
- border-style: solid;
864
- }
865
-
866
- /* Utilities that apps expect but Tailwind may not emit / lose specificity */
867
- .qbs-z-1 {
868
- z-index: 1;
869
- }
870
- .qbs-start-\[14px\] {
871
- inset-inline-start: 14px;
872
- }
873
- .hover\:qbs-text-dark:hover {
874
- color: #101828;
875
- }
876
-
877
-
878
- /**
879
- * Semantic / host-token fallbacks that Tailwind may not emit, or that
880
- * need guaranteed styles when the library is consumed in Vite apps.
881
- */
882
-
883
- /* --- Missing important / RTL utilities --- */
884
- .\!qbs-pt-\[10px\] {
885
- padding-top: 10px !important;
886
- }
887
- .\!qbs-pl-\[45px\] {
888
- padding-left: 45px !important;
889
- }
890
-
891
- /* TextArea RTL peer-focus nudge (class used in ReactTextArea) */
892
- [dir='rtl'] .qbs-peer:focus ~ .rtl\:peer-focus\:qbs-translate-x-1\/6,
893
- .qbs-peer:focus ~ .rtl\:peer-focus\:qbs-translate-x-1\/6:where([dir='rtl'] *) {
894
- transform: translateX(16.666667%);
895
- }
896
-
897
- /* --- Labels / selected chrome --- */
898
- .qbs-label-text,
899
- .labels.qbs-label-text {
900
- font-size: 12px;
901
- font-weight: 500;
902
- color: #344054;
903
- line-height: 16px;
904
- }
905
- .qbs-selected-label-text {
906
- color: #344054;
907
- font-size: 14px;
908
- font-weight: 500;
909
- line-height: 20px;
910
- white-space: nowrap;
911
- }
912
- .qbs-text-hundred-plus {
913
- font-size: 10px;
914
- letter-spacing: -0.02em;
915
- }
916
- .qbs-text-grey-label {
917
- color: #667085;
918
- font-size: 0.875rem;
919
- }
920
-
921
- /* --- Search-on-button chrome --- */
922
- .qbs-btn-search-on {
923
- background: transparent;
924
- border: none;
925
- border-radius: 4px;
926
- color: #667085;
927
- cursor: pointer;
928
- display: inline-flex;
929
- align-items: center;
930
- justify-content: center;
931
- }
932
- .qbs-btn-search-on:disabled {
933
- opacity: 0.7;
934
- cursor: not-allowed;
935
- }
936
- .qbs-btn-search-on:focus-visible {
937
- outline: 2px solid #cbd5e1;
938
- outline-offset: 1px;
939
- }
940
-
941
- /* --- Adornment hooks --- */
942
- .qbs-custom-dorpdown-adorement,
943
- .qbs-auto-dorpdown-adorement,
944
- .qbs-autocomplete-adorement {
945
- display: inline-flex;
946
- align-items: center;
947
- gap: 4px;
948
- height: 100%;
949
- padding-right: 4px;
950
- box-sizing: border-box;
951
- }
952
- .adorement {
953
- display: inline-flex;
954
- align-items: center;
955
- }
956
-
957
- /* --- Loader / empty dropdown padding --- */
958
- .qbs-autocomplete-loader {
959
- display: flex;
960
- align-items: center;
961
- justify-content: center;
962
- width: 100%;
963
- min-height: 64px;
964
- padding-top: 4rem;
965
- box-sizing: border-box;
966
- }
967
-
968
- /* --- Suggestion list (Name/Count autocomplete) --- */
969
- .qbs-autocomplete-with-suggection {
970
- width: 100%;
971
- }
972
- .qbs-suggection-list {
973
- margin-top: 4px;
974
- width: 100%;
975
- }
976
- .qbs-suggection-item {
977
- cursor: pointer;
978
- padding-top: 4px;
979
- padding-bottom: 4px;
980
- }
981
- .qbs-suggection-item:hover {
982
- background-color: #f8f8f8;
983
- }
984
- .qbs-suggection-label {
985
- color: #344054;
986
- font-size: 0.75rem;
987
- line-height: 1rem;
988
- }
989
- .qbs-suggection-count {
990
- background-color: #f97316;
991
- color: #fff;
992
- }
993
- .qbs-autosuggection-list {
994
- position: absolute;
995
- z-index: 50;
996
- }
997
-
998
- /* Warning / success suggestion containers */
999
- .suggection-warning-container .qbs-peer {
1000
- border-color: #fdb022;
1001
- }
1002
- .suggection-okey-container .qbs-peer {
1003
- border-color: #28b440;
1004
- }
1005
-
1006
- /* --- Radio / checkbox hooks --- */
1007
- .qbs-custom-radio-container {
1008
- gap: 8px;
1009
- }
1010
- .qbs-radio-button {
1011
- cursor: pointer;
1012
- }
1013
-
1014
- /* --- Misc icon hooks (no-op safe defaults) --- */
1015
- .qbs-all-dropdow-arrow-icon,
1016
- .qbs-tools-arrow-icon,
1017
- .qbs-tree-single-select-icon {
1018
- display: inline-block;
1019
- vertical-align: middle;
1020
- }
1021
-
1022
- /* Extra color tokens often expected from host design systems */
1023
- .qbs-text-gray-500 {
1024
- color: #6b7280;
1025
- }
1026
- .qbs-text-gray-700 {
1027
- color: #374151;
1028
- }
1029
- .qbs-text-gray-900 {
1030
- color: #111827;
1031
- }
1032
- .qbs-bg-gray-100 {
1033
- background-color: #f3f4f6;
1034
- }
1035
- .qbs-shadow-gray-300 {
1036
- --tw-shadow-color: #d1d5db;
1037
- }
1038
- .qbs-border-b {
1039
- border-bottom-width: 1px;
1040
- border-bottom-style: solid;
1041
- }
1042
- .qbs-border-r {
1043
- border-right-width: 1px;
1044
- border-right-style: solid;
1045
- }
1046
-
1047
- /* Ensure focus outline utilities work when host CSS resets outlines */
1048
- .focus-visible\:qbs-outline-slate-100:focus-visible {
1049
- outline: 2px solid #f1f5f9;
1050
- outline-offset: 2px;
1051
- }
1052
-
1053
-
1054
- /* Intentionally no global `body *` reset — avoids conflicting with consumer apps. */
1055
- :root {
1056
- --rcts-grey-dark: #4a4a4a;
1057
- --rcts-grey-light: #d3d3d3;
1058
- --rcts-blue-navy: #001f3f;
1059
- --rcts-input-disabled: #a9a9a9;
1060
- --rcts-error-light: #f08080;
1061
- --rcts-error-extra-light: #fddede;
1062
- --rcts-success: #28a745;
1063
- --rcts-success-light: #d4edda;
1064
- --rcts-blue-light: #add8e6;
1065
- /* Back-compat aliases */
1066
- --grey-dark: var(--rcts-grey-dark);
1067
- --grey-light: var(--rcts-grey-light);
1068
- --blue-navy: var(--rcts-blue-navy);
1069
- --input-disabled: var(--rcts-input-disabled);
1070
- --error-light: var(--rcts-error-light);
1071
- --error-extra-light: var(--rcts-error-extra-light);
1072
- --success: var(--rcts-success);
1073
- --success-light: var(--rcts-success-light);
1074
- --blue-light: var(--rcts-blue-light);
1075
- --table-hover: #f8f8f8;
1076
- }
1077
-
1078
- /*
1079
- * Scoped border-box so TextField / Autocomplete heights match pre-4.0.2 behavior.
1080
- * (Removing global body * broke height because padding+border were added outside h-*).
1081
- */
1082
- .qbs-textfield,
1083
- .qbs-textfield *,
1084
- .qbs-autocomplete-selected-comp,
1085
- .qbs-autocomplete-selected-comp *,
1086
- .qbs-autocomplete-suggestions,
1087
- .qbs-autocomplete-suggestions *,
1088
- .autocomplete-suggections,
1089
- .autocomplete-suggections *,
1090
- .qbs-expandable-container,
1091
- .qbs-expandable-container *,
1092
- .tooltip-container,
1093
- .tooltip-container *,
1094
- .react-core-ts-search-container,
1095
- .react-core-ts-search-container *,
1096
- .qbs-autocomplete-container-table-view,
1097
- .qbs-autocomplete-container-table-view * {
1098
- box-sizing: border-box;
1099
- }
1100
-
1101
- /* Explicit TextField size heights — reliable even if utility order fights other CSS */
1102
- .qbs-textfield input.qbs-h-10,
1103
- input.qbs-peer.qbs-h-10 {
1104
- height: 2.5rem;
1105
- min-height: 2.5rem;
1106
- box-sizing: border-box;
1107
- }
1108
- .qbs-textfield input.qbs-h-\[25px\],
1109
- input.qbs-peer.qbs-h-\[25px\] {
1110
- height: 25px;
1111
- min-height: 25px;
1112
- box-sizing: border-box;
1113
- }
1114
- .qbs-textfield input.qbs-h-\[34px\],
1115
- input.qbs-peer.qbs-h-\[34px\] {
1116
- height: 34px;
1117
- min-height: 34px;
1118
- box-sizing: border-box;
1119
- }
1120
-
1121
- .custom-spinner {
1122
- width: 24px !important; /* w-6 */
1123
- height: 24px; /* h-6 */
1124
- color: transparent; /* text-table-hover */
1125
- fill: var(--blue-navy); /* fill-blue-navy */
1126
- animation: spin 1s linear infinite; /* animate-spin */
1127
- width: 15px;
1128
- position: relative;
1129
- top: 1px;
1130
- }
1131
-
1132
- @keyframes spin {
1133
- 0% {
1134
- transform: rotate(0deg);
1135
- }
1136
- 100% {
1137
- transform: rotate(360deg);
1138
- }
1139
- }
1140
-
1141
- .textfield,
1142
- .textfield-big {
1143
- outline: none;
1144
- color: var(--grey-dark);
1145
- border-color: var(--grey-light);
1146
- background-color: white;
1147
- }
1148
-
1149
- .textfield:focus,
1150
- .textfield-big:focus {
1151
- border-color: var(--blue-navy);
1152
- }
1153
-
1154
- .textfield:disabled,
1155
- .textfield-big:disabled {
1156
- color: var(--input-disabled);
1157
- }
1158
-
1159
- .textfield-error,
1160
- .textfield-big-error {
1161
- outline: none;
1162
- color: var(--error-light) !important;
1163
- border-color: var(--error-light) !important;
1164
- background-color: var(--error-extra-light) !important ;
1165
- }
1166
-
1167
- .textfield-error::placeholder,
1168
- .textfield-big-error::placeholder {
1169
- color: var(--error-light);
1170
- }
1171
-
1172
- .textfield-success {
1173
- outline: none;
1174
- color: var(--success);
1175
- border-color: var(--success);
1176
- background-color: var(--success-light);
1177
- }
1178
-
1179
- .textfield-success:focus {
1180
- ring-width: 0;
1181
- }
1182
-
1183
- .textfield-success::placeholder {
1184
- color: var(--success);
1185
- }
1186
-
1187
- .textfield-editable {
1188
- outline: none;
1189
- color: var(--grey-dark);
1190
- border-color: var(--blue-navy);
1191
- background-color: var(--blue-light);
1192
- }
1193
-
1194
- .textfield-editable::placeholder {
1195
- color: var(--grey-dark);
1196
- }
1197
-
1198
- .qbs-autocomplete-suggestions {
1199
- position: absolute;
1200
- height: auto;
1201
- width: 100%;
1202
- padding: 8px; /* Corresponding to p-1.5 in Tailwind */
1203
- z-index: 99;
1204
- margin-top: 4px;
1205
- margin-bottom: 0;
1206
- border-radius: 8px;
1207
- background: #fff;
1208
- box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
1209
- transform: translateY(0); /* Default position */
1210
- transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
1211
- opacity: 1;
1212
-
1213
- /* Ensure content doesn't overflow during transition */
1214
- }
1215
- .qbs-autocomplete-suggestions-expandable{
1216
- padding: 8px 0px;
1217
- }
1218
- .qbs-autocomplete-suggestions-expandable .qbs-autocomplete-suggestions-expandable-container {
1219
- padding: 0px 8px;
1220
- }
1221
- .qbs-autocomplete-suggestions.bottom {
1222
- top: 100%; /* Position below the input */
1223
- /* Other styling */
1224
- }
1225
-
1226
- .qbs-autocomplete-suggestions.top {
1227
- bottom: 100%; /* Position above the input */
1228
- /* Other styling */
1229
- }
1230
- .qbs-autocomplete-suggestions-item {
1231
- cursor: pointer;
1232
- padding: 6px 8px;
1233
- border-radius: 6px;
1234
- color: #222;
1235
- font-size: 14px;
1236
- font-weight: 500;
1237
- line-height: 20px; /* 142.857% */
1238
- /* width: 100%; */
1239
- display: flex;
1240
- align-items: flex-start;
1241
- gap: 8px;
1242
- }
1243
- .qbs-autocomplete-suggestions-item:hover {
1244
- background: #f8f8f8;
1245
- border-radius: 6px;
1246
- }
1247
-
1248
- /* When value.id is equal to suggestion.id */
1249
- .is-selected {
1250
- border-radius: 6px;
1251
- background: var(--neutrals-grey-20, #f4f4f4);
1252
- }
1253
-
1254
- /* When value.id is NOT equal to suggestion.id */
1255
- .qbs-autocomplete-suggestions-item .is-not-selected:hover {
1256
- background-color: #f1f5f9; /* Replace with actual color code for 'hover:bg-table-hover' */
1257
- }
1258
-
1259
- .qbs-autocomplete-notfound {
1260
- cursor: default;
1261
- padding: 6px 8px;
1262
- border-radius: 6px;
1263
- font-size: 12px;
1264
- font-weight: 500;
1265
- }
1266
- .qbs-autocomplete-witherror-close-icon {
1267
- position: absolute;
1268
- top: calc(50% - 8px);
1269
- right: 22px; /* right-1 */
1270
- padding-left: 0.25rem; /* px-1 */
1271
- padding-right: 0.25rem; /* px-1 */
1272
- display: flex;
1273
- justify-content: center;
1274
- align-items: center;
1275
- }
1276
- .qbs-autocomplete-close-icon {
1277
- position: absolute;
1278
- top: calc(50% - 8px);
1279
- right: 2px; /* right-1 */
1280
- padding-left: 0.25rem; /* px-1 */
1281
- padding-right: 0.25rem; /* px-1 */
1282
- display: flex;
1283
- justify-content: center;
1284
- align-items: center;
1285
- }
1286
- .qbs-textfield-default {
1287
- width: 100%;
1288
- position: relative;
1289
- padding-right: 8px;
1290
- min-height: 36px;
1291
- height: 36px;
1292
- border-radius: 6px;
1293
- padding-left: 8px;
1294
- border: 1px solid #d6d8dc;
1295
- background: #fff;
1296
- box-sizing: border-box;
1297
- font-size: 14px;
1298
- font-style: normal;
1299
- font-weight: 500;
1300
- line-height: 20px;
1301
- color: #313131;
1302
- }
1303
-
1304
- .qbs-expandable-container {
1305
- border: 1px solid #d6d8dc;
1306
- background: #fff;
1307
- box-sizing: border-box;
1308
- padding: 5px;
1309
- display: flex;
1310
- flex-wrap: wrap;
1311
- flex: 1 1 0%;
1312
- gap: 5px;
1313
- }
1314
-
1315
- .qbs-dropdown-selected-container {
1316
- border: 0px;
1317
- border-top: 1px solid #d6d8dc;
1318
- min-height: 35px;
1319
- margin-top: 2px;
1320
- padding-top: 10px;
1321
- }
1322
- .qbs-dropdown-selected-preview {
1323
- .qbs-dropdown-selected-container {
1324
- border-top: 0px;
1325
- }
1326
- }
1327
-
1328
- .qbs-dropdown-selected-container .qbs-clear-link,
1329
- .qbs-expandable-container .qbs-clear-link {
1330
- color: #e76458;
1331
- }
1332
-
1333
- .qbs-expandable-container .qbs-clear-with-auto-dropdown {
1334
- right: 2rem;
1335
- bottom: 10px;
1336
- }
1337
-
1338
- .qbs-dropdown-selected-container .qbs-done-link,
1339
- .qbs-expandable-container .qbs-done-link {
1340
- color: #336cfc;
1341
- margin-left: 10px;
1342
- }
1343
-
1344
- .qbs-textfield-default.expandable {
1345
- height: auto;
1346
- border: none;
1347
- }
1348
-
1349
- .qbs-expandable-container .qbs-textfield-expandable {
1350
- flex: 1 1 auto;
1351
- display: inline-grid;
1352
- grid-template-columns: 0px min-content;
1353
- grid-area: 1 / 1 / 2 / 3;
1354
- overflow: hidden;
1355
- }
1356
- .qbs-expandable-container .qbs-textfield-expandable::after {
1357
- content: attr(data-value) ' ';
1358
- visibility: hidden;
1359
- white-space: pre;
1360
- grid-area: 1 / 2;
1361
- font: inherit;
1362
- min-width: 2px;
1363
- border: 0px;
1364
- margin: 0px;
1365
- outline: 0px;
1366
- padding: 0px;
1367
- }
1368
- .qbs-expandable-container .qbs-textfield-expandable input {
1369
- opacity: 1;
1370
- width: auto;
1371
- grid-area: 1 / 2;
1372
- min-width: 10px;
1373
- border: 0px;
1374
- margin: 0px;
1375
- outline: 0px;
1376
- padding: 0px;
1377
- height: auto;
1378
- min-height: auto;
1379
- border-radius: 0;
1380
- }
1381
-
1382
- .qbs-textfield-default::placeholder {
1383
- font-size: 14px;
1384
- font-style: normal;
1385
- font-weight: 500;
1386
- line-height: 20px;
1387
- }
1388
-
1389
- .qbs-autocomplete-close-icon button:focus-within {
1390
- outline: none;
1391
- }
1392
-
1393
- .fullWidth {
1394
- width: 100%;
1395
- }
1396
-
1397
- .autoWidth {
1398
- width: auto;
1399
- }
1400
- .icon-button {
1401
- background: transparent;
1402
- border: none;
1403
- display: inline-flex;
1404
- cursor: pointer;
1405
- padding: 0px 1px;
1406
- }
1407
- .icon-button-rotate {
1408
- rotate: 180deg;
1409
- }
1410
- .labels {
1411
- font-size: 12px;
1412
- }
1413
- .dropdown-search-input {
1414
- min-width: -webkit-fill-available;
1415
- border-radius: 6px;
1416
- border: 1px solid var(--border-card-color-default, #d6d8dc);
1417
- background: var(--surface-input-bg-color-default, #fff);
1418
- color: #313131;
1419
- font-size: 14px;
1420
- height: 36px;
1421
- padding: 0px 8px;
1422
- font-style: normal;
1423
- font-weight: 500;
1424
- line-height: 20px;
1425
- padding-left: 32px;
1426
- width: 100%;
1427
- }
1428
- .qbs-autocomplete-suggestions-sub {
1429
- position: relative;
1430
- overflow: auto;
1431
- max-height: 184px;
1432
- top: 0;
1433
- display: flex;
1434
- flex-direction: column;
1435
- gap: 4px;
1436
- }
1437
- .padding-class {
1438
- padding: 12px !important;
1439
- }
1440
- .qbs-autocomplete-listitem-container:hover {
1441
- color: #003c71;
1442
- background-color: rgba(141, 194, 240, 0.15) !important;
1443
- }
1444
- .qbs-autocomplete-listitem-container {
1445
- display: flex !important;
1446
- align-items: center !important;
1447
- gap: 0px;
1448
- }
1449
- ul {
1450
- list-style-type: none;
1451
- }
1452
-
1453
- .react-core-ts-search-container {
1454
- display: flex;
1455
- align-items: center;
1456
- gap: var(--spacing-4, 4px);
1457
- align-self: stretch;
1458
- margin-bottom: 4px;
1459
- }
1460
- .selected-item {
1461
- display: flex;
1462
- align-items: center;
1463
- justify-content: space-between;
1464
- padding: 3px 6px;
1465
- margin: 0;
1466
- background-color: #e0e0e0;
1467
- color: #333;
1468
- border-radius: 6px;
1469
- border: 1px solid rgba(231, 100, 88, 0.1);
1470
- background: rgba(231, 100, 88, 0.1);
1471
- font-size: 12px;
1472
- font-style: normal;
1473
- font-weight: 500;
1474
- line-height: 16px;
1475
- color: #e76458;
1476
- gap: 6px;
1477
- height: 22px;
1478
- }
1479
-
1480
- .remove-item-btn {
1481
- background-color: transparent;
1482
- border: none;
1483
- color: #e76458;
1484
- cursor: pointer;
1485
- }
1486
-
1487
- .remove-item-btn:hover {
1488
- color: #e76458;
1489
- }
1490
-
1491
- .qbs-inline-all-dropdown-btn {
1492
- display: flex;
1493
- gap: 12px;
1494
- align-items: center;
1495
- position: absolute;
1496
- right: 25px;
1497
- z-index: 99;
1498
- top: 50%;
1499
- transform: translateY(-50%);
1500
- flex-wrap: wrap;
1501
- }
1502
-
1503
- .qbs-inline-all-direct-dropdown-btn {
1504
- right: 0px;
1505
- }
1506
-
1507
- .selected-items-container {
1508
- display: flex;
1509
- gap: 12px;
1510
- align-items: center;
1511
- position: absolute;
1512
- left: 8px;
1513
- z-index: 99;
1514
- top: 6.5px;
1515
- flex-wrap: wrap;
1516
- }
1517
-
1518
- .selected-items-counter-container {
1519
- display: flex;
1520
- gap: 12px;
1521
- align-items: center;
1522
- position: absolute;
1523
- right: 8px;
1524
- z-index: 99;
1525
- top: 50%;
1526
- transform: translateY(-50%);
1527
- flex-wrap: wrap;
1528
- }
1529
-
1530
- .qbs-expandable-container .selected-items-container {
1531
- position: relative;
1532
- top: 0;
1533
- left: 0;
1534
- }
1535
-
1536
- .selected-items-container .badge,
1537
- .selected-items-counter-container .badge {
1538
- background-color: #c63a3a;
1539
- color: #fff;
1540
- }
1541
-
1542
- .selected-item-inline-counter {
1543
- right: 30px;
1544
- }
1545
-
1546
- .selected-item-inline-counter-disabled {
1547
- right: 8px;
1548
- }
1549
-
1550
- .selected-item-tool-direct-counter {
1551
- right: 60px;
1552
- }
1553
-
1554
- .selected-item-nontool-direct-counter {
1555
- right: 35px;
1556
- }
1557
-
1558
- .selected-item-more {
1559
- display: flex;
1560
- align-items: center;
1561
- justify-content: center;
1562
- padding: 3px 8px;
1563
- margin: 0;
1564
- border-radius: 6px;
1565
- background: #c63a3a;
1566
- font-size: 12px;
1567
- font-style: normal;
1568
- font-weight: 500;
1569
- line-height: 16px;
1570
- color: #fff;
1571
- height: 22px;
1572
- }
1573
-
1574
- .loadMoreSection {
1575
- margin: 0;
1576
- cursor: pointer;
1577
- display: flex;
1578
- justify-content: flex-start;
1579
- padding: 8px;
1580
- }
1581
- .loadMoreSection p {
1582
- color: #336cfc;
1583
- font-size: 14px;
1584
- font-style: normal;
1585
- font-weight: 500;
1586
- line-height: 20px;
1587
- margin: 0;
1588
- }
1589
- ::-webkit-scrollbar-track {
1590
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
1591
- border-radius: 0px;
1592
- background-color: transparent;
1593
- }
1594
-
1595
- ::-webkit-scrollbar {
1596
- width: 6px;
1597
- height: 4px;
1598
- background-color: transparent;
1599
- }
1600
-
1601
- ::-webkit-scrollbar-thumb {
1602
- border-radius: 100px;
1603
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
1604
- background-color: #ddd;
1605
- }
1606
-
1607
- .qbs-autocomplete-suggestions-item.is-selected {
1608
- color: #e76458;
1609
- background: #f8f8f8;
1610
- }
1611
-
1612
- span.dropdown-search-icon {
1613
- position: absolute;
1614
- left: 8px;
1615
- top: 10px;
1616
- }
1617
-
1618
- .dropdown-search-input:focus {
1619
- outline: none;
1620
- border: 1px solid #222;
1621
- }
1622
-
1623
- .qbs-autocomplete-checkbox-container {
1624
- gap: 8px;
1625
- padding: 6px 8px;
1626
- display: flex;
1627
- align-items: flex-start;
1628
- outline: none;
1629
- box-shadow: none;
1630
- }
1631
-
1632
- .qbs-autocomplete-checkbox-container .qbs-autocomplete-suggestions-item {
1633
- padding: 0;
1634
- /* pointer-events: none; */
1635
- }
1636
-
1637
- .qbs-autocomplete-checkbox-container:hover {
1638
- background: #f8f8f8;
1639
- border-radius: 6px;
1640
- }
1641
-
1642
- .qbs-autocomplete-checkbox-container.is-selected {
1643
- background: #f8f8f8;
1644
- border-radius: 6px;
1645
- }
1646
-
1647
- .qbs-autocomplete-checkbox {
1648
- position: relative;
1649
- display: flex;
1650
- align-items: center;
1651
- justify-content: center;
1652
- }
1653
-
1654
- .qbs-autocomplete-checkbox input {
1655
- opacity: 0;
1656
- }
1657
-
1658
- .qbs-autocomplete-checkbox input ~ label {
1659
- position: absolute;
1660
- border-radius: 3px;
1661
- border: 1px solid #999696;
1662
- width: 16px;
1663
- height: 16px;
1664
- top: 1px;
1665
- transition: all 0.2s ease;
1666
- cursor: pointer;
1667
- }
1668
-
1669
- .qbs-autocomplete-checkbox input ~ label svg {
1670
- opacity: 0;
1671
- transition: all 0.2s ease;
1672
- position: absolute;
1673
- left: 3px;
1674
- top: 3px;
1675
- width: 9px;
1676
- height: 9px;
1677
- }
1678
-
1679
- .qbs-autocomplete-checkbox input:checked ~ label {
1680
- transition: all 0.2s ease;
1681
- border-radius: 3px;
1682
- background: #e76458;
1683
- border-color: #e76458;
1684
- }
1685
- .qbs-autocomplete-checkbox input:checked ~ label svg {
1686
- opacity: 1;
1687
- transition: all 0.2s ease;
1688
- }
1689
-
1690
- .action_label {
1691
- font-size: 14px;
1692
- color: #4c7ad6;
1693
- }
1694
- /* Tooltip.css */
1695
- /* .tooltip-wrapper {
1696
- position: relative;
1697
- display: inline-block;
1698
- }
1699
-
1700
- .tooltip-content {
1701
- visibility: hidden;
1702
- width: max-content;
1703
- background-color: black;
1704
- color: white;
1705
- text-align: center;
1706
- max-width: 150px;
1707
- padding: 5px 10px;
1708
- border-radius: 6px;
1709
- position: absolute;
1710
- z-index: 1;
1711
- bottom: 125%;
1712
- left: 50%;
1713
- transform: translateX(-50%);
1714
- transition: visibility 0.2s ease-in-out;
1715
- }
1716
-
1717
- .tooltip-content::after {
1718
- content: '';
1719
- position: absolute;
1720
- top: 100%;
1721
- left: 50%;
1722
- margin-left: -5px;
1723
- border-width: 5px;
1724
- border-style: solid;
1725
- border-color: black transparent transparent transparent;
1726
- }
1727
-
1728
- .tooltip-wrapper:hover .tooltip-content {
1729
- visibility: visible;
1730
- } */
1731
- .qbs-table-tooltip {
1732
- position: relative;
1733
- display: contents;
1734
- cursor: pointer;
1735
- }
1736
-
1737
- .qbs-table-tooltip .tooltiptext,
1738
- .tooltiptext {
1739
- visibility: hidden;
1740
- background-color: #000;
1741
- color: #fff;
1742
- text-align: center;
1743
- padding: 6px;
1744
- border-radius: 4px;
1745
- position: absolute;
1746
- z-index: 9999;
1747
- opacity: 0;
1748
- transition: opacity 0.3s;
1749
- font-size: 14px;
1750
- font-style: normal;
1751
- font-weight: 400;
1752
- line-height: 16px;
1753
- max-width: 300px;
1754
- }
1755
- .tooltip-text-container {
1756
- display: block;
1757
- max-height: 200px;
1758
- overflow: auto;
1759
- }
1760
-
1761
- .qbs-table-tooltip.up .tooltiptext {
1762
- bottom: 125%;
1763
- left: 0%;
1764
- }
1765
-
1766
- .qbs-table-tooltip.down .tooltiptext {
1767
- top: 125%;
1768
- right: 0px;
1769
- left: auto;
1770
- }
1771
-
1772
- .qbs-table-tooltip:hover .tooltiptext {
1773
- visibility: visible;
1774
- opacity: 1;
1775
- }
1776
-
1777
- .qbs-table-tooltip .tooltiptext::after,
1778
- .tooltiptext::after {
1779
- content: '';
1780
- position: absolute;
1781
- border-width: 5px;
1782
- border-style: solid;
1783
- }
1784
-
1785
- .qbs-table-tooltip.up .tooltiptext::after,
1786
- .up.tooltiptext::after {
1787
- top: 100%;
1788
- left: 50%;
1789
- margin-left: -5px;
1790
- border-color: #000 transparent transparent transparent;
1791
- }
1792
-
1793
- .qbs-table-tooltip.down .tooltiptext::after,
1794
- .down.tooltiptext::after {
1795
- bottom: 100%;
1796
- left: 50%;
1797
- margin-left: -5px;
1798
- border-color: transparent transparent #000 transparent;
1799
- }
1800
-
1801
- .autocomplete-suggections .qbs-autocomplete-suggections-items {
1802
- display: flex;
1803
- /* justify-content: space-between; */
1804
- align-items: flex-start;
1805
- cursor: pointer;
1806
- outline: none;
1807
- box-shadow: none;
1808
- word-break: break-all;
1809
- word-wrap: break-word;
1810
- width: auto;
1811
- gap: 6px;
1812
- }
1813
-
1814
- .autocomplete-suggections .qbs-autocomplete-suggections-items .suggestion-text {
1815
- flex: 1 1 auto;
1816
- min-width: 0;
1817
- white-space: normal;
1818
- overflow-wrap: anywhere;
1819
- word-break: break-word;
1820
- }
1821
-
1822
- .qbs-autocomplete-suggections-items.is-selected {
1823
- background-color: #f1f5f9;
1824
- /* width: max-content; */
1825
- }
1826
-
1827
- .autocomplete-suggections .qbs-autocomplete-suggections-items .short-code,
1828
- .qbs-autocomplete-listitem-container .short-code {
1829
- font-size: 12px;
1830
- background: #f0f0f0;
1831
- padding: 4px 8px;
1832
- border: 1px solid #ccc;
1833
- border-radius: 4px;
1834
- white-space: nowrap;
1835
- margin-left: auto;
1836
- flex: 0 0 auto;
1837
- }
1838
-
1839
- .autocomplete-suggections .qbs-autocomplete-suggections-items .label-code,
1840
- .qbs-autocomplete-listitem-container .label-code {
1841
- font-size: 12px;
1842
- background: #f0f0f0;
1843
- padding: 4px 8px;
1844
- border: 1px solid #ccc;
1845
- border-radius: 4px;
1846
- white-space: normal;
1847
- overflow-wrap: anywhere;
1848
- word-break: break-word;
1849
- max-width: 140px;
1850
- margin: 0px 5px;
1851
- flex: 0 1 auto;
1852
- }
1853
-
1854
- /* Split-detail dropdown theme (bank-style row: title + subtitle | badge) */
1855
- .autocomplete-suggections--split-detail .qbs-split-detail-row {
1856
- display: flex;
1857
- align-items: center;
1858
- gap: 12px;
1859
- width: 100%;
1860
- padding: 10px 12px;
1861
- box-sizing: border-box;
1862
- }
1863
-
1864
- .autocomplete-suggections--split-detail .qbs-split-detail-main {
1865
- flex: 1;
1866
- min-width: 0;
1867
- }
1868
-
1869
- .autocomplete-suggections--split-detail .qbs-split-detail-title {
1870
- font-size: 14px;
1871
- font-weight: 600;
1872
- color: #101828;
1873
- line-height: 1.35;
1874
- }
1875
-
1876
- .autocomplete-suggections--split-detail .qbs-split-detail-subtitle {
1877
- margin-top: 4px;
1878
- font-size: 12px;
1879
- font-weight: 400;
1880
- color: #667085;
1881
- line-height: 1.45;
1882
- white-space: normal;
1883
- word-break: break-word;
1884
- }
1885
-
1886
- .autocomplete-suggections--split-detail .qbs-split-detail-badge-wrap {
1887
- flex-shrink: 0;
1888
- align-self: center;
1889
- max-width: 45%;
1890
- }
1891
-
1892
- .autocomplete-suggections--split-detail .qbs-split-detail-badge {
1893
- display: inline-block;
1894
- padding: 6px 10px;
1895
- font-size: 12px;
1896
- font-weight: 600;
1897
- line-height: 1.3;
1898
- color: #194185;
1899
- background: #d1e9ff;
1900
- border: 1px solid #b2ddff;
1901
- border-radius: 6px;
1902
- white-space: normal;
1903
- word-break: break-word;
1904
- }
1905
-
1906
- .autocomplete-suggections--split-detail
1907
- .qbs-autocomplete-suggections-items.bg-blue-navy
1908
- .qbs-split-detail-title,
1909
- .autocomplete-suggections--split-detail
1910
- .qbs-autocomplete-suggections-items.bg-blue-navy
1911
- .qbs-split-detail-subtitle {
1912
- color: #fff;
1913
- }
1914
-
1915
- .autocomplete-suggections--split-detail
1916
- .qbs-autocomplete-suggections-items.bg-blue-navy
1917
- .qbs-split-detail-badge {
1918
- color: #194185;
1919
- background: #eff8ff;
1920
- border-color: #b2ddff;
1921
- }
1922
-
1923
- /* TextField Inner Search Button */
1924
- .inner-search-button {
1925
- position: absolute;
1926
- background: #f8f8f8;
1927
- border: none;
1928
- border-radius: 0 3px 3px 0;
1929
- padding: 0 8px;
1930
- display: flex;
1931
- align-items: center;
1932
- justify-content: center;
1933
- cursor: pointer;
1934
- height: calc(100% - 2px);
1935
- width: 38px;
1936
- top: 1px;
1937
- right: 1px;
1938
- z-index: 2;
1939
- box-sizing: border-box;
1940
- }
1941
- .search-btn-input {
1942
- padding-right: 38px;
1943
- }
1944
-
1945
- /*
1946
- * Keep end icons inside the input border.
1947
- * (Sibling flex + qbs-w-full previously pushed icons outside the bordered input.)
1948
- */
1949
- .qbs-autocomplete-adorement-wrapper,
1950
- .qbs-input-adorement-wrapper {
1951
- position: absolute;
1952
- top: 0;
1953
- right: 0;
1954
- bottom: 0;
1955
- display: flex;
1956
- align-items: center;
1957
- z-index: 2;
1958
- pointer-events: none;
1959
- }
1960
- .qbs-autocomplete-adorement-wrapper > *,
1961
- .qbs-input-adorement-wrapper > * {
1962
- pointer-events: auto;
1963
- }
1964
-
1965
- .qbs-autocomplete-adorement-wrapper .adorement,
1966
- .qbs-autocomplete-adorement-wrapper .qbs-autocomplete-adorement,
1967
- .qbs-input-adorement-wrapper .adorement {
1968
- position: relative !important;
1969
- right: auto !important;
1970
- top: auto !important;
1971
- height: 100%;
1972
- padding-right: 4px;
1973
- box-sizing: border-box;
1974
- }
1975
-
1976
- /* Avoid Tailwind `container` utility collision (prefix makes it `.qbs-container`) */
1977
- .qbs-selected-comp-normal {
1978
- position: relative;
1979
- display: block;
1980
- width: 100%;
1981
- max-width: none;
1982
- }
1983
-
1984
- .qbs-autocomplete-selected-comp {
1985
- position: relative;
1986
- display: block;
1987
- width: 100%;
1988
- }
1989
-
1990
- .qbs-autocomplete-selected-comp > .qbs-textfield-expandable.qbs-normal,
1991
- .qbs-autocomplete-selected-comp > .qbs-textfield-expandable.qbs-normal .qbs-textfield-default {
1992
- display: block;
1993
- width: 100%;
1994
- }
1995
-
1996
- /* Tools icon should sit inside the field, vertically centered */
1997
- .qbs-tools-drop-btn {
1998
- position: absolute !important;
1999
- right: 8px !important;
2000
- top: 50% !important;
2001
- transform: translateY(-50%);
2002
- z-index: 2;
2003
- display: inline-flex;
2004
- align-items: center;
2005
- justify-content: center;
2006
- background: transparent;
2007
- border: none;
2008
- padding: 0;
2009
- cursor: pointer;
2010
- }
2011
-
2012
- .qbs-tree-list-container {
2013
- display: flex;
2014
- flex-direction: column;
2015
- }
2016
- .qbs-tree-list-container-sub {
2017
- display: flex;
2018
- flex-direction: row;
2019
- align-items: flex-start;
2020
- gap: 7px;
2021
- }
2022
-
2023
- .qbs-tree-list-container-sub .no-children {
2024
- margin-left: 1.75rem; /* Corresponds to ml-7 in Tailwind */
2025
- }
2026
- .qbs-tree-list-container-sub-icon {
2027
- margin-top: 0.25rem; /* Corresponds to mt-1 in Tailwind */
2028
- cursor: pointer;
2029
- padding-top: 0.5rem; /* Corresponds to py-2 in Tailwind */
2030
- padding-bottom: 0.5rem;
2031
- transition: transform 0.3s ease; /* Smooth rotation transition */
2032
- color: #003c71;
2033
- }
2034
-
2035
- .qbs-tree-list-container-sub-icon.expanded {
2036
- transform: rotate(90deg); /* Corresponds to rotate-90 in Tailwind */
2037
- }
2038
- .qbs-tree-list-container-sub-container {
2039
- display: flex;
2040
- gap: 15px; /* Corresponds to gap-2 in Tailwind */
2041
- padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
2042
- flex-direction: row; /* Corresponds to flex-row in Tailwind */
2043
- width: 100%; /* Corresponds to w-full in Tailwind */
2044
- color: #3d414a;
2045
- }
2046
- .qbs-tree-list-container-sub-container-hideicon {
2047
- display: flex;
2048
- gap: 6px; /* Corresponds to gap-2 in Tailwind */
2049
- padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
2050
- flex-direction: row; /* Corresponds to flex-row in Tailwind */
2051
- width: 100%; /* Corresponds to w-full in Tailwind */
2052
- color: #3d414a;
2053
- }
2054
- .qbs-tree-list-container-sub-container-hideicon:hover {
2055
- color: #003c71;
2056
- background-color: rgba(141, 194, 240, 0.15) !important;
2057
- }
2058
- .qbs-tree-list-container-sub-container:hover {
2059
- color: #003c71;
2060
- background-color: rgba(141, 194, 240, 0.15) !important;
2061
- }
2062
- .qbs-tree-list-container-sub-container.qbs-expanded-child {
2063
- color: #003c71;
2064
- }
2065
- .qbs-tree-list-container-sub-text.qbs-expanded-child {
2066
- color: #003c71;
2067
- }
2068
- .qbs-tree-list-container-sub-text:hover {
2069
- color: #003c71;
2070
- /* background-color: rgba(141, 194, 240, 0.15) !important; */
2071
- }
2072
-
2073
- .qbs-tree-list-container-sub-container.checked,
2074
- .qbs-tree-list-container-sub-container-hideicon.checked {
2075
- color: #003c71;
2076
- background-color: rgba(
2077
- 141,
2078
- 194,
2079
- 240,
2080
- 0.15
2081
- ) !important; /* Corresponds to bg-green-200 in Tailwind */
2082
- }
2083
-
2084
- .marginLeft {
2085
- margin-left: 28px; /* Corresponds to ml-2 in Tailwind */
2086
- }
2087
- .lightmarginLeft {
2088
- margin-left: 19px; /* Corresponds to ml-2 in Tailwind */
2089
- }
2090
- .qbs-tree-list-container-sub- {
2091
- line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
2092
- font-size: 0.875rem; /* Corresponds to text-sm in Tailwind (14px) */
2093
- }
2094
- .qbs-tree-list-container-child {
2095
- margin-left: 1rem; /* Corresponds to ml-4 in Tailwind */
2096
- margin-top: 0.5rem; /* Corresponds to mt-2 in Tailwind */
2097
- display: flex; /* Corresponds to flex in Tailwind */
2098
- flex-direction: column; /* Corresponds to flex-col in Tailwind */
2099
- gap: 0.5rem; /* Corresponds to gap-2 in Tailwind */
2100
- }
2101
- .qbs-tree-list-container-sub-text {
2102
- line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
2103
- font-size: 14px; /* Corresponds to text-sm in Tailwind (14px) */
2104
- font-weight: 500;
2105
- letter-spacing: 0.28px;
2106
- font-family: 'Noto Sans';
2107
- /* color: #3d414a; */
2108
- }
2109
-
2110
-
2111
- .qbs-flex {
2112
- display: flex;
2113
- }
2114
- .qbs-flex-wrap {
2115
- flex-wrap: wrap;
2116
- }
2117
- .qbs-w-full {
2118
- width: 100%;
2119
- }
2120
- .qbs-mb-2 {
2121
- margin-bottom: 0.5rem;
2122
- }
2123
- .-qbs-mt-2 {
2124
- margin-top: -0.5rem;
2125
- }
2126
- .qbs-flex-1 {
2127
- flex: 1 1 0%;
2128
- }
2129
- .qbs-inline-block {
2130
- display: inline-block;
2131
- }
2132
- .qbs-text-sm {
2133
- font-size: 0.875rem;
2134
- }
2135
- .qbs-cursor-pointer {
2136
- cursor: pointer;
2137
- }
2138
- .qbs-text-center {
2139
- text-align: center;
2140
- }
2141
- .qbs-p-1 {
2142
- padding: 0.25rem;
2143
- }
2144
- .qbs-border-b-2 {
2145
- border-bottom-width: 2px;
2146
- }
2147
- .qbs-tab-item {
2148
- color: #4b5563;
2149
- border-color: #d1d5db;
2150
- /* Prevent mid-word breaking from any inherited/global rules */
2151
- word-break: normal;
2152
- overflow-wrap: normal;
2153
- hyphens: manual;
2154
- /* Prevent breaking at spaces too (single-line label) */
2155
- white-space: nowrap;
2156
- /* In non-scroll layout, keep text tidy if it's forced into a narrow cell */
2157
- overflow: hidden;
2158
- text-overflow: ellipsis;
2159
- /* Minimum left/right padding inside each tab */
2160
- padding-left: 8px;
2161
- padding-right: 8px;
2162
- }
2163
- .qbs-tab-item:hover {
2164
- color: #2563eb;
2165
- }
2166
- .qbs-tab-active-item {
2167
- color: #2563eb;
2168
- border-color: #2563eb;
2169
- }
2170
-
2171
- /* When tabs overflow, keep them in a single row and allow horizontal scroll */
2172
- .qbs-tab.qbs-tab-scroll {
2173
- flex-wrap: nowrap !important; /* override .qbs-flex-wrap */
2174
- overflow-x: auto;
2175
- overflow-y: hidden;
2176
- -webkit-overflow-scrolling: touch;
2177
- }
2178
-
2179
- .qbs-tab.qbs-tab-scroll .qbs-tab-items {
2180
- flex: 0 0 auto !important; /* override .qbs-flex-1 */
2181
- }
2182
-
2183
- .qbs-tab.qbs-tab-scroll .qbs-tab-item {
2184
- width: max-content !important; /* override .qbs-w-full */
2185
- white-space: nowrap;
2186
- word-break: normal;
2187
- overflow-wrap: normal;
2188
- hyphens: manual;
2189
- overflow: visible;
2190
- text-overflow: clip;
2191
- }
2192
-
2193
- /* If the tab label has nested spans (icons + text), ensure they inherit the non-breaking behavior */
2194
- .qbs-tab-item * {
2195
- word-break: inherit;
2196
- overflow-wrap: inherit;
2197
- hyphens: inherit;
2198
- white-space: inherit;
2199
- }
2200
- .qbs-relative {
2201
- position: relative;
2202
- }
2203
- .qbs-gap-1 {
2204
- gap: 0.25rem;
2205
- }
2206
- .qbs-rounded-full {
2207
- border-radius: 9999px;
2208
- }
2209
- .qbs-text-xs {
2210
- font-size: 0.75rem;
2211
- }
2212
- .qbs-inline-flex {
2213
- display: inline-flex;
2214
- }
2215
- .qbs-items-center {
2216
- align-items: center;
2217
- }
2218
- .qbs-justify-center {
2219
- justify-content: center;
2220
- }
2221
- .qbs-px-2 {
2222
- padding-left: 0.5rem;
2223
- padding-right: 0.5rem;
2224
- }
2225
- .qbs-py-1 {
2226
- padding-top: 0.25rem;
2227
- padding-bottom: 0.25rem;
2228
- }
2229
- .qbs-leading-none {
2230
- line-height: 1;
2231
- }
2232
- .qbs-min-w-6 {
2233
- min-width: 1.5rem;
2234
- }
2235
- .qbs-min-h-6 {
2236
- min-height: 1.5rem;
2237
- }
2238
- .qbs-align-middle {
2239
- vertical-align: middle;
2240
- }
2241
- .qbs-min-emp-h {
2242
- min-height: 183px;
2243
- padding-top: 80px;
2244
- padding-bottom: 80px;
2245
- }
2246
- .qbs-flex-grow {
2247
- flex-grow: 1;
2248
- }
2249
- .qbs-text-right {
2250
- text-align: right;
2251
- }
2252
- .qbs-readmore-collapse {
2253
- cursor: pointer;
2254
- width: 100%;
2255
- text-align: center;
2256
- display: flex;
2257
- justify-content: center;
2258
- margin-top: 5px;
2259
- }
2260
- .qbs-readmore-collapse div {
2261
- border-radius: 9999px;
2262
- min-width: 1.5rem;
2263
- min-height: 1.5rem;
2264
- padding: 5px;
2265
- }
2266
- .qbs-more-collapse:hover {
2267
- background-color: #d1d5db;
2268
- }
2269
- .qbs-hidden {
2270
- display: none;
2271
- }
2272
- .qbs-autocomplete-selected-suggestions {
2273
- padding: 8px 0px;
2274
- }
2275
- .qbs-autocomplete-selected-suggestions .qbs-autocomplete-suggestions-sub {
2276
- min-height: 184px;
2277
- }
2278
- .qbs-autocomplete-selected-suggestions .qbs-autocomplete-selected-suggestions-outer {
2279
- padding: 0px 8px;
2280
- }
2281
- .qbs-autocomplete-selected-suggestions .qbs-autocomplete-listitem-container{
2282
- padding-top: 0px;
2283
- padding-left: 4px;
2284
- padding-right: 4px;
2285
- }
2286
- .qbs-autocomplete-selected-suggestions .qbs-autocomplete-selected-suggestions-outer span.dropdown-search-icon {
2287
- left: 16px;
2288
- }
2289
- .qbs-autocomplete-selected-suggestions .qbs-autocomplete-selected-suggestions-outer .qbs-all-dropdown-btn {
2290
- right: 16px;
2291
- }
2292
- .selected-items-outer-container {
2293
- display: flex;
2294
- gap: 5px;
2295
- flex-wrap: wrap;
2296
- overflow-x: auto;
2297
- transition: height 3s ease-in-out, opacity 3s ease-in-out,
2298
- padding 1s ease-in-out;
2299
- }
2300
- .qbs-bottom-0{
2301
- bottom: 0;
2302
- }
2303
- .qbs-select-all-link{
2304
- border-bottom: 1px solid var(--border-card-color-default, #d6d8dc);
2305
- padding: 0px 8px;
2306
- }
2307
- .qbs-select-all-link .qbs-autocomplete-suggestions-item {
2308
- margin-top: 5px;
2309
- }
2310
-
2311
- .qbs-select-all-link .qbs-autocomplete-checkbox-container:hover,
2312
- .qbs-select-all-link .qbs-autocomplete-checkbox-container.is-selected,
2313
- .qbs-select-all-link .qbs-autocomplete-suggestions-item:hover
2314
- {
2315
- background: #fff;
2316
- border-radius: 0px;
2317
- }
2318
- .qbs-select-all-link .qbs-autocomplete-listitem-container:hover {
2319
- background-color:#fff !important;
2320
- }
2321
-
2322
- .has-selected-items {
2323
- color: #FF681D !important;
2324
- }
2325
-
2326
- .tools-drop-btn-active {
2327
- color: #FF681D !important;
2328
- }
2329
- .qbs-tab-has-selected-items .qbs-tab-item{
2330
- color: #FF681D !important;
2331
- }
2332
-
2333
- .tooltip-container {
2334
- position: relative;
2335
- transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
2336
- }
2337
-
2338
- .bottom {
2339
- .tooltip {
2340
- position: absolute;
2341
- bottom: -40;
2342
- right: 3px;
2343
- transform: translateX(0%);
2344
- padding: 0.3em 0.6em;
2345
- opacity: 0;
2346
- width: max-content;
2347
- max-width: 100%;
2348
- z-index: 999;
2349
- font-size: 12px;
2350
- color: #fff !important;
2351
- pointer-events: none;
2352
- transition: all 0.3s;
2353
- border: 1px solid #e55353;
2354
- background-color: #e55353;
2355
- border-radius: 6px;
2356
- color: rgb(34, 34, 34);
2357
-
2358
- &.info {
2359
- color: #ffffff !important;
2360
- border: 1px solid #ffffff;
2361
- background-color: #000000;
2362
- right: 1px;
2363
- top: 5px;
2364
- }
2365
-
2366
- &.card {
2367
- color: #ffffff !important;
2368
- border: 1px solid #ffffff;
2369
- background-color: #000000;
2370
- right: -8px;
2371
- top: 5px;
2372
- }
2373
- }
2374
-
2375
- .tooltip::before {
2376
- position: absolute;
2377
- content: "";
2378
- height: 0.6em;
2379
- width: 0.6em;
2380
- right: 20px;
2381
- z-index: 999;
2382
- top: -4px;
2383
- border: 1px solid #e55353;
2384
- border-right: none;
2385
- border-bottom: none;
2386
- transform: translate(50%) rotate(45deg);
2387
- background-color: #e55353;
2388
- }
2389
-
2390
- .info.tooltip::before {
2391
- border: 1px solid #000000;
2392
- background-color: #000000;
2393
- right: 14px;
2394
- position: absolute;
2395
- content: "";
2396
- height: 0.6em;
2397
- width: 0.6em;
2398
- z-index: 999;
2399
- top: -4px;
2400
- border-right: none;
2401
- border-bottom: none;
2402
- transform: translate(50%) rotate(45deg);
2403
- }
2404
-
2405
- .card.tooltip::before {
2406
- border: 1px solid #000000;
2407
- background-color: #000000;
2408
- right: 14px;
2409
- position: absolute;
2410
- content: "";
2411
- height: 0.6em;
2412
- width: 0.6em;
2413
- z-index: 999;
2414
- top: -3px;
2415
- border-right: none;
2416
- border-bottom: none;
2417
- transform: translate(50%) rotate(45deg);
2418
- }
2419
-
2420
- .tooltip-container:hover .tooltip {
2421
- top: 46px;
2422
- opacity: 1;
2423
- visibility: visible;
2424
- z-index: 999;
2425
- pointer-events: auto;
2426
-
2427
- &.info {
2428
- top: 30px;
2429
- max-width: 500px;
2430
- position: absolute;
2431
- }
2432
-
2433
- &.card {
2434
- top: 20px;
2435
- max-width: 300px;
2436
- position: absolute;
2437
- }
2438
- }
2439
- .tooltip-info {
2440
- position: absolute;
2441
- bottom: -40;
2442
- right: 3px;
2443
- transform: translateX(0%);
2444
- padding: 0.3em 0.6em;
2445
- opacity: 0;
2446
- width: max-content;
2447
- max-width: 100%;
2448
- z-index: 999;
2449
- top: 46px;
2450
- font-size: 12px;
2451
- color: #fff !important;
2452
- pointer-events: none;
2453
- transition: all 0.3s;
2454
- border: 1px solid #475467;
2455
- background-color: #475467;
2456
- border-radius: 6px;
2457
- }
2458
- .tooltip-info::before {
2459
- position: absolute;
2460
- content: "";
2461
- height: 0.6em;
2462
- width: 0.6em;
2463
- right: 20px;
2464
- z-index: 999;
2465
- top: -4px;
2466
- border: 1px solid #475467;
2467
- border-right: none;
2468
- border-bottom: none;
2469
- transform: translate(50%) rotate(45deg);
2470
- background-color: #475467;
2471
- }
2472
-
2473
- .tooltip-container:hover .tooltip-info {
2474
- top: 46px;
2475
- opacity: 1;
2476
- visibility: visible;
2477
- z-index: 999;
2478
- pointer-events: auto;
2479
- }
2480
- }
2481
- .top-tool {
2482
- .tooltip {
2483
- position: absolute;
2484
- bottom: 45px !important;
2485
- left: 0;
2486
- top: auto !important;
2487
- transform: translateX(0%);
2488
- padding: 0.3em 0.6em;
2489
- opacity: 0;
2490
- width: max-content;
2491
- white-space: normal;
2492
- z-index: 999;
2493
- font-size: 12px;
2494
- max-width: 100%;
2495
- color: #ff681d !important;
2496
- pointer-events: none;
2497
- transition: all 0.3s;
2498
- border: 1px solid #ff681d;
2499
- background-color: #fff;
2500
- border-radius: 6px;
2501
- color: rgb(34, 34, 34);
2502
- }
2503
-
2504
- .tooltip::before {
2505
- position: absolute;
2506
- content: "";
2507
- height: 0.6em;
2508
- width: 0.6em;
2509
- z-index: 999;
2510
- bottom: -4px;
2511
- border: 1px solid #ff681d;
2512
- border-left: none;
2513
- border-top: none;
2514
- transform: translate(50%) rotate(45deg);
2515
- background-color: #fff;
2516
- }
2517
-
2518
- .tooltip-container:hover .tooltip {
2519
- bottom: 45px !important;
2520
- opacity: 1;
2521
- top: auto !important;
2522
- visibility: visible;
2523
- z-index: 999;
2524
- pointer-events: auto;
2525
- }
2526
- }
2527
- .bottom-tool {
2528
- .tooltip {
2529
- position: absolute;
2530
- bottom: -40;
2531
- transform: translateX(0%);
2532
- padding: 0.3em 0.6em;
2533
- opacity: 0;
2534
- width: max-content;
2535
- max-width: 100%;
2536
- z-index: 999;
2537
- font-size: 12px;
2538
- color: #ff681d !important;
2539
- white-space: wrap;
2540
- pointer-events: none;
2541
- transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
2542
- border: 1px solid #ff681d;
2543
- background-color: #fff;
2544
- border-radius: 6px;
2545
- color: rgb(34, 34, 34);
2546
- }
2547
-
2548
- .tooltip::before {
2549
- position: absolute;
2550
- content: "";
2551
- height: 0.6em;
2552
- width: 0.6em;
2553
- z-index: 999;
2554
- top: -4px;
2555
- border: 1px solid #ff681d;
2556
- border-right: none;
2557
- border-bottom: none;
2558
- transform: translate(50%) rotate(45deg);
2559
- background-color: #fff;
2560
- }
2561
-
2562
- .tooltip-container:hover .tooltip {
2563
- top: 46px;
2564
- opacity: 1;
2565
- visibility: visible;
2566
- z-index: 999;
2567
- pointer-events: auto;
2568
- }
2569
- }
2570
-
2571
- .right {
2572
- .tooltip {
2573
- position: absolute;
2574
- top: 2.5px;
2575
- left: calc(100% + 9px);
2576
- transform: translateX(0%);
2577
- padding: 8px;
2578
- opacity: 0;
2579
- min-width: 200px;
2580
- max-width: 200px;
2581
- min-height: calc(100% - 16px);
2582
- height: auto;
2583
- z-index: 999;
2584
- font-size: 12px;
2585
- color: #fff !important;
2586
- pointer-events: none;
2587
- transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
2588
- border: 1px solid #e55353;
2589
- background-color: #e55353;
2590
- border-radius: 6px;
2591
- color: rgb(34, 34, 34);
2592
- }
2593
-
2594
- .tooltip-card {
2595
- padding: 3px 10px 4px;
2596
- top: -4px;
2597
- min-width: 175px;
2598
- background-color: #3d414a;
2599
- border: 1px solid #3d414a;
2600
- }
2601
-
2602
- .tooltip::before {
2603
- position: absolute;
2604
- content: "";
2605
- height: 0.6em;
2606
- width: 0.6em;
2607
- left: -8px;
2608
- top: 14px;
2609
- z-index: 999;
2610
- transform: translateY(10px);
2611
- border: 1px solid #e55353;
2612
- border-top: none;
2613
- border-right: none;
2614
- transform: translate(50%) rotate(45deg);
2615
- background-color: #e55353;
2616
- }
2617
-
2618
- .tooltip-card::before {
2619
- top: 8px;
2620
- background-color: #3d414a;
2621
- border: 1px solid #3d414a;
2622
- }
2623
-
2624
- .tooltip-container:hover {
2625
- .tooltip {
2626
- top: 2.5px;
2627
- opacity: 1;
2628
- visibility: visible;
2629
- z-index: 999;
2630
- pointer-events: auto;
2631
- }
2632
-
2633
- .tooltip-card {
2634
- top: -4px;
2635
- }
2636
- }
2637
- }
2638
-
2639
- .left {
2640
- .tooltip {
2641
- position: absolute;
2642
- top: 2.5px;
2643
- right: calc(100% + 9px);
2644
- transform: translateX(0%);
2645
- padding: 8px;
2646
- opacity: 0;
2647
- min-width: 200px;
2648
- max-width: 200px;
2649
- min-height: calc(100% - 16px);
2650
- z-index: 999;
2651
- font-size: 12px;
2652
- color: #fff !important;
2653
- pointer-events: none;
2654
- transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
2655
- border: 1px solid #e55353;
2656
- background-color: #e55353;
2657
- border-radius: 6px;
2658
- color: rgb(34, 34, 34);
2659
- }
2660
-
2661
- .tooltip::before {
2662
- position: absolute;
2663
- content: "";
2664
- height: 0.6em;
2665
- width: 0.6em;
2666
- right: 0px;
2667
- top: 14px;
2668
- z-index: 999;
2669
- transform: translateY(10px);
2670
- border: 1px solid #e55353;
2671
- border-bottom: none;
2672
- border-left: none;
2673
- transform: translate(50%) rotate(45deg);
2674
- background-color: #e55353;
2675
- }
2676
-
2677
- .tooltip-container:hover .tooltip {
2678
- top: 2.5px;
2679
- opacity: 1;
2680
- visibility: visible;
2681
- z-index: 999;
2682
- pointer-events: auto;
2683
- }
2684
- }
2685
-
2686
- .top {
2687
- .tooltip-info {
2688
- position: absolute;
2689
- top: -40;
2690
- left: 0;
2691
- transform: translateX(0%);
2692
- padding: 0.3em 0.6em;
2693
- opacity: 0;
2694
- width: 100%;
2695
- z-index: 999;
2696
- font-size: 12px;
2697
- color: #fff !important;
2698
- pointer-events: none;
2699
- transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
2700
- border: 1px solid #475467;
2701
- background-color: #475467;
2702
- border-radius: 6px;
2703
- }
2704
-
2705
- .tooltip-info::before {
2706
- position: absolute;
2707
- content: "";
2708
- height: 0.6em;
2709
- width: 0.6em;
2710
- right: 20px;
2711
- z-index: 999;
2712
- bottom: -4px;
2713
- border: 1px solid #475467;
2714
- border-left: none;
2715
- border-top: none;
2716
- transform: translate(50%) rotate(45deg);
2717
- background-color: #475467;
2718
- }
2719
-
2720
- .tooltip-container:hover .tooltip-info {
2721
- top: -40px;
2722
- opacity: 1;
2723
- visibility: visible;
2724
- z-index: 999;
2725
- pointer-events: auto;
2726
- }
2727
- .tooltip {
2728
- position: absolute;
2729
- top: -40;
2730
- left: 0;
2731
- transform: translateX(0%);
2732
- padding: 0.3em 0.6em;
2733
- opacity: 0;
2734
- width: 100%;
2735
- z-index: 999;
2736
- font-size: 12px;
2737
- color: #fff !important;
2738
- pointer-events: none;
2739
- transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
2740
- border: 1px solid #e55353;
2741
- background-color: #e55353;
2742
- border-radius: 6px;
2743
- color: rgb(34, 34, 34);
2744
- }
2745
-
2746
- .tooltip::before {
2747
- position: absolute;
2748
- content: "";
2749
- height: 0.6em;
2750
- width: 0.6em;
2751
- right: 20px;
2752
- z-index: 999;
2753
- bottom: -4px;
2754
- border: 1px solid #e55353;
2755
- border-left: none;
2756
- border-top: none;
2757
- transform: translate(50%) rotate(45deg);
2758
- background-color: #e55353;
2759
- }
2760
-
2761
- .tooltip-container:hover .tooltip {
2762
- top: -40px;
2763
- opacity: 1;
2764
- visibility: visible;
2765
- z-index: 999;
2766
- pointer-events: auto;
2767
- }
2768
- }
2769
-
2770
- .custom-tooltip-container {
2771
- position: relative;
2772
- display: inline-block;
2773
- }
2774
-
2775
- .custom-text {
2776
- font-size: 18px;
2777
- cursor: pointer;
2778
- }
2779
-
2780
- .custom-tooltip {
2781
- position: absolute;
2782
- top: 100%;
2783
- left: 20%;
2784
- opacity: 0;
2785
- visibility: hidden;
2786
- font-size: 12px;
2787
- background: #deefff;
2788
- border-color: #bee0ff;
2789
- padding: 5px;
2790
- align-items: center;
2791
- transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
2792
- z-index: 1;
2793
- }
2794
-
2795
- .custom-tooltip::before {
2796
- content: "";
2797
- position: absolute;
2798
- bottom: 100%;
2799
- left: 20%;
2800
- /* Center the arrow */
2801
- border-width: 9px;
2802
- /* Slightly larger to act as border */
2803
- border-style: solid;
2804
- border-color: transparent transparent #bee0ff transparent;
2805
- /* Border color */
2806
- transform: translateX(-20%);
2807
- z-index: -1;
2808
- /* Ensure it's behind the ::after pseudo-element */
2809
- }
2810
-
2811
- .custom-tooltip::after {
2812
- content: "";
2813
- position: absolute;
2814
- bottom: 100%;
2815
- left: 20%;
2816
- border-width: 8px;
2817
- border-style: solid;
2818
- border-color: transparent transparent #deefff transparent;
2819
- transform: translateX(-20%);
2820
- z-index: 1;
2821
- }
2822
-
2823
- .custom-tooltip-container:hover .custom-tooltip {
2824
- top: 100%;
2825
- opacity: 1;
2826
- visibility: visible;
2827
- background: #deefff;
2828
- transform: translate(-20%, 10px);
2829
- }
2830
-
2831
- /* Portal tooltip version used outside .tooltip-container */
2832
- .tooltip-info-portal {
2833
- /* position/transform set inline in React (portal) */
2834
- padding: 0.3em 0.6em;
2835
- opacity: 1;
2836
- width: max-content;
2837
- max-width: 100%;
2838
- font-size: 12px;
2839
- color: #fff !important;
2840
- pointer-events: auto;
2841
- transition: opacity 0.2s, visibility 0.2s;
2842
- border: 1px solid #475467;
2843
- background-color: #475467;
2844
- border-radius: 6px;
2845
- }
2846
-
2847
- .tooltip-info-portal::before {
2848
- position: absolute;
2849
- content: "";
2850
- height: 0.6em;
2851
- width: 0.6em;
2852
- right: 20px;
2853
- top: -4px;
2854
- border: 1px solid #475467;
2855
- border-right: none;
2856
- border-bottom: none;
2857
- transform: translate(50%) rotate(45deg);
2858
- background-color: #475467;
2859
- }
2860
-
2861
- .tooltip-portal-error {
2862
- /* position/transform set inline in React (portal); avoid CSS overriding anchor */
2863
- padding: 0.3em 0.6em;
2864
- opacity: 1;
2865
- width: max-content;
2866
- max-width: 320px;
2867
- font-size: 12px;
2868
- color: #fff !important;
2869
- pointer-events: auto;
2870
- transition: opacity 0.2s, visibility 0.2s;
2871
- border: 1px solid #e55353;
2872
- background-color: #e55353;
2873
- border-radius: 6px;
2874
- }
2875
-
2876
- .tooltip-portal-error::before {
2877
- position: absolute;
2878
- content: "";
2879
- height: 0.6em;
2880
- width: 0.6em;
2881
- right: 8px;
2882
- top: -4px;
2883
- border: 1px solid #e55353;
2884
- border-right: none;
2885
- border-bottom: none;
2886
- transform: translate(50%) rotate(45deg);
2887
- background-color: #e55353;
2888
- }
2889
-