ngx-vector-components 6.46.0 → 6.48.0

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 (35) hide show
  1. package/CHANGELOG.md +3373 -3358
  2. package/README.md +35 -35
  3. package/assets/icons/chevron_down_icon.svg +3 -3
  4. package/assets/icons/home_menu_icon.svg +3 -3
  5. package/assets/icons/logout_icon.svg +9 -9
  6. package/assets/icons/menu_footer_icon.svg +3 -3
  7. package/assets/icons/menu_hamburguer_icon.svg +3 -3
  8. package/assets/icons/terms_of_use_icon.svg +9 -9
  9. package/assets/icons/vector_admin_icon.svg +4 -4
  10. package/assets/icons/vector_fintech_icon.svg +3 -3
  11. package/assets/icons/vector_logtech_icon.svg +6 -6
  12. package/assets/icons/vector_marketplace_icon.svg +3 -3
  13. package/assets/images/bunge_logo.svg +23 -23
  14. package/assets/images/cofco_logo.svg +117 -117
  15. package/assets/images/emote_bad.svg +6 -6
  16. package/assets/images/emote_cool.svg +5 -5
  17. package/assets/images/emote_nice.svg +5 -5
  18. package/assets/images/success_sign.svg +4 -4
  19. package/assets/images/vector-logo-horizontal-inverse-color.svg +13 -13
  20. package/assets/images/vector_logo_horizontal.svg +13 -13
  21. package/assets/images/warn_sign.svg +4 -4
  22. package/assets/styles/_fonts.scss +114 -114
  23. package/assets/styles/_mixins.scss +7 -7
  24. package/assets/styles/_phosphor-bold.scss +4625 -4625
  25. package/assets/styles/_primeng-custom-theme.scss +1646 -1646
  26. package/assets/styles/_spinner.scss +36 -36
  27. package/assets/styles/_styles.scss +139 -139
  28. package/assets/styles/_variables.scss +65 -65
  29. package/fesm2022/ngx-vector-components.mjs +109 -80
  30. package/fesm2022/ngx-vector-components.mjs.map +1 -1
  31. package/lib/components/fields/data-table/data-table.component.d.ts +2 -2
  32. package/lib/components/fields/text-field/text-field.component.d.ts +1 -1
  33. package/lib/models/profile.model.d.ts +2 -1
  34. package/lib/utils/validation.util.d.ts +3 -0
  35. package/package.json +1 -1
@@ -1,1646 +1,1646 @@
1
- .ch {
2
- cursor: help;
3
- }
4
- .cp {
5
- cursor: pointer;
6
- }
7
- .p-focus,
8
- .p-element:focus {
9
- box-shadow: none !important;
10
- }
11
-
12
- .field {
13
- margin-bottom: 0rem !important;
14
- }
15
-
16
- .p-button.p-button-icon-only {
17
- padding: 0.7rem !important;
18
- min-height: 41.25px !important;
19
- }
20
-
21
- .p-button:hover:not(:disabled) .p-button-icon,
22
- .p-button.success .p-button-icon {
23
- color: #fff !important;
24
- }
25
-
26
- .p-button.p-button-link {
27
- color: var(--theme-dark);
28
- background: transparent;
29
- border: transparent;
30
- }
31
- .p-button.p-button-link:enabled:hover {
32
- background: transparent;
33
- color: var(--theme-dark);
34
- border-color: transparent;
35
- }
36
- .p-button.p-button-link:enabled:hover .p-button-label {
37
- text-decoration: none;
38
- }
39
- .p-button.p-button-link:enabled:focus {
40
- background: transparent;
41
- box-shadow: 0 0 0 0.2rem #a6d5fa;
42
- border-color: transparent;
43
- }
44
- .p-button.p-button-link:enabled:active {
45
- background: transparent;
46
- color: var(--theme-dark);
47
- border-color: transparent;
48
- }
49
-
50
- p-button {
51
- width: 100%;
52
- border-width: 2px;
53
- border-radius: var(--border-radius);
54
- background-color: var(--theme-dark);
55
- border-color: var(--theme-dark);
56
- color: #ffffff;
57
- box-shadow: 0px 5px 5px rgba(0, 70, 232, 0.5);
58
-
59
- button {
60
- width: 100% !important;
61
- }
62
-
63
- &:hover:not(:disabled) {
64
- background-color: #003049;
65
- border-color: #003049;
66
- }
67
-
68
- &:focus {
69
- box-shadow: none;
70
- }
71
-
72
- &:disabled {
73
- cursor: not-allowed;
74
- }
75
- .p-button {
76
- border-width: 2px !important;
77
- }
78
- }
79
-
80
- .p-inputgroup {
81
- display: flex;
82
- align-items: stretch;
83
- width: 100%;
84
-
85
- > input,
86
- > p-inputmask {
87
- flex: 1 1 auto;
88
- width: 1%;
89
- }
90
-
91
- vector-button {
92
- flex: 0 0 auto;
93
-
94
- p-button,
95
- button {
96
- width: auto !important;
97
- }
98
- }
99
- }
100
-
101
- .p-input-icon-left,
102
- .p-input-icon-right {
103
- position: relative;
104
- }
105
-
106
- .p-input-icon-left > i,
107
- .p-input-icon-left > svg {
108
- position: absolute;
109
- top: 50%;
110
- left: 0.75rem;
111
- margin-top: -0.5rem;
112
- z-index: 1;
113
- }
114
-
115
- .p-input-icon-right > i,
116
- .p-input-icon-right > svg {
117
- position: absolute;
118
- top: 50%;
119
- right: 0.75rem;
120
- margin-top: -0.5rem;
121
- z-index: 1;
122
- }
123
-
124
- .p-autocomplete-input {
125
- border-right: none !important;
126
- border-top-right-radius: 0px !important;
127
- border-bottom-right-radius: 0px !important;
128
- padding: 6px 0px 6px 12px !important;
129
-
130
- &:focus + .p-autocomplete-dropdown {
131
- background-color: #ffffff !important;
132
- border-right: 2px solid var(--theme-dark) !important;
133
- border-top: 2px solid var(--theme-dark) !important;
134
- border-bottom: 2px solid var(--theme-dark) !important;
135
- }
136
- }
137
-
138
- .p-inputwrapper-focus .p-autocomplete-dropdown {
139
- background-color: #ffffff !important;
140
- border-right: 2px solid var(--theme-dark) !important;
141
- border-top: 2px solid var(--theme-dark) !important;
142
- border-bottom: 2px solid var(--theme-dark) !important;
143
- }
144
-
145
- .p-autocomplete-dropdown {
146
- background-color: var(--gray-light) !important;
147
- border: none !important;
148
- margin-left: -1px !important;
149
- border-top-right-radius: var(--border-radius) !important;
150
- border-bottom-right-radius: var(--border-radius) !important;
151
- color: var(--gray-dark) !important;
152
- padding-bottom: 5px !important;
153
- }
154
-
155
- .p-select,
156
- .p-multiselect {
157
- height: 40px;
158
- background-color: var(--gray-medium) !important;
159
-
160
- .p-select-label,
161
- .p-multiselect-label {
162
- font-family: 'Poppins';
163
- color: var(--theme-dark) !important;
164
- font-weight: 500;
165
- display: flex;
166
- align-items: center;
167
- }
168
- }
169
-
170
- .p-paginator .p-select {
171
- width: auto !important;
172
- height: auto !important;
173
- background-color: transparent !important;
174
- border: 1px solid var(--gray-medium) !important;
175
- border-radius: 8px !important;
176
-
177
- .p-select-label {
178
- padding: 8px 12px !important;
179
- color: var(--theme-dark) !important;
180
- font-weight: 600;
181
- }
182
-
183
- .p-select-dropdown {
184
- color: var(--theme-dark) !important;
185
- }
186
- }
187
-
188
- .p-paginator .p-paginator-first,
189
- .p-paginator .p-paginator-prev,
190
- .p-paginator .p-paginator-next,
191
- .p-paginator .p-paginator-last {
192
- color: var(--theme-dark) !important;
193
- }
194
-
195
- p-inputnumber:not(.currency-input).ng-touched.ng-invalid input.p-inputnumber-input {
196
- border-color: var(--error-color) !important;
197
- background-color: var(--error-color-transparent) !important;
198
- }
199
-
200
- p-inputnumber.currency-input:not(.outlined) {
201
- &.ng-touched.ng-invalid input.p-inputnumber-input {
202
- color: var(--error-color) !important;
203
- }
204
-
205
- &.rounded input.p-inputnumber-input {
206
- font-size: 1rem !important;
207
- }
208
-
209
- input.p-inputnumber-input {
210
- font-size: 2em !important;
211
- border: none !important;
212
- font-weight: 600 !important;
213
- background-color: #ffffff !important;
214
- color: var(--theme-dark) !important;
215
- width: 100% !important;
216
- padding: 0px !important;
217
- height: 2em !important;
218
-
219
- &:focus {
220
- outline: 0 !important;
221
- box-shadow: none !important;
222
- }
223
- }
224
- }
225
-
226
- .p-inputnumber-buttons-horizontal,
227
- .p-inputnumber.p-inputnumber-horizontal {
228
- display: flex !important;
229
- flex-direction: row !important;
230
- align-items: stretch !important;
231
- width: 100% !important;
232
-
233
- p-button,
234
- .p-inputnumber-button-group {
235
- width: auto !important;
236
- background: transparent !important;
237
- border: none !important;
238
- box-shadow: none !important;
239
- display: inline-flex !important;
240
- align-items: stretch !important;
241
- }
242
-
243
- .p-inputnumber-input {
244
- flex: 1 1 auto !important;
245
- min-width: 0 !important;
246
- text-align: center !important;
247
- border-radius: 0 !important;
248
- }
249
-
250
- .p-inputnumber-button,
251
- button.p-inputnumber-increment-button,
252
- button.p-inputnumber-decrement-button,
253
- .p-button {
254
- width: 36px !important;
255
- min-width: 36px !important;
256
- flex: 0 0 36px !important;
257
- padding: 0 !important;
258
- color: var(--theme-primary) !important;
259
- border: none !important;
260
- border-radius: 0 !important;
261
- background: var(--gray-light) !important;
262
- box-shadow: none !important;
263
- display: inline-flex !important;
264
- align-items: center !important;
265
- justify-content: center !important;
266
-
267
- &:hover:not(:disabled) {
268
- background: var(--gray-medium) !important;
269
- color: var(--theme-dark) !important;
270
- }
271
-
272
- &:focus,
273
- &:focus-visible {
274
- outline: none !important;
275
- box-shadow: none !important;
276
- }
277
-
278
- span,
279
- .p-button-icon,
280
- svg {
281
- color: inherit !important;
282
- font-weight: 600 !important;
283
- border-radius: 0 !important;
284
- }
285
- }
286
-
287
- .p-inputnumber-decrement-button,
288
- .p-inputnumber-button:first-of-type {
289
- border-top-left-radius: 0 !important;
290
- border-bottom-left-radius: 0 !important;
291
- border-top-right-radius: 0 !important;
292
- border-bottom-right-radius: 0 !important;
293
- }
294
-
295
- .p-inputnumber-increment-button,
296
- .p-inputnumber-button:last-of-type {
297
- border-top-right-radius: 0 !important;
298
- border-bottom-right-radius: 0 !important;
299
- border-top-left-radius: 0 !important;
300
- border-bottom-left-radius: 0 !important;
301
- }
302
- }
303
-
304
- .p-multiselect {
305
- padding: 6px 0px 6px 12px !important;
306
-
307
- .p-multiselect-label {
308
- padding: 0.3rem 0.5rem 0 0 !important;
309
- }
310
-
311
- .p-multiselect-trigger {
312
- width: 12px !important;
313
- &:hover {
314
- color: #fff !important;
315
- }
316
- }
317
-
318
- // PrimeNG 19: display="chip" renderiza <p-chip styleClass="p-multiselect-chip"> dentro do .p-multiselect-label
319
- // Deixar inline, compacto, igual QA (PrimeNG 17 era assim por padrão)
320
- &.p-multiselect-display-chip {
321
- .p-multiselect-label {
322
- display: inline-flex !important;
323
- flex-wrap: wrap !important;
324
- align-items: center !important;
325
- gap: 4px !important;
326
- padding: 0.15rem 0.5rem 0.15rem 0 !important;
327
- min-height: 28px !important;
328
- }
329
-
330
- .p-multiselect-chip-item {
331
- display: inline-flex !important;
332
- align-items: center !important;
333
- }
334
-
335
- .p-multiselect-chip,
336
- .p-chip {
337
- height: 24px !important;
338
- padding: 0 6px 0 10px !important;
339
- background: #ffffff !important;
340
- border: 1px solid #e5e7eb !important;
341
- border-radius: 16px !important;
342
- font-size: 12px !important;
343
- font-weight: 500 !important;
344
- line-height: 1 !important;
345
- color: var(--theme-dark) !important;
346
- gap: 4px !important;
347
- display: inline-flex !important;
348
- align-items: center !important;
349
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
350
-
351
- .p-chip-label,
352
- .p-multiselect-chip-label {
353
- max-width: 140px !important;
354
- overflow: hidden !important;
355
- text-overflow: ellipsis !important;
356
- white-space: nowrap !important;
357
- color: inherit !important;
358
- }
359
-
360
- .p-chip-remove-icon,
361
- .p-multiselect-chip-icon,
362
- svg {
363
- width: 14px !important;
364
- height: 14px !important;
365
- color: var(--theme-dark) !important;
366
- opacity: 0.6 !important;
367
- cursor: pointer !important;
368
-
369
- &:hover {
370
- opacity: 1 !important;
371
- }
372
- }
373
- }
374
- }
375
- }
376
-
377
- input.p-inputtext:not(.currency-input),
378
- .p-inputtextarea,
379
- .p-textarea,
380
- .p-multiselect {
381
- &:not(:focus) {
382
- border: none !important;
383
- background-color: var(--gray-light) !important;
384
- }
385
- width: 100%;
386
- padding: 6px 12px 6px 12px !important;
387
- border-top-right-radius: var(--border-radius);
388
- border-bottom-right-radius: var(--border-radius);
389
- border-top-left-radius: var(--border-radius);
390
- border-bottom-left-radius: var(--border-radius);
391
- height: 40px;
392
- font-size: 0.9em !important;
393
- color: var(--theme-dark) !important;
394
- font-weight: 500;
395
-
396
- &:disabled {
397
- cursor: not-allowed;
398
- opacity: 0.6;
399
- }
400
-
401
- &:focus {
402
- outline: 0 !important;
403
- box-shadow: none !important;
404
- border: 2px solid var(--theme-dark);
405
- background-color: #ffffff;
406
- }
407
-
408
- &:hover,
409
- &:focus:not(.ng-invalid):not(.p-inputmask) {
410
- border-color: var(--theme-dark) !important;
411
- }
412
-
413
- &::placeholder {
414
- color: var(--theme-dark);
415
- opacity: 0.8;
416
- }
417
-
418
- &.ng-touched.ng-invalid {
419
- border-color: var(--error-color) !important;
420
- background-color: var(--error-color-transparent) !important;
421
- }
422
-
423
- &:not(.ng-invalid) {
424
- border-color: var(--theme-dark) !important;
425
- }
426
- }
427
-
428
- .p-inputtextarea,
429
- .p-textarea {
430
- padding-right: 62px !important;
431
- resize: none;
432
- height: unset !important;
433
- }
434
-
435
- .p-datepicker {
436
- width: 100% !important;
437
- .p-inputtext {
438
- color: var(--theme-dark) !important;
439
- font-weight: 600 !important;
440
- margin-left: -1px !important;
441
- border-top-right-radius: 0px !important;
442
- border-bottom-right-radius: 0px !important;
443
-
444
- &:focus {
445
- border-right: none !important;
446
-
447
- + .p-datepicker-dropdown {
448
- border-right: 2px solid var(--theme-dark) !important;
449
- border-top: 2px solid var(--theme-dark) !important;
450
- border-bottom: 2px solid var(--theme-dark) !important;
451
- background-color: #ffffff !important;
452
- }
453
- }
454
- }
455
-
456
- .p-datepicker-dropdown {
457
- background-color: var(--gray-light) !important;
458
- border: none !important;
459
- border-top-right-radius: var(--border-radius) !important;
460
- border-bottom-right-radius: var(--border-radius) !important;
461
-
462
- span {
463
- color: var(--theme-dark) !important;
464
- }
465
- }
466
- }
467
- p-datepicker.ng-touched.ng-invalid {
468
- .p-datepicker {
469
- width: 100% !important;
470
- input.p-inputtext:not(.currency-input),
471
- .p-inputtextarea {
472
- &:not(:focus) {
473
- border: none !important;
474
- background-color: var(--error-color-transparent) !important;
475
- }
476
- }
477
- }
478
-
479
- .p-datepicker-dropdown {
480
- border-color: var(--error-color) !important;
481
- background-color: var(--error-color-transparent) !important;
482
- }
483
-
484
- .p-focus {
485
- input.p-inputtext:not(.currency-input),
486
- .p-inputtextarea {
487
- border-color: var(--error-color) !important;
488
- background-color: var(--error-color-transparent) !important;
489
- }
490
- .p-datepicker-dropdown {
491
- border-right: 2px solid var(--error-color) !important;
492
- border-top: 2px solid var(--error-color) !important;
493
- border-bottom: 2px solid var(--error-color) !important;
494
- background-color: var(--error-color-transparent) !important;
495
- }
496
- }
497
- }
498
-
499
- p-inputmask {
500
- flex: 1;
501
- }
502
- p-inputmask.ng-touched.ng-invalid input {
503
- border-color: var(--error-color) !important;
504
- background-color: var(--error-color-transparent) !important;
505
- }
506
-
507
- p-inputnumber:not(.currency-input),
508
- p-inputnumber.outlined {
509
- display: block !important;
510
-
511
- span {
512
- width: 100%;
513
- }
514
- }
515
-
516
- p-inputnumber .text-centered input {
517
- text-align: center;
518
- }
519
-
520
- p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
521
- border-color: var(--error-color) !important;
522
- }
523
-
524
- .p-radiobutton {
525
- width: 24px;
526
- height: 24px;
527
-
528
- .p-radiobutton-box {
529
- border: 2px solid #d1d5db !important;
530
- background: #ffffff !important;
531
- box-shadow: none !important;
532
- }
533
-
534
- &:not(.p-disabled):hover .p-radiobutton-box {
535
- border-color: #1545de !important;
536
- }
537
-
538
- &.p-radiobutton-checked .p-radiobutton-box {
539
- border-color: #1545de !important;
540
- background: #1545de !important;
541
-
542
- .p-radiobutton-icon {
543
- background: #ffffff !important;
544
- }
545
- }
546
-
547
- .p-radiobutton-input:focus-visible + .p-radiobutton-box,
548
- &.p-focus .p-radiobutton-box {
549
- border-color: #1545de !important;
550
- box-shadow: 0 0 0 3px #ced9fa !important;
551
- }
552
- }
553
-
554
- .p-steps .p-steps-item.p-steps-item-active {
555
- background-color: transparent !important;
556
-
557
- .p-steps-item-link .p-steps-item-number {
558
- color: #fff !important;
559
- background-color: var(--theme-medium) !important;
560
- border-color: var(--theme-medium) !important;
561
- }
562
- }
563
-
564
- .p-menu-list {
565
- padding: 0px !important;
566
- }
567
-
568
- .p-menu-item-link {
569
- padding: 0.75rem 1rem !important;
570
- }
571
-
572
- .p-steps .p-steps-item:not(.p-steps-item-active) {
573
- .p-steps-item-label {
574
- opacity: 0.4 !important;
575
- }
576
-
577
- .p-steps-item-link .p-steps-item-number {
578
- color: var(--theme-medium) !important;
579
- }
580
- }
581
-
582
- .p-steps .p-steps-item .p-steps-item-label {
583
- color: var(--theme-medium) !important;
584
- }
585
-
586
- .p-steps .p-steps-item.p-disabled {
587
- opacity: 1 !important;
588
- }
589
-
590
- .p-steps .p-steps-item .p-steps-item-link {
591
- background: transparent !important;
592
- padding: 0.75rem 1rem !important;
593
-
594
- .p-steps-item-number {
595
- min-width: 2.6rem !important;
596
- height: 2.6rem !important;
597
- line-height: 2.6rem !important;
598
- font-size: 1rem !important;
599
- border: 2px solid var(--theme-medium) !important;
600
- }
601
- }
602
-
603
- .p-steps ul > li:nth-child(1):only-child::before {
604
- content: unset !important;
605
- }
606
-
607
- .p-steps ul > li:not(:only-child)::before {
608
- border-top: 1px dashed var(--theme-medium) !important;
609
- }
610
-
611
- .p-steps .p-steps-item:first-child:before {
612
- width: 50% !important;
613
- left: 50% !important;
614
- transform: none !important;
615
- }
616
-
617
- .p-steps .p-steps-item:last-child:before {
618
- width: 50% !important;
619
- }
620
-
621
- .p-steps .p-steps-item.checked .p-steps-item-label {
622
- color: var(--success-color-dark) !important;
623
- }
624
-
625
- .p-steps .p-steps-item.checked .p-steps-item-link .p-steps-item-number {
626
- background-color: var(--success-color-dark) !important;
627
- color: #fff !important;
628
- border: 2px solid var(--success-color-dark) !important;
629
- }
630
-
631
- .p-steps .p-steps-item .p-steps-item-link .p-steps-item-number.disabled {
632
- color: var(--gray-dark) !important;
633
- border: 2px solid var(--gray-dark) !important;
634
- }
635
-
636
- .p-highlight {
637
- background-color: var(--theme-primary) !important;
638
- border-color: var(--theme-primary) !important;
639
- }
640
-
641
- .p-button:focus {
642
- box-shadow: unset !important;
643
- }
644
-
645
- .p-button.button {
646
- display: flex !important;
647
- flex-direction: row !important;
648
- justify-content: center !important;
649
-
650
- .p-button-label {
651
- flex: unset !important;
652
- }
653
- }
654
-
655
- .p-datepicker-panel {
656
- border: 2px solid var(--theme-dark) !important;
657
- border-radius: var(--border-radius) !important;
658
- z-index: 15000 !important;
659
-
660
- .p-datepicker-weekday {
661
- color: var(--theme-dark) !important;
662
- }
663
-
664
- .p-datepicker-day {
665
- color: var(--font-color) !important;
666
-
667
- &:focus {
668
- box-shadow: unset !important;
669
- }
670
- }
671
-
672
- .p-datepicker-day-selected {
673
- color: #ffffff !important;
674
- }
675
-
676
- p-button {
677
- width: auto !important;
678
- background: transparent !important;
679
- box-shadow: none !important;
680
-
681
- button {
682
- width: auto !important;
683
- min-width: 2rem !important;
684
- background: transparent !important;
685
- border: none !important;
686
- box-shadow: none !important;
687
- color: var(--theme-dark) !important;
688
-
689
- &:hover:not(:disabled) {
690
- background: var(--gray-light) !important;
691
- border: none !important;
692
- }
693
- }
694
-
695
- .p-button-icon {
696
- color: var(--theme-dark) !important;
697
- }
698
- }
699
- }
700
-
701
- .p-toast {
702
- .p-toast-message {
703
- border-radius: 12px !important;
704
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
705
- border: none !important;
706
- padding: 16px !important;
707
- color: #1f2937 !important;
708
- }
709
-
710
- .p-toast-message-content {
711
- gap: 12px !important;
712
- align-items: center !important;
713
- padding: 0 !important;
714
- }
715
-
716
- .p-toast-message-text {
717
- gap: 4px !important;
718
- }
719
-
720
- .p-toast-summary {
721
- color: #111827 !important;
722
- font-family: 'Poppins', 'Inter', sans-serif !important;
723
- font-weight: 600 !important;
724
- font-size: 14px !important;
725
- }
726
-
727
- .p-toast-detail {
728
- color: #4b5563 !important;
729
- font-family: 'Poppins', 'Inter', sans-serif !important;
730
- font-weight: 400 !important;
731
- font-size: 12px !important;
732
- }
733
-
734
- .p-toast-message-icon {
735
- width: 40px !important;
736
- height: 40px !important;
737
- min-width: 40px !important;
738
- border-radius: 50% !important;
739
- display: inline-flex !important;
740
- align-items: center !important;
741
- justify-content: center !important;
742
- color: #ffffff !important;
743
-
744
- svg,
745
- .p-icon {
746
- width: 22px !important;
747
- height: 22px !important;
748
- color: #ffffff !important;
749
- fill: #ffffff !important;
750
- }
751
- }
752
-
753
- .p-toast-message-warn {
754
- background: #fde6c0 !important;
755
- .p-toast-message-icon {
756
- background: #f59e0b !important;
757
- }
758
- }
759
-
760
- .p-toast-message-error {
761
- background: #fee2e2 !important;
762
- .p-toast-message-icon {
763
- background: #ef4444 !important;
764
- }
765
- }
766
-
767
- .p-toast-message-success {
768
- background: #dcfce7 !important;
769
- .p-toast-message-icon {
770
- background: #22c55e !important;
771
- }
772
- }
773
-
774
- p-button,
775
- .p-toast-close-button {
776
- width: auto !important;
777
- background: transparent !important;
778
- border: none !important;
779
- box-shadow: none !important;
780
- align-self: center !important;
781
-
782
- button {
783
- width: 2rem !important;
784
- min-width: 2rem !important;
785
- height: 2rem !important;
786
- padding: 0 !important;
787
- background: transparent !important;
788
- border: none !important;
789
- box-shadow: none !important;
790
- color: #6b7280 !important;
791
- border-radius: 50% !important;
792
-
793
- &:hover:not(:disabled) {
794
- background: rgba(0, 0, 0, 0.06) !important;
795
- border: none !important;
796
- color: #1f2937 !important;
797
- }
798
- }
799
-
800
- .p-button-icon,
801
- .p-toast-close-icon {
802
- color: inherit !important;
803
- width: 1rem !important;
804
- height: 1rem !important;
805
- }
806
- }
807
- }
808
-
809
- .p-overlaypanel:not(.background-white) {
810
- background-color: #01529b !important;
811
- }
812
-
813
- .p-overlaypanel-content {
814
- padding: 6px 8px 6px 8px !important;
815
- }
816
-
817
- .p-overlaypanel::after,
818
- .p-overlaypanel::before {
819
- border-bottom-color: #01529b !important;
820
- }
821
-
822
- .p-dialog:not(.p-confirm-dialog) {
823
- .p-dialog-header {
824
- padding: 3px !important;
825
- border-top-left-radius: 9px !important;
826
- border-top-right-radius: 9px !important;
827
- }
828
-
829
- .p-dialog-content {
830
- border-bottom-left-radius: 9px !important;
831
- border-bottom-right-radius: 9px !important;
832
- }
833
- }
834
-
835
- .p-dialog .p-dialog-header .p-dialog-title {
836
- font-size: 1em !important;
837
- text-align: center !important;
838
- }
839
-
840
- .p-dialog-header-close-icon {
841
- font-weight: 600 !important;
842
- }
843
-
844
- .p-dialog .p-dialog-header p-button,
845
- .p-drawer .p-drawer-header p-button {
846
- width: auto !important;
847
- background: transparent !important;
848
- box-shadow: none !important;
849
-
850
- button {
851
- width: 2rem !important;
852
- height: 2rem !important;
853
- min-width: 2rem !important;
854
- padding: 0 !important;
855
- border-radius: 50% !important;
856
- background: transparent !important;
857
- border: none !important;
858
- box-shadow: none !important;
859
- color: var(--gray-dark) !important;
860
- transition:
861
- background-color 0.15s ease,
862
- color 0.15s ease;
863
- }
864
-
865
- &:hover button:not(:disabled) {
866
- background: var(--gray-light) !important;
867
- color: var(--theme-dark) !important;
868
- }
869
-
870
- .p-dialog-header-close-icon,
871
- .p-button-icon {
872
- font-size: 1rem !important;
873
- }
874
- }
875
-
876
- .p-confirm-dialog {
877
- .p-dialog-footer .actions {
878
- display: flex;
879
- align-items: center;
880
- justify-content: flex-end;
881
- gap: 20px;
882
- }
883
-
884
- .p-confirm-dialog-icon {
885
- display: none !important;
886
- }
887
-
888
- .p-confirm-dialog-message {
889
- margin-left: 0px !important;
890
- }
891
- }
892
-
893
- .p-selectbutton {
894
- display: inline-flex !important;
895
- align-items: center !important;
896
- gap: 4px !important;
897
- padding: 4px !important;
898
- height: 42px !important;
899
- background-color: var(--gray-light) !important;
900
- border-radius: 12px !important;
901
- width: fit-content !important;
902
-
903
- .p-togglebutton {
904
- display: inline-flex !important;
905
- align-items: center !important;
906
- height: 34px !important;
907
- margin: 0 !important;
908
- padding: 0 16px !important;
909
- border: none !important;
910
- border-radius: 8px !important;
911
- background: transparent !important;
912
- transition: all 0.2s ease;
913
-
914
- .p-togglebutton-content {
915
- gap: 6px !important;
916
- font-size: 14px !important;
917
- font-weight: 500 !important;
918
- line-height: 1 !important;
919
- }
920
-
921
- .p-togglebutton-label,
922
- .p-togglebutton-icon {
923
- color: var(--theme-dark) !important;
924
- }
925
-
926
- &:not(.p-togglebutton-checked) {
927
- background-color: transparent !important;
928
- }
929
-
930
- &.p-togglebutton-checked {
931
- background-color: #ffffff !important;
932
- box-shadow:
933
- 0 1px 2px 0 rgba(17, 55, 178, 0.1),
934
- 0 2px 4px 0 rgba(17, 55, 178, 0.1),
935
- 0 4px 8px 0 rgba(17, 55, 178, 0.1) !important;
936
-
937
- .p-togglebutton-content {
938
- box-shadow: none !important;
939
- }
940
-
941
- .p-togglebutton-label,
942
- .p-togglebutton-icon {
943
- color: var(--brand-blue) !important;
944
- font-weight: 600 !important;
945
- }
946
- }
947
-
948
- &:disabled,
949
- &.p-disabled {
950
- background-color: transparent !important;
951
- box-shadow: none !important;
952
-
953
- .p-togglebutton-label,
954
- .p-togglebutton-icon {
955
- color: var(--gray-dark) !important;
956
- }
957
- }
958
- }
959
- }
960
-
961
- vector-select-button-field.is-secondary {
962
- .p-selectbutton {
963
- background-color: var(--brand-light) !important;
964
- border-radius: 9999px !important;
965
- }
966
-
967
- .p-togglebutton {
968
- padding: 0 20px !important;
969
- border-radius: 9999px !important;
970
- }
971
- }
972
-
973
- .p-multiselect-overlay:not(.has-filter) .p-multiselect-header p-checkbox::after {
974
- content: 'Selecionar Todos';
975
- display: inline-block;
976
- margin-left: 0.5rem;
977
- color: var(--theme-dark);
978
- font-weight: 500;
979
- white-space: nowrap;
980
- }
981
-
982
- .p-multiselect-header {
983
- .p-checkbox {
984
- width: max-content;
985
- }
986
- }
987
-
988
- p-checkbox.rounded-checkbox,
989
- .rounded-checkbox {
990
- --p-checkbox-border-radius: 50%;
991
- --p-checkbox-checked-border-radius: 50%;
992
- }
993
-
994
- .rounded-checkbox .p-checkbox,
995
- .rounded-checkbox .p-checkbox.p-checkbox-checked {
996
- background: transparent !important;
997
- border-radius: 50% !important;
998
- }
999
-
1000
- .rounded-checkbox .p-checkbox-input {
1001
- background: transparent !important;
1002
- border-radius: 50% !important;
1003
- }
1004
-
1005
- .rounded-checkbox .p-checkbox-box,
1006
- .rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
1007
- border-radius: 50% !important;
1008
- border: none !important;
1009
- overflow: hidden !important;
1010
- }
1011
-
1012
- .rounded-checkbox .p-checkbox:not(.p-checkbox-checked) .p-checkbox-box {
1013
- background-color: var(--gray-light) !important;
1014
- }
1015
-
1016
- .rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
1017
- background-color: var(--brand-blue) !important;
1018
- }
1019
-
1020
- p-checkbox.rounded-checkbox .p-checkbox-icon,
1021
- .rounded-checkbox .p-checkbox-icon {
1022
- font-size: 0.8em !important;
1023
- padding-top: 2px !important;
1024
- }
1025
-
1026
- .p-checkbox-box.p-highlight,
1027
- .p-checkbox.p-checkbox-checked .p-checkbox-box {
1028
- background: var(--brand-blue) !important;
1029
- border-color: var(--brand-blue) !important;
1030
- }
1031
-
1032
- .p-checkbox-box {
1033
- border-width: 2px !important;
1034
- border-color: var(--gray-dark) !important;
1035
-
1036
- &:hover:not(.p-highlight) {
1037
- border-color: var(--gray-dark) !important;
1038
- }
1039
- }
1040
-
1041
- .p-select,
1042
- .p-autocomplete {
1043
- width: 100%;
1044
- }
1045
- p-autocomplete.ng-touched.ng-invalid {
1046
- input.p-inputtext:not(.currency-input),
1047
- .p-inputtextarea {
1048
- &:not(:focus) {
1049
- border: none !important;
1050
- background-color: var(--error-color-transparent) !important;
1051
- }
1052
-
1053
- &:focus:not(.ng-invalid):not(.p-inputmask) {
1054
- border-color: var(--error-color) !important;
1055
- }
1056
- }
1057
- }
1058
-
1059
- p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown,
1060
- p-multiselect.ng-touched.ng-invalid .p-multiselect {
1061
- border-color: var(--error-color) !important;
1062
- background-color: var(--error-color-transparent) !important;
1063
- }
1064
-
1065
- .p-select-overlay,
1066
- .p-autocomplete-panel,
1067
- .p-multiselect-overlay {
1068
- // max-width: 250px !important;
1069
- min-width: 100%;
1070
- border: 1px solid var(--theme-dark) !important;
1071
- margin-top: -2px !important;
1072
- border-radius: var(--border-radius) !important;
1073
-
1074
- & .p-autocomplete-items,
1075
- & .p-multiselect-list {
1076
- padding-top: 0px !important;
1077
- padding-bottom: 0px !important;
1078
- padding-right: 1px !important;
1079
- }
1080
-
1081
- &::-webkit-scrollbar {
1082
- width: 5px;
1083
- }
1084
-
1085
- &::-webkit-scrollbar-track {
1086
- background: var(--gray-light);
1087
- }
1088
-
1089
- &::-webkit-scrollbar-thumb {
1090
- background: var(--theme-dark);
1091
- border-radius: 8px;
1092
- }
1093
-
1094
- &::-webkit-scrollbar-thumb:hover {
1095
- background: var(--theme-dark);
1096
- }
1097
- }
1098
-
1099
- .p-select-option,
1100
- .p-autocomplete-item,
1101
- .p-multiselect-item {
1102
- text-overflow: ellipsis;
1103
- color: var(--theme-dark) !important;
1104
-
1105
- &:hover {
1106
- background-color: var(--theme-dark) !important;
1107
- color: #ffffff !important;
1108
- }
1109
- }
1110
-
1111
- .p-select,
1112
- .p-multiselect {
1113
- border: none !important;
1114
- .p-highlight {
1115
- background-color: #ffffff !important;
1116
- }
1117
- }
1118
- .p-select-overlay .p-select-list .p-select-option.p-highlight,
1119
- .p-multiselect-overlay .p-multiselect-list .p-multiselect-item.p-highlight {
1120
- background-color: var(--theme-dark) !important;
1121
- color: #ffffff !important;
1122
- }
1123
-
1124
- .p-slider {
1125
- background-color: #01529b;
1126
- .p-slider-range {
1127
- background-color: var(--success-color) !important;
1128
- border-radius: inherit !important;
1129
- }
1130
- .p-slider-handle {
1131
- border-color: var(--success-color) !important;
1132
-
1133
- &:hover {
1134
- background-color: var(--success-color) !important;
1135
- }
1136
- &:focus {
1137
- box-shadow: unset !important;
1138
- }
1139
- }
1140
- }
1141
-
1142
- .p-fileupload {
1143
- p-messages,
1144
- p-message {
1145
- display: none !important;
1146
- }
1147
-
1148
- .p-fileupload-filelabel,
1149
- [class*='filelabel'] {
1150
- display: none !important;
1151
- }
1152
-
1153
- input[type='file'] {
1154
- position: absolute !important;
1155
- width: 1px !important;
1156
- height: 1px !important;
1157
- padding: 0 !important;
1158
- margin: 0 !important;
1159
- overflow: hidden !important;
1160
- clip: rect(0, 0, 0, 0) !important;
1161
- white-space: nowrap !important;
1162
- border: 0 !important;
1163
- opacity: 0 !important;
1164
- }
1165
-
1166
- p-button {
1167
- width: 100% !important;
1168
- background: transparent !important;
1169
- border: none !important;
1170
- box-shadow: none !important;
1171
- }
1172
-
1173
- .p-fileupload-choose-button,
1174
- .p-fileupload-choose {
1175
- background: transparent !important;
1176
- border: 1px solid var(--theme-dark) !important;
1177
- border-radius: 30px !important;
1178
- box-shadow: none !important;
1179
- color: var(--theme-dark) !important;
1180
- width: 100% !important;
1181
- padding: 0.875rem 1.5rem !important;
1182
- font-weight: 600 !important;
1183
- justify-content: center !important;
1184
- gap: 0.5rem !important;
1185
-
1186
- &:hover:not(:disabled) {
1187
- background: var(--theme-dark) !important;
1188
- border-color: var(--theme-dark) !important;
1189
- color: #ffffff !important;
1190
-
1191
- .p-button-label,
1192
- .p-button-icon {
1193
- color: #ffffff !important;
1194
- }
1195
- }
1196
-
1197
- .p-button-label {
1198
- color: inherit !important;
1199
- flex: 0 0 auto !important;
1200
- max-width: unset !important;
1201
- overflow: visible !important;
1202
- }
1203
-
1204
- .p-button-icon {
1205
- color: inherit !important;
1206
- }
1207
- }
1208
- }
1209
-
1210
- vector-data-table {
1211
- vector-panel.data-table-panel .p-panel,
1212
- vector-panel.data-table-panel .p-panel-content,
1213
- vector-panel.data-table-panel .p-panel-content > div {
1214
- border-radius: 15px !important;
1215
- }
1216
-
1217
- p-table {
1218
- .p-datatable-wrapper {
1219
- }
1220
-
1221
- .p-datatable-table {
1222
- border-radius: 15px !important;
1223
- }
1224
-
1225
- // PrimeNG 18 removeu o responsiveLayout: o .p-column-title (header embutido
1226
- // em cada celula por getCellContent) precisa ser escondido manualmente.
1227
- .p-column-title {
1228
- display: none;
1229
- }
1230
-
1231
- .p-datatable-thead {
1232
- border-radius: 15px !important;
1233
- z-index: 0 !important;
1234
-
1235
- .header {
1236
- th {
1237
- white-space: normal !important;
1238
- position: relative;
1239
- padding: 10px 10px 10px 35px !important;
1240
- background-color: var(--gray-light) !important;
1241
- color: #1f2937 !important;
1242
-
1243
- > div {
1244
- gap: 8px;
1245
- }
1246
-
1247
- &:first-child {
1248
- border-top-left-radius: 15px !important;
1249
- padding: 10px !important;
1250
- }
1251
-
1252
- &:last-child {
1253
- border-top-right-radius: 15px !important;
1254
- }
1255
-
1256
- p-sorticon {
1257
- svg {
1258
- height: 0.85rem !important;
1259
- width: 0.85rem !important;
1260
- }
1261
-
1262
- sortamountupalticon svg,
1263
- sortamountdownicon svg {
1264
- color: var(--theme-primary) !important;
1265
- }
1266
- }
1267
-
1268
- &.p-highlight {
1269
- color: var(--theme-primary) !important;
1270
- }
1271
- }
1272
- }
1273
- }
1274
-
1275
- .p-datatable-tbody {
1276
- tr.p-highlight {
1277
- background-color: #eff6ff !important;
1278
- }
1279
- }
1280
-
1281
- .row {
1282
- background: transparent !important;
1283
-
1284
- .cell {
1285
- white-space: normal !important;
1286
-
1287
- .boolean-value-positive {
1288
- color: var(--success-color);
1289
- }
1290
-
1291
- .boolean-value-negative {
1292
- color: var(--error-color);
1293
- }
1294
-
1295
- .status-table-field {
1296
- font-size: 1.4em;
1297
- }
1298
-
1299
- .table-button {
1300
- cursor: pointer;
1301
- color: var(--theme-primary);
1302
- }
1303
- }
1304
-
1305
- .no-results {
1306
- border-bottom-left-radius: 15px;
1307
- border-bottom-right-radius: 15px;
1308
- }
1309
- }
1310
-
1311
- .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
1312
- color: #fff !important;
1313
- }
1314
-
1315
- .p-paginator-bottom {
1316
- border-radius: 15px !important;
1317
- }
1318
- }
1319
-
1320
- p-tabview {
1321
- .p-tabpanels {
1322
- display: none !important;
1323
- }
1324
-
1325
- .p-tablist .p-tab {
1326
- justify-content: center;
1327
-
1328
- &.p-tab-active {
1329
- color: var(--theme-primary) !important;
1330
- }
1331
- }
1332
- }
1333
-
1334
- vector-panel p-panel .p-panel .p-panel-content {
1335
- padding: 0px !important;
1336
- }
1337
- }
1338
-
1339
- .success {
1340
- color: var(--success-color);
1341
- }
1342
- .error {
1343
- color: var(--error-color);
1344
- }
1345
- .warning {
1346
- color: var(--warning-color);
1347
- }
1348
- .info {
1349
- color: var(--theme-light);
1350
- }
1351
-
1352
- p-tabview {
1353
- background: transparent !important;
1354
-
1355
- .p-tabpanels,
1356
- .p-tabpanel,
1357
- .p-tabview-panel {
1358
- background: transparent !important;
1359
- }
1360
-
1361
- .p-tablist-tab-list {
1362
- background: none !important;
1363
- .p-tab.p-tab-active {
1364
- border-color: var(--theme-primary) !important;
1365
- }
1366
-
1367
- .p-tab {
1368
- border-top-right-radius: 0px !important;
1369
- border-top-left-radius: 0px !important;
1370
- color: var(--theme-primary) !important;
1371
-
1372
- &:hover {
1373
- border-color: var(--theme-primary) !important;
1374
- border-bottom-width: 2px !important;
1375
- }
1376
- }
1377
- .p-tablist-active-bar {
1378
- height: 2px !important;
1379
- background: var(--theme-primary) !important;
1380
- }
1381
- }
1382
- }
1383
-
1384
- .p-accordion {
1385
- .p-accordionpanel {
1386
- margin: 20px 0;
1387
- border: none !important;
1388
- background: transparent !important;
1389
- border-radius: 16px !important;
1390
- box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
1391
- overflow: hidden;
1392
- }
1393
-
1394
- .p-accordionheader {
1395
- position: relative !important;
1396
- border: none !important;
1397
- border-radius: 0 !important;
1398
- box-shadow: none !important;
1399
- background: #ffffff !important;
1400
- color: var(--theme-dark) !important;
1401
- padding: 1.25rem 1.5rem !important;
1402
- font-weight: 600 !important;
1403
-
1404
- &:hover {
1405
- background: #ffffff !important;
1406
- color: var(--theme-dark) !important;
1407
- }
1408
-
1409
- &:focus,
1410
- &:focus-visible {
1411
- outline: none !important;
1412
- box-shadow: none !important;
1413
- }
1414
- }
1415
-
1416
- .p-accordionheader-toggle-icon {
1417
- position: absolute !important;
1418
- right: 1.5rem !important;
1419
- top: 50% !important;
1420
- left: auto !important;
1421
- margin: 0 !important;
1422
- color: var(--theme-dark) !important;
1423
- transform: translateY(-50%) rotate(-90deg);
1424
- transition: transform 0.2s ease;
1425
- }
1426
-
1427
- .p-accordionheader[aria-expanded='true'] .p-accordionheader-toggle-icon {
1428
- transform: translateY(-50%) rotate(0deg);
1429
- }
1430
-
1431
- .p-accordioncontent {
1432
- border: none !important;
1433
- background: #ffffff !important;
1434
- }
1435
-
1436
- .p-accordioncontent-content {
1437
- border: none !important;
1438
- background: #ffffff !important;
1439
- border-radius: 0 !important;
1440
- box-shadow: none !important;
1441
- padding: 0 1.5rem 1.5rem !important;
1442
- color: inherit !important;
1443
- }
1444
- }
1445
-
1446
- .p-chip {
1447
- display: inline-block;
1448
- padding: 0 16px !important;
1449
- height: 40px;
1450
- font-weight: 500;
1451
- font-size: 13px;
1452
- line-height: 40px;
1453
- border-radius: 25px !important;
1454
- background-color: #e5e5ea !important;
1455
- color: #002463 !important;
1456
- opacity: 0.5;
1457
-
1458
- span {
1459
- border: 2px solid;
1460
- border-radius: 50%;
1461
- width: 25px;
1462
- height: 25px;
1463
- margin-left: 5px;
1464
- margin-top: 7px;
1465
- color: #abaab5;
1466
-
1467
- i {
1468
- position: relative;
1469
- top: -11px;
1470
- left: -6px;
1471
- font-size: 12px;
1472
- }
1473
- }
1474
-
1475
- .closebtn {
1476
- padding-left: 10px;
1477
- font-weight: bold;
1478
- float: right;
1479
- font-size: 20px;
1480
- cursor: pointer;
1481
- }
1482
-
1483
- .closebtn:hover {
1484
- color: #000;
1485
- }
1486
- }
1487
-
1488
- .p-menu.p-menu-overlay {
1489
- width: fit-content;
1490
- padding: 8px 0;
1491
- border-radius: 8px;
1492
- background-color: #ffffff !important;
1493
- border: 1px solid #d9dbe9 !important;
1494
- box-shadow:
1495
- 0 1px 2px 0 rgba(31, 41, 55, 0.1),
1496
- 0 2px 4px 0 rgba(31, 41, 55, 0.1),
1497
- 0 4px 8px 0 rgba(31, 41, 55, 0.1),
1498
- 0 8px 16px 0 rgba(31, 41, 55, 0.1);
1499
-
1500
- ul {
1501
- display: flex;
1502
- flex-direction: column;
1503
- max-height: 200px !important;
1504
- overflow-y: auto;
1505
- overflow-x: hidden;
1506
-
1507
- &::-webkit-scrollbar {
1508
- width: 16px;
1509
- }
1510
- &::-webkit-scrollbar-track {
1511
- background: transparent;
1512
- }
1513
- &::-webkit-scrollbar-thumb {
1514
- background: var(--theme-medium);
1515
- border-radius: 10px;
1516
- border: 5px solid transparent;
1517
- background-clip: padding-box;
1518
- }
1519
-
1520
- li {
1521
- border-radius: 4px;
1522
- }
1523
-
1524
- .p-menu-item-content {
1525
- border-radius: 4px;
1526
- background-color: transparent !important;
1527
- }
1528
-
1529
- .p-menu-item-link {
1530
- border-radius: 4px;
1531
- }
1532
-
1533
- .p-menu-item-icon,
1534
- .p-menu-item-label {
1535
- color: #434560 !important;
1536
- }
1537
-
1538
- .p-menu-item-label {
1539
- font-weight: 500 !important;
1540
- }
1541
-
1542
- .p-menu-item-content:hover,
1543
- .p-menu-item.p-focus .p-menu-item-content {
1544
- background-color: var(--theme-medium) !important;
1545
-
1546
- .p-menu-item-icon,
1547
- .p-menu-item-label {
1548
- color: #ffffff !important;
1549
- }
1550
- }
1551
- }
1552
- }
1553
-
1554
- .p-toggleswitch {
1555
- flex: 0 0 auto;
1556
- }
1557
-
1558
- .p-toggleswitch.p-focus .p-toggleswitch-slider {
1559
- box-shadow: none !important;
1560
- }
1561
-
1562
- .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
1563
- background-color: var(--theme-primary) !important;
1564
- }
1565
-
1566
- .custom-field-text {
1567
- input[type='text'],
1568
- input[type='password'] {
1569
- border-radius: 6px;
1570
- color: #757b8a !important;
1571
-
1572
- &:focus:not(.ng-invalid):not(.p-inputmask) {
1573
- border: 2px solid #6690f3 !important;
1574
- }
1575
- &:not(.ng-invalid) {
1576
- border: 2px solid #e1e4ea !important;
1577
- }
1578
- }
1579
- &.input-otp {
1580
- justify-content: center;
1581
-
1582
- input[type='text'] {
1583
- padding: 10px;
1584
- min-height: 54px;
1585
- width: 46px;
1586
- font-size: 1.6em !important;
1587
- font-weight: 600;
1588
- color: #363636 !important;
1589
-
1590
- @media screen and (max-width: 576px) {
1591
- padding: 0;
1592
- width: 40px;
1593
- font-size: 1.2em !important;
1594
- font-weight: 600;
1595
- }
1596
- }
1597
- }
1598
- &.uppercase {
1599
- input[type='text'] {
1600
- text-transform: uppercase;
1601
- }
1602
- span {
1603
- text-transform: none;
1604
- }
1605
- }
1606
- &.centered {
1607
- input[type='text'] {
1608
- text-align: center;
1609
- }
1610
- }
1611
- &.size-lg {
1612
- input[type='text'] {
1613
- font-size: 1.3em !important;
1614
- }
1615
- }
1616
- }
1617
-
1618
- .vector-text {
1619
- &.uppercase {
1620
- input[type='text'] {
1621
- text-transform: uppercase;
1622
- }
1623
- span {
1624
- text-transform: none;
1625
- }
1626
- }
1627
- }
1628
-
1629
- .multiselect-flags {
1630
- .p-multiselect-overlay .p-multiselect-list {
1631
- .p-multiselect-item {
1632
- span {
1633
- color: #757b8a;
1634
- }
1635
- &:hover {
1636
- background: #e1e4ea !important;
1637
- }
1638
- &:not(.p-highlight):not(.p-disabled).p-focus {
1639
- background: #e1e4ea !important;
1640
- }
1641
- &.p-highlight {
1642
- background: #e1e4ea !important;
1643
- }
1644
- }
1645
- }
1646
- }
1
+ .ch {
2
+ cursor: help;
3
+ }
4
+ .cp {
5
+ cursor: pointer;
6
+ }
7
+ .p-focus,
8
+ .p-element:focus {
9
+ box-shadow: none !important;
10
+ }
11
+
12
+ .field {
13
+ margin-bottom: 0rem !important;
14
+ }
15
+
16
+ .p-button.p-button-icon-only {
17
+ padding: 0.7rem !important;
18
+ min-height: 41.25px !important;
19
+ }
20
+
21
+ .p-button:hover:not(:disabled) .p-button-icon,
22
+ .p-button.success .p-button-icon {
23
+ color: #fff !important;
24
+ }
25
+
26
+ .p-button.p-button-link {
27
+ color: var(--theme-dark);
28
+ background: transparent;
29
+ border: transparent;
30
+ }
31
+ .p-button.p-button-link:enabled:hover {
32
+ background: transparent;
33
+ color: var(--theme-dark);
34
+ border-color: transparent;
35
+ }
36
+ .p-button.p-button-link:enabled:hover .p-button-label {
37
+ text-decoration: none;
38
+ }
39
+ .p-button.p-button-link:enabled:focus {
40
+ background: transparent;
41
+ box-shadow: 0 0 0 0.2rem #a6d5fa;
42
+ border-color: transparent;
43
+ }
44
+ .p-button.p-button-link:enabled:active {
45
+ background: transparent;
46
+ color: var(--theme-dark);
47
+ border-color: transparent;
48
+ }
49
+
50
+ p-button {
51
+ width: 100%;
52
+ border-width: 2px;
53
+ border-radius: var(--border-radius);
54
+ background-color: var(--theme-dark);
55
+ border-color: var(--theme-dark);
56
+ color: #ffffff;
57
+ box-shadow: 0px 5px 5px rgba(0, 70, 232, 0.5);
58
+
59
+ button {
60
+ width: 100% !important;
61
+ }
62
+
63
+ &:hover:not(:disabled) {
64
+ background-color: #003049;
65
+ border-color: #003049;
66
+ }
67
+
68
+ &:focus {
69
+ box-shadow: none;
70
+ }
71
+
72
+ &:disabled {
73
+ cursor: not-allowed;
74
+ }
75
+ .p-button {
76
+ border-width: 2px !important;
77
+ }
78
+ }
79
+
80
+ .p-inputgroup {
81
+ display: flex;
82
+ align-items: stretch;
83
+ width: 100%;
84
+
85
+ > input,
86
+ > p-inputmask {
87
+ flex: 1 1 auto;
88
+ width: 1%;
89
+ }
90
+
91
+ vector-button {
92
+ flex: 0 0 auto;
93
+
94
+ p-button,
95
+ button {
96
+ width: auto !important;
97
+ }
98
+ }
99
+ }
100
+
101
+ .p-input-icon-left,
102
+ .p-input-icon-right {
103
+ position: relative;
104
+ }
105
+
106
+ .p-input-icon-left > i,
107
+ .p-input-icon-left > svg {
108
+ position: absolute;
109
+ top: 50%;
110
+ left: 0.75rem;
111
+ margin-top: -0.5rem;
112
+ z-index: 1;
113
+ }
114
+
115
+ .p-input-icon-right > i,
116
+ .p-input-icon-right > svg {
117
+ position: absolute;
118
+ top: 50%;
119
+ right: 0.75rem;
120
+ margin-top: -0.5rem;
121
+ z-index: 1;
122
+ }
123
+
124
+ .p-autocomplete-input {
125
+ border-right: none !important;
126
+ border-top-right-radius: 0px !important;
127
+ border-bottom-right-radius: 0px !important;
128
+ padding: 6px 0px 6px 12px !important;
129
+
130
+ &:focus + .p-autocomplete-dropdown {
131
+ background-color: #ffffff !important;
132
+ border-right: 2px solid var(--theme-dark) !important;
133
+ border-top: 2px solid var(--theme-dark) !important;
134
+ border-bottom: 2px solid var(--theme-dark) !important;
135
+ }
136
+ }
137
+
138
+ .p-inputwrapper-focus .p-autocomplete-dropdown {
139
+ background-color: #ffffff !important;
140
+ border-right: 2px solid var(--theme-dark) !important;
141
+ border-top: 2px solid var(--theme-dark) !important;
142
+ border-bottom: 2px solid var(--theme-dark) !important;
143
+ }
144
+
145
+ .p-autocomplete-dropdown {
146
+ background-color: var(--gray-light) !important;
147
+ border: none !important;
148
+ margin-left: -1px !important;
149
+ border-top-right-radius: var(--border-radius) !important;
150
+ border-bottom-right-radius: var(--border-radius) !important;
151
+ color: var(--gray-dark) !important;
152
+ padding-bottom: 5px !important;
153
+ }
154
+
155
+ .p-select,
156
+ .p-multiselect {
157
+ height: 40px;
158
+ background-color: var(--gray-medium) !important;
159
+
160
+ .p-select-label,
161
+ .p-multiselect-label {
162
+ font-family: 'Poppins';
163
+ color: var(--theme-dark) !important;
164
+ font-weight: 500;
165
+ display: flex;
166
+ align-items: center;
167
+ }
168
+ }
169
+
170
+ .p-paginator .p-select {
171
+ width: auto !important;
172
+ height: auto !important;
173
+ background-color: transparent !important;
174
+ border: 1px solid var(--gray-medium) !important;
175
+ border-radius: 8px !important;
176
+
177
+ .p-select-label {
178
+ padding: 8px 12px !important;
179
+ color: var(--theme-dark) !important;
180
+ font-weight: 600;
181
+ }
182
+
183
+ .p-select-dropdown {
184
+ color: var(--theme-dark) !important;
185
+ }
186
+ }
187
+
188
+ .p-paginator .p-paginator-first,
189
+ .p-paginator .p-paginator-prev,
190
+ .p-paginator .p-paginator-next,
191
+ .p-paginator .p-paginator-last {
192
+ color: var(--theme-dark) !important;
193
+ }
194
+
195
+ p-inputnumber:not(.currency-input).ng-touched.ng-invalid input.p-inputnumber-input {
196
+ border-color: var(--error-color) !important;
197
+ background-color: var(--error-color-transparent) !important;
198
+ }
199
+
200
+ p-inputnumber.currency-input:not(.outlined) {
201
+ &.ng-touched.ng-invalid input.p-inputnumber-input {
202
+ color: var(--error-color) !important;
203
+ }
204
+
205
+ &.rounded input.p-inputnumber-input {
206
+ font-size: 1rem !important;
207
+ }
208
+
209
+ input.p-inputnumber-input {
210
+ font-size: 2em !important;
211
+ border: none !important;
212
+ font-weight: 600 !important;
213
+ background-color: #ffffff !important;
214
+ color: var(--theme-dark) !important;
215
+ width: 100% !important;
216
+ padding: 0px !important;
217
+ height: 2em !important;
218
+
219
+ &:focus {
220
+ outline: 0 !important;
221
+ box-shadow: none !important;
222
+ }
223
+ }
224
+ }
225
+
226
+ .p-inputnumber-buttons-horizontal,
227
+ .p-inputnumber.p-inputnumber-horizontal {
228
+ display: flex !important;
229
+ flex-direction: row !important;
230
+ align-items: stretch !important;
231
+ width: 100% !important;
232
+
233
+ p-button,
234
+ .p-inputnumber-button-group {
235
+ width: auto !important;
236
+ background: transparent !important;
237
+ border: none !important;
238
+ box-shadow: none !important;
239
+ display: inline-flex !important;
240
+ align-items: stretch !important;
241
+ }
242
+
243
+ .p-inputnumber-input {
244
+ flex: 1 1 auto !important;
245
+ min-width: 0 !important;
246
+ text-align: center !important;
247
+ border-radius: 0 !important;
248
+ }
249
+
250
+ .p-inputnumber-button,
251
+ button.p-inputnumber-increment-button,
252
+ button.p-inputnumber-decrement-button,
253
+ .p-button {
254
+ width: 36px !important;
255
+ min-width: 36px !important;
256
+ flex: 0 0 36px !important;
257
+ padding: 0 !important;
258
+ color: var(--theme-primary) !important;
259
+ border: none !important;
260
+ border-radius: 0 !important;
261
+ background: var(--gray-light) !important;
262
+ box-shadow: none !important;
263
+ display: inline-flex !important;
264
+ align-items: center !important;
265
+ justify-content: center !important;
266
+
267
+ &:hover:not(:disabled) {
268
+ background: var(--gray-medium) !important;
269
+ color: var(--theme-dark) !important;
270
+ }
271
+
272
+ &:focus,
273
+ &:focus-visible {
274
+ outline: none !important;
275
+ box-shadow: none !important;
276
+ }
277
+
278
+ span,
279
+ .p-button-icon,
280
+ svg {
281
+ color: inherit !important;
282
+ font-weight: 600 !important;
283
+ border-radius: 0 !important;
284
+ }
285
+ }
286
+
287
+ .p-inputnumber-decrement-button,
288
+ .p-inputnumber-button:first-of-type {
289
+ border-top-left-radius: 0 !important;
290
+ border-bottom-left-radius: 0 !important;
291
+ border-top-right-radius: 0 !important;
292
+ border-bottom-right-radius: 0 !important;
293
+ }
294
+
295
+ .p-inputnumber-increment-button,
296
+ .p-inputnumber-button:last-of-type {
297
+ border-top-right-radius: 0 !important;
298
+ border-bottom-right-radius: 0 !important;
299
+ border-top-left-radius: 0 !important;
300
+ border-bottom-left-radius: 0 !important;
301
+ }
302
+ }
303
+
304
+ .p-multiselect {
305
+ padding: 6px 0px 6px 12px !important;
306
+
307
+ .p-multiselect-label {
308
+ padding: 0.3rem 0.5rem 0 0 !important;
309
+ }
310
+
311
+ .p-multiselect-trigger {
312
+ width: 12px !important;
313
+ &:hover {
314
+ color: #fff !important;
315
+ }
316
+ }
317
+
318
+ // PrimeNG 19: display="chip" renderiza <p-chip styleClass="p-multiselect-chip"> dentro do .p-multiselect-label
319
+ // Deixar inline, compacto, igual QA (PrimeNG 17 era assim por padrão)
320
+ &.p-multiselect-display-chip {
321
+ .p-multiselect-label {
322
+ display: inline-flex !important;
323
+ flex-wrap: wrap !important;
324
+ align-items: center !important;
325
+ gap: 4px !important;
326
+ padding: 0.15rem 0.5rem 0.15rem 0 !important;
327
+ min-height: 28px !important;
328
+ }
329
+
330
+ .p-multiselect-chip-item {
331
+ display: inline-flex !important;
332
+ align-items: center !important;
333
+ }
334
+
335
+ .p-multiselect-chip,
336
+ .p-chip {
337
+ height: 24px !important;
338
+ padding: 0 6px 0 10px !important;
339
+ background: #ffffff !important;
340
+ border: 1px solid #e5e7eb !important;
341
+ border-radius: 16px !important;
342
+ font-size: 12px !important;
343
+ font-weight: 500 !important;
344
+ line-height: 1 !important;
345
+ color: var(--theme-dark) !important;
346
+ gap: 4px !important;
347
+ display: inline-flex !important;
348
+ align-items: center !important;
349
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
350
+
351
+ .p-chip-label,
352
+ .p-multiselect-chip-label {
353
+ max-width: 140px !important;
354
+ overflow: hidden !important;
355
+ text-overflow: ellipsis !important;
356
+ white-space: nowrap !important;
357
+ color: inherit !important;
358
+ }
359
+
360
+ .p-chip-remove-icon,
361
+ .p-multiselect-chip-icon,
362
+ svg {
363
+ width: 14px !important;
364
+ height: 14px !important;
365
+ color: var(--theme-dark) !important;
366
+ opacity: 0.6 !important;
367
+ cursor: pointer !important;
368
+
369
+ &:hover {
370
+ opacity: 1 !important;
371
+ }
372
+ }
373
+ }
374
+ }
375
+ }
376
+
377
+ input.p-inputtext:not(.currency-input),
378
+ .p-inputtextarea,
379
+ .p-textarea,
380
+ .p-multiselect {
381
+ &:not(:focus) {
382
+ border: none !important;
383
+ background-color: var(--gray-light) !important;
384
+ }
385
+ width: 100%;
386
+ padding: 6px 12px 6px 12px !important;
387
+ border-top-right-radius: var(--border-radius);
388
+ border-bottom-right-radius: var(--border-radius);
389
+ border-top-left-radius: var(--border-radius);
390
+ border-bottom-left-radius: var(--border-radius);
391
+ height: 40px;
392
+ font-size: 0.9em !important;
393
+ color: var(--theme-dark) !important;
394
+ font-weight: 500;
395
+
396
+ &:disabled {
397
+ cursor: not-allowed;
398
+ opacity: 0.6;
399
+ }
400
+
401
+ &:focus {
402
+ outline: 0 !important;
403
+ box-shadow: none !important;
404
+ border: 2px solid var(--theme-dark);
405
+ background-color: #ffffff;
406
+ }
407
+
408
+ &:hover,
409
+ &:focus:not(.ng-invalid):not(.p-inputmask) {
410
+ border-color: var(--theme-dark) !important;
411
+ }
412
+
413
+ &::placeholder {
414
+ color: var(--theme-dark);
415
+ opacity: 0.8;
416
+ }
417
+
418
+ &.ng-touched.ng-invalid {
419
+ border-color: var(--error-color) !important;
420
+ background-color: var(--error-color-transparent) !important;
421
+ }
422
+
423
+ &:not(.ng-invalid) {
424
+ border-color: var(--theme-dark) !important;
425
+ }
426
+ }
427
+
428
+ .p-inputtextarea,
429
+ .p-textarea {
430
+ padding-right: 62px !important;
431
+ resize: none;
432
+ height: unset !important;
433
+ }
434
+
435
+ .p-datepicker {
436
+ width: 100% !important;
437
+ .p-inputtext {
438
+ color: var(--theme-dark) !important;
439
+ font-weight: 600 !important;
440
+ margin-left: -1px !important;
441
+ border-top-right-radius: 0px !important;
442
+ border-bottom-right-radius: 0px !important;
443
+
444
+ &:focus {
445
+ border-right: none !important;
446
+
447
+ + .p-datepicker-dropdown {
448
+ border-right: 2px solid var(--theme-dark) !important;
449
+ border-top: 2px solid var(--theme-dark) !important;
450
+ border-bottom: 2px solid var(--theme-dark) !important;
451
+ background-color: #ffffff !important;
452
+ }
453
+ }
454
+ }
455
+
456
+ .p-datepicker-dropdown {
457
+ background-color: var(--gray-light) !important;
458
+ border: none !important;
459
+ border-top-right-radius: var(--border-radius) !important;
460
+ border-bottom-right-radius: var(--border-radius) !important;
461
+
462
+ span {
463
+ color: var(--theme-dark) !important;
464
+ }
465
+ }
466
+ }
467
+ p-datepicker.ng-touched.ng-invalid {
468
+ .p-datepicker {
469
+ width: 100% !important;
470
+ input.p-inputtext:not(.currency-input),
471
+ .p-inputtextarea {
472
+ &:not(:focus) {
473
+ border: none !important;
474
+ background-color: var(--error-color-transparent) !important;
475
+ }
476
+ }
477
+ }
478
+
479
+ .p-datepicker-dropdown {
480
+ border-color: var(--error-color) !important;
481
+ background-color: var(--error-color-transparent) !important;
482
+ }
483
+
484
+ .p-focus {
485
+ input.p-inputtext:not(.currency-input),
486
+ .p-inputtextarea {
487
+ border-color: var(--error-color) !important;
488
+ background-color: var(--error-color-transparent) !important;
489
+ }
490
+ .p-datepicker-dropdown {
491
+ border-right: 2px solid var(--error-color) !important;
492
+ border-top: 2px solid var(--error-color) !important;
493
+ border-bottom: 2px solid var(--error-color) !important;
494
+ background-color: var(--error-color-transparent) !important;
495
+ }
496
+ }
497
+ }
498
+
499
+ p-inputmask {
500
+ flex: 1;
501
+ }
502
+ p-inputmask.ng-touched.ng-invalid input {
503
+ border-color: var(--error-color) !important;
504
+ background-color: var(--error-color-transparent) !important;
505
+ }
506
+
507
+ p-inputnumber:not(.currency-input),
508
+ p-inputnumber.outlined {
509
+ display: block !important;
510
+
511
+ span {
512
+ width: 100%;
513
+ }
514
+ }
515
+
516
+ p-inputnumber .text-centered input {
517
+ text-align: center;
518
+ }
519
+
520
+ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
521
+ border-color: var(--error-color) !important;
522
+ }
523
+
524
+ .p-radiobutton {
525
+ width: 24px;
526
+ height: 24px;
527
+
528
+ .p-radiobutton-box {
529
+ border: 2px solid #d1d5db !important;
530
+ background: #ffffff !important;
531
+ box-shadow: none !important;
532
+ }
533
+
534
+ &:not(.p-disabled):hover .p-radiobutton-box {
535
+ border-color: #1545de !important;
536
+ }
537
+
538
+ &.p-radiobutton-checked .p-radiobutton-box {
539
+ border-color: #1545de !important;
540
+ background: #1545de !important;
541
+
542
+ .p-radiobutton-icon {
543
+ background: #ffffff !important;
544
+ }
545
+ }
546
+
547
+ .p-radiobutton-input:focus-visible + .p-radiobutton-box,
548
+ &.p-focus .p-radiobutton-box {
549
+ border-color: #1545de !important;
550
+ box-shadow: 0 0 0 3px #ced9fa !important;
551
+ }
552
+ }
553
+
554
+ .p-steps .p-steps-item.p-steps-item-active {
555
+ background-color: transparent !important;
556
+
557
+ .p-steps-item-link .p-steps-item-number {
558
+ color: #fff !important;
559
+ background-color: var(--theme-medium) !important;
560
+ border-color: var(--theme-medium) !important;
561
+ }
562
+ }
563
+
564
+ .p-menu-list {
565
+ padding: 0px !important;
566
+ }
567
+
568
+ .p-menu-item-link {
569
+ padding: 0.75rem 1rem !important;
570
+ }
571
+
572
+ .p-steps .p-steps-item:not(.p-steps-item-active) {
573
+ .p-steps-item-label {
574
+ opacity: 0.4 !important;
575
+ }
576
+
577
+ .p-steps-item-link .p-steps-item-number {
578
+ color: var(--theme-medium) !important;
579
+ }
580
+ }
581
+
582
+ .p-steps .p-steps-item .p-steps-item-label {
583
+ color: var(--theme-medium) !important;
584
+ }
585
+
586
+ .p-steps .p-steps-item.p-disabled {
587
+ opacity: 1 !important;
588
+ }
589
+
590
+ .p-steps .p-steps-item .p-steps-item-link {
591
+ background: transparent !important;
592
+ padding: 0.75rem 1rem !important;
593
+
594
+ .p-steps-item-number {
595
+ min-width: 2.6rem !important;
596
+ height: 2.6rem !important;
597
+ line-height: 2.6rem !important;
598
+ font-size: 1rem !important;
599
+ border: 2px solid var(--theme-medium) !important;
600
+ }
601
+ }
602
+
603
+ .p-steps ul > li:nth-child(1):only-child::before {
604
+ content: unset !important;
605
+ }
606
+
607
+ .p-steps ul > li:not(:only-child)::before {
608
+ border-top: 1px dashed var(--theme-medium) !important;
609
+ }
610
+
611
+ .p-steps .p-steps-item:first-child:before {
612
+ width: 50% !important;
613
+ left: 50% !important;
614
+ transform: none !important;
615
+ }
616
+
617
+ .p-steps .p-steps-item:last-child:before {
618
+ width: 50% !important;
619
+ }
620
+
621
+ .p-steps .p-steps-item.checked .p-steps-item-label {
622
+ color: var(--success-color-dark) !important;
623
+ }
624
+
625
+ .p-steps .p-steps-item.checked .p-steps-item-link .p-steps-item-number {
626
+ background-color: var(--success-color-dark) !important;
627
+ color: #fff !important;
628
+ border: 2px solid var(--success-color-dark) !important;
629
+ }
630
+
631
+ .p-steps .p-steps-item .p-steps-item-link .p-steps-item-number.disabled {
632
+ color: var(--gray-dark) !important;
633
+ border: 2px solid var(--gray-dark) !important;
634
+ }
635
+
636
+ .p-highlight {
637
+ background-color: var(--theme-primary) !important;
638
+ border-color: var(--theme-primary) !important;
639
+ }
640
+
641
+ .p-button:focus {
642
+ box-shadow: unset !important;
643
+ }
644
+
645
+ .p-button.button {
646
+ display: flex !important;
647
+ flex-direction: row !important;
648
+ justify-content: center !important;
649
+
650
+ .p-button-label {
651
+ flex: unset !important;
652
+ }
653
+ }
654
+
655
+ .p-datepicker-panel {
656
+ border: 2px solid var(--theme-dark) !important;
657
+ border-radius: var(--border-radius) !important;
658
+ z-index: 15000 !important;
659
+
660
+ .p-datepicker-weekday {
661
+ color: var(--theme-dark) !important;
662
+ }
663
+
664
+ .p-datepicker-day {
665
+ color: var(--font-color) !important;
666
+
667
+ &:focus {
668
+ box-shadow: unset !important;
669
+ }
670
+ }
671
+
672
+ .p-datepicker-day-selected {
673
+ color: #ffffff !important;
674
+ }
675
+
676
+ p-button {
677
+ width: auto !important;
678
+ background: transparent !important;
679
+ box-shadow: none !important;
680
+
681
+ button {
682
+ width: auto !important;
683
+ min-width: 2rem !important;
684
+ background: transparent !important;
685
+ border: none !important;
686
+ box-shadow: none !important;
687
+ color: var(--theme-dark) !important;
688
+
689
+ &:hover:not(:disabled) {
690
+ background: var(--gray-light) !important;
691
+ border: none !important;
692
+ }
693
+ }
694
+
695
+ .p-button-icon {
696
+ color: var(--theme-dark) !important;
697
+ }
698
+ }
699
+ }
700
+
701
+ .p-toast {
702
+ .p-toast-message {
703
+ border-radius: 12px !important;
704
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
705
+ border: none !important;
706
+ padding: 16px !important;
707
+ color: #1f2937 !important;
708
+ }
709
+
710
+ .p-toast-message-content {
711
+ gap: 12px !important;
712
+ align-items: center !important;
713
+ padding: 0 !important;
714
+ }
715
+
716
+ .p-toast-message-text {
717
+ gap: 4px !important;
718
+ }
719
+
720
+ .p-toast-summary {
721
+ color: #111827 !important;
722
+ font-family: 'Poppins', 'Inter', sans-serif !important;
723
+ font-weight: 600 !important;
724
+ font-size: 14px !important;
725
+ }
726
+
727
+ .p-toast-detail {
728
+ color: #4b5563 !important;
729
+ font-family: 'Poppins', 'Inter', sans-serif !important;
730
+ font-weight: 400 !important;
731
+ font-size: 12px !important;
732
+ }
733
+
734
+ .p-toast-message-icon {
735
+ width: 40px !important;
736
+ height: 40px !important;
737
+ min-width: 40px !important;
738
+ border-radius: 50% !important;
739
+ display: inline-flex !important;
740
+ align-items: center !important;
741
+ justify-content: center !important;
742
+ color: #ffffff !important;
743
+
744
+ svg,
745
+ .p-icon {
746
+ width: 22px !important;
747
+ height: 22px !important;
748
+ color: #ffffff !important;
749
+ fill: #ffffff !important;
750
+ }
751
+ }
752
+
753
+ .p-toast-message-warn {
754
+ background: #fde6c0 !important;
755
+ .p-toast-message-icon {
756
+ background: #f59e0b !important;
757
+ }
758
+ }
759
+
760
+ .p-toast-message-error {
761
+ background: #fee2e2 !important;
762
+ .p-toast-message-icon {
763
+ background: #ef4444 !important;
764
+ }
765
+ }
766
+
767
+ .p-toast-message-success {
768
+ background: #dcfce7 !important;
769
+ .p-toast-message-icon {
770
+ background: #22c55e !important;
771
+ }
772
+ }
773
+
774
+ p-button,
775
+ .p-toast-close-button {
776
+ width: auto !important;
777
+ background: transparent !important;
778
+ border: none !important;
779
+ box-shadow: none !important;
780
+ align-self: center !important;
781
+
782
+ button {
783
+ width: 2rem !important;
784
+ min-width: 2rem !important;
785
+ height: 2rem !important;
786
+ padding: 0 !important;
787
+ background: transparent !important;
788
+ border: none !important;
789
+ box-shadow: none !important;
790
+ color: #6b7280 !important;
791
+ border-radius: 50% !important;
792
+
793
+ &:hover:not(:disabled) {
794
+ background: rgba(0, 0, 0, 0.06) !important;
795
+ border: none !important;
796
+ color: #1f2937 !important;
797
+ }
798
+ }
799
+
800
+ .p-button-icon,
801
+ .p-toast-close-icon {
802
+ color: inherit !important;
803
+ width: 1rem !important;
804
+ height: 1rem !important;
805
+ }
806
+ }
807
+ }
808
+
809
+ .p-overlaypanel:not(.background-white) {
810
+ background-color: #01529b !important;
811
+ }
812
+
813
+ .p-overlaypanel-content {
814
+ padding: 6px 8px 6px 8px !important;
815
+ }
816
+
817
+ .p-overlaypanel::after,
818
+ .p-overlaypanel::before {
819
+ border-bottom-color: #01529b !important;
820
+ }
821
+
822
+ .p-dialog:not(.p-confirm-dialog) {
823
+ .p-dialog-header {
824
+ padding: 3px !important;
825
+ border-top-left-radius: 9px !important;
826
+ border-top-right-radius: 9px !important;
827
+ }
828
+
829
+ .p-dialog-content {
830
+ border-bottom-left-radius: 9px !important;
831
+ border-bottom-right-radius: 9px !important;
832
+ }
833
+ }
834
+
835
+ .p-dialog .p-dialog-header .p-dialog-title {
836
+ font-size: 1em !important;
837
+ text-align: center !important;
838
+ }
839
+
840
+ .p-dialog-header-close-icon {
841
+ font-weight: 600 !important;
842
+ }
843
+
844
+ .p-dialog .p-dialog-header p-button,
845
+ .p-drawer .p-drawer-header p-button {
846
+ width: auto !important;
847
+ background: transparent !important;
848
+ box-shadow: none !important;
849
+
850
+ button {
851
+ width: 2rem !important;
852
+ height: 2rem !important;
853
+ min-width: 2rem !important;
854
+ padding: 0 !important;
855
+ border-radius: 50% !important;
856
+ background: transparent !important;
857
+ border: none !important;
858
+ box-shadow: none !important;
859
+ color: var(--gray-dark) !important;
860
+ transition:
861
+ background-color 0.15s ease,
862
+ color 0.15s ease;
863
+ }
864
+
865
+ &:hover button:not(:disabled) {
866
+ background: var(--gray-light) !important;
867
+ color: var(--theme-dark) !important;
868
+ }
869
+
870
+ .p-dialog-header-close-icon,
871
+ .p-button-icon {
872
+ font-size: 1rem !important;
873
+ }
874
+ }
875
+
876
+ .p-confirm-dialog {
877
+ .p-dialog-footer .actions {
878
+ display: flex;
879
+ align-items: center;
880
+ justify-content: flex-end;
881
+ gap: 20px;
882
+ }
883
+
884
+ .p-confirm-dialog-icon {
885
+ display: none !important;
886
+ }
887
+
888
+ .p-confirm-dialog-message {
889
+ margin-left: 0px !important;
890
+ }
891
+ }
892
+
893
+ .p-selectbutton {
894
+ display: inline-flex !important;
895
+ align-items: center !important;
896
+ gap: 4px !important;
897
+ padding: 4px !important;
898
+ height: 42px !important;
899
+ background-color: var(--gray-light) !important;
900
+ border-radius: 12px !important;
901
+ width: fit-content !important;
902
+
903
+ .p-togglebutton {
904
+ display: inline-flex !important;
905
+ align-items: center !important;
906
+ height: 34px !important;
907
+ margin: 0 !important;
908
+ padding: 0 16px !important;
909
+ border: none !important;
910
+ border-radius: 8px !important;
911
+ background: transparent !important;
912
+ transition: all 0.2s ease;
913
+
914
+ .p-togglebutton-content {
915
+ gap: 6px !important;
916
+ font-size: 14px !important;
917
+ font-weight: 500 !important;
918
+ line-height: 1 !important;
919
+ }
920
+
921
+ .p-togglebutton-label,
922
+ .p-togglebutton-icon {
923
+ color: var(--theme-dark) !important;
924
+ }
925
+
926
+ &:not(.p-togglebutton-checked) {
927
+ background-color: transparent !important;
928
+ }
929
+
930
+ &.p-togglebutton-checked {
931
+ background-color: #ffffff !important;
932
+ box-shadow:
933
+ 0 1px 2px 0 rgba(17, 55, 178, 0.1),
934
+ 0 2px 4px 0 rgba(17, 55, 178, 0.1),
935
+ 0 4px 8px 0 rgba(17, 55, 178, 0.1) !important;
936
+
937
+ .p-togglebutton-content {
938
+ box-shadow: none !important;
939
+ }
940
+
941
+ .p-togglebutton-label,
942
+ .p-togglebutton-icon {
943
+ color: var(--brand-blue) !important;
944
+ font-weight: 600 !important;
945
+ }
946
+ }
947
+
948
+ &:disabled,
949
+ &.p-disabled {
950
+ background-color: transparent !important;
951
+ box-shadow: none !important;
952
+
953
+ .p-togglebutton-label,
954
+ .p-togglebutton-icon {
955
+ color: var(--gray-dark) !important;
956
+ }
957
+ }
958
+ }
959
+ }
960
+
961
+ vector-select-button-field.is-secondary {
962
+ .p-selectbutton {
963
+ background-color: var(--brand-light) !important;
964
+ border-radius: 9999px !important;
965
+ }
966
+
967
+ .p-togglebutton {
968
+ padding: 0 20px !important;
969
+ border-radius: 9999px !important;
970
+ }
971
+ }
972
+
973
+ .p-multiselect-overlay:not(.has-filter) .p-multiselect-header p-checkbox::after {
974
+ content: 'Selecionar Todos';
975
+ display: inline-block;
976
+ margin-left: 0.5rem;
977
+ color: var(--theme-dark);
978
+ font-weight: 500;
979
+ white-space: nowrap;
980
+ }
981
+
982
+ .p-multiselect-header {
983
+ .p-checkbox {
984
+ width: max-content;
985
+ }
986
+ }
987
+
988
+ p-checkbox.rounded-checkbox,
989
+ .rounded-checkbox {
990
+ --p-checkbox-border-radius: 50%;
991
+ --p-checkbox-checked-border-radius: 50%;
992
+ }
993
+
994
+ .rounded-checkbox .p-checkbox,
995
+ .rounded-checkbox .p-checkbox.p-checkbox-checked {
996
+ background: transparent !important;
997
+ border-radius: 50% !important;
998
+ }
999
+
1000
+ .rounded-checkbox .p-checkbox-input {
1001
+ background: transparent !important;
1002
+ border-radius: 50% !important;
1003
+ }
1004
+
1005
+ .rounded-checkbox .p-checkbox-box,
1006
+ .rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
1007
+ border-radius: 50% !important;
1008
+ border: none !important;
1009
+ overflow: hidden !important;
1010
+ }
1011
+
1012
+ .rounded-checkbox .p-checkbox:not(.p-checkbox-checked) .p-checkbox-box {
1013
+ background-color: var(--gray-light) !important;
1014
+ }
1015
+
1016
+ .rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
1017
+ background-color: var(--brand-blue) !important;
1018
+ }
1019
+
1020
+ p-checkbox.rounded-checkbox .p-checkbox-icon,
1021
+ .rounded-checkbox .p-checkbox-icon {
1022
+ font-size: 0.8em !important;
1023
+ padding-top: 2px !important;
1024
+ }
1025
+
1026
+ .p-checkbox-box.p-highlight,
1027
+ .p-checkbox.p-checkbox-checked .p-checkbox-box {
1028
+ background: var(--brand-blue) !important;
1029
+ border-color: var(--brand-blue) !important;
1030
+ }
1031
+
1032
+ .p-checkbox-box {
1033
+ border-width: 2px !important;
1034
+ border-color: var(--gray-dark) !important;
1035
+
1036
+ &:hover:not(.p-highlight) {
1037
+ border-color: var(--gray-dark) !important;
1038
+ }
1039
+ }
1040
+
1041
+ .p-select,
1042
+ .p-autocomplete {
1043
+ width: 100%;
1044
+ }
1045
+ p-autocomplete.ng-touched.ng-invalid {
1046
+ input.p-inputtext:not(.currency-input),
1047
+ .p-inputtextarea {
1048
+ &:not(:focus) {
1049
+ border: none !important;
1050
+ background-color: var(--error-color-transparent) !important;
1051
+ }
1052
+
1053
+ &:focus:not(.ng-invalid):not(.p-inputmask) {
1054
+ border-color: var(--error-color) !important;
1055
+ }
1056
+ }
1057
+ }
1058
+
1059
+ p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown,
1060
+ p-multiselect.ng-touched.ng-invalid .p-multiselect {
1061
+ border-color: var(--error-color) !important;
1062
+ background-color: var(--error-color-transparent) !important;
1063
+ }
1064
+
1065
+ .p-select-overlay,
1066
+ .p-autocomplete-panel,
1067
+ .p-multiselect-overlay {
1068
+ // max-width: 250px !important;
1069
+ min-width: 100%;
1070
+ border: 1px solid var(--theme-dark) !important;
1071
+ margin-top: -2px !important;
1072
+ border-radius: var(--border-radius) !important;
1073
+
1074
+ & .p-autocomplete-items,
1075
+ & .p-multiselect-list {
1076
+ padding-top: 0px !important;
1077
+ padding-bottom: 0px !important;
1078
+ padding-right: 1px !important;
1079
+ }
1080
+
1081
+ &::-webkit-scrollbar {
1082
+ width: 5px;
1083
+ }
1084
+
1085
+ &::-webkit-scrollbar-track {
1086
+ background: var(--gray-light);
1087
+ }
1088
+
1089
+ &::-webkit-scrollbar-thumb {
1090
+ background: var(--theme-dark);
1091
+ border-radius: 8px;
1092
+ }
1093
+
1094
+ &::-webkit-scrollbar-thumb:hover {
1095
+ background: var(--theme-dark);
1096
+ }
1097
+ }
1098
+
1099
+ .p-select-option,
1100
+ .p-autocomplete-item,
1101
+ .p-multiselect-item {
1102
+ text-overflow: ellipsis;
1103
+ color: var(--theme-dark) !important;
1104
+
1105
+ &:hover {
1106
+ background-color: var(--theme-dark) !important;
1107
+ color: #ffffff !important;
1108
+ }
1109
+ }
1110
+
1111
+ .p-select,
1112
+ .p-multiselect {
1113
+ border: none !important;
1114
+ .p-highlight {
1115
+ background-color: #ffffff !important;
1116
+ }
1117
+ }
1118
+ .p-select-overlay .p-select-list .p-select-option.p-highlight,
1119
+ .p-multiselect-overlay .p-multiselect-list .p-multiselect-item.p-highlight {
1120
+ background-color: var(--theme-dark) !important;
1121
+ color: #ffffff !important;
1122
+ }
1123
+
1124
+ .p-slider {
1125
+ background-color: #01529b;
1126
+ .p-slider-range {
1127
+ background-color: var(--success-color) !important;
1128
+ border-radius: inherit !important;
1129
+ }
1130
+ .p-slider-handle {
1131
+ border-color: var(--success-color) !important;
1132
+
1133
+ &:hover {
1134
+ background-color: var(--success-color) !important;
1135
+ }
1136
+ &:focus {
1137
+ box-shadow: unset !important;
1138
+ }
1139
+ }
1140
+ }
1141
+
1142
+ .p-fileupload {
1143
+ p-messages,
1144
+ p-message {
1145
+ display: none !important;
1146
+ }
1147
+
1148
+ .p-fileupload-filelabel,
1149
+ [class*='filelabel'] {
1150
+ display: none !important;
1151
+ }
1152
+
1153
+ input[type='file'] {
1154
+ position: absolute !important;
1155
+ width: 1px !important;
1156
+ height: 1px !important;
1157
+ padding: 0 !important;
1158
+ margin: 0 !important;
1159
+ overflow: hidden !important;
1160
+ clip: rect(0, 0, 0, 0) !important;
1161
+ white-space: nowrap !important;
1162
+ border: 0 !important;
1163
+ opacity: 0 !important;
1164
+ }
1165
+
1166
+ p-button {
1167
+ width: 100% !important;
1168
+ background: transparent !important;
1169
+ border: none !important;
1170
+ box-shadow: none !important;
1171
+ }
1172
+
1173
+ .p-fileupload-choose-button,
1174
+ .p-fileupload-choose {
1175
+ background: transparent !important;
1176
+ border: 1px solid var(--theme-dark) !important;
1177
+ border-radius: 30px !important;
1178
+ box-shadow: none !important;
1179
+ color: var(--theme-dark) !important;
1180
+ width: 100% !important;
1181
+ padding: 0.875rem 1.5rem !important;
1182
+ font-weight: 600 !important;
1183
+ justify-content: center !important;
1184
+ gap: 0.5rem !important;
1185
+
1186
+ &:hover:not(:disabled) {
1187
+ background: var(--theme-dark) !important;
1188
+ border-color: var(--theme-dark) !important;
1189
+ color: #ffffff !important;
1190
+
1191
+ .p-button-label,
1192
+ .p-button-icon {
1193
+ color: #ffffff !important;
1194
+ }
1195
+ }
1196
+
1197
+ .p-button-label {
1198
+ color: inherit !important;
1199
+ flex: 0 0 auto !important;
1200
+ max-width: unset !important;
1201
+ overflow: visible !important;
1202
+ }
1203
+
1204
+ .p-button-icon {
1205
+ color: inherit !important;
1206
+ }
1207
+ }
1208
+ }
1209
+
1210
+ vector-data-table {
1211
+ vector-panel.data-table-panel .p-panel,
1212
+ vector-panel.data-table-panel .p-panel-content,
1213
+ vector-panel.data-table-panel .p-panel-content > div {
1214
+ border-radius: 15px !important;
1215
+ }
1216
+
1217
+ p-table {
1218
+ .p-datatable-wrapper {
1219
+ }
1220
+
1221
+ .p-datatable-table {
1222
+ border-radius: 15px !important;
1223
+ }
1224
+
1225
+ // PrimeNG 18 removeu o responsiveLayout: o .p-column-title (header embutido
1226
+ // em cada celula por getCellContent) precisa ser escondido manualmente.
1227
+ .p-column-title {
1228
+ display: none;
1229
+ }
1230
+
1231
+ .p-datatable-thead {
1232
+ border-radius: 15px !important;
1233
+ z-index: 0 !important;
1234
+
1235
+ .header {
1236
+ th {
1237
+ white-space: normal !important;
1238
+ position: relative;
1239
+ padding: 10px 10px 10px 35px !important;
1240
+ background-color: var(--gray-light) !important;
1241
+ color: #1f2937 !important;
1242
+
1243
+ > div {
1244
+ gap: 8px;
1245
+ }
1246
+
1247
+ &:first-child {
1248
+ border-top-left-radius: 15px !important;
1249
+ padding: 10px !important;
1250
+ }
1251
+
1252
+ &:last-child {
1253
+ border-top-right-radius: 15px !important;
1254
+ }
1255
+
1256
+ p-sorticon {
1257
+ svg {
1258
+ height: 0.85rem !important;
1259
+ width: 0.85rem !important;
1260
+ }
1261
+
1262
+ sortamountupalticon svg,
1263
+ sortamountdownicon svg {
1264
+ color: var(--theme-primary) !important;
1265
+ }
1266
+ }
1267
+
1268
+ &.p-highlight {
1269
+ color: var(--theme-primary) !important;
1270
+ }
1271
+ }
1272
+ }
1273
+ }
1274
+
1275
+ .p-datatable-tbody {
1276
+ tr.p-highlight {
1277
+ background-color: #eff6ff !important;
1278
+ }
1279
+ }
1280
+
1281
+ .row {
1282
+ background: transparent !important;
1283
+
1284
+ .cell {
1285
+ white-space: normal !important;
1286
+
1287
+ .boolean-value-positive {
1288
+ color: var(--success-color);
1289
+ }
1290
+
1291
+ .boolean-value-negative {
1292
+ color: var(--error-color);
1293
+ }
1294
+
1295
+ .status-table-field {
1296
+ font-size: 1.4em;
1297
+ }
1298
+
1299
+ .table-button {
1300
+ cursor: pointer;
1301
+ color: var(--theme-primary);
1302
+ }
1303
+ }
1304
+
1305
+ .no-results {
1306
+ border-bottom-left-radius: 15px;
1307
+ border-bottom-right-radius: 15px;
1308
+ }
1309
+ }
1310
+
1311
+ .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
1312
+ color: #fff !important;
1313
+ }
1314
+
1315
+ .p-paginator-bottom {
1316
+ border-radius: 15px !important;
1317
+ }
1318
+ }
1319
+
1320
+ p-tabview {
1321
+ .p-tabpanels {
1322
+ display: none !important;
1323
+ }
1324
+
1325
+ .p-tablist .p-tab {
1326
+ justify-content: center;
1327
+
1328
+ &.p-tab-active {
1329
+ color: var(--theme-primary) !important;
1330
+ }
1331
+ }
1332
+ }
1333
+
1334
+ vector-panel p-panel .p-panel .p-panel-content {
1335
+ padding: 0px !important;
1336
+ }
1337
+ }
1338
+
1339
+ .success {
1340
+ color: var(--success-color);
1341
+ }
1342
+ .error {
1343
+ color: var(--error-color);
1344
+ }
1345
+ .warning {
1346
+ color: var(--warning-color);
1347
+ }
1348
+ .info {
1349
+ color: var(--theme-light);
1350
+ }
1351
+
1352
+ p-tabview {
1353
+ background: transparent !important;
1354
+
1355
+ .p-tabpanels,
1356
+ .p-tabpanel,
1357
+ .p-tabview-panel {
1358
+ background: transparent !important;
1359
+ }
1360
+
1361
+ .p-tablist-tab-list {
1362
+ background: none !important;
1363
+ .p-tab.p-tab-active {
1364
+ border-color: var(--theme-primary) !important;
1365
+ }
1366
+
1367
+ .p-tab {
1368
+ border-top-right-radius: 0px !important;
1369
+ border-top-left-radius: 0px !important;
1370
+ color: var(--theme-primary) !important;
1371
+
1372
+ &:hover {
1373
+ border-color: var(--theme-primary) !important;
1374
+ border-bottom-width: 2px !important;
1375
+ }
1376
+ }
1377
+ .p-tablist-active-bar {
1378
+ height: 2px !important;
1379
+ background: var(--theme-primary) !important;
1380
+ }
1381
+ }
1382
+ }
1383
+
1384
+ .p-accordion {
1385
+ .p-accordionpanel {
1386
+ margin: 20px 0;
1387
+ border: none !important;
1388
+ background: transparent !important;
1389
+ border-radius: 16px !important;
1390
+ box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
1391
+ overflow: hidden;
1392
+ }
1393
+
1394
+ .p-accordionheader {
1395
+ position: relative !important;
1396
+ border: none !important;
1397
+ border-radius: 0 !important;
1398
+ box-shadow: none !important;
1399
+ background: #ffffff !important;
1400
+ color: var(--theme-dark) !important;
1401
+ padding: 1.25rem 1.5rem !important;
1402
+ font-weight: 600 !important;
1403
+
1404
+ &:hover {
1405
+ background: #ffffff !important;
1406
+ color: var(--theme-dark) !important;
1407
+ }
1408
+
1409
+ &:focus,
1410
+ &:focus-visible {
1411
+ outline: none !important;
1412
+ box-shadow: none !important;
1413
+ }
1414
+ }
1415
+
1416
+ .p-accordionheader-toggle-icon {
1417
+ position: absolute !important;
1418
+ right: 1.5rem !important;
1419
+ top: 50% !important;
1420
+ left: auto !important;
1421
+ margin: 0 !important;
1422
+ color: var(--theme-dark) !important;
1423
+ transform: translateY(-50%) rotate(-90deg);
1424
+ transition: transform 0.2s ease;
1425
+ }
1426
+
1427
+ .p-accordionheader[aria-expanded='true'] .p-accordionheader-toggle-icon {
1428
+ transform: translateY(-50%) rotate(0deg);
1429
+ }
1430
+
1431
+ .p-accordioncontent {
1432
+ border: none !important;
1433
+ background: #ffffff !important;
1434
+ }
1435
+
1436
+ .p-accordioncontent-content {
1437
+ border: none !important;
1438
+ background: #ffffff !important;
1439
+ border-radius: 0 !important;
1440
+ box-shadow: none !important;
1441
+ padding: 0 1.5rem 1.5rem !important;
1442
+ color: inherit !important;
1443
+ }
1444
+ }
1445
+
1446
+ .p-chip {
1447
+ display: inline-block;
1448
+ padding: 0 16px !important;
1449
+ height: 40px;
1450
+ font-weight: 500;
1451
+ font-size: 13px;
1452
+ line-height: 40px;
1453
+ border-radius: 25px !important;
1454
+ background-color: #e5e5ea !important;
1455
+ color: #002463 !important;
1456
+ opacity: 0.5;
1457
+
1458
+ span {
1459
+ border: 2px solid;
1460
+ border-radius: 50%;
1461
+ width: 25px;
1462
+ height: 25px;
1463
+ margin-left: 5px;
1464
+ margin-top: 7px;
1465
+ color: #abaab5;
1466
+
1467
+ i {
1468
+ position: relative;
1469
+ top: -11px;
1470
+ left: -6px;
1471
+ font-size: 12px;
1472
+ }
1473
+ }
1474
+
1475
+ .closebtn {
1476
+ padding-left: 10px;
1477
+ font-weight: bold;
1478
+ float: right;
1479
+ font-size: 20px;
1480
+ cursor: pointer;
1481
+ }
1482
+
1483
+ .closebtn:hover {
1484
+ color: #000;
1485
+ }
1486
+ }
1487
+
1488
+ .p-menu.p-menu-overlay {
1489
+ width: fit-content;
1490
+ padding: 8px 0;
1491
+ border-radius: 8px;
1492
+ background-color: #ffffff !important;
1493
+ border: 1px solid #d9dbe9 !important;
1494
+ box-shadow:
1495
+ 0 1px 2px 0 rgba(31, 41, 55, 0.1),
1496
+ 0 2px 4px 0 rgba(31, 41, 55, 0.1),
1497
+ 0 4px 8px 0 rgba(31, 41, 55, 0.1),
1498
+ 0 8px 16px 0 rgba(31, 41, 55, 0.1);
1499
+
1500
+ ul {
1501
+ display: flex;
1502
+ flex-direction: column;
1503
+ max-height: 200px !important;
1504
+ overflow-y: auto;
1505
+ overflow-x: hidden;
1506
+
1507
+ &::-webkit-scrollbar {
1508
+ width: 16px;
1509
+ }
1510
+ &::-webkit-scrollbar-track {
1511
+ background: transparent;
1512
+ }
1513
+ &::-webkit-scrollbar-thumb {
1514
+ background: var(--theme-medium);
1515
+ border-radius: 10px;
1516
+ border: 5px solid transparent;
1517
+ background-clip: padding-box;
1518
+ }
1519
+
1520
+ li {
1521
+ border-radius: 4px;
1522
+ }
1523
+
1524
+ .p-menu-item-content {
1525
+ border-radius: 4px;
1526
+ background-color: transparent !important;
1527
+ }
1528
+
1529
+ .p-menu-item-link {
1530
+ border-radius: 4px;
1531
+ }
1532
+
1533
+ .p-menu-item-icon,
1534
+ .p-menu-item-label {
1535
+ color: #434560 !important;
1536
+ }
1537
+
1538
+ .p-menu-item-label {
1539
+ font-weight: 500 !important;
1540
+ }
1541
+
1542
+ .p-menu-item-content:hover,
1543
+ .p-menu-item.p-focus .p-menu-item-content {
1544
+ background-color: var(--theme-medium) !important;
1545
+
1546
+ .p-menu-item-icon,
1547
+ .p-menu-item-label {
1548
+ color: #ffffff !important;
1549
+ }
1550
+ }
1551
+ }
1552
+ }
1553
+
1554
+ .p-toggleswitch {
1555
+ flex: 0 0 auto;
1556
+ }
1557
+
1558
+ .p-toggleswitch.p-focus .p-toggleswitch-slider {
1559
+ box-shadow: none !important;
1560
+ }
1561
+
1562
+ .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
1563
+ background-color: var(--theme-primary) !important;
1564
+ }
1565
+
1566
+ .custom-field-text {
1567
+ input[type='text'],
1568
+ input[type='password'] {
1569
+ border-radius: 6px;
1570
+ color: #757b8a !important;
1571
+
1572
+ &:focus:not(.ng-invalid):not(.p-inputmask) {
1573
+ border: 2px solid #6690f3 !important;
1574
+ }
1575
+ &:not(.ng-invalid) {
1576
+ border: 2px solid #e1e4ea !important;
1577
+ }
1578
+ }
1579
+ &.input-otp {
1580
+ justify-content: center;
1581
+
1582
+ input[type='text'] {
1583
+ padding: 10px;
1584
+ min-height: 54px;
1585
+ width: 46px;
1586
+ font-size: 1.6em !important;
1587
+ font-weight: 600;
1588
+ color: #363636 !important;
1589
+
1590
+ @media screen and (max-width: 576px) {
1591
+ padding: 0;
1592
+ width: 40px;
1593
+ font-size: 1.2em !important;
1594
+ font-weight: 600;
1595
+ }
1596
+ }
1597
+ }
1598
+ &.uppercase {
1599
+ input[type='text'] {
1600
+ text-transform: uppercase;
1601
+ }
1602
+ span {
1603
+ text-transform: none;
1604
+ }
1605
+ }
1606
+ &.centered {
1607
+ input[type='text'] {
1608
+ text-align: center;
1609
+ }
1610
+ }
1611
+ &.size-lg {
1612
+ input[type='text'] {
1613
+ font-size: 1.3em !important;
1614
+ }
1615
+ }
1616
+ }
1617
+
1618
+ .vector-text {
1619
+ &.uppercase {
1620
+ input[type='text'] {
1621
+ text-transform: uppercase;
1622
+ }
1623
+ span {
1624
+ text-transform: none;
1625
+ }
1626
+ }
1627
+ }
1628
+
1629
+ .multiselect-flags {
1630
+ .p-multiselect-overlay .p-multiselect-list {
1631
+ .p-multiselect-item {
1632
+ span {
1633
+ color: #757b8a;
1634
+ }
1635
+ &:hover {
1636
+ background: #e1e4ea !important;
1637
+ }
1638
+ &:not(.p-highlight):not(.p-disabled).p-focus {
1639
+ background: #e1e4ea !important;
1640
+ }
1641
+ &.p-highlight {
1642
+ background: #e1e4ea !important;
1643
+ }
1644
+ }
1645
+ }
1646
+ }