sccoreui 6.2.97 → 6.2.99

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