@egovernments/digit-ui-health-css 0.2.126 → 0.2.129

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