sccoreui 6.3.13 → 6.3.14

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,2870 @@
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: auto;
837
+ line-height: 20px;
838
+ }
839
+
840
+ .full_form_field {
841
+ // width: 37.125rem;
842
+ width: 100%;
843
+ }
844
+
845
+ .form_field {
846
+ // width: 18.063rem;
847
+ width: 100%;
848
+ &:has(.p-multiselect-token) {
849
+ .p-multiselect-label {
850
+ padding-left: 6px;
851
+ }
852
+ }
853
+ }
854
+
855
+ .PhoneInput {
856
+ background: #ffffff;
857
+ border: 1px solid var(--gray-300);
858
+ transition: background-color 0.2s, color 0.2s, border-color 0.2s,
859
+ box-shadow 0.2s;
860
+ border-radius: 8px;
861
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
862
+ padding-top: 10px;
863
+ padding-bottom: 10px;
864
+ padding-right: 12px;
865
+ padding-left: 0px;
866
+ height: 40px;
867
+
868
+ :focus-visible {
869
+ outline: none;
870
+ }
871
+
872
+ &:focus-within {
873
+ outline: 0 none;
874
+ outline-offset: 0;
875
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
876
+ 0px 0px 0px 2px var(--primary-100);
877
+ border-radius: 8px;
878
+ border: 1px solid var(--primary-300);
879
+ }
880
+
881
+ .PhoneInputInput {
882
+ border: none;
883
+ }
884
+ }
885
+
886
+ .PhoneInputCountry {
887
+ .PhoneInputCountryIcon--border {
888
+ box-shadow: none;
889
+ background-color: #ffffff;
890
+ }
891
+
892
+ .PhoneInputCountryIconImg {
893
+ width: 20px;
894
+ height: 20px;
895
+ object-fit: cover;
896
+ border-radius: 100%;
897
+ position: absolute;
898
+ top: 0;
899
+ }
900
+ }
901
+
902
+ .phoneNumberClass {
903
+ margin-left: 14.5rem;
904
+ }
905
+
906
+ #customCountryDropDown {
907
+ .p-dropdown {
908
+ border: none;
909
+ box-shadow: none;
910
+ background: none;
911
+ padding: 0;
912
+
913
+ .p-dropdown-label {
914
+ padding: 0;
915
+ padding-right: 4px;
916
+ }
917
+
918
+ .p-dropdown-trigger {
919
+ padding-top: 20px;
920
+ }
921
+
922
+ .p-dropdown-trigger[aria-expanded="true"] {
923
+ padding-bottom: 20px;
924
+ }
925
+ }
926
+ }
927
+
928
+ .customNumberField {
929
+ .p-inputnumber-input {
930
+ padding-left: 24px;
931
+ }
932
+ }
933
+
934
+ .text-editor {
935
+ button {
936
+ &::after {
937
+ content: none !important;
938
+ }
939
+ }
940
+ }
941
+
942
+ button#formatULOptions-1:hover::before,
943
+ button#formatULOptions-1.fr-btn-hover::before,
944
+ button#formatULOptions-1.fr-active::before,
945
+ button#formatOLOptions-1:hover::before,
946
+ button#formatOLOptions-1.fr-btn-hover::before,
947
+ button#formatOLOptions-1.fr-active::before {
948
+ content: "";
949
+ border: 2px solid gray;
950
+ border-left: 0;
951
+ border-top: 0;
952
+ width: 6px;
953
+ height: 6px;
954
+ position: absolute;
955
+ left: 2px;
956
+ top: 39%;
957
+ transform: rotate(45deg);
958
+ }
959
+
960
+ .fr-toolbar .fr-btn-grp {
961
+ display: inline-block;
962
+ margin: 0 0px 0 12px !important;
963
+ }
964
+
965
+ .fr-buttons.fr-tabs {
966
+ display: none;
967
+ }
968
+
969
+ .fr-element {
970
+ padding: 12px !important;
971
+ }
972
+
973
+ .fr-command.fr-btn
974
+ + .fr-dropdown-menu
975
+ .fr-dropdown-wrapper
976
+ .fr-dropdown-content
977
+ ul.fr-dropdown-list
978
+ li
979
+ a.fr-active {
980
+ background: #f9fafb !important;
981
+ }
982
+
983
+ button[data-cmd="fontFamily"]:focus {
984
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
985
+ 0px 0px 0px 2px var(--primary-100);
986
+ border: 1px solid var(--primary-300) !important;
987
+ background: none !important;
988
+ }
989
+
990
+ .text-editor {
991
+ border: 1px solid #d0d5dd;
992
+ border-radius: 10px;
993
+
994
+ * {
995
+ border: none !important;
996
+ }
997
+ }
998
+
999
+ .text-editor.focus-text-editor {
1000
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
1001
+ 0px 0px 0px 4px var(--primary-100);
1002
+ border: 1px solid var(--primary-300) !important;
1003
+ }
1004
+
1005
+ .text-editor.p-invalid.focus-text-editor {
1006
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
1007
+ border: 1px solid var(--red-300) !important;
1008
+ }
1009
+
1010
+ button[data-cmd="fontFamily"] {
1011
+ border: 1px solid var(--gray-300) !important;
1012
+
1013
+ &::before {
1014
+ content: "";
1015
+ border: 1.8px solid #0b0c12;
1016
+ border-left: 0;
1017
+ border-top: 0;
1018
+ width: 7px;
1019
+ height: 7px;
1020
+ position: absolute;
1021
+ right: 8px;
1022
+ top: 39%;
1023
+ transform: rotate(45deg);
1024
+ }
1025
+ }
1026
+
1027
+ .fr-toolbar .fr-btn-grp {
1028
+ margin-right: 0px;
1029
+ margin-left: 8px;
1030
+ }
1031
+
1032
+ .fr-wrapper .fr-placeholder {
1033
+ color: #667085 !important;
1034
+ }
1035
+
1036
+ button[aria-expanded="true"] {
1037
+ &::before {
1038
+ top: 48%;
1039
+ transform: rotate(-136deg);
1040
+ }
1041
+ }
1042
+
1043
+ /// Custon treeDropdownSelect style
1044
+ .treeNoCollaps {
1045
+ li {
1046
+ padding-left: 0 !important;
1047
+ padding-right: 0 !important;
1048
+ }
1049
+
1050
+ .p-tree-toggler {
1051
+ display: none;
1052
+ }
1053
+
1054
+ .treeBadge {
1055
+ background: var(--Gray-100, #f2f4f7) !important;
1056
+ }
1057
+
1058
+ .p-treenode-content:hover {
1059
+ background: var(--Primary-25, #f5f6fd) !important;
1060
+ }
1061
+
1062
+ .p-treenode-content:hover .treeItem,
1063
+ .p-treenode-content:focus .treeItem {
1064
+ color: var(--primary-400);
1065
+
1066
+ .treeBadge {
1067
+ color: var(--Primary-400, #243dc6) !important;
1068
+ background: var(--Primary-50, #e2e5fa) !important;
1069
+ }
1070
+ }
1071
+
1072
+ .p-treenode-content:hover svg path,
1073
+ .p-treenode-content:focus svg path {
1074
+ stroke: var(--primary-400) !important;
1075
+ }
1076
+
1077
+ .p-treenode-content:focus {
1078
+ box-shadow: none !important;
1079
+ outline: none !important;
1080
+ background: var(--Primary-25, #f5f6fd) !important;
1081
+
1082
+ .treeBadge {
1083
+ color: var(--Primary-400, #243dc6) !important;
1084
+ background: var(--Primary-50, #e2e5fa) !important;
1085
+ }
1086
+ }
1087
+ }
1088
+
1089
+ /// Custon treeDropdownSelect style end /////////////////
1090
+
1091
+ /////// Custom list_box_dropdown ///////////
1092
+
1093
+ .icon-30x30 {
1094
+ height: 30px !important;
1095
+ width: 30px !important;
1096
+ }
1097
+
1098
+ .icon-38x38 {
1099
+ height: 38px !important;
1100
+ width: 38px !important;
1101
+ display: flex;
1102
+ justify-content: center;
1103
+ align-items: center;
1104
+ }
1105
+
1106
+ .icon-40x40 {
1107
+ height: 40px !important;
1108
+ width: 40px !important;
1109
+ display: flex;
1110
+ justify-content: center;
1111
+ align-items: center;
1112
+ &.feature-hover {
1113
+ &:hover {
1114
+ svg {
1115
+ path {
1116
+ stroke: var(--primary-400);
1117
+ }
1118
+ }
1119
+ }
1120
+ }
1121
+ }
1122
+
1123
+ .list_box_dropdown {
1124
+ .p-listbox-header {
1125
+ padding: 12px !important;
1126
+ border-top: 1px solid var(--gray-200);
1127
+ }
1128
+
1129
+ ul.p-listbox-list {
1130
+ padding: 6px;
1131
+
1132
+ li {
1133
+ margin: 4px 0 !important;
1134
+ border-radius: 4px !important;
1135
+ padding: 8px 14px !important;
1136
+
1137
+ .item_content {
1138
+ max-width: 80%;
1139
+ white-space: nowrap;
1140
+ text-overflow: ellipsis;
1141
+ overflow: hidden;
1142
+ // width: 100%;
1143
+ }
1144
+
1145
+ .item_icon {
1146
+ display: none;
1147
+ }
1148
+
1149
+ &:hover {
1150
+ background-color: var(--gray-50) !important;
1151
+ }
1152
+
1153
+ &:focus {
1154
+ box-shadow: none !important;
1155
+ }
1156
+ }
1157
+
1158
+ .p-highlight {
1159
+ background: var(--Primary-25);
1160
+ color: #162578 !important;
1161
+
1162
+ .item_icon {
1163
+ display: block;
1164
+ }
1165
+ }
1166
+ }
1167
+ }
1168
+
1169
+ .list_box_chips {
1170
+ display: inline-block;
1171
+ align-items: center;
1172
+ list-style: none;
1173
+
1174
+ li {
1175
+ float: left;
1176
+ height: 24px;
1177
+ }
1178
+ }
1179
+
1180
+ /////// Custom list_box_dropdown ///////////
1181
+
1182
+ //ScMulti Select//
1183
+ .sc_multiSelect {
1184
+ height: 40px !important;
1185
+
1186
+ .p-multiselect-clear-icon {
1187
+ right: 42px !important;
1188
+ }
1189
+
1190
+ .p-multiselect-label {
1191
+ line-height: 38px !important;
1192
+ }
1193
+
1194
+ .p-multiselect-token-label {
1195
+ width: 60px;
1196
+ overflow: hidden;
1197
+ text-overflow: ellipsis;
1198
+ }
1199
+ }
1200
+
1201
+ .sc_multiSelect.noShowSelectedCount {
1202
+ .p-multiselect-label {
1203
+ padding-right: 0px;
1204
+ }
1205
+ }
1206
+
1207
+ .sc_multiSelect.hideChipremoveIcon {
1208
+ .p-multiselect-token {
1209
+ svg {
1210
+ display: none;
1211
+ }
1212
+ }
1213
+ }
1214
+
1215
+ .sc_icon_hover {
1216
+ &:hover {
1217
+ svg {
1218
+ transform: scale(1.1);
1219
+ transition: 0.3s all;
1220
+ }
1221
+ }
1222
+ }
1223
+
1224
+ .hide-focus {
1225
+ &:not(.p-disabled) {
1226
+ &.p-focus {
1227
+ box-shadow: var(--box-shadow-none);
1228
+ border: 1px solid var(--gray-300);
1229
+ }
1230
+ }
1231
+
1232
+ &:enabled {
1233
+ &:focus {
1234
+ box-shadow: var(--box-shadow-none);
1235
+ border: 1px solid var(--gray-300);
1236
+ }
1237
+ }
1238
+ }
1239
+
1240
+ .sc_multiSelect_panel {
1241
+ .p-multiselect-items {
1242
+ padding: 4px !important;
1243
+
1244
+ .p-multiselect-item,
1245
+ .p-highlight {
1246
+ span {
1247
+ padding-right: 28px;
1248
+ }
1249
+ }
1250
+
1251
+ .p-highlight::after {
1252
+ content: "";
1253
+ width: 12px;
1254
+ height: 6px;
1255
+ border: solid #162578;
1256
+ border-width: 1.9px;
1257
+ border-top: 0;
1258
+ border-right: 0;
1259
+ transform: rotate(-45deg);
1260
+ margin-right: 8px;
1261
+ position: absolute;
1262
+ right: 4px;
1263
+ }
1264
+ }
1265
+ }
1266
+
1267
+ //////////////////////////////////////////////
1268
+ ///
1269
+
1270
+ .condition_menu {
1271
+ width: 648px !important;
1272
+ }
1273
+
1274
+ .condition_attribute_list_sect {
1275
+ height: 215px;
1276
+
1277
+ .attr_chip {
1278
+ transition: all 0.1s;
1279
+
1280
+ &:hover {
1281
+ transform: scale(1.05);
1282
+ // transition: all 0.2s;
1283
+ }
1284
+ }
1285
+ }
1286
+
1287
+ .condition_configure {
1288
+ height: 224px;
1289
+ outline: none;
1290
+ line-height: 30px;
1291
+ letter-spacing: 2px;
1292
+
1293
+ .formulaChipElm {
1294
+ line-height: 24px;
1295
+ letter-spacing: 0px;
1296
+ }
1297
+
1298
+ .chip-h-25 {
1299
+ height: 25px;
1300
+ display: flex;
1301
+ align-items: center;
1302
+ justify-content: center;
1303
+ }
1304
+
1305
+ .formulaSpanElm {
1306
+ font-size: 16px;
1307
+ margin: 2px 0;
1308
+ float: left;
1309
+ min-width: 6px;
1310
+ height: 32px;
1311
+ position: relative;
1312
+ top: -4px;
1313
+
1314
+ &:first-child {
1315
+ display: none;
1316
+ }
1317
+ }
1318
+ }
1319
+
1320
+ .operator_divider {
1321
+ width: 1px;
1322
+ height: 15px;
1323
+ display: inline-block;
1324
+ background-color: var(--gray-300);
1325
+ }
1326
+
1327
+ .formula_condition_dropdown {
1328
+ box-shadow: none !important;
1329
+
1330
+ .p-dropdown-label {
1331
+ display: block !important;
1332
+ }
1333
+ }
1334
+
1335
+ .p-button.p-button-link:enabled:hover {
1336
+ color: var(--primary-400) !important;
1337
+ }
1338
+
1339
+ .p-button.p-button-text:enabled:hover {
1340
+ background: var(--primary-50);
1341
+ }
1342
+
1343
+ /* AG GRID - styles */
1344
+ @import url("./assets/theme.css");
1345
+ @import url("./assets/sccoreui.css");
1346
+ @import url("./assets/sccoreicons.css");
1347
+ @import url("./assets/flex.css");
1348
+ @import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
1349
+
1350
+ // variables
1351
+
1352
+ @font-face {
1353
+ font-family: "RobotoBold";
1354
+ src: url("./assets/fonts/Roboto-Bold.ttf") format("truetype");
1355
+ font-weight: 700;
1356
+ font-style: italic;
1357
+ }
1358
+
1359
+ @font-face {
1360
+ font-family: "RobotoMedium";
1361
+ src: url("./assets/fonts/Roboto-Medium.ttf") format("truetype");
1362
+ font-weight: normal;
1363
+ font-style: normal;
1364
+ }
1365
+
1366
+ @font-face {
1367
+ font-family: "RobotoItalic";
1368
+ src: url("./assets/fonts/Roboto-Italic.ttf") format("truetype");
1369
+ font-weight: normal;
1370
+ font-style: normal;
1371
+ }
1372
+
1373
+ @font-face {
1374
+ font-family: "RobotoRegular";
1375
+ src: url("./assets/fonts/Roboto-Regular.ttf") format("truetype");
1376
+ font-weight: normal;
1377
+ font-style: normal;
1378
+ }
1379
+
1380
+ :root {
1381
+ --fw-600: 600;
1382
+ --fw-400: 400;
1383
+ --fs-24: 24px;
1384
+ --fs-18: 18px;
1385
+ --fs-16: 16px;
1386
+ --lh: 24px;
1387
+ --fs-14: 14px;
1388
+ --grey-bg: #101828;
1389
+ --border-none: border-none;
1390
+ }
1391
+
1392
+ // height and width utility classes
1393
+
1394
+ .h-40 {
1395
+ height: 40px;
1396
+ }
1397
+
1398
+ // @font-face {
1399
+ // font-family: "Lato";
1400
+ // }
1401
+
1402
+ // @font-face {
1403
+ // font-family: "Lato";
1404
+ // font-weight: 600;
1405
+ // src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
1406
+ // }
1407
+
1408
+ body {
1409
+ font-family: "Lato", sans-serif;
1410
+ -webkit-font-smoothing: antialiased;
1411
+ -moz-osx-font-smoothing: grayscale;
1412
+ line-height: 20px;
1413
+ padding: 0;
1414
+ margin: 0;
1415
+ color: var(--gray-700);
1416
+ }
1417
+
1418
+ code {
1419
+ font-family: "Lato", sans-serif;
1420
+ }
1421
+
1422
+ // h1 {
1423
+ // font-size: var(--fs-24);
1424
+ // font-weight: var(--fw-600);
1425
+ // }
1426
+
1427
+ // h2 {
1428
+ // font-size: var(--fs-18);
1429
+ // font-weight: var(--fw-600);
1430
+ // }
1431
+
1432
+ // h3 {
1433
+ // font-size: var(--fs-16);
1434
+ // font-weight: var(--fw-400);
1435
+ // }
1436
+
1437
+ // ============= custom progress steps =============== //
1438
+
1439
+ .progress-container {
1440
+ isolation: isolate;
1441
+
1442
+ &::before {
1443
+ content: "";
1444
+ background-color: var(--gray-200);
1445
+ position: absolute;
1446
+ z-index: -1;
1447
+ }
1448
+
1449
+ &.horizontal::before {
1450
+ height: 2px;
1451
+ width: 100%;
1452
+ top: 11%;
1453
+ }
1454
+
1455
+ &.vertical::before {
1456
+ height: 100%;
1457
+ width: 2px;
1458
+ left: 5%;
1459
+ top: 0;
1460
+ }
1461
+ }
1462
+
1463
+ .progressbar {
1464
+ z-index: -1;
1465
+ transition: all 0.6s ease;
1466
+
1467
+ &.horizontal {
1468
+ left: 0;
1469
+ height: 2px;
1470
+ top: 11%;
1471
+ }
1472
+
1473
+ &.vertical {
1474
+ width: 2px;
1475
+ left: 5%;
1476
+ top: 0;
1477
+ }
1478
+ }
1479
+
1480
+ .progress-step-item {
1481
+ &.horizontal {
1482
+ &:nth-of-type(1) {
1483
+ transform: translateX(-50%);
1484
+ }
1485
+
1486
+ &:last-child {
1487
+ transform: translateX(50%);
1488
+ }
1489
+ }
1490
+
1491
+ &.vertical {
1492
+ transform: translateY(50%);
1493
+
1494
+ &:nth-of-type(1) {
1495
+ transform: translateY(-5%);
1496
+ }
1497
+
1498
+ &:last-child {
1499
+ transform: translateY(100%);
1500
+ }
1501
+ }
1502
+ }
1503
+
1504
+ // CUSTOM multiselect style started
1505
+ .Multi_select_dropdown_panel {
1506
+ .p-multiselect-header {
1507
+ display: block;
1508
+ padding: 8px 0;
1509
+
1510
+ .p-checkbox,
1511
+ .p-multiselect-close {
1512
+ display: none;
1513
+ }
1514
+
1515
+ .p-multiselect-filter-container {
1516
+ .p-inputtext {
1517
+ padding-right: 12px;
1518
+ padding-left: 1.75rem;
1519
+ }
1520
+
1521
+ .p-multiselect-filter-icon {
1522
+ left: 0.55rem;
1523
+ }
1524
+ }
1525
+ }
1526
+
1527
+ .p-multiselect-items-wrapper {
1528
+ .p-multiselect-item.p-highlight {
1529
+ &::after {
1530
+ content: "";
1531
+ width: 14px;
1532
+ height: 6px;
1533
+ border-left: 2px solid #132067;
1534
+ border-bottom: 2px solid #132067;
1535
+ transform: rotate(-45deg);
1536
+ position: absolute;
1537
+ right: 10px;
1538
+ }
1539
+ }
1540
+ }
1541
+ }
1542
+
1543
+ .bulk-action-feature {
1544
+ .p-overlaypanel-content {
1545
+ padding: 0 !important;
1546
+ border-radius: 6px !important;
1547
+ }
1548
+ }
1549
+
1550
+ .column_group_overlay {
1551
+ overflow: hidden;
1552
+
1553
+ .p-overlaypanel-content {
1554
+ padding: 0px !important;
1555
+ }
1556
+ }
1557
+
1558
+ .list-items {
1559
+ padding: 4px;
1560
+ border: 0;
1561
+
1562
+ .p-treenode-content {
1563
+ padding: 2px !important;
1564
+ }
1565
+
1566
+ .p-treenode-droppoint {
1567
+ height: 2px;
1568
+ }
1569
+ }
1570
+
1571
+ .sc_custom_multiselect {
1572
+ width: max-content;
1573
+
1574
+ * {
1575
+ color: #344054;
1576
+ font-weight: 700;
1577
+ }
1578
+
1579
+ .left_section_item {
1580
+ left: 1rem;
1581
+ }
1582
+
1583
+ .right_section_item {
1584
+ right: 1rem;
1585
+ }
1586
+
1587
+ .selected_moreThan_one {
1588
+ right: 40px;
1589
+ }
1590
+
1591
+ .p-inputwrapper-filled {
1592
+ background: #f5f6fd;
1593
+ border: 1px solid #8190e8;
1594
+ }
1595
+
1596
+ .p-multiselect {
1597
+ max-width: 100%;
1598
+ width: max-content !important;
1599
+
1600
+ .p-multiselect-label {
1601
+ padding: 0;
1602
+ padding-left: 44px;
1603
+ max-width: 100%;
1604
+
1605
+ .p-multiselect-token {
1606
+ border: none;
1607
+ width: 100%;
1608
+ min-width: 100%;
1609
+ background: none;
1610
+ padding-left: 0;
1611
+
1612
+ .p-multiselect-token-label {
1613
+ width: 100%;
1614
+ white-space: nowrap;
1615
+ overflow: hidden;
1616
+ text-overflow: ellipsis;
1617
+ }
1618
+ }
1619
+
1620
+ svg {
1621
+ display: none;
1622
+ }
1623
+ }
1624
+ }
1625
+
1626
+ .p-multiselect-trigger {
1627
+ width: 2rem;
1628
+
1629
+ svg {
1630
+ display: none;
1631
+ }
1632
+ }
1633
+ }
1634
+
1635
+ .no_icon {
1636
+ .p-multiselect-label {
1637
+ padding-left: 16px !important;
1638
+ }
1639
+ }
1640
+
1641
+ .status_dropdown {
1642
+ .p-multiselect {
1643
+ .p-multiselect-label {
1644
+ padding-left: 34px;
1645
+ }
1646
+ }
1647
+
1648
+ .select_status_prv {
1649
+ ul {
1650
+ li {
1651
+ width: 10px;
1652
+ height: 10px;
1653
+ border-radius: 8px;
1654
+ position: absolute;
1655
+ transform: translateY(-50%);
1656
+ }
1657
+
1658
+ li.all {
1659
+ background: #667085;
1660
+ }
1661
+
1662
+ li:nth-child(2) {
1663
+ left: 6px;
1664
+ }
1665
+
1666
+ li:nth-child(3) {
1667
+ left: 12px;
1668
+ }
1669
+ }
1670
+ }
1671
+ }
1672
+
1673
+ .multi-pl-32 {
1674
+ padding-left: 40px;
1675
+ border: 1px solid red;
1676
+ }
1677
+
1678
+ .selected_multile {
1679
+ .p-multiselect-token-label {
1680
+ padding-right: 18px;
1681
+ }
1682
+ }
1683
+
1684
+ .selected_multile.selected_num_2 {
1685
+ .p-multiselect .p-multiselect-label {
1686
+ padding-left: 44px;
1687
+ }
1688
+ }
1689
+
1690
+ .selected_multile.selected_num_3,
1691
+ .selected_multile.moreThanThreeItems {
1692
+ .p-multiselect .p-multiselect-label {
1693
+ padding-left: 44px;
1694
+ }
1695
+ }
1696
+
1697
+ .mutli_select_status {
1698
+ .p-multiselect-label {
1699
+ padding-left: 44px !important;
1700
+ }
1701
+ }
1702
+
1703
+ .status_dropdown.selected_multile {
1704
+ .left_section_item {
1705
+ max-width: 28px;
1706
+ overflow: hidden;
1707
+ height: 11px;
1708
+ width: -webkit-fill-available;
1709
+ align-items: center;
1710
+ display: flex;
1711
+ }
1712
+ }
1713
+
1714
+ .status_dropdown_item.Active::before {
1715
+ background: #12b76a;
1716
+ }
1717
+
1718
+ .status_dropdown_item.Inactive::before {
1719
+ background: #f04438;
1720
+ }
1721
+
1722
+ .status_dropdown_item.Draft::before {
1723
+ background: #162578;
1724
+ }
1725
+
1726
+ .status_dropdown_item {
1727
+ .status_dot {
1728
+ width: 10px;
1729
+ height: 10px;
1730
+ border-radius: 50px;
1731
+ position: absolute;
1732
+ transform: translateY(-50%);
1733
+ top: 50%;
1734
+ left: 10px;
1735
+ }
1736
+ }
1737
+
1738
+ .custom_date_picker_sec {
1739
+ .custom_date_picker {
1740
+ .p-inputtext {
1741
+ padding-right: 16px;
1742
+ width: 130px;
1743
+ }
1744
+
1745
+ .p-inputtext {
1746
+ &:enabled {
1747
+ &:focus {
1748
+ box-shadow: none !important;
1749
+ border-color: #d0d5dd !important;
1750
+ }
1751
+ }
1752
+ }
1753
+
1754
+ .p-datepicker-trigger {
1755
+ &:focus {
1756
+ box-shadow: none !important;
1757
+ border-color: #d0d5dd !important;
1758
+ }
1759
+ }
1760
+ }
1761
+
1762
+ .custom_date_picker.multiple {
1763
+ .p-inputtext {
1764
+ width: 236px;
1765
+ }
1766
+ }
1767
+
1768
+ .clear_icon_sec {
1769
+ right: 32px;
1770
+ }
1771
+ }
1772
+
1773
+ .date_filter {
1774
+ margin: 0;
1775
+ position: absolute;
1776
+ top: 0;
1777
+ left: 0px;
1778
+ background: #fff;
1779
+ height: 100%;
1780
+ padding: 4px 16px;
1781
+
1782
+ li {
1783
+ height: 40px;
1784
+
1785
+ &:hover {
1786
+ background: #f9fafb;
1787
+ }
1788
+ }
1789
+
1790
+ .active {
1791
+ background: #f9fafb;
1792
+ }
1793
+ }
1794
+
1795
+ div:has(ul.date_filter) .p-datepicker-group-container {
1796
+ padding-left: 116px;
1797
+ margin: -8px;
1798
+ }
1799
+
1800
+ .bottom_date_filters {
1801
+ width: calc(100% - 116px);
1802
+ border-left: 1px solid #dee2e6;
1803
+ }
1804
+
1805
+ div:has(ul.date_filter)
1806
+ .p-datepicker-group-container
1807
+ .p-datepicker
1808
+ table
1809
+ td
1810
+ > span {
1811
+ width: 40px;
1812
+ height: 40px;
1813
+ }
1814
+
1815
+ div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker-group {
1816
+ width: 328px;
1817
+ max-width: 328px;
1818
+ padding: 8px 20px !important;
1819
+ border: 1px solid #dee2e6;
1820
+ border-top: 0;
1821
+ }
1822
+
1823
+ div:has(ul.date_filter) .p-datepicker-group-container div:nth-child(2) {
1824
+ border-right: 0;
1825
+ }
1826
+
1827
+ div:has(ul.date_filter) .p-datepicker-group-container table td {
1828
+ padding: 0;
1829
+ }
1830
+
1831
+ div:has(ul.date_filter) .p-datepicker-footer {
1832
+ margin: -8px;
1833
+ }
1834
+
1835
+ .panel_status {
1836
+ .p-multiselect-filter-container {
1837
+ display: none;
1838
+ }
1839
+
1840
+ .p-multiselect-header {
1841
+ padding: 0 !important;
1842
+ border-bottom: 0;
1843
+ }
1844
+ }
1845
+
1846
+ .p-multiselect-panel {
1847
+ .p-multiselect-items {
1848
+ padding: 6px;
1849
+ min-width: 140px !important;
1850
+ }
1851
+ }
1852
+
1853
+ .panel_withIcon.p-multiselect-panel {
1854
+ .p-multiselect-items {
1855
+ .p-multiselect-item {
1856
+ padding: 0 10px;
1857
+ }
1858
+ }
1859
+ }
1860
+
1861
+ .Multi_select_dropdown_panel.hidePanelHeader {
1862
+ .p-multiselect-header {
1863
+ display: none;
1864
+ }
1865
+ }
1866
+
1867
+ .errorField {
1868
+ color: var(--red-500);
1869
+ height: 20px;
1870
+ }
1871
+
1872
+ .full_form_field {
1873
+ // width: 37.125rem;
1874
+ }
1875
+
1876
+ .form_field {
1877
+ // width: 18.063rem;
1878
+ }
1879
+
1880
+ .PhoneInput {
1881
+ background: #ffffff;
1882
+ border: 1px solid var(--gray-300);
1883
+ transition: background-color 0.2s, color 0.2s, border-color 0.2s,
1884
+ box-shadow 0.2s;
1885
+ border-radius: 8px;
1886
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
1887
+ padding-top: 10px;
1888
+ padding-bottom: 10px;
1889
+ padding-right: 12px;
1890
+ padding-left: 0px;
1891
+ height: 40px;
1892
+
1893
+ :focus-visible {
1894
+ outline: none;
1895
+ }
1896
+
1897
+ &:focus-within {
1898
+ outline: 0 none;
1899
+ outline-offset: 0;
1900
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
1901
+ 0px 0px 0px 2px var(--primary-100);
1902
+ border-radius: 8px;
1903
+ border: 1px solid var(--primary-300);
1904
+ }
1905
+
1906
+ .PhoneInputInput {
1907
+ border: none;
1908
+ }
1909
+ }
1910
+
1911
+ .PhoneInputCountry {
1912
+ .PhoneInputCountryIcon--border {
1913
+ box-shadow: none;
1914
+ background-color: #ffffff;
1915
+ }
1916
+
1917
+ .PhoneInputCountryIconImg {
1918
+ width: 20px;
1919
+ height: 20px;
1920
+ object-fit: cover;
1921
+ border-radius: 100%;
1922
+ position: absolute;
1923
+ top: 0;
1924
+ }
1925
+ }
1926
+
1927
+ .phoneNumberClass {
1928
+ margin-left: 14.5rem;
1929
+ }
1930
+
1931
+ #customCountryDropDown {
1932
+ .p-dropdown {
1933
+ border: none;
1934
+ box-shadow: none;
1935
+ background: none;
1936
+ padding: 0;
1937
+
1938
+ .p-dropdown-label {
1939
+ padding: 0;
1940
+ padding-right: 4px;
1941
+ }
1942
+
1943
+ .p-dropdown-trigger {
1944
+ padding-top: 20px;
1945
+ }
1946
+
1947
+ .p-dropdown-trigger[aria-expanded="true"] {
1948
+ padding-bottom: 20px;
1949
+ }
1950
+ }
1951
+ }
1952
+
1953
+ .customNumberField {
1954
+ .p-inputnumber-input {
1955
+ padding-left: 24px;
1956
+ }
1957
+ }
1958
+
1959
+ .text-editor {
1960
+ button {
1961
+ &::after {
1962
+ content: none !important;
1963
+ }
1964
+ }
1965
+ }
1966
+
1967
+ button#formatULOptions-1:hover::before,
1968
+ button#formatULOptions-1.fr-btn-hover::before,
1969
+ button#formatULOptions-1.fr-active::before,
1970
+ button#formatOLOptions-1:hover::before,
1971
+ button#formatOLOptions-1.fr-btn-hover::before,
1972
+ button#formatOLOptions-1.fr-active::before {
1973
+ content: "";
1974
+ border: 2px solid gray;
1975
+ border-left: 0;
1976
+ border-top: 0;
1977
+ width: 6px;
1978
+ height: 6px;
1979
+ position: absolute;
1980
+ left: 2px;
1981
+ top: 39%;
1982
+ transform: rotate(45deg);
1983
+ }
1984
+
1985
+ .fr-toolbar .fr-btn-grp {
1986
+ display: inline-block;
1987
+ margin: 0 0px 0 12px !important;
1988
+ }
1989
+
1990
+ .fr-buttons.fr-tabs {
1991
+ display: none;
1992
+ }
1993
+
1994
+ .fr-element {
1995
+ padding: 12px !important;
1996
+ }
1997
+
1998
+ .fr-command.fr-btn
1999
+ + .fr-dropdown-menu
2000
+ .fr-dropdown-wrapper
2001
+ .fr-dropdown-content
2002
+ ul.fr-dropdown-list
2003
+ li
2004
+ a.fr-active {
2005
+ background: #f9fafb !important;
2006
+ }
2007
+
2008
+ button[data-cmd="fontFamily"]:focus {
2009
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
2010
+ 0px 0px 0px 2px var(--primary-100);
2011
+ border: 1px solid var(--primary-300) !important;
2012
+ background: none !important;
2013
+ }
2014
+
2015
+ .text-editor {
2016
+ border: 1px solid #d0d5dd;
2017
+ border-radius: 10px;
2018
+
2019
+ * {
2020
+ border: none !important;
2021
+ }
2022
+ }
2023
+
2024
+ .text-editor.focus-text-editor {
2025
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
2026
+ 0px 0px 0px 4px var(--primary-100);
2027
+ border: 1px solid var(--primary-300) !important;
2028
+ }
2029
+
2030
+ .text-editor.p-invalid.focus-text-editor {
2031
+ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
2032
+ border: 1px solid var(--red-300) !important;
2033
+ }
2034
+
2035
+ button[data-cmd="fontFamily"] {
2036
+ border: 1px solid var(--gray-300) !important;
2037
+
2038
+ &::before {
2039
+ content: "";
2040
+ border: 1.8px solid #0b0c12;
2041
+ border-left: 0;
2042
+ border-top: 0;
2043
+ width: 7px;
2044
+ height: 7px;
2045
+ position: absolute;
2046
+ right: 8px;
2047
+ top: 39%;
2048
+ transform: rotate(45deg);
2049
+ }
2050
+ }
2051
+
2052
+ .fr-toolbar .fr-btn-grp {
2053
+ margin-right: 0px;
2054
+ margin-left: 8px;
2055
+ }
2056
+
2057
+ .fr-wrapper .fr-placeholder {
2058
+ color: #667085 !important;
2059
+ }
2060
+
2061
+ button[aria-expanded="true"] {
2062
+ &::before {
2063
+ top: 48%;
2064
+ transform: rotate(-136deg);
2065
+ }
2066
+ }
2067
+
2068
+ /// Custon treeDropdownSelect style
2069
+ .treeNoCollaps {
2070
+ li {
2071
+ padding-left: 0 !important;
2072
+ padding-right: 0 !important;
2073
+ }
2074
+
2075
+ .p-tree-toggler {
2076
+ display: none;
2077
+ }
2078
+
2079
+ .treeBadge {
2080
+ background: var(--Gray-100, #f2f4f7) !important;
2081
+ }
2082
+
2083
+ .p-treenode-content:hover {
2084
+ background: var(--Primary-25, #f5f6fd) !important;
2085
+ }
2086
+
2087
+ .p-treenode-content:hover .treeItem,
2088
+ .p-treenode-content:focus .treeItem {
2089
+ color: var(--primary-400);
2090
+
2091
+ .treeBadge {
2092
+ color: var(--Primary-400, #243dc6) !important;
2093
+ background: var(--Primary-50, #e2e5fa) !important;
2094
+ }
2095
+ }
2096
+
2097
+ .p-treenode-content:hover svg path,
2098
+ .p-treenode-content:focus svg path {
2099
+ stroke: var(--primary-400) !important;
2100
+ }
2101
+
2102
+ .p-treenode-content:focus {
2103
+ box-shadow: none !important;
2104
+ outline: none !important;
2105
+ background: var(--Primary-25, #f5f6fd) !important;
2106
+
2107
+ .treeBadge {
2108
+ color: var(--Primary-400, #243dc6) !important;
2109
+ background: var(--Primary-50, #e2e5fa) !important;
2110
+ }
2111
+ }
2112
+ }
2113
+
2114
+ /// Custon treeDropdownSelect style end /////////////////
2115
+
2116
+ /////// Custom list_box_dropdown ///////////
2117
+ .list_box_dropdown {
2118
+ .p-listbox-header {
2119
+ padding: 12px !important;
2120
+ border-top: 1px solid var(--gray-200);
2121
+ }
2122
+
2123
+ ul.p-listbox-list {
2124
+ padding: 6px;
2125
+
2126
+ li {
2127
+ margin: 4px 0 !important;
2128
+ border-radius: 4px !important;
2129
+ padding: 8px 14px !important;
2130
+
2131
+ .item_content {
2132
+ max-width: 80%;
2133
+ white-space: nowrap;
2134
+ text-overflow: ellipsis;
2135
+ overflow: hidden;
2136
+ // width: 100%;
2137
+ }
2138
+
2139
+ .item_icon {
2140
+ display: none;
2141
+ }
2142
+
2143
+ &:hover {
2144
+ background-color: var(--gray-50) !important;
2145
+ }
2146
+
2147
+ &:focus {
2148
+ box-shadow: none !important;
2149
+ }
2150
+ }
2151
+
2152
+ .p-highlight {
2153
+ background: var(--Primary-25);
2154
+ color: #162578 !important;
2155
+
2156
+ .item_icon {
2157
+ display: block;
2158
+ }
2159
+ }
2160
+ }
2161
+
2162
+ .selected-none {
2163
+ ul {
2164
+ li.p-highlight {
2165
+ display: none !important;
2166
+ }
2167
+ }
2168
+ }
2169
+ }
2170
+
2171
+ .list_box_chips {
2172
+ display: inline-block;
2173
+ align-items: center;
2174
+ list-style: none;
2175
+
2176
+ li {
2177
+ float: left;
2178
+ height: 24px;
2179
+ }
2180
+ }
2181
+
2182
+ /////// Custom list_box_dropdown ///////////
2183
+
2184
+ //ScMulti Select//
2185
+ .sc_multiSelect {
2186
+ height: 40px !important;
2187
+
2188
+ .p-multiselect-clear-icon {
2189
+ right: 42px !important;
2190
+ }
2191
+
2192
+ .p-multiselect-label {
2193
+ line-height: 38px !important;
2194
+ }
2195
+ }
2196
+
2197
+ .sc_multiSelect.noShowSelectedCount {
2198
+ .p-multiselect-label {
2199
+ padding-right: 0px;
2200
+ }
2201
+ }
2202
+
2203
+ .sc_multiSelect.hideChipremoveIcon {
2204
+ .p-multiselect-token {
2205
+ svg {
2206
+ display: none;
2207
+ }
2208
+ }
2209
+ }
2210
+
2211
+ .sc_multiSelect_panel {
2212
+ .p-multiselect-items {
2213
+ padding: 4px !important;
2214
+
2215
+ .p-multiselect-item,
2216
+ .p-highlight {
2217
+ span {
2218
+ padding-right: 28px;
2219
+ }
2220
+ }
2221
+
2222
+ .p-highlight::after {
2223
+ content: "";
2224
+ width: 12px;
2225
+ height: 6px;
2226
+ border: solid #162578;
2227
+ border-width: 1.9px;
2228
+ border-top: 0;
2229
+ border-right: 0;
2230
+ transform: rotate(-45deg);
2231
+ margin-right: 8px;
2232
+ position: absolute;
2233
+ right: 4px;
2234
+ }
2235
+ }
2236
+ }
2237
+
2238
+ //////////////////////////////////////////////
2239
+ ///
2240
+
2241
+ .condition_menu {
2242
+ width: 648px !important;
2243
+ }
2244
+
2245
+ .condition_attribute_list_sect {
2246
+ height: 215px;
2247
+
2248
+ .attr_chip {
2249
+ transition: all 0.1s;
2250
+
2251
+ &:hover {
2252
+ transform: scale(1.05);
2253
+ // transition: all 0.2s;
2254
+ }
2255
+ }
2256
+ }
2257
+
2258
+ .condition_configure {
2259
+ height: 224px;
2260
+ outline: none;
2261
+ line-height: 30px;
2262
+ letter-spacing: 2px;
2263
+
2264
+ .formulaChipElm {
2265
+ line-height: 24px;
2266
+ letter-spacing: 0px;
2267
+ margin: 2px;
2268
+ float: left;
2269
+ }
2270
+
2271
+ .formulaSpanElm {
2272
+ font-size: 16px;
2273
+ margin: 2px 0;
2274
+ float: left;
2275
+ min-width: 6px;
2276
+ height: 32px;
2277
+ }
2278
+ }
2279
+
2280
+ .formula_condition_dropdown {
2281
+ box-shadow: none !important;
2282
+
2283
+ .p-dropdown-label {
2284
+ display: block !important;
2285
+ }
2286
+ }
2287
+
2288
+ .p-button.p-button-link:enabled:hover {
2289
+ color: var(--primary-400) !important;
2290
+ }
2291
+
2292
+ /* AG GRID - styles */
2293
+ .ag-grid-container {
2294
+ background: #fff !important;
2295
+ box-shadow: 0px 0px 1px var(--gray-300) !important;
2296
+ overflow: hidden;
2297
+ .ag-root-wrapper {
2298
+ &.ag-layout-normal {
2299
+ border: 0;
2300
+ }
2301
+ }
2302
+ }
2303
+
2304
+ .ag-header {
2305
+ background: var(--gray-50);
2306
+ border-top: 1px solid var(--gray-200) !important;
2307
+ border-bottom: 1px solid var(--gray-200) !important;
2308
+ }
2309
+
2310
+ .ag-root-wrapper {
2311
+ border-radius: 0 !important;
2312
+ }
2313
+
2314
+ .ag-body-horizontal-scroll {
2315
+ display: none !important;
2316
+ }
2317
+
2318
+ .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
2319
+ border: 0;
2320
+ border-color: initial;
2321
+ }
2322
+
2323
+ .ag-ltr .ag-cell {
2324
+ display: flex;
2325
+ align-items: center;
2326
+ }
2327
+
2328
+ .ag-grid-container {
2329
+ // border: 1px solid var(--gray-200) !important;
2330
+ background: #fff !important;
2331
+ box-shadow: 0px 0px 1px var(--gray-300);
2332
+ }
2333
+
2334
+ // .ag-row {
2335
+ // border-bottom: 1px solid var(--gray-200);
2336
+ // }
2337
+
2338
+ .ag-row-odd {
2339
+ background-color: var(--gray-25) !important;
2340
+ }
2341
+
2342
+ .ag-row:focus {
2343
+ background-color: var(--gray-100);
2344
+ }
2345
+
2346
+ /* ErrorBoundary.module.css */
2347
+ .errorContainer {
2348
+ display: flex;
2349
+ flex-direction: column;
2350
+ align-items: center;
2351
+ justify-content: center;
2352
+ padding: 20px;
2353
+ margin: auto;
2354
+ border-radius: 5px;
2355
+ background-color: var(--red-50);
2356
+ width: 100%;
2357
+ height: 100%;
2358
+ text-align: center;
2359
+ }
2360
+
2361
+ .error_description {
2362
+ // width: 750px;
2363
+ }
2364
+
2365
+ .rounded_btn {
2366
+ padding: 8px 10px !important;
2367
+ height: auto;
2368
+ border-radius: 8px !important;
2369
+ cursor: pointer;
2370
+ &:hover {
2371
+ background: var(--primary-25);
2372
+ }
2373
+ }
2374
+
2375
+ .ag-grid-container {
2376
+ &:has(.web-cards) {
2377
+ .grid-header {
2378
+ position: sticky;
2379
+ top: 0;
2380
+ }
2381
+ }
2382
+ }
2383
+
2384
+ .p-button {
2385
+ &.p-button-secondary {
2386
+ padding: 8px 12px;
2387
+ }
2388
+ &.p-button-outline {
2389
+ padding: 8px 12px;
2390
+ }
2391
+
2392
+ padding: 8px 12px;
2393
+
2394
+ .p-button-label {
2395
+ font-weight: 600;
2396
+ }
2397
+
2398
+ &.p-disabled {
2399
+ opacity: 0.2 !important;
2400
+ border: 0;
2401
+ }
2402
+ }
2403
+
2404
+ .ag-theme-quartz {
2405
+ --ag-active-color: var(--gray-300);
2406
+ }
2407
+
2408
+ .ag-ltr .ag-header-viewport .ag-header-cell-resize::after {
2409
+ background-color: var(--gray-200);
2410
+ width: 2px;
2411
+ }
2412
+
2413
+ .p-dropdown-panel .p-dropdown-items {
2414
+ padding-left: 0;
2415
+ }
2416
+
2417
+ .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
2418
+ margin-bottom: 0px;
2419
+ }
2420
+
2421
+ .column-group {
2422
+ padding: 0 !important;
2423
+ .p-overlaypanel-content {
2424
+ padding: 0 !important;
2425
+ .column-header,
2426
+ .column-footer {
2427
+ padding: 16px;
2428
+ }
2429
+ }
2430
+ }
2431
+
2432
+ .w-25 {
2433
+ width: 25%;
2434
+ }
2435
+
2436
+ .lh-44 {
2437
+ line-height: 44px;
2438
+ }
2439
+
2440
+ .lh-40 {
2441
+ line-height: 40px;
2442
+ }
2443
+
2444
+ .br-8 {
2445
+ border-radius: 8px;
2446
+ }
2447
+
2448
+ /* conditions */
2449
+ .filter-dropdowns {
2450
+ padding: 2px;
2451
+
2452
+ .p-dropdown:not(.p-disabled).p-focus {
2453
+ box-shadow: none !important;
2454
+ }
2455
+
2456
+ .condition-dropdown {
2457
+ width: 12rem !important;
2458
+ height: 44px;
2459
+ display: flex;
2460
+ justify-content: center;
2461
+ align-items: center;
2462
+ // border: 1px solid var(--gray-300) !important;
2463
+
2464
+ .p-dropdown .p-dropdown-label.p-inputtext {
2465
+ overflow: hidden;
2466
+ text-overflow: ellipsis;
2467
+ white-space: nowrap;
2468
+ }
2469
+
2470
+ .p-inputtext:enabled:focus {
2471
+ outline: 0 none;
2472
+ outline-offset: 0;
2473
+ box-shadow: none !important;
2474
+ border-radius: 8px;
2475
+ }
2476
+
2477
+ .p-inputtext:enabled:focus {
2478
+ outline: 0 none;
2479
+ outline-offset: 0;
2480
+ box-shadow: none !important;
2481
+ border-radius: 8px;
2482
+ }
2483
+ }
2484
+
2485
+ .operator-type {
2486
+ height: 44px !important;
2487
+ display: flex;
2488
+ justify-content: center;
2489
+ align-items: center;
2490
+ }
2491
+
2492
+ .condition-type {
2493
+ // width: 120px;
2494
+ height: 44px;
2495
+ display: flex;
2496
+ justify-content: center;
2497
+ align-items: center;
2498
+
2499
+ .p-dropdown .p-dropdown-label.p-inputtext {
2500
+ overflow: hidden;
2501
+ text-overflow: ellipsis;
2502
+ white-space: nowrap;
2503
+ }
2504
+ }
2505
+
2506
+ .filter-multi-dropdown {
2507
+ .p-multiselect {
2508
+ box-shadow: none !important;
2509
+ border: 1px solid var(--gray-300) !important;
2510
+ border-top-left-radius: 0;
2511
+ border-bottom-left-radius: 0;
2512
+ height: 44px;
2513
+ box-shadow: none !important;
2514
+ width: 200px !important;
2515
+
2516
+ &:focus {
2517
+ border-top-left-radius: 0 !important;
2518
+ border-bottom-left-radius: 0 !important;
2519
+ }
2520
+ .p-inputwrapper-filled {
2521
+ background: #ffffff !important;
2522
+ }
2523
+ }
2524
+ }
2525
+
2526
+ .filter-calendar {
2527
+ .p-inputtext {
2528
+ border: 1px solid var(--gray-300) !important;
2529
+ border-top-left-radius: 0;
2530
+ border-bottom-left-radius: 0;
2531
+ height: 44px;
2532
+ line-height: 44px;
2533
+ box-shadow: none !important;
2534
+
2535
+ &:focus {
2536
+ border-top-left-radius: 0 !important;
2537
+ border-bottom-left-radius: 0 !important;
2538
+ }
2539
+ }
2540
+ }
2541
+
2542
+ .data_table_multi_checkbox {
2543
+ .p-checkbox {
2544
+ vertical-align: baseline;
2545
+ }
2546
+ }
2547
+ }
2548
+
2549
+ .overlay_list_options {
2550
+ .p-overlaypanel-content {
2551
+ padding: 0;
2552
+ }
2553
+ }
2554
+
2555
+ .filter-btn-grid {
2556
+ padding: 10px;
2557
+ }
2558
+
2559
+ // .table-filter-overlay {
2560
+ // width: 51rem !important;
2561
+ // &:after,
2562
+ // &:before {
2563
+ // margin-left: -12px !important;
2564
+ // }
2565
+
2566
+ // margin-left: -10px;
2567
+
2568
+ // .p-overlaypanel-content {
2569
+ // padding: 0;
2570
+ // }
2571
+ // }
2572
+ .filter_dropdown_and {
2573
+ .p-dropdown-trigger {
2574
+ margin-top: 2px !important;
2575
+ }
2576
+ }
2577
+
2578
+ .icon-24x24 {
2579
+ width: 24px;
2580
+ height: 24px;
2581
+ }
2582
+
2583
+ .icon-32x32 {
2584
+ width: 32px;
2585
+ height: 32px;
2586
+ }
2587
+
2588
+ .h-38 {
2589
+ height: 38px;
2590
+ }
2591
+
2592
+ .border-round-6 {
2593
+ border-radius: 6px !important;
2594
+ }
2595
+
2596
+ // loader styles
2597
+ .loader-wrapper {
2598
+ width: 60px;
2599
+ height: 60px;
2600
+ top: 45%;
2601
+ left: 45%;
2602
+ transform: translate(-45%, -50%);
2603
+ border-radius: 50%;
2604
+ background-color: #fff;
2605
+ position: relative;
2606
+ transform: rotate(45deg);
2607
+ box-sizing: border-box;
2608
+ display: flex;
2609
+ justify-content: center;
2610
+ align-items: center;
2611
+
2612
+ /* HTML: <div class="loader"></div> */
2613
+ .loader-jobs {
2614
+ width: 35px;
2615
+ aspect-ratio: 1;
2616
+ border-radius: 50%;
2617
+ background: radial-gradient(farthest-side, var(--primary-500) 94%, #0000)
2618
+ top/5px 5px no-repeat,
2619
+ conic-gradient(#0000 5%, var(--primary-500));
2620
+ -webkit-mask: radial-gradient(
2621
+ farthest-side,
2622
+ #0000 calc(100% - 5px),
2623
+ #000 0
2624
+ );
2625
+ animation: l13 1s infinite linear;
2626
+ }
2627
+
2628
+ @keyframes l13 {
2629
+ 100% {
2630
+ transform: rotate(1turn);
2631
+ }
2632
+ }
2633
+
2634
+ @keyframes gradient {
2635
+ 0% {
2636
+ background-position: 100% 50%;
2637
+ }
2638
+
2639
+ 50% {
2640
+ background-position: 50% 70%;
2641
+ }
2642
+
2643
+ 100% {
2644
+ background-position: 70% 100%;
2645
+ }
2646
+ }
2647
+ }
2648
+
2649
+ .loader-main {
2650
+ width: 48px;
2651
+ height: 48px;
2652
+ border-radius: 50%;
2653
+ position: relative;
2654
+ animation: rotate 1s linear infinite;
2655
+ &:nth-child(2) {
2656
+ width: 90%;
2657
+ }
2658
+ &:nth-child(3) {
2659
+ width: 80%;
2660
+ }
2661
+ &:nth-child(4) {
2662
+ width: 70%;
2663
+ }
2664
+ }
2665
+
2666
+ .loader-main::before {
2667
+ content: "";
2668
+ box-sizing: border-box;
2669
+ position: absolute;
2670
+ inset: 0px;
2671
+ border-radius: 50%;
2672
+ border: 3px solid var(--primary-500);
2673
+ animation: prixClipFix 2s linear infinite;
2674
+ }
2675
+
2676
+ .br-6 {
2677
+ border-radius: 6px;
2678
+ }
2679
+
2680
+ .line-clamp {
2681
+ display: -webkit-box;
2682
+ -webkit-box-orient: vertical;
2683
+ overflow: hidden;
2684
+ text-overflow: ellipsis;
2685
+ }
2686
+
2687
+ .line-clamp-1 {
2688
+ -webkit-line-clamp: 1;
2689
+ line-clamp: 1;
2690
+ }
2691
+
2692
+ .line-clamp-2 {
2693
+ -webkit-line-clamp: 2;
2694
+ line-clamp: 2;
2695
+ }
2696
+
2697
+ .pd-9 {
2698
+ padding: 9px;
2699
+ }
2700
+
2701
+ .custom_grid_checkbox {
2702
+ &.custom_grid_indeterminate {
2703
+ .p-checkbox-box {
2704
+ width: 20px;
2705
+ height: 20px;
2706
+ border-radius: 50%;
2707
+ cursor: pointer;
2708
+ position: absolute;
2709
+ top: 0;
2710
+ left: 0;
2711
+ background: url("./assets/png/checkbox_minus_icon.png");
2712
+ transition: background 0.3s;
2713
+ border: 0;
2714
+
2715
+ &.p-highlight {
2716
+ background: url("./assets/png/checkbox_minus_icon.png");
2717
+
2718
+ &:hover {
2719
+ background: url("./assets/png/checkbox_minus_icon.png") transparent !important;
2720
+ }
2721
+
2722
+ svg {
2723
+ width: 0 !important;
2724
+ height: 0 !important;
2725
+ }
2726
+ }
2727
+ }
2728
+ }
2729
+ position: relative;
2730
+ margin-right: 5px;
2731
+
2732
+ .p-checkbox-box {
2733
+ width: 20px;
2734
+ height: 20px;
2735
+ border-radius: 50%;
2736
+ cursor: pointer;
2737
+ position: absolute;
2738
+ top: 0;
2739
+ left: 0;
2740
+ background: url("./assets/png/checkbox_outline_icon.png");
2741
+ transition: background 0.3s;
2742
+ border: 0;
2743
+
2744
+ &:hover {
2745
+ background: url("./assets/png/checkbox_outline_icon.png") transparent !important;
2746
+ border: 0 !important;
2747
+ }
2748
+
2749
+ &.p-highlight {
2750
+ background: url("./assets/png/checkbox_fill_icon.png");
2751
+
2752
+ &:hover {
2753
+ background: url("./assets/png/checkbox_fill_icon.png") transparent !important;
2754
+ }
2755
+
2756
+ svg {
2757
+ width: 0 !important;
2758
+ height: 0 !important;
2759
+ }
2760
+ }
2761
+ }
2762
+ }
2763
+
2764
+ // .ag-grid-container {
2765
+ // .ag-cell-wrapper {
2766
+ // width: 100% !important;
2767
+ // .ag-group-value {
2768
+ // width: 100% !important;
2769
+ // }
2770
+ // }
2771
+ // }
2772
+
2773
+ // .ag_grid_sidebar {
2774
+ // .p-sidebar-content {
2775
+ // padding-right: 16px;
2776
+ // }
2777
+ // }
2778
+
2779
+ .ag-center-cols-viewport {
2780
+ min-height: 0px !important;
2781
+ }
2782
+
2783
+ .filter-dropdown-grid {
2784
+ .p-placeholder {
2785
+ margin-top: 3px;
2786
+ }
2787
+ }
2788
+
2789
+ .zoom_animate {
2790
+ transition: all 0.4s ease-in-out;
2791
+ animation: zoomin 0.2s linear;
2792
+ }
2793
+
2794
+ @keyframes zoomin {
2795
+ 0% {
2796
+ opacity: 0;
2797
+ transform: scale3d(0.3, 0.3, 0.3);
2798
+ }
2799
+ 100% {
2800
+ opacity: 1;
2801
+ }
2802
+ }
2803
+
2804
+ // .slide_animate_sort {
2805
+ // overflow: hidden; /* Ensures content is not visible outside of the height */
2806
+ // height: 0; /* Start with height 0 */
2807
+ // opacity: 0; /* Start with full transparency */
2808
+ // animation: slide_down 0.5s ease-in-out forwards; /* Run the animation on load */
2809
+ // }
2810
+
2811
+ // @keyframes slide_down {
2812
+ // 0% {
2813
+ // height: 0;
2814
+ // // margin-top: -30px; /* Start 30px above the final position */
2815
+ // opacity: 0; /* Fully transparent */
2816
+ // }
2817
+ // 100% {
2818
+ // height: 90px; /* The final height */
2819
+ // // margin-top: 0px; /* Move to the final position */
2820
+ // opacity: 1; /* Fully opaque */
2821
+ // }
2822
+ // }
2823
+
2824
+ .pd-r-2 {
2825
+ padding-right: 2px;
2826
+ }
2827
+
2828
+ .ag-grid-container:has(.custom_class_name) {
2829
+ .ag-cell-wrapper {
2830
+ width: 100% !important;
2831
+ .ag-group-value {
2832
+ width: 100% !important;
2833
+ }
2834
+ }
2835
+ }
2836
+
2837
+ @keyframes rotate {
2838
+ 100% {
2839
+ transform: rotate(360deg);
2840
+ }
2841
+ }
2842
+
2843
+ @keyframes prixClipFix {
2844
+ 0% {
2845
+ clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
2846
+ }
2847
+
2848
+ 25% {
2849
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
2850
+ }
2851
+
2852
+ 50% {
2853
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
2854
+ }
2855
+
2856
+ 75% {
2857
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
2858
+ }
2859
+
2860
+ 100% {
2861
+ clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
2862
+ }
2863
+ }
2864
+
2865
+ .edited-record {
2866
+ background-color: var(--primary-50);
2867
+ }
2868
+ .non-editable {
2869
+ background-color: var(--gray-100);
2870
+ }