@egovernments/digit-ui-health-css 0.3.2 → 0.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.
@@ -0,0 +1,1400 @@
1
+ .health-dss-inbox-table {
2
+ .rdt_TableBody {
3
+ border: none !important;
4
+ border-bottom: 0.063rem solid theme(digitv2.lightTheme.divider) !important;
5
+ }
6
+ }
7
+
8
+ .customTable {
9
+ .rdt_TableRow:hover {
10
+ background-color: #FBEEE8 !important;
11
+ }
12
+
13
+ .rdt_TableRow>.rdt_TableCell:first-of-type {
14
+ position: sticky;
15
+ z-index: 10;
16
+ left: 0rem;
17
+ background-color: theme(digitv2.lightTheme.paper);
18
+ }
19
+
20
+ .rdt_TableRow:hover>.rdt_TableCell:first-of-type {
21
+ position: sticky;
22
+ z-index: 10;
23
+ left: 0rem;
24
+ background-color: #FBEEE8;
25
+ }
26
+
27
+ .rdt_TableHeadRow>.rdt_TableCol:first-of-type {
28
+ position: sticky;
29
+ z-index: 12;
30
+ left: 0rem;
31
+ top: 0rem;
32
+ background-color: theme(digitv2.lightTheme.background);
33
+ }
34
+
35
+ .rdt_TableRow>.rdt_TableCell:nth-of-type(2) {
36
+ position: sticky;
37
+ z-index: 10;
38
+ left: 6.25rem;
39
+ background-color: theme(digitv2.lightTheme.paper);
40
+ }
41
+
42
+ .rdt_TableRow:hover>.rdt_TableCell:nth-of-type(2) {
43
+ position: sticky;
44
+ z-index: 10;
45
+ left: 6.25rem;
46
+ background-color: #FBEEE8;
47
+ }
48
+
49
+ .rdt_TableHeadRow>.rdt_TableCol:nth-of-type(2) {
50
+ position: sticky;
51
+ z-index: 12;
52
+ left: 6.25rem;
53
+ top: 0rem;
54
+ background-color: theme(digitv2.lightTheme.background);
55
+ }
56
+ }
57
+
58
+
59
+ .custom-daterange-wrapper {
60
+ position: relative;
61
+ font-family: theme(digitv2.fontFamily.sans);
62
+ }
63
+
64
+ .custom-daterange-input {
65
+ padding: 0.75rem;
66
+ border: 0.063rem solid theme(digitv2.lightTheme.generic-inputborder);
67
+ background-color: theme(digitv2.lightTheme.generic-background);
68
+ cursor: pointer;
69
+ width: fit-content;
70
+ min-width: 37.5rem;
71
+ display: inline-block;
72
+ user-select: none;
73
+ box-shadow: 0 0.063rem 0.188rem rgba(0, 0, 0, 0.1);
74
+
75
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
76
+ /* Media query for tablets */
77
+ max-width: 27.5rem;
78
+ }
79
+
80
+ @media (max-aspect-ratio: 9/16) {
81
+ /* Media query for mobile */
82
+ max-width: 100%;
83
+ width: 100%;
84
+ }
85
+
86
+ @media (min-aspect-ratio: 3/4) {
87
+ /* Media query for desktop */
88
+ max-width: 37.5rem;
89
+ }
90
+ }
91
+
92
+ .custom-daterange-input:hover {
93
+ border-color: #999;
94
+ }
95
+
96
+ .custom-daterange-popup {
97
+ position: absolute;
98
+ top: 110%;
99
+ left: 0;
100
+ z-index: 1000;
101
+ background: theme(digitv2.lightTheme.paper);
102
+ border: 0.063rem solid #ddd;
103
+ border-radius: 0.5rem;
104
+ box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
105
+ }
106
+
107
+ .rdrSelected,
108
+ .rdrInRange,
109
+ .rdrStartEdge,
110
+ .rdrEndEdge {
111
+ background: theme(digitv2.lightTheme.primary) !important;
112
+ color: theme(digitv2.lightTheme.paper);
113
+ }
114
+
115
+ .rdrDayNumber span {
116
+ color: theme(digitv2.lightTheme.text-primary);
117
+ }
118
+
119
+ .rdrDayNumber span:focus,
120
+ .rdrDayNumber span:active {
121
+ color: theme(digitv2.lightTheme.paper);
122
+ }
123
+
124
+ .rdrDay:hover {
125
+ background: theme(digitv2.lightTheme.primary-bg);
126
+ border-radius: 1rem;
127
+ }
128
+
129
+ .stackedCard {
130
+ box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
131
+ flex: 1;
132
+ margin-top: 1.875rem;
133
+ }
134
+
135
+ .digit-stacked-table-container {
136
+ height: 31.25rem;
137
+ display: flex;
138
+ flex-direction: column;
139
+ gap: 1.5rem;
140
+ overflow-y: auto;
141
+ align-items: flex-start;
142
+ }
143
+
144
+ .digit-stacked-table-container::-webkit-scrollbar {
145
+ width: 0.5rem;
146
+ background-color: theme(digitv2.lightTheme.background);
147
+ }
148
+
149
+ .digit-stacked-table-container::-webkit-scrollbar-track {
150
+ background-color: theme(digitv2.lightTheme.background);
151
+ border-radius: 0.563rem;
152
+ }
153
+
154
+ .digit-stacked-table-container::-webkit-scrollbar-thumb {
155
+ background-color: theme(digitv2.lightTheme.divider);
156
+ border-radius: 0.563rem;
157
+ }
158
+
159
+ .digit-stacked-table-container::-webkit-scrollbar:horizontal {
160
+ height: 0.5rem;
161
+ background-color: theme(digitv2.lightTheme.divider);
162
+ }
163
+
164
+ .digit-stacked-row {
165
+ display: flex;
166
+ width: 99%;
167
+ justify-content: space-evenly;
168
+ align-items: center;
169
+ background-color: theme(digitv2.lightTheme.paper-secondary);
170
+ color: theme(digitv2.lightTheme.text-color-secondary);
171
+ border-radius: 0.25rem;
172
+ border: 0.063rem solid theme(digitv2.lightTheme.divider);
173
+ text-align: center;
174
+ padding: 1.5rem;
175
+
176
+ @media (max-aspect-ratio: 9/16) {
177
+ /* Media query for mobile */
178
+ flex-direction: column;
179
+ gap: 1.5rem;
180
+ }
181
+
182
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
183
+ /* Media query for tablets */
184
+ flex-direction: column;
185
+ gap: 1.5rem;
186
+ }
187
+ }
188
+
189
+ .digit-stacked-row-index {
190
+ width: 20%;
191
+ word-break: break-word;
192
+ color: theme(digitv2.lightTheme.text-color-secondary);
193
+ font-family: theme(digitv2.fontFamily.sans);
194
+ font-style: theme(digitv2.fontStyle.normal);
195
+ font-weight: theme(digitv2.fontWeight.bold);
196
+ line-height: 1.14rem;
197
+ text-align: left;
198
+
199
+ @media (max-aspect-ratio: 9/16) {
200
+ /* Media query for mobile */
201
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
202
+ width: 100%;
203
+ align-items: center;
204
+ display: flex;
205
+ justify-content: center;
206
+ }
207
+
208
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
209
+ /* Media query for tablets */
210
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
211
+ width: 100%;
212
+ align-items: center;
213
+ display: flex;
214
+ justify-content: center;
215
+ }
216
+
217
+ @media (min-aspect-ratio: 3/4) {
218
+ /* Media query for desktop */
219
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
220
+ }
221
+ }
222
+
223
+ .digit-stacked-abs-cell {
224
+ width: 20%;
225
+ text-align: center;
226
+ display: flex;
227
+ flex-direction: column;
228
+ gap: 0.5rem;
229
+
230
+ @media (max-aspect-ratio: 9/16) {
231
+ /* Media query for mobile */
232
+ width: 100%;
233
+ }
234
+
235
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
236
+ /* Media query for tablets */
237
+ width: 100%;
238
+ }
239
+ }
240
+
241
+ .digit-stacked-abs-value,
242
+ .digit-dss-options-header-boundary,
243
+ .digit-dss-card-header-text,
244
+ .digit-metric-data-header {
245
+ color: theme(digitv2.lightTheme.text-color-secondary);
246
+ font-family: theme(digitv2.fontFamily.sans);
247
+ font-style: theme(digitv2.fontStyle.normal);
248
+ font-weight: theme(digitv2.fontWeight.bold);
249
+ line-height: 1.14rem;
250
+
251
+ @media (max-aspect-ratio: 9/16) {
252
+ /* Media query for mobile */
253
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
254
+ }
255
+
256
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
257
+ /* Media query for tablets */
258
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
259
+ }
260
+
261
+ @media (min-aspect-ratio: 3/4) {
262
+ /* Media query for desktop */
263
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
264
+ }
265
+ }
266
+
267
+ .digit-stacked-cell-sub-text,
268
+ .digit-pie-chart-legend-text,
269
+ .digit-dss-insight-card-difference,
270
+ .digit-banner-sub-heading,
271
+ .digit-banner-cell-sub-text,
272
+ .digit-table-switch-card {
273
+ color: theme(digitv2.lightTheme.text-color-secondary);
274
+ font-family: theme(digitv2.fontFamily.sans);
275
+ font-style: theme(digitv2.fontStyle.normal);
276
+ font-weight: theme(digitv2.fontWeight.regular);
277
+
278
+ line-height: 1.37rem;
279
+
280
+ @media (max-aspect-ratio: 9/16) {
281
+ /* Media query for mobile */
282
+ font-size: theme(digitv2.fontSize.body-s.mobile);
283
+ }
284
+
285
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
286
+ /* Media query for tablets */
287
+ font-size: theme(digitv2.fontSize.body-s.tablet);
288
+ }
289
+
290
+ @media (min-aspect-ratio: 3/4) {
291
+ /* Media query for desktop */
292
+ font-size: theme(digitv2.fontSize.body-s.desktop);
293
+ }
294
+ }
295
+
296
+ .digit-stacked-percentage-cell {
297
+ width: 20%;
298
+ display: flex;
299
+ flex-direction: column;
300
+ justify-content: center;
301
+ align-items: center;
302
+ gap: 0.5rem;
303
+
304
+ @media (max-aspect-ratio: 9/16) {
305
+ /* Media query for mobile */
306
+ width: 100%;
307
+ }
308
+
309
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
310
+ /* Media query for tablets */
311
+ width: 100%;
312
+ }
313
+ }
314
+
315
+ .digit-stacked-progress-cell {
316
+ display: flex;
317
+ width: 60%;
318
+ justify-content: space-between;
319
+ align-items: center;
320
+ gap: 1.5rem;
321
+ }
322
+
323
+ .digit-stacked-percentage-value {
324
+ width: fit-content;
325
+ color: theme(digitv2.lightTheme.text-color-secondary);
326
+ font-family: theme(digitv2.fontFamily.sans);
327
+ font-style: theme(digitv2.fontStyle.normal);
328
+ font-weight: theme(digitv2.fontWeight.bold);
329
+ line-height: 1.14rem;
330
+
331
+ @media (max-aspect-ratio: 9/16) {
332
+ /* Media query for mobile */
333
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
334
+ }
335
+
336
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
337
+ /* Media query for tablets */
338
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
339
+ }
340
+
341
+ @media (min-aspect-ratio: 3/4) {
342
+ /* Media query for desktop */
343
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
344
+ }
345
+ }
346
+
347
+ .digit-stacked-percentage-bar-grey {
348
+ background-color: #d9d9d9;
349
+ width: 75%;
350
+ border-radius: 1.75rem;
351
+ height: 0.375rem;
352
+ }
353
+
354
+ .digit-stacked-percentage-bar-progress {
355
+ margin: 0rem;
356
+ border-radius: 1.75rem;
357
+ height: 100%;
358
+ position: relative;
359
+ }
360
+
361
+ .digit-stacked-progress-end-circle {
362
+ width: 0.404rem;
363
+ height: 0.404rem;
364
+ background-color: theme(digitv2.lightTheme.paper);
365
+ border-radius: 50%;
366
+ position: absolute;
367
+ top: 50%;
368
+ right: 0;
369
+ transform: translate(50%, -50%);
370
+ box-shadow: 0rem 0.125rem 0.25rem 0rem #00000033;
371
+ z-index: 2;
372
+ }
373
+
374
+ .digit-chart-header {
375
+ display: flex;
376
+ gap: 1.5rem;
377
+ justify-content: space-between;
378
+
379
+ @media (max-aspect-ratio: 9/16) {
380
+ /* Media query for mobile */
381
+ flex-direction: column;
382
+ }
383
+
384
+ .tooltip-content {
385
+ max-width: 100% !important;
386
+ }
387
+ }
388
+
389
+ .digit-dss-insight-card {
390
+ .tooltip-content {
391
+ width: fit-content;
392
+ word-break: break-word;
393
+ max-width: 100% !important;
394
+ }
395
+ }
396
+
397
+ .digit-side-content {
398
+ display: flex;
399
+ align-items: center;
400
+ gap: 1rem;
401
+ width: auto;
402
+ justify-content: flex-end;
403
+
404
+ .digit-table-search-wrapper {
405
+ display: flex !important;
406
+ width: fit-content;
407
+ align-items: center;
408
+ gap: 0.5rem;
409
+ width: 24rem;
410
+ max-width: 100%;
411
+
412
+ svg {
413
+ flex-shrink: 0;
414
+ }
415
+
416
+ @media (max-width: 64rem) {
417
+ width: 20rem;
418
+ }
419
+
420
+ @media (max-width: 48rem) {
421
+ width: 100%;
422
+ }
423
+
424
+ .digit-field {
425
+ width: 24rem;
426
+ max-width: 100%;
427
+
428
+ @media (max-width: 64rem) {
429
+ width: 20rem;
430
+ }
431
+
432
+ @media (max-width: 48rem) {
433
+ width: 100%;
434
+ }
435
+ }
436
+
437
+ /*.digit-text-input-field {
438
+ height: 2rem !important;
439
+
440
+ .input-container {
441
+ height: 2rem !important;
442
+
443
+ .digit-employeeCard-input {
444
+ height: 2rem !important;
445
+ }
446
+
447
+ .digit-text-input-customIcon {
448
+ top: 0.25rem;
449
+ right: 0.5rem;
450
+ }
451
+ }
452
+ }*/
453
+ }
454
+ }
455
+ .custom-table.digit-side-content {
456
+ width: auto;
457
+ }
458
+
459
+ .digit-ellipsis-button-wrapper {
460
+ width: 1.5rem;
461
+
462
+ .digit-ellipsis-button {
463
+ width: 1.5rem;
464
+ min-width: 1.5rem;
465
+ padding: 0rem;
466
+ background-color: transparent !important;
467
+ border: none;
468
+ box-shadow: none;
469
+
470
+ .digit-button-label {
471
+ display: none;
472
+ }
473
+ }
474
+
475
+ .header-dropdown-container {
476
+ .header-dropdown-menu {
477
+ left: unset;
478
+ }
479
+ }
480
+ }
481
+
482
+ .digit-generic-chart-header {
483
+ font-family: theme(digitv2.fontFamily.sans);
484
+ font-style: theme(digitv2.fontStyle.normal);
485
+ font-weight: theme(digitv2.fontWeight.bold);
486
+ line-height: 1.14rem;
487
+
488
+ @media (max-aspect-ratio: 9/16) {
489
+ /* Media query for mobile */
490
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
491
+ }
492
+
493
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
494
+ /* Media query for tablets */
495
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
496
+ }
497
+
498
+ @media (min-aspect-ratio: 3/4) {
499
+ /* Media query for desktop */
500
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
501
+ }
502
+ }
503
+
504
+ .digit-generic-chart-subheader,
505
+ .digit-dss-insight-card-text {
506
+ color: theme(digitv2.lightTheme.text-color-secondary);
507
+ font-family: theme(digitv2.fontFamily.sans);
508
+ font-style: theme(digitv2.fontStyle.normal);
509
+ font-weight: theme(digitv2.fontWeight.bold);
510
+ line-height: 1.14rem;
511
+
512
+ @media (max-aspect-ratio: 9/16) {
513
+ /* Media query for mobile */
514
+ font-size: theme(digitv2.fontSize.heading-s.mobile);
515
+ }
516
+
517
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
518
+ /* Media query for tablets */
519
+ font-size: theme(digitv2.fontSize.heading-s.tablet);
520
+ }
521
+
522
+ @media (min-aspect-ratio: 3/4) {
523
+ /* Media query for desktop */
524
+ font-size: theme(digitv2.fontSize.heading-s.desktop);
525
+ }
526
+ }
527
+
528
+ .digit-generic-chart-caption,
529
+ .digit-dss-insight-card-sub-text {
530
+ color: theme(digitv2.lightTheme.text-secondary);
531
+ font-family: theme(digitv2.fontFamily.sans);
532
+ font-style: theme(digitv2.fontStyle.normal);
533
+ font-weight: theme(digitv2.fontWeight.regular);
534
+
535
+ @media (max-aspect-ratio: 9/16) {
536
+ /* Media query for mobile */
537
+ font-size: theme(digitv2.fontSize.body-s.mobile);
538
+ }
539
+
540
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
541
+ /* Media query for tablets */
542
+ font-size: theme(digitv2.fontSize.body-s.tablet);
543
+ }
544
+
545
+ @media (min-aspect-ratio: 3/4) {
546
+ /* Media query for desktop */
547
+ font-size: theme(digitv2.fontSize.body-s.desktop);
548
+ }
549
+ }
550
+
551
+ .digit-dss-insight-card-text,
552
+ .digit-dss-insight-card-sub-text {
553
+ color: theme(digitv2.lightTheme.text-color-primary);
554
+ }
555
+
556
+ .digit-dss-card {
557
+ display: flex;
558
+ align-items: stretch;
559
+ justify-content: flex-start;
560
+ gap: 1.5rem;
561
+
562
+ .digit-dss-card-parent {
563
+ flex: 1;
564
+ }
565
+ }
566
+
567
+ .digit-dss-card {
568
+ &.add-margin {
569
+ margin-bottom: 1.5rem;
570
+ }
571
+ }
572
+
573
+ .digit-donut-chart-container {
574
+ height: 31.25rem;
575
+ }
576
+
577
+ .digit-loader-new {
578
+ &.digit-center-loader {
579
+ width: 100%;
580
+ height: 100%;
581
+ display: flex;
582
+ align-items: center;
583
+ justify-content: center;
584
+ }
585
+ }
586
+
587
+ .digit-pie-chart-inner-label-text,
588
+ .digit-dss-metric-card-text {
589
+ color: theme(digitv2.lightTheme.text-color-secondary);
590
+ font-family: theme(digitv2.fontFamily.sans);
591
+ font-style: theme(digitv2.fontStyle.normal);
592
+ font-weight: theme(digitv2.fontWeight.regular);
593
+ line-height: 1.37rem;
594
+
595
+ @media (max-aspect-ratio: 9/16) {
596
+ /* Media query for mobile */
597
+ font-size: theme(digitv2.fontSize.body-s.mobile);
598
+ }
599
+
600
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
601
+ /* Media query for tablets */
602
+ font-size: theme(digitv2.fontSize.body-s.tablet);
603
+ }
604
+
605
+ @media (min-aspect-ratio: 3/4) {
606
+ /* Media query for desktop */
607
+ font-size: theme(digitv2.fontSize.body-s.desktop);
608
+ }
609
+ }
610
+
611
+ .digit-pie-chart-inner-label-value,
612
+ .digit-dss-insight-card-value {
613
+ color: theme(digitv2.lightTheme.text-color-secondary);
614
+ font-family: theme(digitv2.fontFamily.sans);
615
+ font-style: theme(digitv2.fontStyle.normal);
616
+ font-weight: theme(digitv2.fontWeight.bold);
617
+ line-height: 1.14rem;
618
+
619
+ @media (max-aspect-ratio: 9/16) {
620
+ /* Media query for mobile */
621
+ font-size: theme(digitv2.fontSize.heading-l.mobile);
622
+ }
623
+
624
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
625
+ /* Media query for tablets */
626
+ font-size: theme(digitv2.fontSize.heading-l.tablet);
627
+ }
628
+
629
+ @media (min-aspect-ratio: 3/4) {
630
+ /* Media query for desktop */
631
+ font-size: theme(digitv2.fontSize.heading-l.desktop);
632
+ }
633
+ }
634
+
635
+ .recharts-legend-item {
636
+ margin-right: 0rem !important;
637
+ margin-bottom: 1.5rem !important;
638
+ }
639
+
640
+ .digit-dss-insight-card-value {
641
+ margin-bottom: 0.75rem;
642
+ }
643
+
644
+ .digit-dss-insight-card-difference {
645
+ margin-top: 0.25rem;
646
+ margin-bottom: 2rem;
647
+ white-space: pre;
648
+ display: flex;
649
+ gap: 0.25rem;
650
+ align-items: center;
651
+ justify-content: center;
652
+
653
+ &.increase {
654
+ color: #00703C;
655
+ }
656
+
657
+ &.decrease {
658
+ color: theme(digitv2.lightTheme.error-v2);
659
+ }
660
+
661
+ &.metric-card {
662
+ margin: 0rem;
663
+ }
664
+ }
665
+
666
+ .recharts-layer {
667
+ &.recharts-pie-sector {
668
+ outline: none;
669
+ }
670
+ }
671
+
672
+ .digit-pie-chart-tags {
673
+ margin: 0rem;
674
+ }
675
+
676
+ .digit-stacked-collection-card-header-wrapper {
677
+ display: flex;
678
+ gap: 1rem;
679
+ align-items: center;
680
+ min-height: 2.5rem;
681
+
682
+ svg {
683
+ width: 2.5rem;
684
+ height: 2.5rem;
685
+ flex-shrink: 0;
686
+ }
687
+
688
+ .digit-stacked-collection-card-header-text,
689
+ .digit-small-pie-label {
690
+ color: theme(digitv2.lightTheme.text-color-primary);
691
+ font-family: theme(digitv2.fontFamily.sans);
692
+ font-style: theme(digitv2.fontStyle.normal);
693
+ font-weight: theme(digitv2.fontWeight.bold);
694
+ word-break: break-word;
695
+ word-wrap: break-word;
696
+ max-width: 100%;
697
+
698
+ @media (max-aspect-ratio: 9/16) {
699
+ /* Media query for mobile */
700
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
701
+ }
702
+
703
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
704
+ /* Media query for tablets */
705
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
706
+ }
707
+
708
+ @media (min-aspect-ratio: 3/4) {
709
+ /* Media query for desktop */
710
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
711
+ }
712
+ }
713
+ }
714
+
715
+ .digit-dss-card-body-stacked {
716
+ display: flex;
717
+ flex-direction: column;
718
+ align-items: center;
719
+ gap: 2rem;
720
+ }
721
+
722
+ .digit-dss-card-item {
723
+ text-align: center;
724
+ display: flex;
725
+ width: 100%;
726
+ flex-direction: column;
727
+ }
728
+
729
+ .digit-dss-card-item-border {
730
+ border-bottom: 0.063rem solid theme(digitv2.lightTheme.divider);
731
+ }
732
+
733
+ .digit-dss-insight-card {
734
+ text-align: center;
735
+ display: flex;
736
+ flex-direction: column;
737
+ }
738
+
739
+ .digit-stacked-collection-card {
740
+ width: 33%;
741
+ gap: 2rem;
742
+ }
743
+
744
+ .digit-dss-options-header-wrapper {
745
+ margin-bottom: 2rem;
746
+ display: flex;
747
+ justify-content: space-between;
748
+ }
749
+
750
+ .digit-dss-options-header-options {
751
+ display: flex;
752
+ align-items: center;
753
+ gap: 1.5rem;
754
+ }
755
+
756
+ .digit-dss-options-header-text {
757
+ color: theme(digitv2.lightTheme.text-color-primary);
758
+ font-family: theme(digitv2.fontFamily.rc);
759
+ font-style: theme(digitv2.fontStyle.normal);
760
+ font-weight: theme(digitv2.fontWeight.bold);
761
+
762
+ @media (max-aspect-ratio: 9/16) {
763
+ /* Media query for mobile */
764
+ font-size: theme(digitv2.fontSize.heading-xl.mobile);
765
+ }
766
+
767
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
768
+ /* Media query for tablets */
769
+ font-size: theme(digitv2.fontSize.heading-xl.tablet);
770
+ }
771
+
772
+ @media (min-aspect-ratio: 3/4) {
773
+ /* Media query for desktop */
774
+ font-size: theme(digitv2.fontSize.heading-xl.desktop);
775
+ }
776
+
777
+ .digit-dss-options-header-boundary {
778
+ color: theme(digitv2.lightTheme.text-color-primary);
779
+ }
780
+
781
+ &.level-two {
782
+ display: flex;
783
+ align-items: center;
784
+ }
785
+ }
786
+
787
+ .digit-dss-options-header-option-button {
788
+ h2 {
789
+ color: theme(digitv2.lightTheme.text-color-secondary) !important;
790
+ }
791
+ }
792
+
793
+ .digit-dss-options-header-options-button-wrapper {
794
+ .header-dropdown-container {
795
+ .header-dropdown-menu {
796
+ left: -100px !important;
797
+ }
798
+ }
799
+ }
800
+
801
+ .table-column-header {
802
+ white-space: nowrap;
803
+ overflow-wrap: break-word;
804
+ }
805
+
806
+ /* Ensure sortable column headers don't overflow */
807
+ .data-table .rdt_TableCol_Sortable {
808
+ max-width: 100%;
809
+ }
810
+
811
+ /* Tooltips inside those headers should have reduced width */
812
+ .data-table .rdt_TableCol_Sortable .tooltip {
813
+ max-width: 80%;
814
+ }
815
+
816
+ .rdt_TableCol_Sortable .__rdt_custom_sort_icon__ {
817
+ flex-shrink: 0;
818
+ }
819
+
820
+ .digit-chart-header-wrapper {
821
+ width: 100%;
822
+ }
823
+
824
+ .digit-filters-wrapper {
825
+ display: flex;
826
+ align-items: center;
827
+ gap: 1rem;
828
+ z-index: 1;
829
+ }
830
+
831
+ .filter-close,
832
+ .filter-header {
833
+ display: none;
834
+ }
835
+
836
+ .clearText {
837
+ display: block;
838
+ text-align: right;
839
+ color: theme(digitv2.lightTheme.primary);
840
+ margin-top: 1.25rem;
841
+ margin-left: 0.625rem;
842
+ }
843
+
844
+
845
+ .digit-filters-wrapper {
846
+
847
+
848
+ .digit-filters-input {
849
+ max-width: 18.75rem;
850
+ flex-basis: 22%;
851
+
852
+ &.tabs {
853
+ flex-basis: 20%;
854
+
855
+ .digit-toggle-toolbar {
856
+ .toggle-option-container {
857
+ max-width: 100% !important;
858
+
859
+ .digit-toggle-btn-wrap {
860
+ &.checked {
861
+ .digit-toggle-label {
862
+ background-color: theme(digitv2.lightTheme.paper);
863
+ color: theme(digitv2.lightTheme.primary) !important;
864
+ }
865
+ }
866
+ }
867
+ }
868
+ }
869
+ }
870
+ }
871
+
872
+ .switch-wrapper {
873
+ display: flex;
874
+ justify-content: space-between;
875
+ max-width: 12.5rem;
876
+
877
+ .radio-switch {
878
+ display: none;
879
+
880
+ &:checked~label {
881
+ border-color: theme(colors.primary.main);
882
+ color: theme(colors.primary.main);
883
+ }
884
+ }
885
+
886
+ label {
887
+ border: 0.063rem solid;
888
+ padding: 0.375rem 0.625rem;
889
+ display: block;
890
+ @apply border border-solid border-input-border;
891
+
892
+ &:hover {
893
+ @apply border-2 border-solid border-primary-main;
894
+ }
895
+ }
896
+ }
897
+ }
898
+
899
+ .digit-date-range-label-field {
900
+ display: flex;
901
+ flex-direction: column;
902
+ gap: 0.5rem;
903
+
904
+ .digit-date-range-label {
905
+ font-family: theme(digitv2.fontFamily.sans);
906
+ font-style: theme(digitv2.fontStyle.normal);
907
+ font-weight: theme(digitv2.fontWeight.regular);
908
+ line-height: 1.37rem;
909
+ color: theme(digitv2.lightTheme.text-color-primary);
910
+
911
+ @media (max-aspect-ratio: 9/16) {
912
+ /* Media query for mobile */
913
+ font-size: theme(digitv2.fontSize.label.mobile);
914
+ }
915
+
916
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
917
+ /* Media query for tablets */
918
+ font-size: theme(digitv2.fontSize.label.tablet);
919
+ }
920
+
921
+ @media (min-aspect-ratio: 3/4) {
922
+ /* Media query for desktop */
923
+ font-size: theme(digitv2.fontSize.label.desktop);
924
+ }
925
+ }
926
+
927
+ .digit-options-card {
928
+ overflow: visible;
929
+ width: unset;
930
+ max-width: unset;
931
+ }
932
+ }
933
+
934
+ .digit-filter-by-cycle-wrapper {
935
+ display: inline-flex;
936
+ position: absolute;
937
+ right: 2.5rem;
938
+ margin-inline-end: 1.5rem;
939
+ align-content: flex-end;
940
+ align-items: center;
941
+ gap: 1rem;
942
+
943
+ .digit-tag-container {
944
+ margin: 0rem;
945
+ align-items: center;
946
+ justify-content: flex-end;
947
+ }
948
+
949
+ .header-dropdown-menu{
950
+ min-width: 11.25rem !important;
951
+ }
952
+ }
953
+
954
+ .digit-tag-container{
955
+ &.customTable{
956
+ margin:0rem;
957
+ margin-bottom: 1.5rem;
958
+ }
959
+ }
960
+
961
+ .digit-dss-switch-tabs {
962
+ background: theme(digitv2.lightTheme.paper);
963
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
964
+ border-radius: 0.25rem;
965
+ margin-bottom: 1.5rem;
966
+ display: flex;
967
+ gap: 2rem;
968
+ }
969
+
970
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar {
971
+ width: 0.5rem;
972
+ background-color: theme(digitv2.lightTheme.background);
973
+ }
974
+
975
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar-track {
976
+ background-color: theme(digitv2.lightTheme.background);
977
+ border-radius: 0.563rem;
978
+ }
979
+
980
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar-thumb {
981
+ background-color: theme(digitv2.lightTheme.divider);
982
+ border-radius: 0.563rem;
983
+ }
984
+
985
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar:horizontal {
986
+ height: 0.5rem;
987
+ background-color: theme(digitv2.lightTheme.divider);
988
+ }
989
+
990
+ .digit-dss-switch-tab-wrapper {
991
+ cursor: pointer;
992
+ display: flex;
993
+ flex-direction: row;
994
+ height: 4.5rem;
995
+ align-items: center;
996
+ max-width: 80%;
997
+ overflow: auto;
998
+ }
999
+
1000
+ .digit-dss-switch-tab-selected {
1001
+ border-bottom: 0.25rem solid theme(digitv2.lightTheme.primary);
1002
+ color: theme(digitv2.lightTheme.primary);
1003
+ padding: 0.625rem 1.5rem;
1004
+ font-family: theme(digitv2.fontFamily.sans);
1005
+ font-style: theme(digitv2.fontStyle.normal);
1006
+ font-weight: theme(digitv2.fontWeight.bold);
1007
+ flex: 1;
1008
+ height: 100%;
1009
+ display: flex;
1010
+ align-items: center;
1011
+ justify-content: center;
1012
+ white-space: nowrap;
1013
+
1014
+ @media (max-aspect-ratio: 9/16) {
1015
+ /* Media query for mobile */
1016
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
1017
+ }
1018
+
1019
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
1020
+ /* Media query for tablets */
1021
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
1022
+ }
1023
+
1024
+ @media (min-aspect-ratio: 3/4) {
1025
+ /* Media query for desktop */
1026
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
1027
+ }
1028
+ }
1029
+
1030
+ .digit-dss-switch-tab-unselected {
1031
+ color: theme(colors.text.secondary);
1032
+ padding: 0.625rem 1.5rem;
1033
+ font-family: theme(digitv2.fontFamily.sans);
1034
+ font-style: theme(digitv2.fontStyle.normal);
1035
+ font-weight: theme(digitv2.fontWeight.regular);
1036
+ font-size: theme(digitv2.fontSize.caption-m.mobile);
1037
+ flex: 1;
1038
+ height: 100%;
1039
+ display: flex;
1040
+ align-items: center;
1041
+ justify-content: center;
1042
+ white-space: nowrap;
1043
+ }
1044
+
1045
+
1046
+ .digit-parentDiv-progress {
1047
+ display: flex;
1048
+ align-items: center;
1049
+ gap: 1rem;
1050
+ justify-content: flex-end;
1051
+ width: 20%;
1052
+ margin-right: 2rem;
1053
+ }
1054
+
1055
+ .digit-containerDiv-progress {
1056
+ background-color: theme(digitv2.lightTheme.divider);
1057
+ border-radius: 1.5rem;
1058
+ width: 80rem;
1059
+ height: 0.5rem;
1060
+ }
1061
+
1062
+ .digit-progress-fill {
1063
+ border-radius: inherit;
1064
+ height: 100%,
1065
+ }
1066
+
1067
+ .digit-progress-text {
1068
+ white-space: nowrap;
1069
+ text-align: center;
1070
+ max-width: auto;
1071
+ }
1072
+
1073
+ .digit-chart-row {
1074
+ display: flex;
1075
+ gap: 1.5rem;
1076
+ align-items: stretch;
1077
+ margin-bottom: 1.5rem;
1078
+ }
1079
+
1080
+ .wrapper-child {
1081
+ display: flex;
1082
+ flex-direction: column;
1083
+ justify-content: center;
1084
+ flex-grow: 1;
1085
+ }
1086
+
1087
+ .blocks {
1088
+ display: flex;
1089
+ margin-bottom: 1.563rem;
1090
+
1091
+ p:only-child {
1092
+ font-weight: bold;
1093
+ font-size: 1.5rem;
1094
+ }
1095
+
1096
+ div {
1097
+ margin-right: 1.563rem;
1098
+
1099
+ p:not(:first-child) {
1100
+ font-weight: bold;
1101
+ font-size: 1.5rem;
1102
+ }
1103
+ }
1104
+ }
1105
+
1106
+ .summary-card-margin {
1107
+ margin: 0 1.5rem 1.25rem 0rem !important;
1108
+ }
1109
+
1110
+ .digit-dss-card-header-wrapper {
1111
+ display: flex;
1112
+ align-items: center;
1113
+ gap: 1rem;
1114
+
1115
+ svg {
1116
+ flex-shrink: 0;
1117
+ }
1118
+
1119
+ .digit-dss-card-header-text {
1120
+ color: theme(digitv2.lightTheme.text-color-primary);
1121
+ line-height: normal;
1122
+ }
1123
+ }
1124
+
1125
+ .digit-dss-summary-card {
1126
+ display: flex;
1127
+ justify-content: space-around;
1128
+ text-align: center;
1129
+ flex-wrap: wrap;
1130
+ }
1131
+
1132
+ .digit-metric-data-header {
1133
+ padding-top: 0rem;
1134
+ white-space: nowrap;
1135
+ margin-left: 0rem;
1136
+ }
1137
+
1138
+ .digit-metric-details-chart {
1139
+ cursor: pointer;
1140
+ padding: 1.25rem;
1141
+ display: flex;
1142
+ flex-direction: column;
1143
+ width: 50%;
1144
+ justify-content: center;
1145
+ text-align: center;
1146
+ gap: 0.75rem;
1147
+
1148
+ &.add-divider {
1149
+ border-right: 0.063rem solid theme(digitv2.lightTheme.divider);
1150
+ }
1151
+ }
1152
+
1153
+
1154
+ .digit-banner-card {
1155
+ padding: 0;
1156
+ border: 0.063rem solid theme(digitv2.lightTheme.primary);
1157
+ flex-direction: row;
1158
+ }
1159
+
1160
+ .digit-banner-table {
1161
+ justify-content: center;
1162
+ display: flex;
1163
+ padding: 2rem;
1164
+ align-items: flex-start;
1165
+ cursor: pointer;
1166
+ flex: 1;
1167
+ }
1168
+
1169
+ .digit-banner-heading {
1170
+ display: flex;
1171
+ flex-direction: column;
1172
+ gap: 0.25rem;
1173
+ }
1174
+
1175
+ .digit-banner-main-heading {
1176
+ font-family: theme(digitv2.fontFamily.sans);
1177
+ font-weight: theme(digitv2.fontWeight.bold);
1178
+ font-size: 1.75rem;
1179
+ color: theme(digitv2.lightTheme.text-color-primary);
1180
+ }
1181
+
1182
+ .digit-banner-sub-heading {
1183
+ color: #585858;
1184
+ }
1185
+
1186
+ .digit-banner-card-header {
1187
+ border-radius: 0.188rem 0rem 0rem 0.188rem;
1188
+ background: theme(digitv2.lightTheme.paper-secondary);
1189
+ display: flex;
1190
+ align-items: center;
1191
+ padding: 2rem;
1192
+ gap: 1rem;
1193
+ max-width: 30%;
1194
+ }
1195
+
1196
+ .digit-banner-cell {
1197
+ display: flex;
1198
+ flex-direction: column;
1199
+ gap: 0.5rem;
1200
+ }
1201
+
1202
+ .digit-banner-cell-sub-text {
1203
+ color: #585858;
1204
+ margin-left: auto;
1205
+ margin-right: auto;
1206
+ word-wrap: break-word;
1207
+ }
1208
+
1209
+ .digit-banner-value {
1210
+ color: #183E4A;
1211
+ font-family: theme(digitv2.fontFamily.sans);
1212
+ font-weight: 700;
1213
+ font-size: 1.75rem;
1214
+ line-height: 100%;
1215
+ letter-spacing: 0rem;
1216
+
1217
+ }
1218
+
1219
+ .digit-dss-banner-card-icon {
1220
+ flex-shrink: 0;
1221
+ }
1222
+
1223
+ .digit-banner-tooltip {
1224
+ padding: 2rem;
1225
+ white-space: normal;
1226
+ bottom: 95%;
1227
+ font-size: 0.875rem;
1228
+ }
1229
+
1230
+ .digit-banner-tooltip-text {
1231
+ font-weight: 500;
1232
+ color: theme(digitv2.lightTheme.paper);
1233
+ }
1234
+
1235
+ .digit-table-switch-card-chip {
1236
+ display: flex;
1237
+ cursor: pointer;
1238
+ width: 100%;
1239
+ }
1240
+
1241
+ .digit-table-switch-card {
1242
+ display: flex;
1243
+ flex-direction: row;
1244
+ align-items: center;
1245
+ padding: 0.5rem;
1246
+ position: static;
1247
+ height: 2.5rem;
1248
+ top: 0rem;
1249
+ flex: none;
1250
+ white-space: nowrap;
1251
+ flex-grow: 0;
1252
+ background: theme(digitv2.lightTheme.paper);
1253
+ border: 0.063rem solid theme(digitv2.lightTheme.background);
1254
+
1255
+ &.active {
1256
+ border: 0.063rem solid theme(digitv2.lightTheme.primary);
1257
+ box-sizing: border-box;
1258
+ color: theme(digitv2.lightTheme.primary);
1259
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
1260
+ font-family: theme(digitv2.fontFamily.sans);
1261
+ font-style: theme(digitv2.fontStyle.normal);
1262
+ font-weight: theme(digitv2.fontWeight.regular);
1263
+ line-height: 1.37rem;
1264
+
1265
+ @media (max-aspect-ratio: 9/16) {
1266
+ /* Media query for mobile */
1267
+ font-size: theme(digitv2.fontSize.body-l.mobile);
1268
+ }
1269
+
1270
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
1271
+ /* Media query for tablets */
1272
+ font-size: theme(digitv2.fontSize.body-l.tablet);
1273
+ }
1274
+
1275
+ @media (min-aspect-ratio: 3/4) {
1276
+ /* Media query for desktop */
1277
+ font-size: theme(digitv2.fontSize.body-l.desktop);
1278
+ }
1279
+ }
1280
+
1281
+ &.inactive {
1282
+ color: #B1B4B6;
1283
+
1284
+ :hover {
1285
+ background: #fffffc;
1286
+ font-size: 1.125rem;
1287
+ color: theme(digitv2.lightTheme.text-color-secondary);
1288
+ }
1289
+ }
1290
+ }
1291
+
1292
+ .digit-custom-table-drilldown-text {
1293
+ cursor: pointer;
1294
+ color: theme(digitv2.lightTheme.primary);
1295
+ }
1296
+
1297
+ .recharts-tooltip-wrapper {
1298
+ outline: none;
1299
+ border: 0.063rem solid #b1b4b6;
1300
+ border-radius: 0.25rem;
1301
+ padding: 0.5rem;
1302
+ background-color: theme(digitv2.lightTheme.paper);
1303
+ }
1304
+
1305
+ .recharts-legend-wrapper::-webkit-scrollbar {
1306
+ width: 0.5rem;
1307
+ background-color: theme(digitv2.lightTheme.background);
1308
+ }
1309
+
1310
+ .recharts-legend-wrapper::-webkit-scrollbar-track {
1311
+ background-color: theme(digitv2.lightTheme.background);
1312
+ border-radius: 0.563rem;
1313
+ }
1314
+
1315
+ .recharts-legend-wrapper::-webkit-scrollbar-thumb {
1316
+ background-color: theme(digitv2.lightTheme.divider);
1317
+ border-radius: 0.563rem;
1318
+ }
1319
+
1320
+ .recharts-legend-wrapper::-webkit-scrollbar:horizontal {
1321
+ height: 0.5rem;
1322
+ background-color: theme(digitv2.lightTheme.divider);
1323
+ }
1324
+
1325
+ .digit-results-card-buttons {
1326
+ &.dsscampaigncard {
1327
+ justify-content: flex-end !important;
1328
+ }
1329
+ }
1330
+
1331
+ .digit-heat-map-zoom-wrap {
1332
+ display: flex;
1333
+ justify-content: end;
1334
+ flex-direction: column;
1335
+ align-items: center;
1336
+ margin-bottom: 1.5rem;
1337
+ margin-right: 1.5rem;
1338
+ }
1339
+
1340
+ .digit-heat-map-zoom-button {
1341
+ display: flex;
1342
+ justify-content: center;
1343
+ align-items: center;
1344
+ width: 100%;
1345
+ background: theme(digitv2.lightTheme.paper);
1346
+ border: 0.063rem solid theme(digitv2.lightTheme.divider);
1347
+ color: theme(digitv2.lightTheme.primary);
1348
+ font-weight: 700;
1349
+ font-size: 1.125rem;
1350
+ cursor: pointer;
1351
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
1352
+ width: 2rem;
1353
+ height: 2rem;
1354
+ }
1355
+
1356
+ .digit-heat-map-recenter {
1357
+ margin-bottom: 1.5rem;
1358
+ margin-left: 1.5rem;
1359
+ }
1360
+
1361
+ .digit-kibana-card {
1362
+ width: 100%;
1363
+
1364
+ h1 {
1365
+ margin: 0rem;
1366
+ margin-bottom: 1.5rem;
1367
+ color: theme(digitv2.lightTheme.text-color-primary);
1368
+ font-family: theme(digitv2.fontFamily.sans);
1369
+ font-style: theme(digitv2.fontStyle.normal);
1370
+ font-weight: theme(digitv2.fontWeight.bold);
1371
+
1372
+ @media (max-aspect-ratio: 9/16) {
1373
+ /* Media query for mobile */
1374
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
1375
+ }
1376
+
1377
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
1378
+ /* Media query for tablets */
1379
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
1380
+ }
1381
+
1382
+ @media (min-aspect-ratio: 3/4) {
1383
+ /* Media query for desktop */
1384
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
1385
+ }
1386
+ }
1387
+ }
1388
+
1389
+ .app-iframe-wrapper.digit-dss-kibana-iframe-wrapper {
1390
+ left: unset !important;
1391
+ top: unset !important;
1392
+ position: unset !important;
1393
+ height: 37.5rem;
1394
+ }
1395
+
1396
+ .app-iframe.digit-dss-kibana-iframe {
1397
+ position: unset !important;
1398
+ height: 37.5rem !important;
1399
+ width: 100% !important;
1400
+ }