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

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,61 @@
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
+ 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: #ffffff;
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: #eeeeee;
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: #ffffff;
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: #eeeeee;
55
+ }
5
56
  }
6
57
 
58
+
7
59
  .custom-daterange-wrapper {
8
60
  position: relative;
9
61
  font-family: theme(digitv2.fontFamily.sans);
@@ -20,7 +72,7 @@
20
72
  user-select: none;
21
73
  box-shadow: 0 0.063rem 0.188rem rgba(0, 0, 0, 0.1);
22
74
 
23
- @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
75
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
24
76
  /* Media query for tablets */
25
77
  max-width: 27.5rem;
26
78
  }
@@ -36,9 +88,11 @@
36
88
  max-width: 37.5rem;
37
89
  }
38
90
  }
91
+
39
92
  .custom-daterange-input:hover {
40
93
  border-color: #999;
41
94
  }
95
+
42
96
  .custom-daterange-popup {
43
97
  position: absolute;
44
98
  top: 110%;
@@ -49,21 +103,1237 @@
49
103
  border-radius: 0.5rem;
50
104
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
51
105
  }
106
+
52
107
  .rdrSelected,
53
108
  .rdrInRange,
54
109
  .rdrStartEdge,
55
110
  .rdrEndEdge {
56
- background: theme(digitv2.lightTheme.primary) !important;
111
+ background: theme(digitv2.lightTheme.primary) !important;
57
112
  color: theme(digitv2.lightTheme.paper);
58
113
  }
114
+
59
115
  .rdrDayNumber span {
60
116
  color: theme(digitv2.lightTheme.text-primary);
61
117
  }
118
+
62
119
  .rdrDayNumber span:focus,
63
120
  .rdrDayNumber span:active {
64
121
  color: theme(digitv2.lightTheme.paper);
65
122
  }
123
+
66
124
  .rdrDay:hover {
67
125
  background: theme(digitv2.lightTheme.primary-bg);
68
126
  border-radius: 1rem;
69
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
+
410
+ .digit-field {
411
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
412
+ /* Media query for tablets */
413
+ max-width: 27.5rem;
414
+ }
415
+
416
+ @media (max-aspect-ratio: 9/16) {
417
+ /* Media query for mobile */
418
+ max-width: 100%;
419
+ width: 100%;
420
+ }
421
+
422
+ @media (min-aspect-ratio: 3/4) {
423
+ /* Media query for desktop */
424
+ width: 37.5rem;
425
+ }
426
+ }
427
+
428
+ /*.digit-text-input-field {
429
+ height: 2rem !important;
430
+
431
+ .input-container {
432
+ height: 2rem !important;
433
+
434
+ .digit-employeeCard-input {
435
+ height: 2rem !important;
436
+ }
437
+
438
+ .digit-text-input-customIcon {
439
+ top: 0.25rem;
440
+ right: 0.5rem;
441
+ }
442
+ }
443
+ }*/
444
+ }
445
+ }
446
+
447
+ .custom-table.digit-side-content {
448
+ width: auto;
449
+ }
450
+
451
+ .digit-ellipsis-button-wrapper {
452
+ width: 1.5rem;
453
+
454
+ .digit-ellipsis-button {
455
+ width: 1.5rem;
456
+ min-width: 1.5rem;
457
+ padding: 0rem;
458
+ background-color: transparent !important;
459
+ border: none;
460
+ box-shadow: none;
461
+
462
+ .digit-button-label {
463
+ display: none;
464
+ }
465
+ }
466
+
467
+ .header-dropdown-container {
468
+ .header-dropdown-menu {
469
+ left: unset;
470
+ }
471
+ }
472
+ }
473
+
474
+ .digit-generic-chart-header {
475
+ font-family: theme(digitv2.fontFamily.sans);
476
+ font-style: theme(digitv2.fontStyle.normal);
477
+ font-weight: theme(digitv2.fontWeight.bold);
478
+ line-height: 1.14rem;
479
+
480
+ @media (max-aspect-ratio: 9/16) {
481
+ /* Media query for mobile */
482
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
483
+ }
484
+
485
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
486
+ /* Media query for tablets */
487
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
488
+ }
489
+
490
+ @media (min-aspect-ratio: 3/4) {
491
+ /* Media query for desktop */
492
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
493
+ }
494
+ }
495
+
496
+ .digit-generic-chart-subheader,
497
+ .digit-dss-insight-card-text {
498
+ color: theme(digitv2.lightTheme.text-color-secondary);
499
+ font-family: theme(digitv2.fontFamily.sans);
500
+ font-style: theme(digitv2.fontStyle.normal);
501
+ font-weight: theme(digitv2.fontWeight.bold);
502
+ line-height: 1.14rem;
503
+
504
+ @media (max-aspect-ratio: 9/16) {
505
+ /* Media query for mobile */
506
+ font-size: theme(digitv2.fontSize.heading-s.mobile);
507
+ }
508
+
509
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
510
+ /* Media query for tablets */
511
+ font-size: theme(digitv2.fontSize.heading-s.tablet);
512
+ }
513
+
514
+ @media (min-aspect-ratio: 3/4) {
515
+ /* Media query for desktop */
516
+ font-size: theme(digitv2.fontSize.heading-s.desktop);
517
+ }
518
+ }
519
+
520
+ .digit-generic-chart-caption,
521
+ .digit-dss-insight-card-sub-text {
522
+ color: theme(digitv2.lightTheme.text-secondary);
523
+ font-family: theme(digitv2.fontFamily.sans);
524
+ font-style: theme(digitv2.fontStyle.normal);
525
+ font-weight: theme(digitv2.fontWeight.regular);
526
+
527
+ @media (max-aspect-ratio: 9/16) {
528
+ /* Media query for mobile */
529
+ font-size: theme(digitv2.fontSize.body-s.mobile);
530
+ }
531
+
532
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
533
+ /* Media query for tablets */
534
+ font-size: theme(digitv2.fontSize.body-s.tablet);
535
+ }
536
+
537
+ @media (min-aspect-ratio: 3/4) {
538
+ /* Media query for desktop */
539
+ font-size: theme(digitv2.fontSize.body-s.desktop);
540
+ }
541
+ }
542
+
543
+ .digit-dss-insight-card-text,
544
+ .digit-dss-insight-card-sub-text {
545
+ color: theme(digitv2.lightTheme.text-color-primary);
546
+ }
547
+
548
+ .digit-dss-card {
549
+ display: flex;
550
+ align-items: stretch;
551
+ justify-content: flex-start;
552
+ gap: 1.5rem;
553
+
554
+ .digit-dss-card-parent {
555
+ flex: 1;
556
+ }
557
+ }
558
+
559
+ .digit-dss-card {
560
+ &.add-margin {
561
+ margin-bottom: 1.5rem;
562
+ }
563
+ }
564
+
565
+ .digit-donut-chart-container {
566
+ height: 31.25rem;
567
+ }
568
+
569
+ .digit-loader-new {
570
+ &.digit-center-loader {
571
+ width: 100%;
572
+ display: flex;
573
+ align-items: center;
574
+ justify-content: center;
575
+ }
576
+ }
577
+
578
+ .digit-pie-chart-inner-label-text,
579
+ .digit-dss-metric-card-text {
580
+ color: theme(digitv2.lightTheme.text-color-secondary);
581
+ font-family: theme(digitv2.fontFamily.sans);
582
+ font-style: theme(digitv2.fontStyle.normal);
583
+ font-weight: theme(digitv2.fontWeight.regular);
584
+ line-height: 1.37rem;
585
+
586
+ @media (max-aspect-ratio: 9/16) {
587
+ /* Media query for mobile */
588
+ font-size: theme(digitv2.fontSize.body-s.mobile);
589
+ }
590
+
591
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
592
+ /* Media query for tablets */
593
+ font-size: theme(digitv2.fontSize.body-s.tablet);
594
+ }
595
+
596
+ @media (min-aspect-ratio: 3/4) {
597
+ /* Media query for desktop */
598
+ font-size: theme(digitv2.fontSize.body-s.desktop);
599
+ }
600
+ }
601
+
602
+ .digit-pie-chart-inner-label-value,
603
+ .digit-dss-insight-card-value {
604
+ color: theme(digitv2.lightTheme.text-color-secondary);
605
+ font-family: theme(digitv2.fontFamily.sans);
606
+ font-style: theme(digitv2.fontStyle.normal);
607
+ font-weight: theme(digitv2.fontWeight.bold);
608
+ line-height: 1.14rem;
609
+
610
+ @media (max-aspect-ratio: 9/16) {
611
+ /* Media query for mobile */
612
+ font-size: theme(digitv2.fontSize.heading-l.mobile);
613
+ }
614
+
615
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
616
+ /* Media query for tablets */
617
+ font-size: theme(digitv2.fontSize.heading-l.tablet);
618
+ }
619
+
620
+ @media (min-aspect-ratio: 3/4) {
621
+ /* Media query for desktop */
622
+ font-size: theme(digitv2.fontSize.heading-l.desktop);
623
+ }
624
+ }
625
+
626
+ .recharts-legend-item {
627
+ margin-right: 0rem !important;
628
+ margin-bottom: 1.5rem !important;
629
+ }
630
+
631
+ .digit-dss-insight-card-value {
632
+ margin-bottom: 0.75rem;
633
+ }
634
+
635
+ .digit-dss-insight-card-difference {
636
+ margin-top: 0.25rem;
637
+ margin-bottom: 2rem;
638
+ white-space: pre;
639
+ display: flex;
640
+ gap: 0.25rem;
641
+ align-items: center;
642
+ justify-content: center;
643
+
644
+ &.increase {
645
+ color: #00703C;
646
+ }
647
+
648
+ &.decrease {
649
+ color: #D4351C;
650
+ }
651
+
652
+ &.metric-card {
653
+ margin: 0rem;
654
+ }
655
+ }
656
+
657
+ .recharts-layer {
658
+ &.recharts-pie-sector {
659
+ outline: none;
660
+ }
661
+ }
662
+
663
+ .digit-pie-chart-tags {
664
+ margin: 0rem;
665
+ }
666
+
667
+ .digit-stacked-collection-card-header-wrapper {
668
+ display: flex;
669
+ gap: 1rem;
670
+ align-items: center;
671
+ min-height: 2.5rem;
672
+
673
+ svg {
674
+ width: 2.5rem;
675
+ height: 2.5rem;
676
+ flex-shrink: 0;
677
+ }
678
+
679
+ .digit-stacked-collection-card-header-text,
680
+ .digit-small-pie-label {
681
+ color: theme(digitv2.lightTheme.text-color-primary);
682
+ font-family: theme(digitv2.fontFamily.sans);
683
+ font-style: theme(digitv2.fontStyle.normal);
684
+ font-weight: theme(digitv2.fontWeight.bold);
685
+ word-break: break-word;
686
+ word-wrap: break-word;
687
+ max-width: 100%;
688
+
689
+ @media (max-aspect-ratio: 9/16) {
690
+ /* Media query for mobile */
691
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
692
+ }
693
+
694
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
695
+ /* Media query for tablets */
696
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
697
+ }
698
+
699
+ @media (min-aspect-ratio: 3/4) {
700
+ /* Media query for desktop */
701
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
702
+ }
703
+ }
704
+ }
705
+
706
+ .digit-dss-card-body-stacked {
707
+ display: flex;
708
+ flex-direction: column;
709
+ align-items: center;
710
+ gap: 2rem;
711
+ }
712
+
713
+ .digit-dss-card-item {
714
+ text-align: center;
715
+ display: flex;
716
+ width: 100%;
717
+ flex-direction: column;
718
+ }
719
+
720
+ .digit-dss-card-item-border {
721
+ border-bottom: 0.063rem solid theme(digitv2.lightTheme.divider);
722
+ }
723
+
724
+ .digit-dss-insight-card {
725
+ text-align: center;
726
+ display: flex;
727
+ flex-direction: column;
728
+ }
729
+
730
+ .digit-stacked-collection-card {
731
+ width: 33%;
732
+ gap: 2rem;
733
+ }
734
+
735
+ .digit-dss-options-header-wrapper {
736
+ margin-bottom: 2rem;
737
+ display: flex;
738
+ justify-content: space-between;
739
+ }
740
+
741
+ .digit-dss-options-header-options {
742
+ display: flex;
743
+ align-items: center;
744
+ gap: 1.5rem;
745
+ }
746
+
747
+ .digit-dss-options-header-text {
748
+ color: theme(digitv2.lightTheme.text-color-primary);
749
+ font-family: theme(digitv2.fontFamily.rc);
750
+ font-style: theme(digitv2.fontStyle.normal);
751
+ font-weight: theme(digitv2.fontWeight.bold);
752
+
753
+ @media (max-aspect-ratio: 9/16) {
754
+ /* Media query for mobile */
755
+ font-size: theme(digitv2.fontSize.heading-xl.mobile);
756
+ }
757
+
758
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
759
+ /* Media query for tablets */
760
+ font-size: theme(digitv2.fontSize.heading-xl.tablet);
761
+ }
762
+
763
+ @media (min-aspect-ratio: 3/4) {
764
+ /* Media query for desktop */
765
+ font-size: theme(digitv2.fontSize.heading-xl.desktop);
766
+ }
767
+
768
+ .digit-dss-options-header-boundary {
769
+ color: theme(digitv2.lightTheme.text-color-primary);
770
+ }
771
+
772
+ &.level-two {
773
+ display: flex;
774
+ align-items: center;
775
+ }
776
+ }
777
+
778
+ .digit-dss-options-header-option-button {
779
+ h2 {
780
+ color: theme(digitv2.lightTheme.text-color-secondary) !important;
781
+ }
782
+ }
783
+
784
+ .digit-dss-options-header-options-button-wrapper {
785
+ .header-dropdown-container {
786
+ .header-dropdown-menu {
787
+ left: -100px !important;
788
+ }
789
+ }
790
+ }
791
+
792
+ .table-column-header {
793
+ white-space: nowrap;
794
+ overflow-wrap: break-word;
795
+ }
796
+
797
+ /* Ensure sortable column headers don't overflow */
798
+ .data-table .rdt_TableCol_Sortable {
799
+ max-width: 100%;
800
+ }
801
+
802
+ /* Tooltips inside those headers should have reduced width */
803
+ .data-table .rdt_TableCol_Sortable .tooltip {
804
+ max-width: 80%;
805
+ }
806
+
807
+ .rdt_TableCol_Sortable .__rdt_custom_sort_icon__ {
808
+ flex-shrink: 0;
809
+ }
810
+
811
+ .digit-chart-header-wrapper {
812
+ width: 100%;
813
+ }
814
+
815
+ .digit-filters-wrapper {
816
+ display: flex;
817
+ align-items: center;
818
+ gap: 1rem;
819
+ z-index: 1;
820
+ }
821
+
822
+ .filter-close,
823
+ .filter-header {
824
+ display: none;
825
+ }
826
+
827
+ .clearText {
828
+ display: block;
829
+ text-align: right;
830
+ color: theme(digitv2.lightTheme.primary);
831
+ margin-top: 1.25rem;
832
+ margin-left: 0.625rem;
833
+ }
834
+
835
+
836
+ .digit-filters-wrapper {
837
+
838
+
839
+ .digit-filters-input {
840
+ max-width: 18.75rem;
841
+ flex-basis: 22%;
842
+
843
+ &.tabs {
844
+ flex-basis: 20%;
845
+
846
+ .digit-toggle-toolbar {
847
+ .toggle-option-container {
848
+ max-width: 100% !important;
849
+
850
+ .digit-toggle-btn-wrap {
851
+ &.checked {
852
+ .digit-toggle-label {
853
+ background-color: theme(digitv2.lightTheme.paper);
854
+ color: theme(digitv2.lightTheme.primary) !important;
855
+ }
856
+ }
857
+ }
858
+ }
859
+ }
860
+ }
861
+ }
862
+
863
+ .switch-wrapper {
864
+ display: flex;
865
+ justify-content: space-between;
866
+ max-width: 12.5rem;
867
+
868
+ .radio-switch {
869
+ display: none;
870
+
871
+ &:checked~label {
872
+ border-color: theme(colors.primary.main);
873
+ color: theme(colors.primary.main);
874
+ }
875
+ }
876
+
877
+ label {
878
+ border: 0.063rem solid;
879
+ padding: 0.375rem 0.625rem;
880
+ display: block;
881
+ @apply border border-solid border-input-border;
882
+
883
+ &:hover {
884
+ @apply border-2 border-solid border-primary-main;
885
+ }
886
+ }
887
+ }
888
+ }
889
+
890
+ .digit-date-range-label-field {
891
+ display: flex;
892
+ flex-direction: column;
893
+ gap: 0.5rem;
894
+
895
+ .digit-date-range-label {
896
+ font-family: theme(digitv2.fontFamily.sans);
897
+ font-style: theme(digitv2.fontStyle.normal);
898
+ font-weight: theme(digitv2.fontWeight.regular);
899
+ line-height: 1.37rem;
900
+ color: theme(digitv2.lightTheme.text-color-primary);
901
+
902
+ @media (max-aspect-ratio: 9/16) {
903
+ /* Media query for mobile */
904
+ font-size: theme(digitv2.fontSize.label.mobile);
905
+ }
906
+
907
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
908
+ /* Media query for tablets */
909
+ font-size: theme(digitv2.fontSize.label.tablet);
910
+ }
911
+
912
+ @media (min-aspect-ratio: 3/4) {
913
+ /* Media query for desktop */
914
+ font-size: theme(digitv2.fontSize.label.desktop);
915
+ }
916
+ }
917
+
918
+ .digit-options-card {
919
+ overflow: visible;
920
+ width: unset;
921
+ max-width: unset;
922
+ }
923
+ }
924
+
925
+ .digit-filter-by-cycle-wrapper {
926
+ display: inline-flex;
927
+ position: absolute;
928
+ right: 1.5rem;
929
+ margin-inline-end: 1.5rem;
930
+ align-content: flex-end;
931
+ align-items: center;
932
+ gap: 1rem;
933
+
934
+ .digit-tag-container {
935
+ margin: 0rem;
936
+ align-items: center;
937
+ justify-content: flex-end;
938
+ }
939
+ }
940
+
941
+ .digit-dss-switch-tabs {
942
+ background: theme(digitv2.lightTheme.paper);
943
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
944
+ border-radius: 0.25rem;
945
+ margin-bottom: 1.5rem;
946
+ display: flex;
947
+ gap: 2rem;
948
+ }
949
+
950
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar {
951
+ width: 0.5rem;
952
+ background-color: theme(digitv2.lightTheme.background);
953
+ }
954
+
955
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar-track {
956
+ background-color: theme(digitv2.lightTheme.background);
957
+ border-radius: 0.563rem;
958
+ }
959
+
960
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar-thumb {
961
+ background-color: theme(digitv2.lightTheme.divider);
962
+ border-radius: 0.563rem;
963
+ }
964
+
965
+ .digit-dss-switch-tab-wrapper::-webkit-scrollbar:horizontal {
966
+ height: 0.5rem;
967
+ background-color: theme(digitv2.lightTheme.divider);
968
+ }
969
+
970
+ .digit-dss-switch-tab-wrapper {
971
+ cursor: pointer;
972
+ display: flex;
973
+ flex-direction: row;
974
+ height: 4.5rem;
975
+ align-items: center;
976
+ max-width: 80%;
977
+ overflow: auto;
978
+ }
979
+
980
+ .digit-dss-switch-tab-selected {
981
+ border-bottom: 0.25rem solid theme(digitv2.lightTheme.primary);
982
+ color: theme(digitv2.lightTheme.primary);
983
+ padding: 0.625rem 1.5rem;
984
+ font-family: theme(digitv2.fontFamily.sans);
985
+ font-style: theme(digitv2.fontStyle.normal);
986
+ font-weight: theme(digitv2.fontWeight.bold);
987
+ flex: 1;
988
+ height: 100%;
989
+ display: flex;
990
+ align-items: center;
991
+ justify-content: center;
992
+ white-space: nowrap;
993
+
994
+ @media (max-aspect-ratio: 9/16) {
995
+ /* Media query for mobile */
996
+ font-size: theme(digitv2.fontSize.heading-m.mobile);
997
+ }
998
+
999
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
1000
+ /* Media query for tablets */
1001
+ font-size: theme(digitv2.fontSize.heading-m.tablet);
1002
+ }
1003
+
1004
+ @media (min-aspect-ratio: 3/4) {
1005
+ /* Media query for desktop */
1006
+ font-size: theme(digitv2.fontSize.heading-m.desktop);
1007
+ }
1008
+ }
1009
+
1010
+ .digit-dss-switch-tab-unselected {
1011
+ color: theme(colors.text.secondary);
1012
+ padding: 0.625rem 1.5rem;
1013
+ font-family: theme(digitv2.fontFamily.sans);
1014
+ font-style: theme(digitv2.fontStyle.normal);
1015
+ font-weight: theme(digitv2.fontWeight.regular);
1016
+ font-size: theme(digitv2.fontSize.caption-m.mobile);
1017
+ flex: 1;
1018
+ height: 100%;
1019
+ display: flex;
1020
+ align-items: center;
1021
+ justify-content: center;
1022
+ white-space: nowrap;
1023
+ }
1024
+
1025
+
1026
+ .digit-parentDiv-progress {
1027
+ display: flex;
1028
+ align-items: center;
1029
+ gap: 1rem;
1030
+ justify-content: flex-end;
1031
+ width: 20%;
1032
+ margin-right: 2rem;
1033
+ }
1034
+
1035
+ .digit-containerDiv-progress {
1036
+ background-color: theme(digitv2.lightTheme.divider);
1037
+ border-radius: 1.5rem;
1038
+ width: 80rem;
1039
+ height: 0.5rem;
1040
+ }
1041
+
1042
+ .digit-progress-fill {
1043
+ border-radius: inherit;
1044
+ height: 100%,
1045
+ }
1046
+
1047
+ .digit-progress-text {
1048
+ white-space: nowrap;
1049
+ text-align: center;
1050
+ max-width: auto;
1051
+ }
1052
+
1053
+ .digit-chart-row {
1054
+ display: flex;
1055
+ gap: 1.5rem;
1056
+ align-items: stretch;
1057
+ margin-bottom: 1.5rem;
1058
+ }
1059
+
1060
+ .wrapper-child {
1061
+ display: flex;
1062
+ flex-direction: column;
1063
+ justify-content: center;
1064
+ flex-grow: 1;
1065
+ }
1066
+
1067
+ .blocks {
1068
+ display: flex;
1069
+ margin-bottom: 1.563rem;
1070
+
1071
+ p:only-child {
1072
+ font-weight: bold;
1073
+ font-size: 1.5rem;
1074
+ }
1075
+
1076
+ div {
1077
+ margin-right: 1.563rem;
1078
+
1079
+ p:not(:first-child) {
1080
+ font-weight: bold;
1081
+ font-size: 1.5rem;
1082
+ }
1083
+ }
1084
+ }
1085
+
1086
+ .summary-card-margin {
1087
+ margin: 0 1.5rem 1.25rem 0rem !important;
1088
+ }
1089
+
1090
+ .digit-dss-card-header-wrapper {
1091
+ display: flex;
1092
+ align-items: center;
1093
+ gap: 1rem;
1094
+
1095
+ svg {
1096
+ flex-shrink: 0;
1097
+ }
1098
+
1099
+ .digit-dss-card-header-text {
1100
+ color: theme(digitv2.lightTheme.text-color-primary);
1101
+ line-height: normal;
1102
+ }
1103
+ }
1104
+
1105
+ .digit-dss-summary-card {
1106
+ display: flex;
1107
+ justify-content: space-around;
1108
+ text-align: center;
1109
+ flex-wrap: wrap;
1110
+ }
1111
+
1112
+ .digit-metric-data-header {
1113
+ padding-top: 0rem;
1114
+ white-space: nowrap;
1115
+ margin-left: 0rem;
1116
+ }
1117
+
1118
+ .digit-metric-details-chart {
1119
+ cursor: pointer;
1120
+ padding: 1.25rem;
1121
+ display: flex;
1122
+ flex-direction: column;
1123
+ width: 50%;
1124
+ justify-content: center;
1125
+ text-align: center;
1126
+ gap: 0.75rem;
1127
+
1128
+ &.add-divider {
1129
+ border-right: 0.063rem solid theme(digitv2.lightTheme.divider);
1130
+ }
1131
+ }
1132
+
1133
+
1134
+ .digit-banner-card {
1135
+ padding: 0;
1136
+ border: 0.063rem solid theme(digitv2.lightTheme.primary);
1137
+ flex-direction: row;
1138
+ }
1139
+
1140
+ .digit-banner-table {
1141
+ justify-content: center;
1142
+ display: flex;
1143
+ padding: 2rem;
1144
+ align-items: flex-start;
1145
+ cursor: pointer;
1146
+ flex: 1;
1147
+ }
1148
+
1149
+ .digit-banner-heading {
1150
+ display: flex;
1151
+ flex-direction: column;
1152
+ gap: 0.25rem;
1153
+ }
1154
+
1155
+ .digit-banner-main-heading {
1156
+ font-family: theme(digitv2.fontFamily.sans);
1157
+ font-weight: theme(digitv2.fontWeight.bold);
1158
+ font-size: 1.75rem;
1159
+ color: #0B0C0C;
1160
+ }
1161
+
1162
+ .digit-banner-sub-heading {
1163
+ color: #585858;
1164
+ }
1165
+
1166
+ .digit-banner-card-header {
1167
+ border-radius: 0.188rem 0rem 0rem 0.188rem;
1168
+ background: theme(digitv2.lightTheme.paper-secondary);
1169
+ display: flex;
1170
+ align-items: center;
1171
+ padding: 2rem;
1172
+ gap: 1rem;
1173
+ max-width: 30%;
1174
+ }
1175
+
1176
+ .digit-banner-cell {
1177
+ display: flex;
1178
+ flex-direction: column;
1179
+ gap: 0.5rem;
1180
+ }
1181
+
1182
+ .digit-banner-cell-sub-text {
1183
+ color: #585858;
1184
+ margin-left: auto;
1185
+ margin-right: auto;
1186
+ word-wrap: break-word;
1187
+ }
1188
+
1189
+ .digit-banner-value {
1190
+ color: #183E4A;
1191
+ font-family: theme(digitv2.fontFamily.sans);
1192
+ font-weight: 700;
1193
+ font-size: 1.75rem;
1194
+ line-height: 100%;
1195
+ letter-spacing: 0rem;
1196
+
1197
+ }
1198
+
1199
+ .digit-dss-banner-card-icon {
1200
+ flex-shrink: 0;
1201
+ }
1202
+
1203
+ .digit-banner-tooltip {
1204
+ padding: 2rem;
1205
+ white-space: normal;
1206
+ bottom: 95%;
1207
+ font-size: 0.875rem;
1208
+ }
1209
+
1210
+ .digit-banner-tooltip-text {
1211
+ font-weight: 500;
1212
+ color: theme(digitv2.lightTheme.paper);
1213
+ }
1214
+
1215
+ .digit-table-switch-card-chip {
1216
+ display: flex;
1217
+ cursor: pointer;
1218
+ width: 100%;
1219
+ }
1220
+
1221
+ .digit-table-switch-card {
1222
+ display: flex;
1223
+ flex-direction: row;
1224
+ align-items: center;
1225
+ padding: 0.5rem;
1226
+ position: static;
1227
+ height: 2.5rem;
1228
+ top: 0rem;
1229
+ flex: none;
1230
+ white-space: nowrap;
1231
+ flex-grow: 0;
1232
+ background: theme(digitv2.lightTheme.paper);
1233
+ border: 0.063rem solid theme(digitv2.lightTheme.background);
1234
+
1235
+ &.active {
1236
+ border: 0.063rem solid theme(digitv2.lightTheme.primary);
1237
+ box-sizing: border-box;
1238
+ color: theme(digitv2.lightTheme.primary);
1239
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
1240
+ font-family: theme(digitv2.fontFamily.sans);
1241
+ font-style: theme(digitv2.fontStyle.normal);
1242
+ font-weight: theme(digitv2.fontWeight.regular);
1243
+ line-height: 1.37rem;
1244
+
1245
+ @media (max-aspect-ratio: 9/16) {
1246
+ /* Media query for mobile */
1247
+ font-size: theme(digitv2.fontSize.body-l.mobile);
1248
+ }
1249
+
1250
+ @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
1251
+ /* Media query for tablets */
1252
+ font-size: theme(digitv2.fontSize.body-l.tablet);
1253
+ }
1254
+
1255
+ @media (min-aspect-ratio: 3/4) {
1256
+ /* Media query for desktop */
1257
+ font-size: theme(digitv2.fontSize.body-l.desktop);
1258
+ }
1259
+ }
1260
+
1261
+ &.inactive {
1262
+ color: #B1B4B6;
1263
+
1264
+ :hover {
1265
+ background: #fffffc;
1266
+ font-size: 1.125rem;
1267
+ color: theme(digitv2.lightTheme.text-color-secondary);
1268
+ }
1269
+ }
1270
+ }
1271
+
1272
+ .digit-custom-table-drilldown-text {
1273
+ cursor: pointer;
1274
+ color: theme(digitv2.lightTheme.primary);
1275
+ }
1276
+
1277
+ .recharts-tooltip-wrapper {
1278
+ outline: none;
1279
+ border: 0.063rem solid #b1b4b6;
1280
+ border-radius: 0.25rem;
1281
+ padding: 0.5rem;
1282
+ background-color: theme(digitv2.lightTheme.paper);
1283
+ }
1284
+
1285
+ .recharts-legend-wrapper::-webkit-scrollbar {
1286
+ width: 0.5rem;
1287
+ background-color: theme(digitv2.lightTheme.background);
1288
+ }
1289
+
1290
+ .recharts-legend-wrapper::-webkit-scrollbar-track {
1291
+ background-color: theme(digitv2.lightTheme.background);
1292
+ border-radius: 0.563rem;
1293
+ }
1294
+
1295
+ .recharts-legend-wrapper::-webkit-scrollbar-thumb {
1296
+ background-color: theme(digitv2.lightTheme.divider);
1297
+ border-radius: 0.563rem;
1298
+ }
1299
+
1300
+ .recharts-legend-wrapper::-webkit-scrollbar:horizontal {
1301
+ height: 0.5rem;
1302
+ background-color: theme(digitv2.lightTheme.divider);
1303
+ }
1304
+
1305
+ .digit-results-card-buttons {
1306
+ &.dsscampaigncard {
1307
+ justify-content: flex-end !important;
1308
+ }
1309
+ }
1310
+
1311
+ .digit-heat-map-zoom-wrap {
1312
+ display: flex;
1313
+ justify-content: end;
1314
+ flex-direction: column;
1315
+ align-items: center;
1316
+ margin-bottom: 1.5rem;
1317
+ margin-right: 1.5rem;
1318
+ }
1319
+
1320
+ .digit-heat-map-zoom-button {
1321
+ display: flex;
1322
+ justify-content: center;
1323
+ align-items: center;
1324
+ width: 100%;
1325
+ background: theme(digitv2.lightTheme.paper);
1326
+ border: 0.063rem solid theme(digitv2.lightTheme.divider);
1327
+ color: theme(digitv2.lightTheme.primary);
1328
+ font-weight: 700;
1329
+ font-size: 1.125rem;
1330
+ cursor: pointer;
1331
+ box-shadow: 0rem 0.063rem 0.125rem 0rem #00000029;
1332
+ width: 2rem;
1333
+ height: 2rem;
1334
+ }
1335
+
1336
+ .digit-heat-map-recenter{
1337
+ margin-bottom: 1.5rem;
1338
+ margin-left: 1.5rem;
1339
+ }