sccoreui 6.4.51 → 6.4.52

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