@egovernments/digit-ui-health-css 0.3.2 → 0.3.5

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,1406 @@
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
+ flex-wrap: wrap;
562
+
563
+ .digit-dss-card-parent {
564
+ flex: 1;
565
+ }
566
+ }
567
+
568
+ .digit-dss-card {
569
+ &.add-margin {
570
+ margin-bottom: 1.5rem;
571
+ }
572
+ }
573
+
574
+ .digit-donut-chart-container {
575
+ height: 31.25rem;
576
+ }
577
+
578
+ .digit-loader-new {
579
+ &.digit-center-loader {
580
+ width: 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
+ flex: 1 1 0;
743
+ }
744
+
745
+ .digit-dss-options-header-wrapper {
746
+ margin-bottom: 2rem;
747
+ display: flex;
748
+ justify-content: space-between;
749
+ }
750
+
751
+ .digit-dss-options-header-options {
752
+ display: flex;
753
+ align-items: center;
754
+ gap: 1.5rem;
755
+ }
756
+
757
+ .digit-dss-options-header-text {
758
+ color: theme(digitv2.lightTheme.text-color-primary);
759
+ font-family: theme(digitv2.fontFamily.rc);
760
+ font-style: theme(digitv2.fontStyle.normal);
761
+ font-weight: theme(digitv2.fontWeight.bold);
762
+
763
+ @media (max-aspect-ratio: 9/16) {
764
+ /* Media query for mobile */
765
+ font-size: theme(digitv2.fontSize.heading-xl.mobile);
766
+ }
767
+
768
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
769
+ /* Media query for tablets */
770
+ font-size: theme(digitv2.fontSize.heading-xl.tablet);
771
+ }
772
+
773
+ @media (min-aspect-ratio: 3/4) {
774
+ /* Media query for desktop */
775
+ font-size: theme(digitv2.fontSize.heading-xl.desktop);
776
+ }
777
+
778
+ .digit-dss-options-header-boundary {
779
+ color: theme(digitv2.lightTheme.text-color-primary);
780
+ }
781
+
782
+ &.level-two {
783
+ display: flex;
784
+ align-items: center;
785
+ }
786
+ }
787
+
788
+ .digit-dss-options-header-option-button {
789
+ h2 {
790
+ color: theme(digitv2.lightTheme.text-color-secondary) !important;
791
+ }
792
+ }
793
+
794
+ .digit-dss-options-header-options-button-wrapper {
795
+ .header-dropdown-container {
796
+ .header-dropdown-menu {
797
+ left: -100px !important;
798
+ }
799
+ }
800
+ }
801
+
802
+ .table-column-header {
803
+ white-space: nowrap;
804
+ overflow-wrap: break-word;
805
+ }
806
+
807
+ /* Ensure sortable column headers don't overflow */
808
+ .data-table .rdt_TableCol_Sortable {
809
+ max-width: 100%;
810
+ }
811
+
812
+ /* Tooltips inside those headers should have reduced width */
813
+ .data-table .rdt_TableCol_Sortable .tooltip {
814
+ max-width: 80%;
815
+ }
816
+
817
+ .rdt_TableCol_Sortable .__rdt_custom_sort_icon__ {
818
+ flex-shrink: 0;
819
+ }
820
+
821
+ .digit-chart-header-wrapper {
822
+ width: 100%;
823
+ }
824
+
825
+ .digit-filters-wrapper {
826
+ display: flex;
827
+ align-items: center;
828
+ gap: 1rem;
829
+ z-index: 1;
830
+ }
831
+
832
+ .filter-close,
833
+ .filter-header {
834
+ display: none;
835
+ }
836
+
837
+ .clearText {
838
+ display: block;
839
+ text-align: right;
840
+ color: theme(digitv2.lightTheme.primary);
841
+ margin-top: 1.25rem;
842
+ margin-left: 0.625rem;
843
+ }
844
+
845
+
846
+ .digit-filters-wrapper {
847
+
848
+
849
+ .digit-filters-input {
850
+ max-width: 18.75rem;
851
+ flex-basis: 22%;
852
+
853
+ &.tabs {
854
+ flex-basis: 20%;
855
+
856
+ .digit-toggle-toolbar {
857
+ .toggle-option-container {
858
+ max-width: 100% !important;
859
+
860
+ .digit-toggle-btn-wrap {
861
+ &.checked {
862
+ .digit-toggle-label {
863
+ background-color: theme(digitv2.lightTheme.paper);
864
+ color: theme(digitv2.lightTheme.primary) !important;
865
+ }
866
+ }
867
+ }
868
+ }
869
+ }
870
+ }
871
+ }
872
+
873
+ .switch-wrapper {
874
+ display: flex;
875
+ justify-content: space-between;
876
+ max-width: 12.5rem;
877
+
878
+ .radio-switch {
879
+ display: none;
880
+
881
+ &:checked~label {
882
+ border-color: theme(colors.primary.main);
883
+ color: theme(colors.primary.main);
884
+ }
885
+ }
886
+
887
+ label {
888
+ border: 0.063rem solid;
889
+ padding: 0.375rem 0.625rem;
890
+ display: block;
891
+ @apply border border-solid border-input-border;
892
+
893
+ &:hover {
894
+ @apply border-2 border-solid border-primary-main;
895
+ }
896
+ }
897
+ }
898
+ }
899
+
900
+ .digit-date-range-label-field {
901
+ display: flex;
902
+ flex-direction: column;
903
+ gap: 0.5rem;
904
+
905
+ .digit-date-range-label {
906
+ font-family: theme(digitv2.fontFamily.sans);
907
+ font-style: theme(digitv2.fontStyle.normal);
908
+ font-weight: theme(digitv2.fontWeight.regular);
909
+ line-height: 1.37rem;
910
+ color: theme(digitv2.lightTheme.text-color-primary);
911
+
912
+ @media (max-aspect-ratio: 9/16) {
913
+ /* Media query for mobile */
914
+ font-size: theme(digitv2.fontSize.label.mobile);
915
+ }
916
+
917
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
918
+ /* Media query for tablets */
919
+ font-size: theme(digitv2.fontSize.label.tablet);
920
+ }
921
+
922
+ @media (min-aspect-ratio: 3/4) {
923
+ /* Media query for desktop */
924
+ font-size: theme(digitv2.fontSize.label.desktop);
925
+ }
926
+ }
927
+
928
+ .digit-options-card {
929
+ overflow: visible;
930
+ width: unset;
931
+ max-width: unset;
932
+ }
933
+ }
934
+
935
+ .digit-filter-by-cycle-wrapper {
936
+ display: inline-flex;
937
+ position: absolute;
938
+ right: 2.5rem;
939
+ margin-inline-end: 1.5rem;
940
+ align-content: flex-end;
941
+ align-items: center;
942
+ gap: 1rem;
943
+
944
+ .digit-tag-container {
945
+ margin: 0rem;
946
+ align-items: center;
947
+ justify-content: flex-end;
948
+ }
949
+
950
+ .header-dropdown-menu{
951
+ min-width: 11.25rem !important;
952
+ }
953
+ }
954
+
955
+ .digit-tag-container{
956
+ &.customTable{
957
+ margin:0rem;
958
+ margin-bottom: 1.5rem;
959
+ }
960
+ }
961
+
962
+ .digit-dss-switch-tabs {
963
+ background: theme(digitv2.lightTheme.paper);
964
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
965
+ border-radius: 0.25rem;
966
+ margin-bottom: 1.5rem;
967
+ display: flex;
968
+ gap: 2rem;
969
+ }
970
+
971
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar {
972
+ width: 0.5rem;
973
+ background-color: theme(digitv2.lightTheme.background);
974
+ }
975
+
976
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar-track {
977
+ background-color: theme(digitv2.lightTheme.background);
978
+ border-radius: 0.563rem;
979
+ }
980
+
981
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar-thumb {
982
+ background-color: theme(digitv2.lightTheme.divider);
983
+ border-radius: 0.563rem;
984
+ }
985
+
986
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar:horizontal {
987
+ height: 0.5rem;
988
+ background-color: theme(digitv2.lightTheme.divider);
989
+ }
990
+
991
+ .digit-dss-switch-tab-wrapper {
992
+ cursor: pointer;
993
+ display: flex;
994
+ flex-direction: row;
995
+ height: 4.5rem;
996
+ align-items: center;
997
+ max-width: 80%;
998
+ overflow: auto;
999
+ }
1000
+
1001
+ .digit-dss-switch-tab-selected {
1002
+ border-bottom: 0.25rem solid theme(digitv2.lightTheme.primary);
1003
+ color: theme(digitv2.lightTheme.primary);
1004
+ padding: 0.625rem 1.5rem;
1005
+ font-family: theme(digitv2.fontFamily.sans);
1006
+ font-style: theme(digitv2.fontStyle.normal);
1007
+ font-weight: theme(digitv2.fontWeight.bold);
1008
+ flex: 1;
1009
+ height: 100%;
1010
+ display: flex;
1011
+ align-items: center;
1012
+ justify-content: center;
1013
+ white-space: nowrap;
1014
+
1015
+ @media (max-aspect-ratio: 9/16) {
1016
+ /* Media query for mobile */
1017
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
1018
+ }
1019
+
1020
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
1021
+ /* Media query for tablets */
1022
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
1023
+ }
1024
+
1025
+ @media (min-aspect-ratio: 3/4) {
1026
+ /* Media query for desktop */
1027
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
1028
+ }
1029
+ }
1030
+
1031
+ .digit-dss-switch-tab-unselected {
1032
+ color: theme(colors.text.secondary);
1033
+ padding: 0.625rem 1.5rem;
1034
+ font-family: theme(digitv2.fontFamily.sans);
1035
+ font-style: theme(digitv2.fontStyle.normal);
1036
+ font-weight: theme(digitv2.fontWeight.regular);
1037
+ font-size: theme(digitv2.fontSize.caption-m.mobile);
1038
+ flex: 1;
1039
+ height: 100%;
1040
+ display: flex;
1041
+ align-items: center;
1042
+ justify-content: center;
1043
+ white-space: nowrap;
1044
+ }
1045
+
1046
+
1047
+ .digit-parentDiv-progress {
1048
+ display: flex;
1049
+ align-items: center;
1050
+ gap: 1rem;
1051
+ justify-content: flex-end;
1052
+ width: 20%;
1053
+ margin-right: 2rem;
1054
+ }
1055
+
1056
+ .digit-containerDiv-progress {
1057
+ background-color: theme(digitv2.lightTheme.divider);
1058
+ border-radius: 1.5rem;
1059
+ width: 80rem;
1060
+ height: 0.5rem;
1061
+ }
1062
+
1063
+ .digit-progress-fill {
1064
+ border-radius: inherit;
1065
+ height: 100%,
1066
+ }
1067
+
1068
+ .digit-progress-text {
1069
+ white-space: nowrap;
1070
+ text-align: center;
1071
+ max-width: auto;
1072
+ }
1073
+
1074
+ .digit-chart-row {
1075
+ display: flex;
1076
+ gap: 1.5rem;
1077
+ align-items: stretch;
1078
+ margin-bottom: 1.5rem;
1079
+ flex-wrap: wrap;
1080
+
1081
+ .digit-chart-item{
1082
+ flex: 1 1 0;
1083
+ }
1084
+ }
1085
+
1086
+ .wrapper-child {
1087
+ display: flex;
1088
+ flex-direction: column;
1089
+ justify-content: center;
1090
+ flex-grow: 1;
1091
+ }
1092
+
1093
+ .blocks {
1094
+ display: flex;
1095
+ margin-bottom: 1.563rem;
1096
+
1097
+ p:only-child {
1098
+ font-weight: bold;
1099
+ font-size: 1.5rem;
1100
+ }
1101
+
1102
+ div {
1103
+ margin-right: 1.563rem;
1104
+
1105
+ p:not(:first-child) {
1106
+ font-weight: bold;
1107
+ font-size: 1.5rem;
1108
+ }
1109
+ }
1110
+ }
1111
+
1112
+ .summary-card-margin {
1113
+ margin: 0 1.5rem 1.25rem 0rem !important;
1114
+ }
1115
+
1116
+ .digit-dss-card-header-wrapper {
1117
+ display: flex;
1118
+ align-items: center;
1119
+ gap: 1rem;
1120
+
1121
+ svg {
1122
+ flex-shrink: 0;
1123
+ }
1124
+
1125
+ .digit-dss-card-header-text {
1126
+ color: theme(digitv2.lightTheme.text-color-primary);
1127
+ line-height: normal;
1128
+ }
1129
+ }
1130
+
1131
+ .digit-dss-summary-card {
1132
+ display: flex;
1133
+ justify-content: space-around;
1134
+ text-align: center;
1135
+ flex-wrap: wrap;
1136
+ }
1137
+
1138
+ .digit-metric-data-header {
1139
+ padding-top: 0rem;
1140
+ white-space: nowrap;
1141
+ margin-left: 0rem;
1142
+ }
1143
+
1144
+ .digit-metric-details-chart {
1145
+ cursor: pointer;
1146
+ padding: 1.25rem;
1147
+ display: flex;
1148
+ flex-direction: column;
1149
+ width: 50%;
1150
+ justify-content: center;
1151
+ text-align: center;
1152
+ gap: 0.75rem;
1153
+
1154
+ &.add-divider {
1155
+ border-right: 0.063rem solid theme(digitv2.lightTheme.divider);
1156
+ }
1157
+ }
1158
+
1159
+
1160
+ .digit-banner-card {
1161
+ padding: 0;
1162
+ border: 0.063rem solid theme(digitv2.lightTheme.primary);
1163
+ flex-direction: row;
1164
+ }
1165
+
1166
+ .digit-banner-table {
1167
+ justify-content: center;
1168
+ display: flex;
1169
+ padding: 2rem;
1170
+ align-items: flex-start;
1171
+ cursor: pointer;
1172
+ flex: 1;
1173
+ }
1174
+
1175
+ .digit-banner-heading {
1176
+ display: flex;
1177
+ flex-direction: column;
1178
+ gap: 0.25rem;
1179
+ }
1180
+
1181
+ .digit-banner-main-heading {
1182
+ font-family: theme(digitv2.fontFamily.sans);
1183
+ font-weight: theme(digitv2.fontWeight.bold);
1184
+ font-size: 1.75rem;
1185
+ color: theme(digitv2.lightTheme.text-color-primary);
1186
+ }
1187
+
1188
+ .digit-banner-sub-heading {
1189
+ color: #585858;
1190
+ }
1191
+
1192
+ .digit-banner-card-header {
1193
+ border-radius: 0.188rem 0rem 0rem 0.188rem;
1194
+ background: theme(digitv2.lightTheme.paper-secondary);
1195
+ display: flex;
1196
+ align-items: center;
1197
+ padding: 2rem;
1198
+ gap: 1rem;
1199
+ max-width: 30%;
1200
+ }
1201
+
1202
+ .digit-banner-cell {
1203
+ display: flex;
1204
+ flex-direction: column;
1205
+ gap: 0.5rem;
1206
+ }
1207
+
1208
+ .digit-banner-cell-sub-text {
1209
+ color: #585858;
1210
+ margin-left: auto;
1211
+ margin-right: auto;
1212
+ word-wrap: break-word;
1213
+ }
1214
+
1215
+ .digit-banner-value {
1216
+ color: #183E4A;
1217
+ font-family: theme(digitv2.fontFamily.sans);
1218
+ font-weight: 700;
1219
+ font-size: 1.75rem;
1220
+ line-height: 100%;
1221
+ letter-spacing: 0rem;
1222
+
1223
+ }
1224
+
1225
+ .digit-dss-banner-card-icon {
1226
+ flex-shrink: 0;
1227
+ }
1228
+
1229
+ .digit-banner-tooltip {
1230
+ padding: 2rem;
1231
+ white-space: normal;
1232
+ bottom: 95%;
1233
+ font-size: 0.875rem;
1234
+ }
1235
+
1236
+ .digit-banner-tooltip-text {
1237
+ font-weight: 500;
1238
+ color: theme(digitv2.lightTheme.paper);
1239
+ }
1240
+
1241
+ .digit-table-switch-card-chip {
1242
+ display: flex;
1243
+ cursor: pointer;
1244
+ width: 100%;
1245
+ }
1246
+
1247
+ .digit-table-switch-card {
1248
+ display: flex;
1249
+ flex-direction: row;
1250
+ align-items: center;
1251
+ padding: 0.5rem;
1252
+ position: static;
1253
+ height: 2.5rem;
1254
+ top: 0rem;
1255
+ flex: none;
1256
+ white-space: nowrap;
1257
+ flex-grow: 0;
1258
+ background: theme(digitv2.lightTheme.paper);
1259
+ border: 0.063rem solid theme(digitv2.lightTheme.background);
1260
+
1261
+ &.active {
1262
+ border: 0.063rem solid theme(digitv2.lightTheme.primary);
1263
+ box-sizing: border-box;
1264
+ color: theme(digitv2.lightTheme.primary);
1265
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
1266
+ font-family: theme(digitv2.fontFamily.sans);
1267
+ font-style: theme(digitv2.fontStyle.normal);
1268
+ font-weight: theme(digitv2.fontWeight.regular);
1269
+ line-height: 1.37rem;
1270
+
1271
+ @media (max-aspect-ratio: 9/16) {
1272
+ /* Media query for mobile */
1273
+ font-size: theme(digitv2.fontSize.body-l.mobile);
1274
+ }
1275
+
1276
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
1277
+ /* Media query for tablets */
1278
+ font-size: theme(digitv2.fontSize.body-l.tablet);
1279
+ }
1280
+
1281
+ @media (min-aspect-ratio: 3/4) {
1282
+ /* Media query for desktop */
1283
+ font-size: theme(digitv2.fontSize.body-l.desktop);
1284
+ }
1285
+ }
1286
+
1287
+ &.inactive {
1288
+ color: #B1B4B6;
1289
+
1290
+ :hover {
1291
+ background: #fffffc;
1292
+ font-size: 1.125rem;
1293
+ color: theme(digitv2.lightTheme.text-color-secondary);
1294
+ }
1295
+ }
1296
+ }
1297
+
1298
+ .digit-custom-table-drilldown-text {
1299
+ cursor: pointer;
1300
+ color: theme(digitv2.lightTheme.primary);
1301
+ }
1302
+
1303
+ .recharts-tooltip-wrapper {
1304
+ outline: none;
1305
+ border: 0.063rem solid #b1b4b6;
1306
+ border-radius: 0.25rem;
1307
+ padding: 0.5rem;
1308
+ background-color: theme(digitv2.lightTheme.paper);
1309
+ }
1310
+
1311
+ .recharts-legend-wrapper::-webkit-scrollbar {
1312
+ width: 0.5rem;
1313
+ background-color: theme(digitv2.lightTheme.background);
1314
+ }
1315
+
1316
+ .recharts-legend-wrapper::-webkit-scrollbar-track {
1317
+ background-color: theme(digitv2.lightTheme.background);
1318
+ border-radius: 0.563rem;
1319
+ }
1320
+
1321
+ .recharts-legend-wrapper::-webkit-scrollbar-thumb {
1322
+ background-color: theme(digitv2.lightTheme.divider);
1323
+ border-radius: 0.563rem;
1324
+ }
1325
+
1326
+ .recharts-legend-wrapper::-webkit-scrollbar:horizontal {
1327
+ height: 0.5rem;
1328
+ background-color: theme(digitv2.lightTheme.divider);
1329
+ }
1330
+
1331
+ .digit-results-card-buttons {
1332
+ &.dsscampaigncard {
1333
+ justify-content: flex-end !important;
1334
+ }
1335
+ }
1336
+
1337
+ .digit-heat-map-zoom-wrap {
1338
+ display: flex;
1339
+ justify-content: end;
1340
+ flex-direction: column;
1341
+ align-items: center;
1342
+ margin-bottom: 1.5rem;
1343
+ margin-right: 1.5rem;
1344
+ }
1345
+
1346
+ .digit-heat-map-zoom-button {
1347
+ display: flex;
1348
+ justify-content: center;
1349
+ align-items: center;
1350
+ width: 100%;
1351
+ background: theme(digitv2.lightTheme.paper);
1352
+ border: 0.063rem solid theme(digitv2.lightTheme.divider);
1353
+ color: theme(digitv2.lightTheme.primary);
1354
+ font-weight: 700;
1355
+ font-size: 1.125rem;
1356
+ cursor: pointer;
1357
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
1358
+ width: 2rem;
1359
+ height: 2rem;
1360
+ }
1361
+
1362
+ .digit-heat-map-recenter {
1363
+ margin-bottom: 1.5rem;
1364
+ margin-left: 1.5rem;
1365
+ }
1366
+
1367
+ .digit-kibana-card {
1368
+ width: 100%;
1369
+
1370
+ h1 {
1371
+ margin: 0rem;
1372
+ margin-bottom: 1.5rem;
1373
+ color: theme(digitv2.lightTheme.text-color-primary);
1374
+ font-family: theme(digitv2.fontFamily.sans);
1375
+ font-style: theme(digitv2.fontStyle.normal);
1376
+ font-weight: theme(digitv2.fontWeight.bold);
1377
+
1378
+ @media (max-aspect-ratio: 9/16) {
1379
+ /* Media query for mobile */
1380
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
1381
+ }
1382
+
1383
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
1384
+ /* Media query for tablets */
1385
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
1386
+ }
1387
+
1388
+ @media (min-aspect-ratio: 3/4) {
1389
+ /* Media query for desktop */
1390
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
1391
+ }
1392
+ }
1393
+ }
1394
+
1395
+ .app-iframe-wrapper.digit-dss-kibana-iframe-wrapper {
1396
+ left: unset !important;
1397
+ top: unset !important;
1398
+ position: unset !important;
1399
+ height: 37.5rem;
1400
+ }
1401
+
1402
+ .app-iframe.digit-dss-kibana-iframe {
1403
+ position: unset !important;
1404
+ height: 37.5rem !important;
1405
+ width: 100% !important;
1406
+ }