@solidstarters/solid-core-ui 1.1.66 → 1.1.68

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 (61) hide show
  1. package/dist/components/Svg/FileSvg.d.ts.map +1 -1
  2. package/dist/components/Svg/FileSvg.js +1 -1
  3. package/dist/components/Svg/FileSvg.js.map +1 -1
  4. package/dist/components/core/common/FilterComponent.d.ts.map +1 -1
  5. package/dist/components/core/common/FilterComponent.js +1 -1
  6. package/dist/components/core/common/FilterComponent.js.map +1 -1
  7. package/dist/components/core/common/SolidGlobalSearchElement.d.ts.map +1 -1
  8. package/dist/components/core/common/SolidGlobalSearchElement.js +26 -13
  9. package/dist/components/core/common/SolidGlobalSearchElement.js.map +1 -1
  10. package/dist/components/core/list/ListViewRowActionPopup.d.ts.map +1 -1
  11. package/dist/components/core/list/ListViewRowActionPopup.js +21 -5
  12. package/dist/components/core/list/ListViewRowActionPopup.js.map +1 -1
  13. package/dist/components/core/list/columns/SolidShortTextColumn.d.ts.map +1 -1
  14. package/dist/components/core/list/columns/SolidShortTextColumn.js +12 -1
  15. package/dist/components/core/list/columns/SolidShortTextColumn.js.map +1 -1
  16. package/dist/components/core/list/widgets/SolidShortTextFieldTextRenderModeWidget.d.ts +2 -0
  17. package/dist/components/core/list/widgets/SolidShortTextFieldTextRenderModeWidget.d.ts.map +1 -0
  18. package/dist/components/core/list/widgets/SolidShortTextFieldTextRenderModeWidget.js +7 -0
  19. package/dist/components/core/list/widgets/SolidShortTextFieldTextRenderModeWidget.js.map +1 -0
  20. package/dist/components/core/list/widgets/SolidUserNameAvatarWidget.d.ts +2 -0
  21. package/dist/components/core/list/widgets/SolidUserNameAvatarWidget.d.ts.map +1 -0
  22. package/dist/components/core/list/widgets/SolidUserNameAvatarWidget.js +36 -0
  23. package/dist/components/core/list/widgets/SolidUserNameAvatarWidget.js.map +1 -0
  24. package/dist/components/core/model/CreateModel.js +1 -1
  25. package/dist/components/core/model/CreateModel.js.map +1 -1
  26. package/dist/components/core/model/FieldMetaDataForm.d.ts.map +1 -1
  27. package/dist/components/core/model/FieldMetaDataForm.js +73 -50
  28. package/dist/components/core/model/FieldMetaDataForm.js.map +1 -1
  29. package/dist/components/core/model/ModelMetaData.d.ts.map +1 -1
  30. package/dist/components/core/model/ModelMetaData.js +17 -15
  31. package/dist/components/core/model/ModelMetaData.js.map +1 -1
  32. package/dist/components/core/users/CreateUser.d.ts.map +1 -1
  33. package/dist/components/core/users/CreateUser.js +9 -3
  34. package/dist/components/core/users/CreateUser.js.map +1 -1
  35. package/dist/helpers/registry.d.ts.map +1 -1
  36. package/dist/helpers/registry.js +8 -1
  37. package/dist/helpers/registry.js.map +1 -1
  38. package/dist/redux/api/modelApi.js +1 -1
  39. package/dist/redux/api/modelApi.js.map +1 -1
  40. package/dist/resources/globals.css +17 -69
  41. package/dist/resources/stylesheets/_menu.scss +0 -5
  42. package/dist/resources/themes/solid-dark-purple/theme.css +844 -741
  43. package/dist/resources/themes/solid-light-purple/theme.css +109 -3
  44. package/package.json +1 -1
  45. package/src/components/Svg/FileSvg.tsx +13 -12
  46. package/src/components/core/common/FilterComponent.tsx +3 -7
  47. package/src/components/core/common/SolidGlobalSearchElement.tsx +23 -15
  48. package/src/components/core/list/ListViewRowActionPopup.tsx +9 -2
  49. package/src/components/core/list/columns/SolidShortTextColumn.tsx +11 -2
  50. package/src/components/core/list/widgets/SolidUserNameAvatarWidget.tsx +52 -0
  51. package/src/components/core/model/CreateModel.tsx +1 -1
  52. package/src/components/core/model/FieldMetaDataForm.tsx +86 -12
  53. package/src/components/core/model/ModelMetaData.tsx +22 -9
  54. package/src/components/core/users/CreateUser.tsx +10 -6
  55. package/src/helpers/registry.ts +11 -1
  56. package/src/redux/api/modelApi.ts +1 -1
  57. package/src/resources/globals.css +17 -69
  58. package/src/resources/stylesheets/_menu.scss +0 -5
  59. package/src/resources/themes/solid-dark-purple/theme.css +844 -741
  60. package/src/resources/themes/solid-light-purple/theme.css +109 -3
  61. /package/src/components/core/list/widgets/{SolidShortTextFieldTextRenderModeWidget copy.tsx → SolidShortTextFieldTextRenderModeWidget.tsx} +0 -0
@@ -1,16 +1,16 @@
1
1
  :root {
2
- --surface-a: #1f2937;
3
- --surface-b: #111827;
2
+ --surface-a: #18191D;
3
+ --surface-b: #161616;
4
4
  --surface-c: rgba(255, 255, 255, 0.03);
5
- --surface-d: #424b57;
6
- --surface-e: #1f2937;
7
- --surface-f: #1f2937;
8
- --text-color: rgba(255, 255, 255, 0.87);
5
+ --surface-d: rgba(216, 226, 234, 0.08);
6
+ --surface-e: #18191D;
7
+ --surface-f: #18191D;
8
+ --text-color: #FFFFFF;
9
9
  --text-color-secondary: rgba(255, 255, 255, 0.6);
10
10
  --primary-color: #9B5AED;
11
11
  --primary-color-text: #030712;
12
- --surface-0: #111827;
13
- --surface-50: #1f2937;
12
+ --surface-0: #161616;
13
+ --surface-50: #18191D;
14
14
  --surface-100: #374151;
15
15
  --surface-200: #4b5563;
16
16
  --surface-300: #6b7280;
@@ -28,25 +28,34 @@
28
28
  --gray-500: #6b7280;
29
29
  --gray-600: #4b5563;
30
30
  --gray-700: #374151;
31
- --gray-800: #1f2937;
32
- --gray-900: #111827;
31
+ --gray-800: #18191D;
32
+ --gray-900: #161616;
33
33
  --content-padding: 1.25rem;
34
34
  --inline-spacing: 0.5rem;
35
35
  --border-radius: 6px;
36
- --surface-ground: #111827;
37
- --surface-section: #111827;
38
- --surface-card: #1f2937;
39
- --surface-overlay: #1f2937;
36
+ --surface-ground: #161616;
37
+ --surface-section: #161616;
38
+ --surface-card: #18191D;
39
+ --surface-overlay: #18191D;
40
40
  --surface-border: rgba(255, 255, 255, 0.1);
41
41
  --surface-hover: rgba(255, 255, 255, 0.03);
42
42
  --focus-ring: 0 0 0 0.2rem rgba(176, 126, 255, 0.4);
43
43
  --maskbg: rgba(0, 0, 0, 0.4);
44
- --primary-light-color: #424b57;
45
- --highlight-bg: rgba(34, 211, 238, 0.16);
46
- --highlight-text-color: rgba(255, 255, 255, 0.87);
44
+ --primary-light-color: rgba(216, 226, 234, 0.08);
45
+ --highlight-bg: rgba(140, 100, 255, 0.18);
46
+ --hightlight-bg-secondary: #161616;
47
+ --highlight-text-color: #FFFFFF;
47
48
  --icon-color: #FFFFFF;
48
49
  --solid-login-bg-color: #000000;
49
- --solid-light-grey: #111827;
50
+ --solid-light-grey: #161616;
51
+ --solid-stepper-border: rgba(216, 226, 234, 0.08);
52
+ --solid-dark-title: #FFFFFF;
53
+ --solid-dropzone-bg: rgba(216, 226, 234, 0.08);
54
+ --solid-file-wrapper: rgba(216, 226, 234, 0.08);
55
+ --solid-chatter-dash: rgba(216, 226, 234, 0.08);
56
+ --solid-chatter-date-border: rgba(216, 226, 234, 0.08);
57
+ --solid-chatter-input-bg: #161616;
58
+ --solid-chatter-input-placeholder: #949494;
50
59
  color-scheme: dark;
51
60
  }
52
61
 
@@ -174,13 +183,13 @@
174
183
  }
175
184
 
176
185
  .p-editor-container .p-editor-toolbar {
177
- background: #1f2937;
186
+ background: #18191D;
178
187
  border-top-right-radius: 6px;
179
188
  border-top-left-radius: 6px;
180
189
  }
181
190
 
182
191
  .p-editor-container .p-editor-toolbar.ql-snow {
183
- border: 1px solid #424b57;
192
+ border: 1px solid var(--primary-light-color);
184
193
  }
185
194
 
186
195
  .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
@@ -197,7 +206,7 @@
197
206
  }
198
207
 
199
208
  .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
200
- color: rgba(255, 255, 255, 0.87);
209
+ color: #FFFFFF;
201
210
  }
202
211
 
203
212
  .p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
@@ -209,7 +218,7 @@
209
218
  }
210
219
 
211
220
  .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
212
- color: rgba(255, 255, 255, 0.87);
221
+ color: #FFFFFF;
213
222
  }
214
223
 
215
224
  .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
@@ -221,36 +230,36 @@
221
230
  }
222
231
 
223
232
  .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
224
- background: #1f2937;
225
- border: 1px solid #424b57;
233
+ background: #18191D;
234
+ border: 1px solid var(--primary-light-color);
226
235
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
227
236
  border-radius: 6px;
228
237
  padding: 0.75rem 0;
229
238
  }
230
239
 
231
240
  .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
232
- color: rgba(255, 255, 255, 0.87);
241
+ color: #FFFFFF;
233
242
  }
234
243
 
235
244
  .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
236
- color: rgba(255, 255, 255, 0.87);
245
+ color: #FFFFFF;
237
246
  background: rgba(255, 255, 255, 0.03);
238
247
  }
239
248
 
240
249
  .p-editor-container .p-editor-content.ql-snow {
241
- border: 1px solid #424b57;
250
+ border: 1px solid var(--primary-light-color);
242
251
  }
243
252
 
244
253
  .p-editor-container .p-editor-content .ql-editor {
245
- background: #111827;
246
- color: rgba(255, 255, 255, 0.87);
254
+ background: #161616;
255
+ color: #FFFFFF;
247
256
  border-bottom-right-radius: 6px;
248
257
  border-bottom-left-radius: 6px;
249
258
  }
250
259
 
251
260
  .p-editor-container .ql-snow.ql-toolbar button:hover,
252
261
  .p-editor-container .ql-snow.ql-toolbar button:focus {
253
- color: rgba(255, 255, 255, 0.87);
262
+ color: #FFFFFF;
254
263
  }
255
264
 
256
265
  .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
@@ -326,7 +335,7 @@
326
335
  font-family: var(--font-family);
327
336
  font-feature-settings: var(--font-feature-settings, normal);
328
337
  font-size: 1rem;
329
- color: rgba(255, 255, 255, 0.87);
338
+ color: #FFFFFF;
330
339
  padding: 0;
331
340
  margin: 0;
332
341
  }
@@ -334,8 +343,8 @@
334
343
  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
335
344
  padding: 0.375rem 0.75rem;
336
345
  margin-right: 0.5rem;
337
- background: rgba(34, 211, 238, 0.16);
338
- color: rgba(255, 255, 255, 0.87);
346
+ background: rgba(140, 100, 255, 0.18);
347
+ color: #FFFFFF;
339
348
  border-radius: 6px;
340
349
  }
341
350
 
@@ -344,9 +353,9 @@
344
353
  }
345
354
 
346
355
  .p-autocomplete-panel {
347
- background: #1f2937;
348
- color: rgba(255, 255, 255, 0.87);
349
- border: 1px solid #424b57;
356
+ background: #18191D;
357
+ color: #FFFFFF;
358
+ border: 1px solid var(--primary-light-color);
350
359
  border-radius: 6px;
351
360
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
352
361
  }
@@ -355,26 +364,26 @@
355
364
  margin: 0;
356
365
  padding: 0.75rem 1.25rem;
357
366
  border: 0 none;
358
- color: rgba(255, 255, 255, 0.87);
367
+ color: #FFFFFF;
359
368
  background: transparent;
360
369
  transition: box-shadow 0.2s;
361
370
  border-radius: 0;
362
371
  }
363
372
 
364
373
  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
365
- color: rgba(255, 255, 255, 0.87);
374
+ color: #FFFFFF;
366
375
  background: rgba(255, 255, 255, 0.03);
367
376
  }
368
377
 
369
378
  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
370
- color: rgba(255, 255, 255, 0.87);
371
- background: rgba(34, 211, 238, 0.16);
379
+ color: #FFFFFF;
380
+ background: rgba(140, 100, 255, 0.18);
372
381
  }
373
382
 
374
383
  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
375
384
  margin: 0;
376
385
  padding: 0.75rem 1.25rem;
377
- color: rgba(255, 255, 255, 0.87);
386
+ color: #FFFFFF;
378
387
  background: #374151;
379
388
  font-weight: 700;
380
389
  }
@@ -392,29 +401,29 @@
392
401
 
393
402
  .p-datepicker {
394
403
  padding: 0.5rem;
395
- background: #1f2937;
396
- color: rgba(255, 255, 255, 0.87);
397
- border: 1px solid #424b57;
404
+ background: #18191D;
405
+ color: #FFFFFF;
406
+ border: 1px solid var(--primary-light-color);
398
407
  border-radius: 6px;
399
408
  }
400
409
 
401
410
  .p-datepicker:not(.p-datepicker-inline) {
402
- background: #1f2937;
403
- border: 1px solid #424b57;
411
+ background: #18191D;
412
+ border: 1px solid var(--primary-light-color);
404
413
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
405
414
  }
406
415
 
407
416
  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
408
- background: #1f2937;
417
+ background: #18191D;
409
418
  }
410
419
 
411
420
  .p-datepicker .p-datepicker-header {
412
421
  padding: 0.5rem;
413
- color: rgba(255, 255, 255, 0.87);
414
- background: #1f2937;
422
+ color: #FFFFFF;
423
+ background: #18191D;
415
424
  font-weight: 700;
416
425
  margin: 0;
417
- border-bottom: 1px solid #424b57;
426
+ border-bottom: 1px solid var(--primary-light-color);
418
427
  border-top-right-radius: 6px;
419
428
  border-top-left-radius: 6px;
420
429
  }
@@ -432,7 +441,7 @@
432
441
 
433
442
  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
434
443
  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
435
- color: rgba(255, 255, 255, 0.87);
444
+ color: #FFFFFF;
436
445
  border-color: transparent;
437
446
  background: rgba(255, 255, 255, 0.03);
438
447
  }
@@ -446,7 +455,7 @@
446
455
 
447
456
  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
448
457
  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
449
- color: rgba(255, 255, 255, 0.87);
458
+ color: #FFFFFF;
450
459
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
451
460
  font-weight: 700;
452
461
  padding: 0.5rem;
@@ -458,8 +467,8 @@
458
467
  }
459
468
 
460
469
  .p-datepicker table td>span.p-highlight {
461
- color: rgba(255, 255, 255, 0.87);
462
- background: rgba(34, 211, 238, 0.16);
470
+ color: #FFFFFF;
471
+ background: rgba(140, 100, 255, 0.18);
463
472
  }
464
473
 
465
474
  .p-datepicker table td>span:focus {
@@ -475,17 +484,17 @@
475
484
  }
476
485
 
477
486
  .p-datepicker table td.p-datepicker-today>span.p-highlight {
478
- color: rgba(255, 255, 255, 0.87);
479
- background: rgba(34, 211, 238, 0.16);
487
+ color: #FFFFFF;
488
+ background: rgba(140, 100, 255, 0.18);
480
489
  }
481
490
 
482
491
  .p-datepicker .p-datepicker-buttonbar {
483
492
  padding: 1rem 0;
484
- border-top: 1px solid #424b57;
493
+ border-top: 1px solid var(--primary-light-color);
485
494
  }
486
495
 
487
496
  .p-datepicker .p-timepicker {
488
- border-top: 1px solid #424b57;
497
+ border-top: 1px solid var(--primary-light-color);
489
498
  padding: 0.5rem;
490
499
  }
491
500
 
@@ -500,7 +509,7 @@
500
509
  }
501
510
 
502
511
  .p-datepicker .p-timepicker button:enabled:hover {
503
- color: rgba(255, 255, 255, 0.87);
512
+ color: #FFFFFF;
504
513
  border-color: transparent;
505
514
  background: rgba(255, 255, 255, 0.03);
506
515
  }
@@ -512,17 +521,17 @@
512
521
  }
513
522
 
514
523
  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
515
- color: rgba(255, 255, 255, 0.87);
516
- background: rgba(34, 211, 238, 0.16);
524
+ color: #FFFFFF;
525
+ background: rgba(140, 100, 255, 0.18);
517
526
  }
518
527
 
519
528
  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
520
- color: rgba(255, 255, 255, 0.87);
521
- background: rgba(34, 211, 238, 0.16);
529
+ color: #FFFFFF;
530
+ background: rgba(140, 100, 255, 0.18);
522
531
  }
523
532
 
524
533
  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
525
- border-left: 1px solid #424b57;
534
+ border-left: 1px solid var(--primary-light-color);
526
535
  padding-right: 0.5rem;
527
536
  padding-left: 0.5rem;
528
537
  padding-top: 0;
@@ -560,8 +569,8 @@
560
569
  }
561
570
 
562
571
  .p-cascadeselect {
563
- background: #111827;
564
- border: 1px solid #424b57;
572
+ background: #161616;
573
+ border: 1px solid var(--primary-light-color);
565
574
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
566
575
  border-radius: 6px;
567
576
  outline-color: transparent;
@@ -579,15 +588,15 @@
579
588
  }
580
589
 
581
590
  .p-cascadeselect.p-variant-filled {
582
- background-color: #424b57;
591
+ background-color: var(--primary-light-color);
583
592
  }
584
593
 
585
594
  .p-cascadeselect.p-variant-filled:enabled:hover {
586
- background-color: #424b57;
595
+ background-color: var(--primary-light-color);
587
596
  }
588
597
 
589
598
  .p-cascadeselect.p-variant-filled:enabled:focus {
590
- background-color: #424b57;
599
+ background-color: var(--primary-light-color);
591
600
  }
592
601
 
593
602
  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
@@ -607,9 +616,9 @@
607
616
  }
608
617
 
609
618
  .p-cascadeselect-panel {
610
- background: #1f2937;
611
- color: rgba(255, 255, 255, 0.87);
612
- border: 1px solid #424b57;
619
+ background: #18191D;
620
+ color: #FFFFFF;
621
+ border: 1px solid var(--primary-light-color);
613
622
  border-radius: 6px;
614
623
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
615
624
  }
@@ -617,15 +626,15 @@
617
626
  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
618
627
  margin: 0;
619
628
  border: 0 none;
620
- color: rgba(255, 255, 255, 0.87);
629
+ color: #FFFFFF;
621
630
  background: transparent;
622
631
  transition: box-shadow 0.2s;
623
632
  border-radius: 0;
624
633
  }
625
634
 
626
635
  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
627
- color: rgba(255, 255, 255, 0.87);
628
- background: rgba(34, 211, 238, 0.16);
636
+ color: #FFFFFF;
637
+ background: rgba(140, 100, 255, 0.18);
629
638
  }
630
639
 
631
640
  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
@@ -633,22 +642,22 @@
633
642
  }
634
643
 
635
644
  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
636
- color: rgba(255, 255, 255, 0.87);
645
+ color: #FFFFFF;
637
646
  background: rgba(255, 255, 255, 0.03);
638
647
  }
639
648
 
640
649
  .p-checkbox .p-checkbox-input {
641
- border: 1px solid #424b57;
650
+ border: 1px solid var(--primary-light-color);
642
651
  border-radius: 4px;
643
652
  }
644
653
 
645
654
  .p-checkbox .p-checkbox-box {
646
- border: 1px solid #424b57;
655
+ border: 1px solid var(--primary-light-color);
647
656
  border-radius: 4px !important;
648
657
  height: 16px;
649
658
  width: 16px;
650
- background: #111827;
651
- color: rgba(255, 255, 255, 0.87);
659
+ background: #161616;
660
+ color: #FFFFFF;
652
661
  border-radius: 6px;
653
662
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
654
663
  outline-color: transparent;
@@ -661,11 +670,11 @@
661
670
  }
662
671
 
663
672
  .p-checkbox .p-checkbox-box {
664
- border: 1px solid #424b57;
665
- background: #111827;
673
+ border: 1px solid var(--primary-light-color);
674
+ background: #161616;
666
675
  height: 16px;
667
676
  width: 16px;
668
- color: rgba(255, 255, 255, 0.87);
677
+ color: #FFFFFF;
669
678
  border-radius: 6px;
670
679
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
671
680
  outline-color: transparent;
@@ -687,8 +696,8 @@
687
696
  }
688
697
 
689
698
  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
690
- border-color: #a5f3fc;
691
- background: #a5f3fc;
699
+ border-color: #8a66c2;
700
+ background: #8a66c2;
692
701
  color: #030712;
693
702
  }
694
703
 
@@ -704,7 +713,7 @@
704
713
  }
705
714
 
706
715
  .p-checkbox.p-variant-filled .p-checkbox-box {
707
- background-color: #424b57;
716
+ background-color: var(--primary-light-color);
708
717
  }
709
718
 
710
719
  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
@@ -712,15 +721,15 @@
712
721
  }
713
722
 
714
723
  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
715
- background-color: #424b57;
724
+ background-color: var(--primary-light-color);
716
725
  }
717
726
 
718
727
  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
719
- background: #a5f3fc;
728
+ background: #8a66c2;
720
729
  }
721
730
 
722
731
  .p-input-filled .p-checkbox .p-checkbox-box {
723
- background-color: #424b57;
732
+ background-color: var(--primary-light-color);
724
733
  }
725
734
 
726
735
  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
@@ -728,15 +737,15 @@
728
737
  }
729
738
 
730
739
  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
731
- background-color: #424b57;
740
+ background-color: var(--primary-light-color);
732
741
  }
733
742
 
734
743
  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
735
- background: #a5f3fc;
744
+ background: #8a66c2;
736
745
  }
737
746
 
738
747
  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
739
- background-color: #424b57;
748
+ background-color: var(--primary-light-color);
740
749
  }
741
750
 
742
751
  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
@@ -744,11 +753,11 @@
744
753
  }
745
754
 
746
755
  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
747
- background-color: #424b57;
756
+ background-color: var(--primary-light-color);
748
757
  }
749
758
 
750
759
  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
751
- background: #a5f3fc;
760
+ background: #8a66c2;
752
761
  }
753
762
 
754
763
  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
@@ -765,21 +774,21 @@
765
774
  .p-chips .p-chips-multiple-container .p-chips-token {
766
775
  padding: 0.375rem 0.75rem;
767
776
  margin-right: 0.5rem;
768
- background: #424b57;
769
- color: rgba(255, 255, 255, 0.87);
777
+ background: var(--primary-light-color);
778
+ color: #FFFFFF;
770
779
  border-radius: 16px;
771
780
  }
772
781
 
773
782
  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
774
783
  background: #6b7280;
775
- color: rgba(255, 255, 255, 0.87);
784
+ color: #FFFFFF;
776
785
  }
777
786
 
778
787
  .p-chips .p-chips-multiple-container .p-chips-input-token input {
779
788
  font-family: var(--font-family);
780
789
  font-feature-settings: var(--font-feature-settings, normal);
781
790
  font-size: 1rem;
782
- color: rgba(255, 255, 255, 0.87);
791
+ color: #FFFFFF;
783
792
  padding: 0;
784
793
  margin: 0;
785
794
  }
@@ -789,13 +798,13 @@
789
798
  }
790
799
 
791
800
  .p-colorpicker-panel {
792
- background: #1f2937;
793
- border: 1px solid #424b57;
801
+ background: #18191D;
802
+ border: 1px solid var(--primary-light-color);
794
803
  }
795
804
 
796
805
  .p-colorpicker-panel .p-colorpicker-color-handle,
797
806
  .p-colorpicker-panel .p-colorpicker-hue-handle {
798
- border-color: rgba(255, 255, 255, 0.87);
807
+ border-color: #FFFFFF;
799
808
  }
800
809
 
801
810
  .p-colorpicker-overlay-panel {
@@ -803,8 +812,8 @@
803
812
  }
804
813
 
805
814
  .p-dropdown {
806
- background: #111827;
807
- border: 1px solid #424b57;
815
+ background: #161616;
816
+ border: 1px solid var(--primary-light-color);
808
817
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
809
818
  border-radius: 6px;
810
819
  outline-color: transparent;
@@ -822,15 +831,15 @@
822
831
  }
823
832
 
824
833
  .p-dropdown.p-variant-filled {
825
- background: #424b57;
834
+ background: var(--primary-light-color);
826
835
  }
827
836
 
828
837
  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
829
- background-color: #424b57;
838
+ background-color: var(--primary-light-color);
830
839
  }
831
840
 
832
841
  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
833
- background-color: #424b57;
842
+ background-color: var(--primary-light-color);
834
843
  }
835
844
 
836
845
  .p-dropdown .p-dropdown-label.p-placeholder {
@@ -855,18 +864,18 @@
855
864
  }
856
865
 
857
866
  .p-dropdown-panel {
858
- background: #1f2937;
859
- color: rgba(255, 255, 255, 0.87);
860
- border: 1px solid #424b57;
867
+ background: #18191D;
868
+ color: #FFFFFF;
869
+ border: 1px solid var(--primary-light-color);
861
870
  border-radius: 6px;
862
871
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
863
872
  }
864
873
 
865
874
  .p-dropdown-panel .p-dropdown-header {
866
875
  padding: 0.75rem 1.25rem;
867
- border-bottom: 1px solid #424b57;
868
- color: rgba(255, 255, 255, 0.87);
869
- background: #1f2937;
876
+ border-bottom: 1px solid var(--primary-light-color);
877
+ color: #FFFFFF;
878
+ background: #18191D;
870
879
  margin: 0;
871
880
  border-top-right-radius: 6px;
872
881
  border-top-left-radius: 6px;
@@ -881,15 +890,15 @@
881
890
  margin: 0;
882
891
  padding: 0.75rem 1.25rem;
883
892
  border: 0 none;
884
- color: rgba(255, 255, 255, 0.87);
893
+ color: #FFFFFF;
885
894
  background: transparent;
886
895
  transition: box-shadow 0.2s;
887
896
  border-radius: 0;
888
897
  }
889
898
 
890
899
  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
891
- color: rgba(255, 255, 255, 0.87);
892
- background: rgba(34, 211, 238, 0.16);
900
+ color: #FFFFFF;
901
+ background: rgba(140, 100, 255, 0.18);
893
902
  }
894
903
 
895
904
  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
@@ -897,36 +906,36 @@
897
906
  }
898
907
 
899
908
  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
900
- color: rgba(255, 255, 255, 0.87);
909
+ color: #FFFFFF;
901
910
  background: rgba(255, 255, 255, 0.03);
902
911
  }
903
912
 
904
913
  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
905
914
  margin: 0;
906
915
  padding: 0.75rem 1.25rem;
907
- color: rgba(255, 255, 255, 0.87);
916
+ color: #FFFFFF;
908
917
  background: #374151;
909
918
  font-weight: 700;
910
919
  }
911
920
 
912
921
  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
913
922
  padding: 0.75rem 1.25rem;
914
- color: rgba(255, 255, 255, 0.87);
923
+ color: #FFFFFF;
915
924
  background: transparent;
916
925
  }
917
926
 
918
927
  .p-inputgroup-addon {
919
- background: #1f2937;
928
+ background: #18191D;
920
929
  color: rgba(255, 255, 255, 0.6);
921
- border-top: 1px solid #424b57;
922
- border-left: 1px solid #424b57;
923
- border-bottom: 1px solid #424b57;
930
+ border-top: 1px solid var(--primary-light-color);
931
+ border-left: 1px solid var(--primary-light-color);
932
+ border-bottom: 1px solid var(--primary-light-color);
924
933
  padding: 0.75rem 0.75rem;
925
934
  min-width: 3rem;
926
935
  }
927
936
 
928
937
  .p-inputgroup-addon:last-child {
929
- border-right: 1px solid #424b57;
938
+ border-right: 1px solid var(--primary-light-color);
930
939
  }
931
940
 
932
941
  .p-inputnumber.p-invalid.p-component>.p-inputtext {
@@ -960,7 +969,7 @@
960
969
  }
961
970
 
962
971
  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
963
- background: #424b57;
972
+ background: var(--primary-light-color);
964
973
  }
965
974
 
966
975
  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
@@ -977,14 +986,18 @@
977
986
  border-color: #fca5a5;
978
987
  }
979
988
 
989
+ .solid-global-search-element .p-inputtext {
990
+ background-color: transparent !important;
991
+ }
992
+
980
993
  .p-inputtext {
981
994
  font-family: var(--font-family);
982
995
  font-feature-settings: var(--font-feature-settings, normal);
983
996
  font-size: 1rem;
984
- color: rgba(255, 255, 255, 0.87);
985
- background: #111827;
997
+ color: #FFFFFF;
998
+ background: #161616;
986
999
  padding: 0.75rem 0.75rem;
987
- border: 1px solid #424b57;
1000
+ border: 1px solid var(--primary-light-color);
988
1001
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
989
1002
  appearance: none;
990
1003
  border-radius: 6px;
@@ -1018,15 +1031,15 @@
1018
1031
  }
1019
1032
 
1020
1033
  .p-inputtext.p-variant-filled {
1021
- background-color: #424b57;
1034
+ background-color: var(--primary-light-color);
1022
1035
  }
1023
1036
 
1024
1037
  .p-inputtext.p-variant-filled:enabled:hover {
1025
- background-color: #424b57;
1038
+ background-color: var(--primary-light-color);
1026
1039
  }
1027
1040
 
1028
1041
  .p-inputtext.p-variant-filled:enabled:focus {
1029
- background-color: #424b57;
1042
+ background-color: var(--primary-light-color);
1030
1043
  }
1031
1044
 
1032
1045
  .p-float-label>label {
@@ -1056,15 +1069,15 @@
1056
1069
  }
1057
1070
 
1058
1071
  .p-input-filled .p-inputtext {
1059
- background-color: #424b57;
1072
+ background-color: var(--primary-light-color);
1060
1073
  }
1061
1074
 
1062
1075
  .p-input-filled .p-inputtext:enabled:hover {
1063
- background-color: #424b57;
1076
+ background-color: var(--primary-light-color);
1064
1077
  }
1065
1078
 
1066
1079
  .p-input-filled .p-inputtext:enabled:focus {
1067
- background-color: #424b57;
1080
+ background-color: var(--primary-light-color);
1068
1081
  }
1069
1082
 
1070
1083
  .p-icon-field-left>.p-input-icon:first-of-type {
@@ -1078,9 +1091,9 @@
1078
1091
  }
1079
1092
 
1080
1093
  .p-listbox {
1081
- background: #1f2937;
1082
- color: rgba(255, 255, 255, 0.87);
1083
- border: 1px solid #424b57;
1094
+ background: #18191D;
1095
+ color: #FFFFFF;
1096
+ border: 1px solid var(--primary-light-color);
1084
1097
  border-radius: 6px;
1085
1098
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
1086
1099
  outline-color: transparent;
@@ -1088,9 +1101,9 @@
1088
1101
 
1089
1102
  .p-listbox .p-listbox-header {
1090
1103
  padding: 0.75rem 1.25rem;
1091
- border-bottom: 1px solid #424b57;
1092
- color: rgba(255, 255, 255, 0.87);
1093
- background: #1f2937;
1104
+ border-bottom: 1px solid var(--primary-light-color);
1105
+ color: #FFFFFF;
1106
+ background: #18191D;
1094
1107
  margin: 0;
1095
1108
  border-top-right-radius: 6px;
1096
1109
  border-top-left-radius: 6px;
@@ -1105,27 +1118,27 @@
1105
1118
  margin: 0;
1106
1119
  padding: 0.75rem 1.25rem;
1107
1120
  border: 0 none;
1108
- color: rgba(255, 255, 255, 0.87);
1121
+ color: #FFFFFF;
1109
1122
  transition: box-shadow 0.2s;
1110
1123
  border-radius: 0;
1111
1124
  }
1112
1125
 
1113
1126
  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
1114
- color: rgba(255, 255, 255, 0.87);
1115
- background: rgba(34, 211, 238, 0.16);
1127
+ color: #FFFFFF;
1128
+ background: rgba(140, 100, 255, 0.18);
1116
1129
  }
1117
1130
 
1118
1131
  .p-listbox .p-listbox-list .p-listbox-item-group {
1119
1132
  margin: 0;
1120
1133
  padding: 0.75rem 1.25rem;
1121
- color: rgba(255, 255, 255, 0.87);
1134
+ color: #FFFFFF;
1122
1135
  background: #374151;
1123
1136
  font-weight: 700;
1124
1137
  }
1125
1138
 
1126
1139
  .p-listbox .p-listbox-list .p-listbox-empty-message {
1127
1140
  padding: 0.75rem 1.25rem;
1128
- color: rgba(255, 255, 255, 0.87);
1141
+ color: #FFFFFF;
1129
1142
  background: transparent;
1130
1143
  }
1131
1144
 
@@ -1134,17 +1147,17 @@
1134
1147
  }
1135
1148
 
1136
1149
  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
1137
- color: rgba(255, 255, 255, 0.87);
1150
+ color: #FFFFFF;
1138
1151
  background: rgba(255, 255, 255, 0.03);
1139
1152
  }
1140
1153
 
1141
1154
  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
1142
- color: rgba(255, 255, 255, 0.87);
1155
+ color: #FFFFFF;
1143
1156
  background: rgba(255, 255, 255, 0.03);
1144
1157
  }
1145
1158
 
1146
1159
  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
1147
- color: rgba(255, 255, 255, 0.87);
1160
+ color: #FFFFFF;
1148
1161
  background: rgba(255, 255, 255, 0.03);
1149
1162
  }
1150
1163
 
@@ -1160,9 +1173,9 @@
1160
1173
  }
1161
1174
 
1162
1175
  .p-mention-panel {
1163
- background: #1f2937;
1164
- color: rgba(255, 255, 255, 0.87);
1165
- border: 1px solid #424b57;
1176
+ background: #18191D;
1177
+ color: #FFFFFF;
1178
+ border: 1px solid var(--primary-light-color);
1166
1179
  border-radius: 6px;
1167
1180
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
1168
1181
  }
@@ -1171,25 +1184,25 @@
1171
1184
  margin: 0;
1172
1185
  padding: 0.75rem 1.25rem;
1173
1186
  border: 0 none;
1174
- color: rgba(255, 255, 255, 0.87);
1187
+ color: #FFFFFF;
1175
1188
  background: transparent;
1176
1189
  transition: box-shadow 0.2s;
1177
1190
  border-radius: 0;
1178
1191
  }
1179
1192
 
1180
1193
  .p-mention-panel .p-mention-items .p-mention-item:hover {
1181
- color: rgba(255, 255, 255, 0.87);
1194
+ color: #FFFFFF;
1182
1195
  background: rgba(255, 255, 255, 0.03);
1183
1196
  }
1184
1197
 
1185
1198
  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
1186
- color: rgba(255, 255, 255, 0.87);
1187
- background: rgba(34, 211, 238, 0.16);
1199
+ color: #FFFFFF;
1200
+ background: rgba(140, 100, 255, 0.18);
1188
1201
  }
1189
1202
 
1190
1203
  .p-multiselect {
1191
- background: #111827;
1192
- border: 1px solid #424b57;
1204
+ background: #161616;
1205
+ border: 1px solid var(--primary-light-color);
1193
1206
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
1194
1207
  border-radius: 6px;
1195
1208
  outline-color: transparent;
@@ -1207,15 +1220,15 @@
1207
1220
  }
1208
1221
 
1209
1222
  .p-multiselect.p-variant-filled {
1210
- background: #424b57;
1223
+ background: var(--primary-light-color);
1211
1224
  }
1212
1225
 
1213
1226
  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
1214
- background-color: #424b57;
1227
+ background-color: var(--primary-light-color);
1215
1228
  }
1216
1229
 
1217
1230
  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
1218
- background-color: #424b57;
1231
+ background-color: var(--primary-light-color);
1219
1232
  }
1220
1233
 
1221
1234
  .p-multiselect .p-multiselect-label.p-placeholder {
@@ -1225,8 +1238,8 @@
1225
1238
  .p-multiselect.p-multiselect-chip .p-multiselect-token {
1226
1239
  padding: 0.375rem 0.75rem;
1227
1240
  margin-right: 0.5rem;
1228
- background: #424b57;
1229
- color: rgba(255, 255, 255, 0.87);
1241
+ background: var(--primary-light-color);
1242
+ color: #FFFFFF;
1230
1243
  border-radius: 16px;
1231
1244
  }
1232
1245
 
@@ -1243,18 +1256,18 @@
1243
1256
  }
1244
1257
 
1245
1258
  .p-multiselect-panel {
1246
- background: #1f2937;
1247
- color: rgba(255, 255, 255, 0.87);
1248
- border: 1px solid #424b57;
1259
+ background: #18191D;
1260
+ color: #FFFFFF;
1261
+ border: 1px solid var(--primary-light-color);
1249
1262
  border-radius: 6px;
1250
1263
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
1251
1264
  }
1252
1265
 
1253
1266
  .p-multiselect-panel .p-multiselect-header {
1254
1267
  padding: 0.75rem 1.25rem;
1255
- border-bottom: 1px solid #424b57;
1256
- color: rgba(255, 255, 255, 0.87);
1257
- background: #1f2937;
1268
+ border-bottom: 1px solid var(--primary-light-color);
1269
+ color: #FFFFFF;
1270
+ background: #18191D;
1258
1271
  margin: 0;
1259
1272
  border-top-right-radius: 6px;
1260
1273
  border-top-left-radius: 6px;
@@ -1277,7 +1290,7 @@
1277
1290
  }
1278
1291
 
1279
1292
  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
1280
- color: rgba(255, 255, 255, 0.87);
1293
+ color: #FFFFFF;
1281
1294
  border-color: transparent;
1282
1295
  background: rgba(255, 255, 255, 0.03);
1283
1296
  }
@@ -1292,15 +1305,15 @@
1292
1305
  margin: 0;
1293
1306
  padding: 0.75rem 1.25rem;
1294
1307
  border: 0 none;
1295
- color: rgba(255, 255, 255, 0.87);
1308
+ color: #FFFFFF;
1296
1309
  background: transparent;
1297
1310
  transition: box-shadow 0.2s;
1298
1311
  border-radius: 0;
1299
1312
  }
1300
1313
 
1301
1314
  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
1302
- color: rgba(255, 255, 255, 0.87);
1303
- background: rgba(34, 211, 238, 0.16);
1315
+ color: #FFFFFF;
1316
+ background: rgba(140, 100, 255, 0.18);
1304
1317
  }
1305
1318
 
1306
1319
  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
@@ -1308,21 +1321,21 @@
1308
1321
  }
1309
1322
 
1310
1323
  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
1311
- color: rgba(255, 255, 255, 0.87);
1324
+ color: #FFFFFF;
1312
1325
  background: rgba(255, 255, 255, 0.03);
1313
1326
  }
1314
1327
 
1315
1328
  .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
1316
1329
  margin: 0;
1317
1330
  padding: 0.75rem 1.25rem;
1318
- color: rgba(255, 255, 255, 0.87);
1331
+ color: #FFFFFF;
1319
1332
  background: #374151;
1320
1333
  font-weight: 700;
1321
1334
  }
1322
1335
 
1323
1336
  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
1324
1337
  padding: 0.75rem 1.25rem;
1325
- color: rgba(255, 255, 255, 0.87);
1338
+ color: #FFFFFF;
1326
1339
  background: transparent;
1327
1340
  }
1328
1341
 
@@ -1332,16 +1345,16 @@
1332
1345
 
1333
1346
  .p-password-panel {
1334
1347
  padding: 1.25rem;
1335
- background: #1f2937;
1336
- color: rgba(255, 255, 255, 0.87);
1337
- border: 1px solid #424b57;
1348
+ background: #18191D;
1349
+ color: #FFFFFF;
1350
+ border: 1px solid var(--primary-light-color);
1338
1351
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
1339
1352
  border-radius: 6px;
1340
1353
  }
1341
1354
 
1342
1355
  .p-password-panel .p-password-meter {
1343
1356
  margin-bottom: 0.5rem;
1344
- background: #424b57;
1357
+ background: var(--primary-light-color);
1345
1358
  }
1346
1359
 
1347
1360
  .p-password-panel .p-password-meter .p-password-strength.weak {
@@ -1368,16 +1381,16 @@
1368
1381
  opacity: 0;
1369
1382
  z-index: 1;
1370
1383
  outline: 0 none;
1371
- border: 1px solid #424b57;
1384
+ border: 1px solid var(--primary-light-color);
1372
1385
  border-radius: 50%;
1373
1386
  }
1374
1387
 
1375
1388
  .p-radiobutton .p-radiobutton-box {
1376
- border: 1px solid #424b57;
1377
- background: #111827;
1389
+ border: 1px solid var(--primary-light-color);
1390
+ background: #161616;
1378
1391
  width: 16px;
1379
1392
  height: 16px;
1380
- color: rgba(255, 255, 255, 0.87);
1393
+ color: #FFFFFF;
1381
1394
  border-radius: 50%;
1382
1395
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
1383
1396
  outline-color: transparent;
@@ -1400,8 +1413,8 @@
1400
1413
  }
1401
1414
 
1402
1415
  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
1403
- border-color: #a5f3fc;
1404
- background: #a5f3fc;
1416
+ border-color: #8a66c2;
1417
+ background: #8a66c2;
1405
1418
  }
1406
1419
 
1407
1420
  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
@@ -1420,7 +1433,7 @@
1420
1433
  }
1421
1434
 
1422
1435
  .p-radiobutton.p-variant-filled .p-radiobutton-box {
1423
- background-color: #424b57;
1436
+ background-color: var(--primary-light-color);
1424
1437
  }
1425
1438
 
1426
1439
  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
@@ -1428,15 +1441,15 @@
1428
1441
  }
1429
1442
 
1430
1443
  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
1431
- background-color: #424b57;
1444
+ background-color: var(--primary-light-color);
1432
1445
  }
1433
1446
 
1434
1447
  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
1435
- background: #a5f3fc;
1448
+ background: #8a66c2;
1436
1449
  }
1437
1450
 
1438
1451
  .p-input-filled .p-radiobutton .p-radiobutton-box {
1439
- background-color: #424b57;
1452
+ background-color: var(--primary-light-color);
1440
1453
  }
1441
1454
 
1442
1455
  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
@@ -1444,11 +1457,11 @@
1444
1457
  }
1445
1458
 
1446
1459
  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
1447
- background-color: #424b57;
1460
+ background-color: var(--primary-light-color);
1448
1461
  }
1449
1462
 
1450
1463
  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
1451
- background: #a5f3fc;
1464
+ background: #8a66c2;
1452
1465
  }
1453
1466
 
1454
1467
  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
@@ -1474,9 +1487,9 @@
1474
1487
  }
1475
1488
 
1476
1489
  .p-selectbutton .p-button {
1477
- background: #1f2937;
1478
- border: 1px solid #424b57;
1479
- color: rgba(255, 255, 255, 0.87);
1490
+ background: #18191D;
1491
+ border: 1px solid var(--primary-light-color);
1492
+ color: #FFFFFF;
1480
1493
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
1481
1494
  }
1482
1495
 
@@ -1487,8 +1500,8 @@
1487
1500
 
1488
1501
  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
1489
1502
  background: rgba(255, 255, 255, 0.03);
1490
- border-color: #424b57;
1491
- color: rgba(255, 255, 255, 0.87);
1503
+ border-color: var(--primary-light-color);
1504
+ color: #FFFFFF;
1492
1505
  }
1493
1506
 
1494
1507
  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
@@ -1523,7 +1536,7 @@
1523
1536
  }
1524
1537
 
1525
1538
  .p-slider {
1526
- background: #424b57;
1539
+ background: var(--primary-light-color);
1527
1540
  border: 0 none;
1528
1541
  border-radius: 6px;
1529
1542
  }
@@ -1531,7 +1544,7 @@
1531
1544
  .p-slider .p-slider-handle {
1532
1545
  height: 1.143rem;
1533
1546
  width: 1.143rem;
1534
- background: #424b57;
1547
+ background: var(--primary-light-color);
1535
1548
  border: 2px solid #9B5AED;
1536
1549
  border-radius: 50%;
1537
1550
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
@@ -1553,8 +1566,8 @@
1553
1566
  }
1554
1567
 
1555
1568
  .p-treeselect {
1556
- background: #111827;
1557
- border: 1px solid #424b57;
1569
+ background: #161616;
1570
+ border: 1px solid var(--primary-light-color);
1558
1571
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
1559
1572
  border-radius: 6px;
1560
1573
  }
@@ -1571,15 +1584,15 @@
1571
1584
  }
1572
1585
 
1573
1586
  .p-treeselect.p-variant-filled {
1574
- background: #424b57;
1587
+ background: var(--primary-light-color);
1575
1588
  }
1576
1589
 
1577
1590
  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
1578
- background-color: #424b57;
1591
+ background-color: var(--primary-light-color);
1579
1592
  }
1580
1593
 
1581
1594
  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
1582
- background-color: #424b57;
1595
+ background-color: var(--primary-light-color);
1583
1596
  }
1584
1597
 
1585
1598
  .p-treeselect .p-treeselect-label {
@@ -1594,8 +1607,8 @@
1594
1607
  .p-treeselect.p-treeselect-chip .p-treeselect-token {
1595
1608
  padding: 0.375rem 0.75rem;
1596
1609
  margin-right: 0.5rem;
1597
- background: #424b57;
1598
- color: rgba(255, 255, 255, 0.87);
1610
+ background: var(--primary-light-color);
1611
+ color: #FFFFFF;
1599
1612
  border-radius: 16px;
1600
1613
  }
1601
1614
 
@@ -1617,18 +1630,18 @@
1617
1630
  }
1618
1631
 
1619
1632
  .p-treeselect-panel {
1620
- background: #1f2937;
1621
- color: rgba(255, 255, 255, 0.87);
1622
- border: 1px solid #424b57;
1633
+ background: #18191D;
1634
+ color: #FFFFFF;
1635
+ border: 1px solid var(--primary-light-color);
1623
1636
  border-radius: 6px;
1624
1637
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
1625
1638
  }
1626
1639
 
1627
1640
  .p-treeselect-panel .p-treeselect-header {
1628
1641
  padding: 0.75rem 1.25rem;
1629
- border-bottom: 1px solid #424b57;
1630
- color: rgba(255, 255, 255, 0.87);
1631
- background: #1f2937;
1642
+ border-bottom: 1px solid var(--primary-light-color);
1643
+ color: #FFFFFF;
1644
+ background: #18191D;
1632
1645
  margin: 0;
1633
1646
  border-top-right-radius: 6px;
1634
1647
  border-top-left-radius: 6px;
@@ -1650,7 +1663,7 @@
1650
1663
  }
1651
1664
 
1652
1665
  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
1653
- color: rgba(255, 255, 255, 0.87);
1666
+ color: #FFFFFF;
1654
1667
  border-color: transparent;
1655
1668
  background: rgba(255, 255, 255, 0.03);
1656
1669
  }
@@ -1663,20 +1676,20 @@
1663
1676
 
1664
1677
  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
1665
1678
  padding: 0.75rem 1.25rem;
1666
- color: rgba(255, 255, 255, 0.87);
1679
+ color: #FFFFFF;
1667
1680
  background: transparent;
1668
1681
  }
1669
1682
 
1670
1683
  .p-input-filled .p-treeselect {
1671
- background: #424b57;
1684
+ background: var(--primary-light-color);
1672
1685
  }
1673
1686
 
1674
1687
  .p-input-filled .p-treeselect:not(.p-disabled):hover {
1675
- background-color: #424b57;
1688
+ background-color: var(--primary-light-color);
1676
1689
  }
1677
1690
 
1678
1691
  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
1679
- background-color: #424b57;
1692
+ background-color: var(--primary-light-color);
1680
1693
  }
1681
1694
 
1682
1695
  .p-togglebutton .p-togglebutton-input {
@@ -1691,14 +1704,14 @@
1691
1704
  opacity: 0;
1692
1705
  z-index: 1;
1693
1706
  outline: 0 none;
1694
- border: 1px solid #424b57;
1707
+ border: 1px solid var(--primary-light-color);
1695
1708
  border-radius: 6px;
1696
1709
  }
1697
1710
 
1698
1711
  .p-togglebutton .p-button {
1699
- background: #1f2937;
1700
- border: 1px solid #424b57;
1701
- color: rgba(255, 255, 255, 0.87);
1712
+ background: #18191D;
1713
+ border: 1px solid var(--primary-light-color);
1714
+ color: #FFFFFF;
1702
1715
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
1703
1716
  outline-color: transparent;
1704
1717
  }
@@ -1721,8 +1734,8 @@
1721
1734
 
1722
1735
  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
1723
1736
  background: rgba(255, 255, 255, 0.03);
1724
- border-color: #424b57;
1725
- color: rgba(255, 255, 255, 0.87);
1737
+ border-color: var(--primary-light-color);
1738
+ color: #FFFFFF;
1726
1739
  }
1727
1740
 
1728
1741
  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
@@ -1769,9 +1782,9 @@
1769
1782
  }
1770
1783
 
1771
1784
  .p-button:not(:disabled):active {
1772
- background: #a5f3fc;
1785
+ background: #8a66c2;
1773
1786
  color: #030712;
1774
- border-color: #a5f3fc;
1787
+ border-color: #8a66c2;
1775
1788
  }
1776
1789
 
1777
1790
  .p-button.p-button-outlined {
@@ -1787,7 +1800,7 @@
1787
1800
  }
1788
1801
 
1789
1802
  .p-button.p-button-outlined:not(:disabled):active {
1790
- background: rgba(34, 211, 238, 0.16);
1803
+ background: rgba(140, 100, 255, 0.18);
1791
1804
  color: #9B5AED;
1792
1805
  border: 1px solid;
1793
1806
  }
@@ -1820,7 +1833,7 @@
1820
1833
  }
1821
1834
 
1822
1835
  .p-button.p-button-text:not(:disabled):active {
1823
- background: rgba(34, 211, 238, 0.16);
1836
+ background: rgba(140, 100, 255, 0.18);
1824
1837
  color: #9B5AED;
1825
1838
  border-color: transparent;
1826
1839
  }
@@ -1898,7 +1911,7 @@
1898
1911
  .p-fileupload-choose.p-button-secondary.p-button-outlined {
1899
1912
  background-color: transparent;
1900
1913
  color: var(--icon-color);
1901
- border: 1px solid #424b57;
1914
+ border: 1px solid var(--primary-light-color);
1902
1915
  }
1903
1916
 
1904
1917
  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover,
@@ -1924,7 +1937,7 @@
1924
1937
  .p-splitbutton.p-button-secondary>.p-button.p-button-text,
1925
1938
  .p-fileupload-choose.p-button-secondary.p-button-text {
1926
1939
  background-color: transparent;
1927
- color: #94a3b8;
1940
+ color: #FFFFFF;
1928
1941
  border-color: transparent;
1929
1942
  }
1930
1943
 
@@ -1934,7 +1947,7 @@
1934
1947
  .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
1935
1948
  background: rgba(148, 163, 184, 0.04);
1936
1949
  border-color: transparent;
1937
- color: #94a3b8;
1950
+ color: #FFFFFF;
1938
1951
  }
1939
1952
 
1940
1953
  .p-button.p-button-secondary.p-button-text:not(:disabled):active,
@@ -1943,7 +1956,7 @@
1943
1956
  .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
1944
1957
  background: rgba(148, 163, 184, 0.16);
1945
1958
  border-color: transparent;
1946
- color: #94a3b8;
1959
+ color: #FFFFFF;
1947
1960
  }
1948
1961
 
1949
1962
  .p-button.p-button-info,
@@ -2389,7 +2402,7 @@
2389
2402
  .p-button.p-button-contrast,
2390
2403
  .p-button-group.p-button-contrast>.p-button,
2391
2404
  .p-splitbutton.p-button-contrast>.p-button {
2392
- color: #111827;
2405
+ color: #161616;
2393
2406
  background: #ffffff;
2394
2407
  border: 1px solid #ffffff;
2395
2408
  }
@@ -2398,7 +2411,7 @@
2398
2411
  .p-button-group.p-button-contrast>.p-button:not(:disabled):hover,
2399
2412
  .p-splitbutton.p-button-contrast>.p-button:not(:disabled):hover {
2400
2413
  background: #f3f4f6;
2401
- color: #111827;
2414
+ color: #161616;
2402
2415
  border-color: #f3f4f6;
2403
2416
  }
2404
2417
 
@@ -2412,7 +2425,7 @@
2412
2425
  .p-button-group.p-button-contrast>.p-button:not(:disabled):active,
2413
2426
  .p-splitbutton.p-button-contrast>.p-button:not(:disabled):active {
2414
2427
  background: #e5e7eb;
2415
- color: #111827;
2428
+ color: #161616;
2416
2429
  border-color: #e5e7eb;
2417
2430
  }
2418
2431
 
@@ -2500,7 +2513,7 @@
2500
2513
  }
2501
2514
 
2502
2515
  .p-splitbutton.p-button-outlined>.p-button:not(:disabled):active {
2503
- background: rgba(34, 211, 238, 0.16);
2516
+ background: rgba(140, 100, 255, 0.18);
2504
2517
  color: #9B5AED;
2505
2518
  }
2506
2519
 
@@ -2532,7 +2545,7 @@
2532
2545
  }
2533
2546
 
2534
2547
  .p-splitbutton.p-button-text>.p-button:not(:disabled):active {
2535
- background: rgba(34, 211, 238, 0.16);
2548
+ background: rgba(140, 100, 255, 0.18);
2536
2549
  color: #9B5AED;
2537
2550
  border-color: transparent;
2538
2551
  }
@@ -2557,36 +2570,36 @@
2557
2570
 
2558
2571
  .p-splitbutton.p-button-secondary.p-button-outlined>.p-button {
2559
2572
  background-color: transparent;
2560
- color: #94a3b8;
2573
+ color: #FFFFFF;
2561
2574
  border: 1px solid;
2562
2575
  }
2563
2576
 
2564
2577
  .p-splitbutton.p-button-secondary.p-button-outlined>.p-button:not(:disabled):hover {
2565
2578
  background: rgba(148, 163, 184, 0.04);
2566
- color: #94a3b8;
2579
+ color: #FFFFFF;
2567
2580
  }
2568
2581
 
2569
2582
  .p-splitbutton.p-button-secondary.p-button-outlined>.p-button:not(:disabled):active {
2570
2583
  background: rgba(148, 163, 184, 0.16);
2571
- color: #94a3b8;
2584
+ color: #FFFFFF;
2572
2585
  }
2573
2586
 
2574
2587
  .p-splitbutton.p-button-secondary.p-button-text>.p-button {
2575
2588
  background-color: transparent;
2576
- color: #94a3b8;
2589
+ color: #FFFFFF;
2577
2590
  border-color: transparent;
2578
2591
  }
2579
2592
 
2580
2593
  .p-splitbutton.p-button-secondary.p-button-text>.p-button:not(:disabled):hover {
2581
2594
  background: rgba(148, 163, 184, 0.04);
2582
2595
  border-color: transparent;
2583
- color: #94a3b8;
2596
+ color: #FFFFFF;
2584
2597
  }
2585
2598
 
2586
2599
  .p-splitbutton.p-button-secondary.p-button-text>.p-button:not(:disabled):active {
2587
2600
  background: rgba(148, 163, 184, 0.16);
2588
2601
  border-color: transparent;
2589
- color: #94a3b8;
2602
+ color: #FFFFFF;
2590
2603
  }
2591
2604
 
2592
2605
  .p-splitbutton.p-button-info.p-button-outlined>.p-button {
@@ -2763,12 +2776,12 @@
2763
2776
  width: 3rem;
2764
2777
  height: 3rem;
2765
2778
  background: rgba(255, 255, 255, 0.87);
2766
- color: #111827;
2779
+ color: #161616;
2767
2780
  }
2768
2781
 
2769
2782
  .p-speeddial-action:hover {
2770
2783
  background: rgba(255, 255, 255, 0.6);
2771
- color: #111827;
2784
+ color: #161616;
2772
2785
  }
2773
2786
 
2774
2787
  .p-carousel .p-carousel-content .p-carousel-prev,
@@ -2784,7 +2797,7 @@
2784
2797
 
2785
2798
  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
2786
2799
  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
2787
- color: rgba(255, 255, 255, 0.87);
2800
+ color: #FFFFFF;
2788
2801
  border-color: transparent;
2789
2802
  background: rgba(255, 255, 255, 0.03);
2790
2803
  }
@@ -2797,7 +2810,7 @@
2797
2810
  }
2798
2811
 
2799
2812
  .p-carousel .p-carousel-indicators .p-carousel-indicator button {
2800
- background-color: #424b57;
2813
+ background-color: var(--primary-light-color);
2801
2814
  width: 2rem;
2802
2815
  height: 0.5rem;
2803
2816
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
@@ -2809,23 +2822,23 @@
2809
2822
  }
2810
2823
 
2811
2824
  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
2812
- background: rgba(34, 211, 238, 0.16);
2813
- color: rgba(255, 255, 255, 0.87);
2825
+ background: rgba(140, 100, 255, 0.18);
2826
+ color: #FFFFFF;
2814
2827
  }
2815
2828
 
2816
2829
  .p-datatable .p-datatable-header {
2817
- background: #1f2937;
2830
+ background: #18191D;
2818
2831
  color: rgba(255, 255, 255, 0.6);
2819
- border: 1px solid #424b57;
2832
+ border: 1px solid var(--primary-light-color);
2820
2833
  border-width: 0 0 1px 0;
2821
2834
  padding: 1rem 1rem;
2822
2835
  font-weight: 700;
2823
2836
  }
2824
2837
 
2825
2838
  .p-datatable .p-datatable-footer {
2826
- background: #1f2937;
2827
- color: rgba(255, 255, 255, 0.87);
2828
- border: 1px solid #424b57;
2839
+ background: #18191D;
2840
+ color: #FFFFFF;
2841
+ border: 1px solid var(--primary-light-color);
2829
2842
  border-width: 0 0 1px 0;
2830
2843
  padding: 1rem 1rem;
2831
2844
  font-weight: 700;
@@ -2834,11 +2847,11 @@
2834
2847
  .p-datatable .p-datatable-thead>tr>th {
2835
2848
  text-align: left;
2836
2849
  padding: 0.954rem 1rem;
2837
- border: 1px solid #424b57;
2850
+ border: 1px solid var(--primary-light-color);
2838
2851
  border-width: 1px 0 1px 0;
2839
2852
  font-weight: 600;
2840
- color: rgba(255, 255, 255, 0.87);
2841
- background: #1f2937;
2853
+ color: #FFFFFF;
2854
+ background: #18191D;
2842
2855
  transition: box-shadow 0.2s;
2843
2856
  }
2844
2857
 
@@ -2850,17 +2863,17 @@
2850
2863
  transform: translateY(-50%);
2851
2864
  height: 60%;
2852
2865
  width: 0.0625rem;
2853
- background-color: #424b57;
2866
+ background-color: var(--primary-light-color);
2854
2867
  }
2855
2868
 
2856
2869
  .p-datatable .p-datatable-tfoot>tr>td {
2857
2870
  text-align: left;
2858
2871
  padding: 1rem 1rem;
2859
- border: 1px solid #424b57;
2872
+ border: 1px solid var(--primary-light-color);
2860
2873
  border-width: 0 0 1px 0;
2861
2874
  font-weight: 700;
2862
- color: rgba(255, 255, 255, 0.87);
2863
- background: #1f2937;
2875
+ color: #FFFFFF;
2876
+ background: #18191D;
2864
2877
  }
2865
2878
 
2866
2879
  .p-datatable .p-sortable-column .p-sortable-column-icon {
@@ -2873,36 +2886,36 @@
2873
2886
  height: 1.143rem;
2874
2887
  min-width: 1.143rem;
2875
2888
  line-height: 1.143rem;
2876
- color: rgba(255, 255, 255, 0.87);
2877
- background: rgba(34, 211, 238, 0.16);
2889
+ color: #FFFFFF;
2890
+ background: rgba(140, 100, 255, 0.18);
2878
2891
  margin-left: 0.5rem;
2879
2892
  }
2880
2893
 
2881
2894
  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
2882
2895
  background: rgba(255, 255, 255, 0.03);
2883
- color: rgba(255, 255, 255, 0.87);
2896
+ color: #FFFFFF;
2884
2897
  }
2885
2898
 
2886
2899
  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
2887
- color: rgba(255, 255, 255, 0.87);
2900
+ color: #FFFFFF;
2888
2901
  }
2889
2902
 
2890
2903
  .p-datatable .p-sortable-column.p-highlight {
2891
- background: rgba(34, 211, 238, 0.16);
2892
- color: rgba(255, 255, 255, 0.87);
2904
+ background: rgba(140, 100, 255, 0.18);
2905
+ color: #FFFFFF;
2893
2906
  }
2894
2907
 
2895
2908
  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
2896
- color: rgba(255, 255, 255, 0.87);
2909
+ color: #FFFFFF;
2897
2910
  }
2898
2911
 
2899
2912
  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
2900
- background: rgba(34, 211, 238, 0.16);
2901
- color: rgba(255, 255, 255, 0.87);
2913
+ background: rgba(140, 100, 255, 0.18);
2914
+ color: #FFFFFF;
2902
2915
  }
2903
2916
 
2904
2917
  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
2905
- color: rgba(255, 255, 255, 0.87);
2918
+ color: #FFFFFF;
2906
2919
  }
2907
2920
 
2908
2921
  .p-datatable .p-sortable-column:focus-visible {
@@ -2911,15 +2924,15 @@
2911
2924
  }
2912
2925
 
2913
2926
  .p-datatable .p-datatable-tbody>tr {
2914
- background: #1f2937;
2915
- color: rgba(255, 255, 255, 0.87);
2927
+ background: #18191D;
2928
+ color: #FFFFFF;
2916
2929
  transition: box-shadow 0.2s;
2917
2930
  cursor: pointer;
2918
2931
  }
2919
2932
 
2920
2933
  .p-datatable .p-datatable-tbody>tr>td {
2921
2934
  text-align: left;
2922
- border: 1px solid #424b57;
2935
+ border: 1px solid var(--primary-light-color);
2923
2936
  border-width: 0 0 1px 0;
2924
2937
  padding: 0.572rem 1rem;
2925
2938
  }
@@ -2941,7 +2954,7 @@
2941
2954
  .p-datatable .p-datatable-tbody>tr>td .p-row-editor-init:enabled:hover,
2942
2955
  .p-datatable .p-datatable-tbody>tr>td .p-row-editor-save:enabled:hover,
2943
2956
  .p-datatable .p-datatable-tbody>tr>td .p-row-editor-cancel:enabled:hover {
2944
- color: rgba(255, 255, 255, 0.87);
2957
+ color: #FFFFFF;
2945
2958
  border-color: transparent;
2946
2959
  background: rgba(255, 255, 255, 0.03);
2947
2960
  }
@@ -2956,13 +2969,13 @@
2956
2969
  }
2957
2970
 
2958
2971
  .p-datatable .p-datatable-tbody>tr>td.p-highlight {
2959
- background: rgba(34, 211, 238, 0.16);
2960
- color: rgba(255, 255, 255, 0.87);
2972
+ background: rgba(140, 100, 255, 0.18);
2973
+ color: #FFFFFF;
2961
2974
  }
2962
2975
 
2963
2976
  .p-datatable .p-datatable-tbody>tr.p-highlight {
2964
- background: rgba(34, 211, 238, 0.16);
2965
- color: rgba(255, 255, 255, 0.87);
2977
+ background: rgba(140, 100, 255, 0.18);
2978
+ color: #FFFFFF;
2966
2979
  }
2967
2980
 
2968
2981
  .p-datatable .p-datatable-tbody>tr.p-highlight-contextmenu {
@@ -2971,16 +2984,16 @@
2971
2984
  }
2972
2985
 
2973
2986
  .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td {
2974
- box-shadow: inset 0 2px 0 0 rgba(34, 211, 238, 0.16);
2987
+ box-shadow: inset 0 2px 0 0 rgba(140, 100, 255, 0.18);
2975
2988
  }
2976
2989
 
2977
2990
  .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td {
2978
- box-shadow: inset 0 -2px 0 0 rgba(34, 211, 238, 0.16);
2991
+ box-shadow: inset 0 -2px 0 0 rgba(140, 100, 255, 0.18);
2979
2992
  }
2980
2993
 
2981
2994
  .p-datatable.p-datatable-selectable .p-datatable-tbody>tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
2982
2995
  background: rgba(255, 255, 255, 0.03);
2983
- color: rgba(255, 255, 255, 0.87);
2996
+ color: #FFFFFF;
2984
2997
  }
2985
2998
 
2986
2999
  .p-datatable.p-datatable-selectable .p-datatable-tbody>tr.p-selectable-row:focus-visible {
@@ -2990,7 +3003,7 @@
2990
3003
 
2991
3004
  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody>tr.p-selectable-row>td.p-selectable-cell:not(.p-highlight):hover {
2992
3005
  background: rgba(255, 255, 255, 0.03);
2993
- color: rgba(255, 255, 255, 0.87);
3006
+ color: #FFFFFF;
2994
3007
  }
2995
3008
 
2996
3009
  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody>tr.p-selectable-row>td.p-selectable-cell:focus-visible {
@@ -3000,7 +3013,7 @@
3000
3013
 
3001
3014
  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody>tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
3002
3015
  background: rgba(255, 255, 255, 0.03);
3003
- color: rgba(255, 255, 255, 0.87);
3016
+ color: #FFFFFF;
3004
3017
  }
3005
3018
 
3006
3019
  .p-datatable .p-column-resizer-helper {
@@ -3009,14 +3022,14 @@
3009
3022
 
3010
3023
  .p-datatable .p-datatable-scrollable-header,
3011
3024
  .p-datatable .p-datatable-scrollable-footer {
3012
- background: #1f2937;
3025
+ background: #18191D;
3013
3026
  }
3014
3027
 
3015
3028
  .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,
3016
3029
  .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,
3017
3030
  .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-virtualscroller>.p-datatable-table>.p-datatable-thead,
3018
3031
  .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-virtualscroller>.p-datatable-table>.p-datatable-tfoot {
3019
- background-color: #1f2937;
3032
+ background-color: #18191D;
3020
3033
  }
3021
3034
 
3022
3035
  .p-datatable.p-datatable-striped .p-datatable-tbody>tr.p-row-odd {
@@ -3024,16 +3037,16 @@
3024
3037
  }
3025
3038
 
3026
3039
  .p-datatable.p-datatable-striped .p-datatable-tbody>tr.p-row-odd.p-highlight {
3027
- background: rgba(34, 211, 238, 0.16);
3028
- color: rgba(255, 255, 255, 0.87);
3040
+ background: rgba(140, 100, 255, 0.18);
3041
+ color: #FFFFFF;
3029
3042
  }
3030
3043
 
3031
3044
  .p-datatable.p-datatable-striped .p-datatable-tbody>tr.p-row-odd.p-highlight .p-row-toggler {
3032
- color: rgba(255, 255, 255, 0.87);
3045
+ color: #FFFFFF;
3033
3046
  }
3034
3047
 
3035
3048
  .p-datatable.p-datatable-striped .p-datatable-tbody>tr.p-row-odd.p-highlight .p-row-toggler:hover {
3036
- color: rgba(255, 255, 255, 0.87);
3049
+ color: #FFFFFF;
3037
3050
  }
3038
3051
 
3039
3052
  .p-datatable.p-datatable-striped .p-datatable-tbody>tr.p-row-odd+.p-row-expanded {
@@ -3041,29 +3054,29 @@
3041
3054
  }
3042
3055
 
3043
3056
  .p-datatable-drag-selection-helper {
3044
- background: rgba(34, 211, 238, 0.16);
3057
+ background: rgba(140, 100, 255, 0.18);
3045
3058
  }
3046
3059
 
3047
3060
  .p-dataview .p-dataview-header {
3048
- background: #1f2937;
3061
+ background: #18191D;
3049
3062
  color: rgba(255, 255, 255, 0.6);
3050
- border: 1px solid #424b57;
3063
+ border: 1px solid var(--primary-light-color);
3051
3064
  border-width: 0 0 1px 0;
3052
3065
  padding: 1rem 1rem;
3053
3066
  font-weight: 700;
3054
3067
  }
3055
3068
 
3056
3069
  .p-dataview .p-dataview-content {
3057
- background: #1f2937;
3058
- color: rgba(255, 255, 255, 0.87);
3070
+ background: #18191D;
3071
+ color: #FFFFFF;
3059
3072
  border: 0 none;
3060
3073
  padding: 0;
3061
3074
  }
3062
3075
 
3063
3076
  .p-dataview .p-dataview-footer {
3064
- background: #1f2937;
3065
- color: rgba(255, 255, 255, 0.87);
3066
- border: 1px solid #424b57;
3077
+ background: #18191D;
3078
+ color: #FFFFFF;
3079
+ border: 1px solid var(--primary-light-color);
3067
3080
  border-width: 0 0 1px 0;
3068
3081
  padding: 1rem 1rem;
3069
3082
  font-weight: 700;
@@ -3072,30 +3085,30 @@
3072
3085
  }
3073
3086
 
3074
3087
  .p-datascroller .p-datascroller-header {
3075
- background: #1f2937;
3088
+ background: #18191D;
3076
3089
  color: rgba(255, 255, 255, 0.6);
3077
- border: 1px solid #424b57;
3090
+ border: 1px solid var(--primary-light-color);
3078
3091
  border-width: 0 0 1px 0;
3079
3092
  padding: 1rem 1rem;
3080
3093
  font-weight: 700;
3081
3094
  }
3082
3095
 
3083
3096
  .p-datascroller .p-datascroller-content {
3084
- background: #1f2937;
3085
- color: rgba(255, 255, 255, 0.87);
3097
+ background: #18191D;
3098
+ color: #FFFFFF;
3086
3099
  border: 0 none;
3087
3100
  padding: 0;
3088
3101
  }
3089
3102
 
3090
3103
  .p-datascroller.p-datascroller-inline .p-datascroller-list>li {
3091
- border: solid #424b57;
3104
+ border: solid var(--primary-light-color);
3092
3105
  border-width: 0 0 1px 0;
3093
3106
  }
3094
3107
 
3095
3108
  .p-datascroller .p-datascroller-footer {
3096
- background: #1f2937;
3097
- color: rgba(255, 255, 255, 0.87);
3098
- border: 1px solid #424b57;
3109
+ background: #18191D;
3110
+ color: #FFFFFF;
3111
+ border: 1px solid var(--primary-light-color);
3099
3112
  border-width: 0 0 1px 0;
3100
3113
  padding: 1rem 1rem;
3101
3114
  font-weight: 700;
@@ -3114,7 +3127,7 @@
3114
3127
  }
3115
3128
 
3116
3129
  .p-column-filter-menu-button:hover {
3117
- color: rgba(255, 255, 255, 0.87);
3130
+ color: #FFFFFF;
3118
3131
  border-color: transparent;
3119
3132
  background: rgba(255, 255, 255, 0.03);
3120
3133
  }
@@ -3122,13 +3135,13 @@
3122
3135
  .p-column-filter-menu-button.p-column-filter-menu-button-open,
3123
3136
  .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
3124
3137
  background: rgba(255, 255, 255, 0.03);
3125
- color: rgba(255, 255, 255, 0.87);
3138
+ color: #FFFFFF;
3126
3139
  }
3127
3140
 
3128
3141
  .p-column-filter-menu-button.p-column-filter-menu-button-active,
3129
3142
  .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
3130
- background: rgba(34, 211, 238, 0.16);
3131
- color: rgba(255, 255, 255, 0.87);
3143
+ background: rgba(140, 100, 255, 0.18);
3144
+ color: #FFFFFF;
3132
3145
  }
3133
3146
 
3134
3147
  .p-column-filter-menu-button:focus-visible {
@@ -3148,7 +3161,7 @@
3148
3161
  }
3149
3162
 
3150
3163
  .p-column-filter-clear-button:hover {
3151
- color: rgba(255, 255, 255, 0.87);
3164
+ color: #FFFFFF;
3152
3165
  border-color: transparent;
3153
3166
  background: rgba(255, 255, 255, 0.03);
3154
3167
  }
@@ -3160,9 +3173,9 @@
3160
3173
  }
3161
3174
 
3162
3175
  .p-column-filter-overlay {
3163
- background: #1f2937;
3164
- color: rgba(255, 255, 255, 0.87);
3165
- border: 1px solid #424b57;
3176
+ background: #18191D;
3177
+ color: #FFFFFF;
3178
+ border: 1px solid var(--primary-light-color);
3166
3179
  border-radius: 6px;
3167
3180
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
3168
3181
  min-width: 12.5rem;
@@ -3172,19 +3185,19 @@
3172
3185
  margin: 0;
3173
3186
  padding: 0.75rem 1.25rem;
3174
3187
  border: 0 none;
3175
- color: rgba(255, 255, 255, 0.87);
3188
+ color: #FFFFFF;
3176
3189
  background: transparent;
3177
3190
  transition: box-shadow 0.2s;
3178
3191
  border-radius: 0;
3179
3192
  }
3180
3193
 
3181
3194
  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
3182
- color: rgba(255, 255, 255, 0.87);
3183
- background: rgba(34, 211, 238, 0.16);
3195
+ color: #FFFFFF;
3196
+ background: rgba(140, 100, 255, 0.18);
3184
3197
  }
3185
3198
 
3186
3199
  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
3187
- color: rgba(255, 255, 255, 0.87);
3200
+ color: #FFFFFF;
3188
3201
  background: rgba(255, 255, 255, 0.03);
3189
3202
  }
3190
3203
 
@@ -3195,15 +3208,15 @@
3195
3208
  }
3196
3209
 
3197
3210
  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
3198
- border-top: 1px solid #424b57;
3211
+ border-top: 1px solid var(--primary-light-color);
3199
3212
  margin: 0.25rem 0;
3200
3213
  }
3201
3214
 
3202
3215
  .p-column-filter-overlay-menu .p-column-filter-operator {
3203
3216
  padding: 0.75rem 1.25rem;
3204
- border-bottom: 1px solid #424b57;
3205
- color: rgba(255, 255, 255, 0.87);
3206
- background: #1f2937;
3217
+ border-bottom: 1px solid var(--primary-light-color);
3218
+ color: #FFFFFF;
3219
+ background: #18191D;
3207
3220
  margin: 0;
3208
3221
  border-top-right-radius: 6px;
3209
3222
  border-top-left-radius: 6px;
@@ -3211,13 +3224,13 @@
3211
3224
 
3212
3225
  .p-column-filter-overlay-menu .p-column-filter-constraint {
3213
3226
  padding: 1.25rem;
3214
- border-bottom: 1px solid #424b57;
3227
+ border-bottom: 1px solid var(--primary-light-color);
3215
3228
  }
3216
3229
 
3217
3230
  .p-orderlist .p-orderlist-header {
3218
- background: #1f2937;
3219
- color: rgba(255, 255, 255, 0.87);
3220
- border: 1px solid #424b57;
3231
+ background: #18191D;
3232
+ color: #FFFFFF;
3233
+ border: 1px solid var(--primary-light-color);
3221
3234
  padding: 1.25rem;
3222
3235
  font-weight: 700;
3223
3236
  border-bottom: 0 none;
@@ -3227,8 +3240,8 @@
3227
3240
 
3228
3241
  .p-orderlist .p-orderlist-filter-container {
3229
3242
  padding: 1.25rem;
3230
- background: #1f2937;
3231
- border: 1px solid #424b57;
3243
+ background: #18191D;
3244
+ border: 1px solid var(--primary-light-color);
3232
3245
  border-bottom: 0 none;
3233
3246
  }
3234
3247
 
@@ -3238,9 +3251,9 @@
3238
3251
  }
3239
3252
 
3240
3253
  .p-orderlist .p-orderlist-list {
3241
- border: 1px solid #424b57;
3242
- background: #1f2937;
3243
- color: rgba(255, 255, 255, 0.87);
3254
+ border: 1px solid var(--primary-light-color);
3255
+ background: #18191D;
3256
+ color: #FFFFFF;
3244
3257
  padding: 0.75rem 0;
3245
3258
  border-bottom-right-radius: 6px;
3246
3259
  border-bottom-left-radius: 6px;
@@ -3251,24 +3264,24 @@
3251
3264
  padding: 0.75rem 1.25rem;
3252
3265
  margin: 0;
3253
3266
  border: 0 none;
3254
- color: rgba(255, 255, 255, 0.87);
3267
+ color: #FFFFFF;
3255
3268
  background: transparent;
3256
3269
  transition: transform 0.2s, box-shadow 0.2s;
3257
3270
  }
3258
3271
 
3259
3272
  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
3260
3273
  background: rgba(255, 255, 255, 0.03);
3261
- color: rgba(255, 255, 255, 0.87);
3274
+ color: #FFFFFF;
3262
3275
  }
3263
3276
 
3264
3277
  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
3265
- color: rgba(255, 255, 255, 0.87);
3266
- background: #424b57;
3278
+ color: #FFFFFF;
3279
+ background: var(--primary-light-color);
3267
3280
  }
3268
3281
 
3269
3282
  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
3270
- color: rgba(255, 255, 255, 0.87);
3271
- background: rgba(34, 211, 238, 0.16);
3283
+ color: #FFFFFF;
3284
+ background: rgba(140, 100, 255, 0.18);
3272
3285
  }
3273
3286
 
3274
3287
  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
@@ -3285,12 +3298,12 @@
3285
3298
 
3286
3299
  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
3287
3300
  background: rgba(255, 255, 255, 0.03);
3288
- color: rgba(255, 255, 255, 0.87);
3301
+ color: #FFFFFF;
3289
3302
  }
3290
3303
 
3291
3304
  .p-organizationchart .p-organizationchart-node-content.p-highlight {
3292
- background: rgba(34, 211, 238, 0.16);
3293
- color: rgba(255, 255, 255, 0.87);
3305
+ background: rgba(140, 100, 255, 0.18);
3306
+ color: #FFFFFF;
3294
3307
  }
3295
3308
 
3296
3309
  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
@@ -3298,23 +3311,23 @@
3298
3311
  }
3299
3312
 
3300
3313
  .p-organizationchart .p-organizationchart-line-down {
3301
- background: #424b57;
3314
+ background: var(--primary-light-color);
3302
3315
  }
3303
3316
 
3304
3317
  .p-organizationchart .p-organizationchart-line-left {
3305
- border-right: 1px solid #424b57;
3306
- border-color: #424b57;
3318
+ border-right: 1px solid var(--primary-light-color);
3319
+ border-color: var(--primary-light-color);
3307
3320
  }
3308
3321
 
3309
3322
  .p-organizationchart .p-organizationchart-line-top {
3310
- border-top: 1px solid #424b57;
3311
- border-color: #424b57;
3323
+ border-top: 1px solid var(--primary-light-color);
3324
+ border-color: var(--primary-light-color);
3312
3325
  }
3313
3326
 
3314
3327
  .p-organizationchart .p-organizationchart-node-content {
3315
- border: 1px solid #424b57;
3316
- background: #1f2937;
3317
- color: rgba(255, 255, 255, 0.87);
3328
+ border: 1px solid var(--primary-light-color);
3329
+ background: #18191D;
3330
+ color: #FFFFFF;
3318
3331
  padding: 1.25rem;
3319
3332
  }
3320
3333
 
@@ -3331,9 +3344,9 @@
3331
3344
  }
3332
3345
 
3333
3346
  .p-paginator {
3334
- background: #1f2937;
3347
+ background: #18191D;
3335
3348
  color: rgba(255, 255, 255, 0.6);
3336
- border: solid #424b57;
3349
+ border: solid var(--primary-light-color);
3337
3350
  border-width: 1px;
3338
3351
  padding: 0.5rem 1rem;
3339
3352
  border-radius: 6px;
@@ -3359,7 +3372,7 @@
3359
3372
  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
3360
3373
  background: rgba(255, 255, 255, 0.03);
3361
3374
  border-color: transparent;
3362
- color: rgba(255, 255, 255, 0.87);
3375
+ color: #FFFFFF;
3363
3376
  }
3364
3377
 
3365
3378
  .p-paginator .p-paginator-current {
@@ -3384,21 +3397,21 @@
3384
3397
  }
3385
3398
 
3386
3399
  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
3387
- background: rgba(34, 211, 238, 0.16);
3388
- border-color: rgba(34, 211, 238, 0.16);
3389
- color: rgba(255, 255, 255, 0.87);
3400
+ background: rgba(140, 100, 255, 0.18);
3401
+ border-color: rgba(140, 100, 255, 0.18);
3402
+ color: #FFFFFF;
3390
3403
  }
3391
3404
 
3392
3405
  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
3393
3406
  background: rgba(255, 255, 255, 0.03);
3394
3407
  border-color: transparent;
3395
- color: rgba(255, 255, 255, 0.87);
3408
+ color: #FFFFFF;
3396
3409
  }
3397
3410
 
3398
3411
  .p-picklist .p-picklist-header {
3399
- background: #1f2937;
3400
- color: rgba(255, 255, 255, 0.87);
3401
- border: 1px solid #424b57;
3412
+ background: #18191D;
3413
+ color: #FFFFFF;
3414
+ border: 1px solid var(--primary-light-color);
3402
3415
  padding: 1.25rem;
3403
3416
  font-weight: 700;
3404
3417
  border-bottom: 0 none;
@@ -3408,8 +3421,8 @@
3408
3421
 
3409
3422
  .p-picklist .p-picklist-filter-container {
3410
3423
  padding: 1.25rem;
3411
- background: #1f2937;
3412
- border: 1px solid #424b57;
3424
+ background: #18191D;
3425
+ border: 1px solid var(--primary-light-color);
3413
3426
  border-bottom: 0 none;
3414
3427
  }
3415
3428
 
@@ -3419,9 +3432,9 @@
3419
3432
  }
3420
3433
 
3421
3434
  .p-picklist .p-picklist-list {
3422
- border: 1px solid #424b57;
3423
- background: #1f2937;
3424
- color: rgba(255, 255, 255, 0.87);
3435
+ border: 1px solid var(--primary-light-color);
3436
+ background: #18191D;
3437
+ color: #FFFFFF;
3425
3438
  padding: 0.75rem 0;
3426
3439
  border-bottom-right-radius: 6px;
3427
3440
  border-bottom-left-radius: 6px;
@@ -3432,24 +3445,24 @@
3432
3445
  padding: 0.75rem 1.25rem;
3433
3446
  margin: 0;
3434
3447
  border: 0 none;
3435
- color: rgba(255, 255, 255, 0.87);
3448
+ color: #FFFFFF;
3436
3449
  background: transparent;
3437
3450
  transition: transform 0.2s, box-shadow 0.2s;
3438
3451
  }
3439
3452
 
3440
3453
  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
3441
3454
  background: rgba(255, 255, 255, 0.03);
3442
- color: rgba(255, 255, 255, 0.87);
3455
+ color: #FFFFFF;
3443
3456
  }
3444
3457
 
3445
3458
  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
3446
- color: rgba(255, 255, 255, 0.87);
3447
- background: #424b57;
3459
+ color: #FFFFFF;
3460
+ background: var(--primary-light-color);
3448
3461
  }
3449
3462
 
3450
3463
  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
3451
- color: rgba(255, 255, 255, 0.87);
3452
- background: rgba(34, 211, 238, 0.16);
3464
+ color: #FFFFFF;
3465
+ background: rgba(140, 100, 255, 0.18);
3453
3466
  }
3454
3467
 
3455
3468
  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
@@ -3457,9 +3470,9 @@
3457
3470
  }
3458
3471
 
3459
3472
  .p-tree {
3460
- border: 1px solid #424b57;
3461
- background: #1f2937;
3462
- color: rgba(255, 255, 255, 0.87);
3473
+ border: 1px solid var(--primary-light-color);
3474
+ background: #18191D;
3475
+ color: #FFFFFF;
3463
3476
  padding: 1.25rem;
3464
3477
  border-radius: 6px;
3465
3478
  }
@@ -3482,7 +3495,7 @@
3482
3495
  }
3483
3496
 
3484
3497
  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
3485
- color: rgba(255, 255, 255, 0.87);
3498
+ color: #FFFFFF;
3486
3499
  border-color: transparent;
3487
3500
  background: rgba(255, 255, 255, 0.03);
3488
3501
  }
@@ -3499,32 +3512,32 @@
3499
3512
  }
3500
3513
 
3501
3514
  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
3502
- color: rgba(255, 255, 255, 0.87);
3515
+ color: #FFFFFF;
3503
3516
  }
3504
3517
 
3505
3518
  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
3506
- background: rgba(34, 211, 238, 0.16);
3507
- color: rgba(255, 255, 255, 0.87);
3519
+ background: rgba(140, 100, 255, 0.18);
3520
+ color: #FFFFFF;
3508
3521
  }
3509
3522
 
3510
3523
  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
3511
3524
  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
3512
- color: rgba(255, 255, 255, 0.87);
3525
+ color: #FFFFFF;
3513
3526
  }
3514
3527
 
3515
3528
  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover,
3516
3529
  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover {
3517
- color: rgba(255, 255, 255, 0.87);
3530
+ color: #FFFFFF;
3518
3531
  }
3519
3532
 
3520
3533
  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
3521
3534
  background: rgba(255, 255, 255, 0.03);
3522
- color: rgba(255, 255, 255, 0.87);
3535
+ color: #FFFFFF;
3523
3536
  }
3524
3537
 
3525
3538
  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
3526
3539
  background: rgba(255, 255, 255, 0.03);
3527
- color: rgba(255, 255, 255, 0.87);
3540
+ color: #FFFFFF;
3528
3541
  }
3529
3542
 
3530
3543
  .p-tree .p-tree-filter-container .p-tree-filter-icon {
@@ -3537,18 +3550,18 @@
3537
3550
  }
3538
3551
 
3539
3552
  .p-treetable .p-treetable-header {
3540
- background: #1f2937;
3553
+ background: #18191D;
3541
3554
  color: rgba(255, 255, 255, 0.6);
3542
- border: 1px solid #424b57;
3555
+ border: 1px solid var(--primary-light-color);
3543
3556
  border-width: 0 0 1px 0;
3544
3557
  padding: 1rem 1rem;
3545
3558
  font-weight: 700;
3546
3559
  }
3547
3560
 
3548
3561
  .p-treetable .p-treetable-footer {
3549
- background: #1f2937;
3550
- color: rgba(255, 255, 255, 0.87);
3551
- border: 1px solid #424b57;
3562
+ background: #18191D;
3563
+ color: #FFFFFF;
3564
+ border: 1px solid var(--primary-light-color);
3552
3565
  border-width: 0 0 1px 0;
3553
3566
  padding: 1rem 1rem;
3554
3567
  font-weight: 700;
@@ -3557,22 +3570,22 @@
3557
3570
  .p-treetable .p-treetable-thead>tr>th {
3558
3571
  text-align: left;
3559
3572
  padding: 1rem 1rem;
3560
- border: 1px solid #424b57;
3573
+ border: 1px solid var(--primary-light-color);
3561
3574
  border-width: 0 0 1px 0;
3562
3575
  font-weight: 700;
3563
- color: rgba(255, 255, 255, 0.87);
3564
- background: #1f2937;
3576
+ color: #FFFFFF;
3577
+ background: #18191D;
3565
3578
  transition: box-shadow 0.2s;
3566
3579
  }
3567
3580
 
3568
3581
  .p-treetable .p-treetable-tfoot>tr>td {
3569
3582
  text-align: left;
3570
3583
  padding: 1rem 1rem;
3571
- border: 1px solid #424b57;
3584
+ border: 1px solid var(--primary-light-color);
3572
3585
  border-width: 0 0 1px 0;
3573
3586
  font-weight: 700;
3574
- color: rgba(255, 255, 255, 0.87);
3575
- background: #1f2937;
3587
+ color: #FFFFFF;
3588
+ background: #18191D;
3576
3589
  }
3577
3590
 
3578
3591
  .p-treetable .p-sortable-column {
@@ -3589,38 +3602,38 @@
3589
3602
  height: 1.143rem;
3590
3603
  min-width: 1.143rem;
3591
3604
  line-height: 1.143rem;
3592
- color: rgba(255, 255, 255, 0.87);
3593
- background: rgba(34, 211, 238, 0.16);
3605
+ color: #FFFFFF;
3606
+ background: rgba(140, 100, 255, 0.18);
3594
3607
  margin-left: 0.5rem;
3595
3608
  }
3596
3609
 
3597
3610
  .p-treetable .p-sortable-column:not(.p-highlight):hover {
3598
3611
  background: rgba(255, 255, 255, 0.03);
3599
- color: rgba(255, 255, 255, 0.87);
3612
+ color: #FFFFFF;
3600
3613
  }
3601
3614
 
3602
3615
  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
3603
- color: rgba(255, 255, 255, 0.87);
3616
+ color: #FFFFFF;
3604
3617
  }
3605
3618
 
3606
3619
  .p-treetable .p-sortable-column.p-highlight {
3607
- background: rgba(34, 211, 238, 0.16);
3608
- color: rgba(255, 255, 255, 0.87);
3620
+ background: rgba(140, 100, 255, 0.18);
3621
+ color: #FFFFFF;
3609
3622
  }
3610
3623
 
3611
3624
  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
3612
- color: rgba(255, 255, 255, 0.87);
3625
+ color: #FFFFFF;
3613
3626
  }
3614
3627
 
3615
3628
  .p-treetable .p-treetable-tbody>tr {
3616
- background: #1f2937;
3617
- color: rgba(255, 255, 255, 0.87);
3629
+ background: #18191D;
3630
+ color: #FFFFFF;
3618
3631
  transition: box-shadow 0.2s;
3619
3632
  }
3620
3633
 
3621
3634
  .p-treetable .p-treetable-tbody>tr>td {
3622
3635
  text-align: left;
3623
- border: 1px solid #424b57;
3636
+ border: 1px solid var(--primary-light-color);
3624
3637
  border-width: 0 0 1px 0;
3625
3638
  padding: 1rem 1rem;
3626
3639
  }
@@ -3636,7 +3649,7 @@
3636
3649
  }
3637
3650
 
3638
3651
  .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover {
3639
- color: rgba(255, 255, 255, 0.87);
3652
+ color: #FFFFFF;
3640
3653
  border-color: transparent;
3641
3654
  background: rgba(255, 255, 255, 0.03);
3642
3655
  }
@@ -3648,7 +3661,7 @@
3648
3661
  }
3649
3662
 
3650
3663
  .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler+.p-checkbox .p-indeterminate .p-checkbox-icon {
3651
- color: rgba(255, 255, 255, 0.87);
3664
+ color: #FFFFFF;
3652
3665
  }
3653
3666
 
3654
3667
  .p-treetable .p-treetable-tbody>tr:focus-visible {
@@ -3657,27 +3670,27 @@
3657
3670
  }
3658
3671
 
3659
3672
  .p-treetable .p-treetable-tbody>tr.p-highlight {
3660
- background: rgba(34, 211, 238, 0.16);
3661
- color: rgba(255, 255, 255, 0.87);
3673
+ background: rgba(140, 100, 255, 0.18);
3674
+ color: #FFFFFF;
3662
3675
  }
3663
3676
 
3664
3677
  .p-treetable .p-treetable-tbody>tr.p-highlight .p-treetable-toggler {
3665
- color: rgba(255, 255, 255, 0.87);
3678
+ color: #FFFFFF;
3666
3679
  }
3667
3680
 
3668
3681
  .p-treetable .p-treetable-tbody>tr.p-highlight .p-treetable-toggler:hover {
3669
- color: rgba(255, 255, 255, 0.87);
3682
+ color: #FFFFFF;
3670
3683
  }
3671
3684
 
3672
3685
  .p-treetable.p-treetable-selectable .p-treetable-tbody>tr:not(.p-highlight):hover,
3673
3686
  .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover {
3674
3687
  background: rgba(255, 255, 255, 0.03);
3675
- color: rgba(255, 255, 255, 0.87);
3688
+ color: #FFFFFF;
3676
3689
  }
3677
3690
 
3678
3691
  .p-treetable.p-treetable-selectable .p-treetable-tbody>tr:not(.p-highlight):hover .p-treetable-toggler,
3679
3692
  .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover .p-treetable-toggler {
3680
- color: rgba(255, 255, 255, 0.87);
3693
+ color: #FFFFFF;
3681
3694
  }
3682
3695
 
3683
3696
  .p-treetable .p-column-resizer-helper {
@@ -3686,7 +3699,7 @@
3686
3699
 
3687
3700
  .p-treetable .p-treetable-scrollable-header,
3688
3701
  .p-treetable .p-treetable-scrollable-footer {
3689
- background: #1f2937;
3702
+ background: #18191D;
3690
3703
  }
3691
3704
 
3692
3705
  .p-treetable.p-treetable-striped .p-treetable-tbody>tr.p-row-odd {
@@ -3694,16 +3707,16 @@
3694
3707
  }
3695
3708
 
3696
3709
  .p-treetable.p-treetable-striped .p-treetable-tbody>tr.p-row-odd.p-highlight {
3697
- background: rgba(34, 211, 238, 0.16);
3698
- color: rgba(255, 255, 255, 0.87);
3710
+ background: rgba(140, 100, 255, 0.18);
3711
+ color: #FFFFFF;
3699
3712
  }
3700
3713
 
3701
3714
  .p-treetable.p-treetable-striped .p-treetable-tbody>tr.p-row-odd.p-highlight .p-row-toggler {
3702
- color: rgba(255, 255, 255, 0.87);
3715
+ color: #FFFFFF;
3703
3716
  }
3704
3717
 
3705
3718
  .p-treetable.p-treetable-striped .p-treetable-tbody>tr.p-row-odd.p-highlight .p-row-toggler:hover {
3706
- color: rgba(255, 255, 255, 0.87);
3719
+ color: #FFFFFF;
3707
3720
  }
3708
3721
 
3709
3722
  .p-treetable.p-treetable-striped .p-treetable-tbody>tr.p-row-odd+.p-row-expanded {
@@ -3719,14 +3732,14 @@
3719
3732
  }
3720
3733
 
3721
3734
  .p-timeline .p-timeline-event-connector {
3722
- background-color: #424b57;
3735
+ background-color: var(--primary-light-color);
3723
3736
  }
3724
3737
 
3725
3738
  .p-accordion .p-accordion-header .p-accordion-header-link {
3726
3739
  padding: 1.25rem;
3727
- border: 1px solid #424b57;
3728
- color: rgba(255, 255, 255, 0.87);
3729
- background: #1f2937;
3740
+ border: 1px solid var(--primary-light-color);
3741
+ color: #FFFFFF;
3742
+ background: #18191D;
3730
3743
  font-weight: 700;
3731
3744
  border-radius: 6px;
3732
3745
  transition: box-shadow 0.2s;
@@ -3740,29 +3753,29 @@
3740
3753
 
3741
3754
  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
3742
3755
  background: rgba(255, 255, 255, 0.03);
3743
- border-color: #424b57;
3744
- color: rgba(255, 255, 255, 0.87);
3756
+ border-color: var(--primary-light-color);
3757
+ color: #FFFFFF;
3745
3758
  }
3746
3759
 
3747
3760
  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
3748
- background: #1f2937;
3749
- border-color: #424b57;
3750
- color: rgba(255, 255, 255, 0.87);
3761
+ background: #18191D;
3762
+ border-color: var(--primary-light-color);
3763
+ color: #FFFFFF;
3751
3764
  border-bottom-right-radius: 0;
3752
3765
  border-bottom-left-radius: 0;
3753
3766
  }
3754
3767
 
3755
3768
  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
3756
- border-color: #424b57;
3769
+ border-color: var(--primary-light-color);
3757
3770
  background: rgba(255, 255, 255, 0.03);
3758
- color: rgba(255, 255, 255, 0.87);
3771
+ color: #FFFFFF;
3759
3772
  }
3760
3773
 
3761
3774
  .p-accordion .p-accordion-content {
3762
3775
  padding: 1.25rem;
3763
- border: 1px solid #424b57;
3764
- background: #1f2937;
3765
- color: rgba(255, 255, 255, 0.87);
3776
+ border: 1px solid var(--primary-light-color);
3777
+ background: #18191D;
3778
+ color: #FFFFFF;
3766
3779
  border-top: 0;
3767
3780
  border-top-right-radius: 0;
3768
3781
  border-top-left-radius: 0;
@@ -3771,8 +3784,8 @@
3771
3784
  }
3772
3785
 
3773
3786
  .p-card {
3774
- background: #1f2937;
3775
- color: rgba(255, 255, 255, 0.87);
3787
+ background: #18191D;
3788
+ color: #FFFFFF;
3776
3789
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
3777
3790
  border-radius: 6px;
3778
3791
  }
@@ -3784,24 +3797,24 @@
3784
3797
  }
3785
3798
 
3786
3799
  .p-fieldset {
3787
- border: 1px solid #424b57;
3788
- background: #1f2937;
3789
- color: rgba(255, 255, 255, 0.87);
3800
+ border: 1px solid var(--primary-light-color);
3801
+ background: #18191D;
3802
+ color: #FFFFFF;
3790
3803
  border-radius: 6px;
3791
3804
  }
3792
3805
 
3793
3806
  .p-fieldset .p-fieldset-legend {
3794
3807
  padding: 1.25rem;
3795
- border: 1px solid #424b57;
3796
- color: rgba(255, 255, 255, 0.87);
3797
- background: #1f2937;
3808
+ border: 1px solid var(--primary-light-color);
3809
+ color: #FFFFFF;
3810
+ background: #18191D;
3798
3811
  font-weight: 700;
3799
3812
  border-radius: 6px;
3800
3813
  }
3801
3814
 
3802
3815
  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
3803
3816
  padding: 1.25rem;
3804
- color: rgba(255, 255, 255, 0.87);
3817
+ color: #FFFFFF;
3805
3818
  border-radius: 6px;
3806
3819
  transition: box-shadow 0.2s;
3807
3820
  }
@@ -3814,8 +3827,8 @@
3814
3827
 
3815
3828
  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
3816
3829
  background: rgba(255, 255, 255, 0.03);
3817
- border-color: #424b57;
3818
- color: rgba(255, 255, 255, 0.87);
3830
+ border-color: var(--primary-light-color);
3831
+ color: #FFFFFF;
3819
3832
  }
3820
3833
 
3821
3834
  .p-divider .p-divider-content {
@@ -3827,14 +3840,14 @@
3827
3840
  }
3828
3841
 
3829
3842
  .p-divider.p-divider-vertical:before {
3830
- border-left: 1px #424b57;
3843
+ border-left: 1px var(--primary-light-color);
3831
3844
  }
3832
3845
 
3833
3846
  .p-panel .p-panel-header {
3834
- border: 1px solid #424b57;
3847
+ border: 1px solid var(--primary-light-color);
3835
3848
  padding: 1.25rem;
3836
- background: #1f2937;
3837
- color: rgba(255, 255, 255, 0.87);
3849
+ background: #18191D;
3850
+ color: #FFFFFF;
3838
3851
  border-top-right-radius: 6px;
3839
3852
  border-top-left-radius: 6px;
3840
3853
  }
@@ -3850,7 +3863,7 @@
3850
3863
  }
3851
3864
 
3852
3865
  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
3853
- color: rgba(255, 255, 255, 0.87);
3866
+ color: #FFFFFF;
3854
3867
  border-color: transparent;
3855
3868
  background: rgba(255, 255, 255, 0.03);
3856
3869
  }
@@ -3863,9 +3876,9 @@
3863
3876
 
3864
3877
  .p-panel .p-panel-content {
3865
3878
  padding: 1.25rem;
3866
- border: 1px solid #424b57;
3867
- background: #1f2937;
3868
- color: rgba(255, 255, 255, 0.87);
3879
+ border: 1px solid var(--primary-light-color);
3880
+ background: #18191D;
3881
+ color: #FFFFFF;
3869
3882
  border-bottom-right-radius: 6px;
3870
3883
  border-bottom-left-radius: 6px;
3871
3884
  border-top: 0 none;
@@ -3873,17 +3886,17 @@
3873
3886
 
3874
3887
  .p-panel .p-panel-footer {
3875
3888
  padding: 0.75rem 1.25rem;
3876
- border: 1px solid #424b57;
3877
- background: #1f2937;
3878
- color: rgba(255, 255, 255, 0.87);
3889
+ border: 1px solid var(--primary-light-color);
3890
+ background: #18191D;
3891
+ color: #FFFFFF;
3879
3892
  border-top: 0 none;
3880
3893
  }
3881
3894
 
3882
3895
  .p-splitter {
3883
- border: 1px solid #424b57;
3884
- background: #1f2937;
3896
+ border: 1px solid var(--primary-light-color);
3897
+ background: #18191D;
3885
3898
  border-radius: 6px;
3886
- color: rgba(255, 255, 255, 0.87);
3899
+ color: #FFFFFF;
3887
3900
  }
3888
3901
 
3889
3902
  .p-splitter .p-splitter-gutter {
@@ -3892,7 +3905,7 @@
3892
3905
  }
3893
3906
 
3894
3907
  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
3895
- background: #424b57;
3908
+ background: var(--primary-light-color);
3896
3909
  }
3897
3910
 
3898
3911
  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
@@ -3902,11 +3915,11 @@
3902
3915
  }
3903
3916
 
3904
3917
  .p-splitter .p-splitter-gutter-resizing {
3905
- background: #424b57;
3918
+ background: var(--primary-light-color);
3906
3919
  }
3907
3920
 
3908
3921
  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
3909
- color: rgba(255, 255, 255, 0.87);
3922
+ color: #FFFFFF;
3910
3923
  border: 0 none;
3911
3924
  border-width: 2px;
3912
3925
  background: transparent;
@@ -3932,12 +3945,12 @@
3932
3945
  }
3933
3946
 
3934
3947
  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
3935
- background: rgba(34, 211, 238, 0.16);
3936
- color: rgba(255, 255, 255, 0.87);
3948
+ background: rgba(140, 100, 255, 0.18);
3949
+ color: #FFFFFF;
3937
3950
  }
3938
3951
 
3939
3952
  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
3940
- color: rgba(255, 255, 255, 0.87);
3953
+ color: #FFFFFF;
3941
3954
  }
3942
3955
 
3943
3956
  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
@@ -3951,13 +3964,13 @@
3951
3964
  }
3952
3965
 
3953
3966
  .p-stepper .p-stepper-panels {
3954
- background: #1f2937;
3967
+ background: #18191D;
3955
3968
  padding: 1.25rem;
3956
- color: rgba(255, 255, 255, 0.87);
3969
+ color: #FFFFFF;
3957
3970
  }
3958
3971
 
3959
3972
  .p-stepper .p-stepper-separator {
3960
- background-color: #424b57;
3973
+ background-color: var(--primary-light-color);
3961
3974
  width: 100%;
3962
3975
  height: 2px;
3963
3976
  margin-inline-start: 1rem;
@@ -3967,8 +3980,8 @@
3967
3980
  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
3968
3981
  display: flex;
3969
3982
  flex: 1 1 auto;
3970
- background: #1f2937;
3971
- color: rgba(255, 255, 255, 0.87);
3983
+ background: #18191D;
3984
+ color: #FFFFFF;
3972
3985
  }
3973
3986
 
3974
3987
  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
@@ -3976,7 +3989,7 @@
3976
3989
  }
3977
3990
 
3978
3991
  .p-scrollpanel .p-scrollpanel-bar {
3979
- background: #424b57;
3992
+ background: var(--primary-light-color);
3980
3993
  border: 0 none;
3981
3994
  }
3982
3995
 
@@ -3988,15 +4001,15 @@
3988
4001
 
3989
4002
  .p-tabview .p-tabview-nav {
3990
4003
  background: transparent;
3991
- border: 1px solid #424b57;
4004
+ border: 1px solid var(--primary-light-color);
3992
4005
  border-width: 0 0 2px 0;
3993
4006
  }
3994
4007
 
3995
4008
  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
3996
- border: solid #424b57;
4009
+ border: solid var(--primary-light-color);
3997
4010
  border-width: 0 0 2px 0;
3998
- border-color: transparent transparent #424b57 transparent;
3999
- /* background: #1f2937; */
4011
+ border-color: transparent transparent rgba(216, 226, 234, 0.08) transparent;
4012
+ /* background: #18191D; */
4000
4013
  color: rgba(255, 255, 255, 0.6);
4001
4014
  padding: 1.25rem;
4002
4015
  font-weight: 400;
@@ -4013,19 +4026,19 @@
4013
4026
  }
4014
4027
 
4015
4028
  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
4016
- /* background: #1f2937; */
4029
+ /* background: #18191D; */
4017
4030
  border-color: #9B5AED;
4018
- color: rgba(255, 255, 255, 0.87);
4031
+ color: #FFFFFF;
4019
4032
  }
4020
4033
 
4021
4034
  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
4022
- /* background: #1f2937; */
4035
+ /* background: #18191D; */
4023
4036
  border-color: #9B5AED;
4024
4037
  color: #9B5AED;
4025
4038
  }
4026
4039
 
4027
4040
  .p-tabview .p-tabview-nav-btn.p-link {
4028
- /* background: #1f2937; */
4041
+ /* background: #18191D; */
4029
4042
  color: #9B5AED;
4030
4043
  width: 3rem;
4031
4044
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
@@ -4039,26 +4052,26 @@
4039
4052
  }
4040
4053
 
4041
4054
  .p-tabview .p-tabview-panels {
4042
- /* background: #1f2937; */
4055
+ /* background: #18191D; */
4043
4056
  padding: 1.25rem;
4044
4057
  border: 0 none;
4045
- color: rgba(255, 255, 255, 0.87);
4058
+ color: #FFFFFF;
4046
4059
  border-bottom-right-radius: 6px;
4047
4060
  border-bottom-left-radius: 6px;
4048
4061
  }
4049
4062
 
4050
4063
  .p-toolbar {
4051
- background: #1f2937;
4052
- border: 1px solid #424b57;
4064
+ background: #18191D;
4065
+ border: 1px solid var(--primary-light-color);
4053
4066
  padding: 1.25rem;
4054
4067
  border-radius: 6px;
4055
4068
  gap: 0.5rem;
4056
4069
  }
4057
4070
 
4058
4071
  .p-confirm-popup {
4059
- background: #1f2937;
4060
- color: rgba(255, 255, 255, 0.87);
4061
- border: 1px solid #424b57;
4072
+ background: #18191D;
4073
+ color: #FFFFFF;
4074
+ border: 1px solid var(--primary-light-color);
4062
4075
  border-radius: 6px;
4063
4076
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
4064
4077
  }
@@ -4066,7 +4079,7 @@
4066
4079
  .p-confirm-popup:after {
4067
4080
  border: solid transparent;
4068
4081
  border-color: rgba(31, 41, 55, 0);
4069
- border-bottom-color: #1f2937;
4082
+ border-bottom-color: #18191D;
4070
4083
  }
4071
4084
 
4072
4085
  .p-confirm-popup:before {
@@ -4076,23 +4089,23 @@
4076
4089
  }
4077
4090
 
4078
4091
  .p-confirm-popup.p-confirm-popup-flipped:after {
4079
- border-top-color: #1f2937;
4092
+ border-top-color: #18191D;
4080
4093
  }
4081
4094
 
4082
4095
  .p-confirm-popup.p-confirm-popup-flipped:before {
4083
- border-top-color: #424b57;
4096
+ border-top-color: var(--primary-light-color);
4084
4097
  }
4085
4098
 
4086
4099
  .p-dialog {
4087
4100
  border-radius: 6px;
4088
4101
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
4089
- border: 1px solid #424b57;
4102
+ border: 1px solid var(--primary-light-color);
4090
4103
  }
4091
4104
 
4092
4105
  .p-dialog .p-dialog-header {
4093
4106
  border-bottom: 0 none;
4094
- background: #1f2937;
4095
- color: rgba(255, 255, 255, 0.87);
4107
+ background: #18191D;
4108
+ color: #FFFFFF;
4096
4109
  padding: 1.5rem;
4097
4110
  border-top-right-radius: 6px;
4098
4111
  border-top-left-radius: 6px;
@@ -4109,7 +4122,7 @@
4109
4122
  }
4110
4123
 
4111
4124
  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
4112
- color: rgba(255, 255, 255, 0.87);
4125
+ color: #FFFFFF;
4113
4126
  border-color: transparent;
4114
4127
  background: rgba(255, 255, 255, 0.03);
4115
4128
  }
@@ -4121,15 +4134,15 @@
4121
4134
  }
4122
4135
 
4123
4136
  .p-dialog .p-dialog-content {
4124
- background: #1f2937;
4125
- color: rgba(255, 255, 255, 0.87);
4126
- /* padding: 0 1.5rem 2rem 1.5rem; */
4137
+ background: #18191D;
4138
+ color: #FFFFFF;
4139
+ padding: 0 1.5rem 2rem 1.5rem;
4127
4140
  }
4128
4141
 
4129
4142
  .p-dialog .p-dialog-footer {
4130
4143
  border-top: 0 none;
4131
- background: #1f2937;
4132
- color: rgba(255, 255, 255, 0.87);
4144
+ background: #18191D;
4145
+ color: #FFFFFF;
4133
4146
  padding: 0 1.5rem 1.5rem 1.5rem;
4134
4147
  text-align: right;
4135
4148
  border-bottom-right-radius: 6px;
@@ -4137,9 +4150,9 @@
4137
4150
  }
4138
4151
 
4139
4152
  .p-overlaypanel {
4140
- background: #1f2937;
4141
- color: rgba(255, 255, 255, 0.87);
4142
- border: 1px solid #424b57;
4153
+ background: #18191D;
4154
+ color: #FFFFFF;
4155
+ border: 1px solid var(--primary-light-color);
4143
4156
  border-radius: 0.5rem;
4144
4157
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
4145
4158
  }
@@ -4164,7 +4177,7 @@
4164
4177
  /* .p-overlaypanel:after {
4165
4178
  border: solid transparent;
4166
4179
  border-color: rgba(31, 41, 55, 0);
4167
- border-bottom-color: #1f2937;
4180
+ border-bottom-color: #18191D;
4168
4181
  }
4169
4182
 
4170
4183
  .p-overlaypanel:before {
@@ -4174,17 +4187,17 @@
4174
4187
  } */
4175
4188
 
4176
4189
  .p-overlaypanel.p-overlaypanel-flipped:after {
4177
- border-top-color: #1f2937;
4190
+ border-top-color: #18191D;
4178
4191
  }
4179
4192
 
4180
4193
  .p-overlaypanel.p-overlaypanel-flipped:before {
4181
- border-top-color: #424b57;
4194
+ border-top-color: var(--primary-light-color);
4182
4195
  }
4183
4196
 
4184
4197
  .p-sidebar {
4185
- background: #1f2937;
4186
- color: rgba(255, 255, 255, 0.87);
4187
- border: 1px solid #424b57;
4198
+ background: #18191D;
4199
+ color: #FFFFFF;
4200
+ border: 1px solid var(--primary-light-color);
4188
4201
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
4189
4202
  }
4190
4203
 
@@ -4201,7 +4214,7 @@
4201
4214
 
4202
4215
  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
4203
4216
  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
4204
- color: rgba(255, 255, 255, 0.87);
4217
+ color: #FFFFFF;
4205
4218
  border-color: transparent;
4206
4219
  background: rgba(255, 255, 255, 0.03);
4207
4220
  }
@@ -4214,34 +4227,34 @@
4214
4227
  }
4215
4228
 
4216
4229
  .p-tooltip .p-tooltip-text {
4217
- background: #424b57;
4218
- color: rgba(255, 255, 255, 0.87);
4230
+ background: var(--primary-light-color);
4231
+ color: #FFFFFF;
4219
4232
  padding: 0.75rem 0.75rem;
4220
4233
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
4221
4234
  border-radius: 6px;
4222
4235
  }
4223
4236
 
4224
4237
  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
4225
- border-right-color: #424b57;
4238
+ border-right-color: var(--primary-light-color);
4226
4239
  }
4227
4240
 
4228
4241
  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
4229
- border-left-color: #424b57;
4242
+ border-left-color: var(--primary-light-color);
4230
4243
  }
4231
4244
 
4232
4245
  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
4233
- border-top-color: #424b57;
4246
+ border-top-color: var(--primary-light-color);
4234
4247
  }
4235
4248
 
4236
4249
  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
4237
- border-bottom-color: #424b57;
4250
+ border-bottom-color: var(--primary-light-color);
4238
4251
  }
4239
4252
 
4240
4253
  .p-fileupload .p-fileupload-buttonbar {
4241
- background: #1f2937;
4254
+ background: #18191D;
4242
4255
  padding: 1.25rem;
4243
- border: 1px solid #424b57;
4244
- color: rgba(255, 255, 255, 0.87);
4256
+ border: 1px solid var(--primary-light-color);
4257
+ color: #FFFFFF;
4245
4258
  border-bottom: 0 none;
4246
4259
  border-top-right-radius: 6px;
4247
4260
  border-top-left-radius: 6px;
@@ -4249,17 +4262,17 @@
4249
4262
  }
4250
4263
 
4251
4264
  .p-fileupload .p-fileupload-content {
4252
- background: #1f2937;
4265
+ background: #18191D;
4253
4266
  padding: 2rem 1rem;
4254
- border: 1px solid #424b57;
4255
- color: rgba(255, 255, 255, 0.87);
4267
+ border: 1px solid var(--primary-light-color);
4268
+ color: #FFFFFF;
4256
4269
  border-bottom-right-radius: 6px;
4257
4270
  border-bottom-left-radius: 6px;
4258
4271
  }
4259
4272
 
4260
4273
  .p-breadcrumb {
4261
- background: #374151;
4262
- border: 1px solid #424b57;
4274
+ background: var(--surface-a);
4275
+ border: 1px solid var(--primary-light-color);
4263
4276
  border-radius: 6px;
4264
4277
  padding: 1rem;
4265
4278
  }
@@ -4271,7 +4284,7 @@
4271
4284
  }
4272
4285
 
4273
4286
  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
4274
- color: rgba(255, 255, 255, 0.87);
4287
+ color: #FFFFFF;
4275
4288
  }
4276
4289
 
4277
4290
  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
@@ -4280,11 +4293,11 @@
4280
4293
 
4281
4294
  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
4282
4295
  margin: 0 0.5rem 0 0.5rem;
4283
- color: rgba(255, 255, 255, 0.87);
4296
+ color: #FFFFFF;
4284
4297
  }
4285
4298
 
4286
4299
  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
4287
- color: rgba(255, 255, 255, 0.87);
4300
+ color: #FFFFFF;
4288
4301
  }
4289
4302
 
4290
4303
  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
@@ -4294,8 +4307,8 @@
4294
4307
  .p-contextmenu {
4295
4308
  padding: 0.25rem 0;
4296
4309
  background: #374151;
4297
- color: rgba(255, 255, 255, 0.87);
4298
- border: 1px solid #424b57;
4310
+ color: #FFFFFF;
4311
+ border: 1px solid var(--primary-light-color);
4299
4312
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
4300
4313
  border-radius: 6px;
4301
4314
  width: 12.5rem;
@@ -4304,25 +4317,25 @@
4304
4317
  .p-contextmenu .p-submenu-list {
4305
4318
  padding: 0.25rem 0;
4306
4319
  background: #374151;
4307
- border: 1px solid #424b57;
4320
+ border: 1px solid var(--primary-light-color);
4308
4321
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
4309
4322
  border-radius: 6px;
4310
4323
  }
4311
4324
 
4312
4325
  .p-contextmenu .p-menuitem>.p-menuitem-content {
4313
- color: rgba(255, 255, 255, 0.87);
4326
+ color: #FFFFFF;
4314
4327
  transition: box-shadow 0.2s;
4315
4328
  border-radius: 0;
4316
4329
  }
4317
4330
 
4318
4331
  .p-contextmenu .p-menuitem>.p-menuitem-content .p-menuitem-link {
4319
- color: rgba(255, 255, 255, 0.87);
4332
+ color: #FFFFFF;
4320
4333
  padding: 0.75rem 1.25rem;
4321
4334
  user-select: none;
4322
4335
  }
4323
4336
 
4324
4337
  .p-contextmenu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4325
- color: rgba(255, 255, 255, 0.87);
4338
+ color: #FFFFFF;
4326
4339
  }
4327
4340
 
4328
4341
  .p-contextmenu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -4335,17 +4348,17 @@
4335
4348
  }
4336
4349
 
4337
4350
  .p-contextmenu .p-menuitem.p-highlight>.p-menuitem-content {
4338
- color: rgba(255, 255, 255, 0.87);
4339
- background: rgba(34, 211, 238, 0.16);
4351
+ color: #FFFFFF;
4352
+ background: rgba(140, 100, 255, 0.18);
4340
4353
  }
4341
4354
 
4342
4355
  .p-contextmenu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4343
- color: rgba(255, 255, 255, 0.87);
4356
+ color: #FFFFFF;
4344
4357
  }
4345
4358
 
4346
4359
  .p-contextmenu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4347
4360
  .p-contextmenu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4348
- color: rgba(255, 255, 255, 0.87);
4361
+ color: #FFFFFF;
4349
4362
  }
4350
4363
 
4351
4364
  .p-contextmenu .p-menuitem.p-highlight.p-focus>.p-menuitem-content {
@@ -4353,35 +4366,35 @@
4353
4366
  }
4354
4367
 
4355
4368
  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content {
4356
- color: rgba(255, 255, 255, 0.87);
4357
- background: #424b57;
4369
+ color: #FFFFFF;
4370
+ background: var(--primary-light-color);
4358
4371
  }
4359
4372
 
4360
4373
  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4361
- color: rgba(255, 255, 255, 0.87);
4374
+ color: #FFFFFF;
4362
4375
  }
4363
4376
 
4364
4377
  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4365
4378
  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4366
- color: rgba(255, 255, 255, 0.87);
4379
+ color: #FFFFFF;
4367
4380
  }
4368
4381
 
4369
4382
  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
4370
- color: rgba(255, 255, 255, 0.87);
4383
+ color: #FFFFFF;
4371
4384
  background: rgba(255, 255, 255, 0.03);
4372
4385
  }
4373
4386
 
4374
4387
  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
4375
- color: rgba(255, 255, 255, 0.87);
4388
+ color: #FFFFFF;
4376
4389
  }
4377
4390
 
4378
4391
  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
4379
4392
  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
4380
- color: rgba(255, 255, 255, 0.87);
4393
+ color: #FFFFFF;
4381
4394
  }
4382
4395
 
4383
4396
  .p-contextmenu .p-menuitem-separator {
4384
- border-top: 1px solid #424b57;
4397
+ border-top: 1px solid var(--primary-light-color);
4385
4398
  margin: 0.25rem 0;
4386
4399
  }
4387
4400
 
@@ -4401,25 +4414,25 @@
4401
4414
  .p-megamenu {
4402
4415
  padding: 0.5rem;
4403
4416
  background: #374151;
4404
- color: rgba(255, 255, 255, 0.87);
4405
- border: 1px solid #424b57;
4417
+ color: #FFFFFF;
4418
+ border: 1px solid var(--primary-light-color);
4406
4419
  border-radius: 6px;
4407
4420
  }
4408
4421
 
4409
4422
  .p-megamenu .p-menuitem>.p-menuitem-content {
4410
- color: rgba(255, 255, 255, 0.87);
4423
+ color: #FFFFFF;
4411
4424
  transition: box-shadow 0.2s;
4412
4425
  border-radius: 0;
4413
4426
  }
4414
4427
 
4415
4428
  .p-megamenu .p-menuitem>.p-menuitem-content .p-menuitem-link {
4416
- color: rgba(255, 255, 255, 0.87);
4429
+ color: #FFFFFF;
4417
4430
  padding: 0.75rem 1.25rem;
4418
4431
  user-select: none;
4419
4432
  }
4420
4433
 
4421
4434
  .p-megamenu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4422
- color: rgba(255, 255, 255, 0.87);
4435
+ color: #FFFFFF;
4423
4436
  }
4424
4437
 
4425
4438
  .p-megamenu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -4432,17 +4445,17 @@
4432
4445
  }
4433
4446
 
4434
4447
  .p-megamenu .p-menuitem.p-highlight>.p-menuitem-content {
4435
- color: rgba(255, 255, 255, 0.87);
4436
- background: rgba(34, 211, 238, 0.16);
4448
+ color: #FFFFFF;
4449
+ background: rgba(140, 100, 255, 0.18);
4437
4450
  }
4438
4451
 
4439
4452
  .p-megamenu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4440
- color: rgba(255, 255, 255, 0.87);
4453
+ color: #FFFFFF;
4441
4454
  }
4442
4455
 
4443
4456
  .p-megamenu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4444
4457
  .p-megamenu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4445
- color: rgba(255, 255, 255, 0.87);
4458
+ color: #FFFFFF;
4446
4459
  }
4447
4460
 
4448
4461
  .p-megamenu .p-menuitem.p-highlight.p-focus>.p-menuitem-content {
@@ -4450,44 +4463,44 @@
4450
4463
  }
4451
4464
 
4452
4465
  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content {
4453
- color: rgba(255, 255, 255, 0.87);
4454
- background: #424b57;
4466
+ color: #FFFFFF;
4467
+ background: var(--primary-light-color);
4455
4468
  }
4456
4469
 
4457
4470
  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4458
- color: rgba(255, 255, 255, 0.87);
4471
+ color: #FFFFFF;
4459
4472
  }
4460
4473
 
4461
4474
  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4462
4475
  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4463
- color: rgba(255, 255, 255, 0.87);
4476
+ color: #FFFFFF;
4464
4477
  }
4465
4478
 
4466
4479
  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
4467
- color: rgba(255, 255, 255, 0.87);
4480
+ color: #FFFFFF;
4468
4481
  background: rgba(255, 255, 255, 0.03);
4469
4482
  }
4470
4483
 
4471
4484
  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
4472
- color: rgba(255, 255, 255, 0.87);
4485
+ color: #FFFFFF;
4473
4486
  }
4474
4487
 
4475
4488
  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
4476
4489
  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
4477
- color: rgba(255, 255, 255, 0.87);
4490
+ color: #FFFFFF;
4478
4491
  }
4479
4492
 
4480
4493
  .p-megamenu .p-megamenu-panel {
4481
4494
  background: #374151;
4482
- color: rgba(255, 255, 255, 0.87);
4483
- border: 1px solid #424b57;
4495
+ color: #FFFFFF;
4496
+ border: 1px solid var(--primary-light-color);
4484
4497
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
4485
4498
  }
4486
4499
 
4487
4500
  .p-megamenu .p-submenu-header {
4488
4501
  margin: 0;
4489
4502
  padding: 0.75rem 1.25rem;
4490
- color: rgba(255, 255, 255, 0.87);
4503
+ color: #FFFFFF;
4491
4504
  background: #374151;
4492
4505
  font-weight: 700;
4493
4506
  border-top-right-radius: 6px;
@@ -4495,7 +4508,7 @@
4495
4508
  }
4496
4509
 
4497
4510
  .p-megamenu .p-submenu-list .p-menuitem-separator {
4498
- border-top: 1px solid #424b57;
4511
+ border-top: 1px solid var(--primary-light-color);
4499
4512
  margin: 0.25rem 0;
4500
4513
  }
4501
4514
 
@@ -4508,7 +4521,7 @@
4508
4521
  }
4509
4522
 
4510
4523
  .p-megamenu .p-megamenu-button:hover {
4511
- color: rgba(255, 255, 255, 0.87);
4524
+ color: #FFFFFF;
4512
4525
  background: rgba(255, 255, 255, 0.03);
4513
4526
  }
4514
4527
 
@@ -4519,13 +4532,13 @@
4519
4532
  }
4520
4533
 
4521
4534
  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list>.p-menuitem>.p-menuitem-content {
4522
- color: rgba(255, 255, 255, 0.87);
4535
+ color: #FFFFFF;
4523
4536
  transition: box-shadow 0.2s;
4524
4537
  border-radius: 6px;
4525
4538
  }
4526
4539
 
4527
4540
  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list>.p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4528
- color: rgba(255, 255, 255, 0.87);
4541
+ color: #FFFFFF;
4529
4542
  }
4530
4543
 
4531
4544
  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list>.p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -4539,45 +4552,45 @@
4539
4552
  }
4540
4553
 
4541
4554
  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list>.p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
4542
- color: rgba(255, 255, 255, 0.87);
4555
+ color: #FFFFFF;
4543
4556
  background: rgba(255, 255, 255, 0.03);
4544
4557
  }
4545
4558
 
4546
4559
  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list>.p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
4547
- color: rgba(255, 255, 255, 0.87);
4560
+ color: #FFFFFF;
4548
4561
  }
4549
4562
 
4550
4563
  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list>.p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
4551
4564
  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list>.p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
4552
- color: rgba(255, 255, 255, 0.87);
4565
+ color: #FFFFFF;
4553
4566
  }
4554
4567
 
4555
4568
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
4556
4569
  padding: 0.25rem 0;
4557
4570
  background: #374151;
4558
- border: 1px solid #424b57;
4571
+ border: 1px solid var(--primary-light-color);
4559
4572
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
4560
4573
  }
4561
4574
 
4562
4575
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
4563
- border-top: 1px solid #424b57;
4576
+ border-top: 1px solid var(--primary-light-color);
4564
4577
  margin: 0.25rem 0;
4565
4578
  }
4566
4579
 
4567
4580
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link>.p-menuitem-content {
4568
- color: rgba(255, 255, 255, 0.87);
4581
+ color: #FFFFFF;
4569
4582
  transition: box-shadow 0.2s;
4570
4583
  border-radius: 0;
4571
4584
  }
4572
4585
 
4573
4586
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link>.p-menuitem-content .p-menuitem-link {
4574
- color: rgba(255, 255, 255, 0.87);
4587
+ color: #FFFFFF;
4575
4588
  padding: 0.75rem 1.25rem;
4576
4589
  user-select: none;
4577
4590
  }
4578
4591
 
4579
4592
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4580
- color: rgba(255, 255, 255, 0.87);
4593
+ color: #FFFFFF;
4581
4594
  }
4582
4595
 
4583
4596
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -4590,17 +4603,17 @@
4590
4603
  }
4591
4604
 
4592
4605
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link.p-highlight>.p-menuitem-content {
4593
- color: rgba(255, 255, 255, 0.87);
4594
- background: rgba(34, 211, 238, 0.16);
4606
+ color: #FFFFFF;
4607
+ background: rgba(140, 100, 255, 0.18);
4595
4608
  }
4596
4609
 
4597
4610
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4598
- color: rgba(255, 255, 255, 0.87);
4611
+ color: #FFFFFF;
4599
4612
  }
4600
4613
 
4601
4614
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4602
4615
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link.p-highlight>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4603
- color: rgba(255, 255, 255, 0.87);
4616
+ color: #FFFFFF;
4604
4617
  }
4605
4618
 
4606
4619
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link.p-highlight.p-focus>.p-menuitem-content {
@@ -4608,56 +4621,56 @@
4608
4621
  }
4609
4622
 
4610
4623
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content {
4611
- color: rgba(255, 255, 255, 0.87);
4612
- background: #424b57;
4624
+ color: #FFFFFF;
4625
+ background: var(--primary-light-color);
4613
4626
  }
4614
4627
 
4615
4628
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4616
- color: rgba(255, 255, 255, 0.87);
4629
+ color: #FFFFFF;
4617
4630
  }
4618
4631
 
4619
4632
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4620
4633
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4621
- color: rgba(255, 255, 255, 0.87);
4634
+ color: #FFFFFF;
4622
4635
  }
4623
4636
 
4624
4637
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
4625
- color: rgba(255, 255, 255, 0.87);
4638
+ color: #FFFFFF;
4626
4639
  background: rgba(255, 255, 255, 0.03);
4627
4640
  }
4628
4641
 
4629
4642
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
4630
- color: rgba(255, 255, 255, 0.87);
4643
+ color: #FFFFFF;
4631
4644
  }
4632
4645
 
4633
4646
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
4634
4647
  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
4635
- color: rgba(255, 255, 255, 0.87);
4648
+ color: #FFFFFF;
4636
4649
  }
4637
4650
 
4638
4651
  .p-menu {
4639
4652
  padding: 0.25rem 0;
4640
4653
  background: #374151;
4641
- color: rgba(255, 255, 255, 0.87);
4642
- border: 1px solid #424b57;
4654
+ color: #FFFFFF;
4655
+ border: 1px solid var(--primary-light-color);
4643
4656
  border-radius: 6px;
4644
4657
  width: 12.5rem;
4645
4658
  }
4646
4659
 
4647
4660
  .p-menu .p-menuitem>.p-menuitem-content {
4648
- color: rgba(255, 255, 255, 0.87);
4661
+ color: #FFFFFF;
4649
4662
  transition: box-shadow 0.2s;
4650
4663
  border-radius: 0;
4651
4664
  }
4652
4665
 
4653
4666
  .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link {
4654
- color: rgba(255, 255, 255, 0.87);
4667
+ color: #FFFFFF;
4655
4668
  padding: 0.75rem 1.25rem;
4656
4669
  user-select: none;
4657
4670
  }
4658
4671
 
4659
4672
  .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4660
- color: rgba(255, 255, 255, 0.87);
4673
+ color: #FFFFFF;
4661
4674
  }
4662
4675
 
4663
4676
  .p-menu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -4670,17 +4683,17 @@
4670
4683
  }
4671
4684
 
4672
4685
  .p-menu .p-menuitem.p-highlight>.p-menuitem-content {
4673
- color: rgba(255, 255, 255, 0.87);
4674
- background: rgba(34, 211, 238, 0.16);
4686
+ color: #FFFFFF;
4687
+ background: rgba(140, 100, 255, 0.18);
4675
4688
  }
4676
4689
 
4677
4690
  .p-menu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4678
- color: rgba(255, 255, 255, 0.87);
4691
+ color: #FFFFFF;
4679
4692
  }
4680
4693
 
4681
4694
  .p-menu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4682
4695
  .p-menu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4683
- color: rgba(255, 255, 255, 0.87);
4696
+ color: #FFFFFF;
4684
4697
  }
4685
4698
 
4686
4699
  .p-menu .p-menuitem.p-highlight.p-focus>.p-menuitem-content {
@@ -4688,43 +4701,43 @@
4688
4701
  }
4689
4702
 
4690
4703
  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content {
4691
- color: rgba(255, 255, 255, 0.87);
4692
- background: #424b57;
4704
+ color: #FFFFFF;
4705
+ background: var(--primary-light-color);
4693
4706
  }
4694
4707
 
4695
4708
  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4696
- color: rgba(255, 255, 255, 0.87);
4709
+ color: #FFFFFF;
4697
4710
  }
4698
4711
 
4699
4712
  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4700
4713
  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4701
- color: rgba(255, 255, 255, 0.87);
4714
+ color: #FFFFFF;
4702
4715
  }
4703
4716
 
4704
4717
  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
4705
- color: rgba(255, 255, 255, 0.87);
4718
+ color: #FFFFFF;
4706
4719
  background: rgba(255, 255, 255, 0.03);
4707
4720
  }
4708
4721
 
4709
4722
  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
4710
- color: rgba(255, 255, 255, 0.87);
4723
+ color: #FFFFFF;
4711
4724
  }
4712
4725
 
4713
4726
  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
4714
4727
  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
4715
- color: rgba(255, 255, 255, 0.87);
4728
+ color: #FFFFFF;
4716
4729
  }
4717
4730
 
4718
4731
  .p-menu.p-menu-overlay {
4719
4732
  background: #374151;
4720
- border: 1px solid #424b57;
4733
+ border: 1px solid var(--primary-light-color);
4721
4734
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
4722
4735
  }
4723
4736
 
4724
4737
  .p-menu .p-submenu-header {
4725
4738
  margin: 0;
4726
4739
  padding: 0.75rem 1.25rem;
4727
- color: rgba(255, 255, 255, 0.87);
4740
+ color: #FFFFFF;
4728
4741
  background: #374151;
4729
4742
  font-weight: 700;
4730
4743
  border-top-right-radius: 0;
@@ -4732,26 +4745,26 @@
4732
4745
  }
4733
4746
 
4734
4747
  .p-menu .p-menu-separator {
4735
- border-top: 1px solid #424b57;
4748
+ border-top: 1px solid var(--primary-light-color);
4736
4749
  margin: 0.25rem 0;
4737
4750
  }
4738
4751
 
4739
4752
  .p-menubar {
4740
4753
  padding: 0.5rem;
4741
4754
  background: #374151;
4742
- color: rgba(255, 255, 255, 0.87);
4743
- border: 1px solid #424b57;
4755
+ color: #FFFFFF;
4756
+ border: 1px solid var(--primary-light-color);
4744
4757
  border-radius: 6px;
4745
4758
  }
4746
4759
 
4747
4760
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-content {
4748
- color: rgba(255, 255, 255, 0.87);
4761
+ color: #FFFFFF;
4749
4762
  transition: box-shadow 0.2s;
4750
4763
  border-radius: 6px;
4751
4764
  }
4752
4765
 
4753
4766
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4754
- color: rgba(255, 255, 255, 0.87);
4767
+ color: #FFFFFF;
4755
4768
  }
4756
4769
 
4757
4770
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -4765,33 +4778,33 @@
4765
4778
  }
4766
4779
 
4767
4780
  .p-menubar .p-menubar-root-list>.p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
4768
- color: rgba(255, 255, 255, 0.87);
4781
+ color: #FFFFFF;
4769
4782
  background: rgba(255, 255, 255, 0.03);
4770
4783
  }
4771
4784
 
4772
4785
  .p-menubar .p-menubar-root-list>.p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
4773
- color: rgba(255, 255, 255, 0.87);
4786
+ color: #FFFFFF;
4774
4787
  }
4775
4788
 
4776
4789
  .p-menubar .p-menubar-root-list>.p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
4777
4790
  .p-menubar .p-menubar-root-list>.p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
4778
- color: rgba(255, 255, 255, 0.87);
4791
+ color: #FFFFFF;
4779
4792
  }
4780
4793
 
4781
4794
  .p-menubar .p-menuitem>.p-menuitem-content {
4782
- color: rgba(255, 255, 255, 0.87);
4795
+ color: #FFFFFF;
4783
4796
  transition: box-shadow 0.2s;
4784
4797
  border-radius: 0;
4785
4798
  }
4786
4799
 
4787
4800
  .p-menubar .p-menuitem>.p-menuitem-content .p-menuitem-link {
4788
- color: rgba(255, 255, 255, 0.87);
4801
+ color: #FFFFFF;
4789
4802
  padding: 0.75rem 1.25rem;
4790
4803
  user-select: none;
4791
4804
  }
4792
4805
 
4793
4806
  .p-menubar .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4794
- color: rgba(255, 255, 255, 0.87);
4807
+ color: #FFFFFF;
4795
4808
  }
4796
4809
 
4797
4810
  .p-menubar .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -4804,17 +4817,17 @@
4804
4817
  }
4805
4818
 
4806
4819
  .p-menubar .p-menuitem.p-highlight>.p-menuitem-content {
4807
- color: rgba(255, 255, 255, 0.87);
4808
- background: rgba(34, 211, 238, 0.16);
4820
+ color: #FFFFFF;
4821
+ background: rgba(140, 100, 255, 0.18);
4809
4822
  }
4810
4823
 
4811
4824
  .p-menubar .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4812
- color: rgba(255, 255, 255, 0.87);
4825
+ color: #FFFFFF;
4813
4826
  }
4814
4827
 
4815
4828
  .p-menubar .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4816
4829
  .p-menubar .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4817
- color: rgba(255, 255, 255, 0.87);
4830
+ color: #FFFFFF;
4818
4831
  }
4819
4832
 
4820
4833
  .p-menubar .p-menuitem.p-highlight.p-focus>.p-menuitem-content {
@@ -4822,43 +4835,43 @@
4822
4835
  }
4823
4836
 
4824
4837
  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content {
4825
- color: rgba(255, 255, 255, 0.87);
4826
- background: #424b57;
4838
+ color: #FFFFFF;
4839
+ background: var(--primary-light-color);
4827
4840
  }
4828
4841
 
4829
4842
  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4830
- color: rgba(255, 255, 255, 0.87);
4843
+ color: #FFFFFF;
4831
4844
  }
4832
4845
 
4833
4846
  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4834
4847
  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4835
- color: rgba(255, 255, 255, 0.87);
4848
+ color: #FFFFFF;
4836
4849
  }
4837
4850
 
4838
4851
  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
4839
- color: rgba(255, 255, 255, 0.87);
4852
+ color: #FFFFFF;
4840
4853
  background: rgba(255, 255, 255, 0.03);
4841
4854
  }
4842
4855
 
4843
4856
  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
4844
- color: rgba(255, 255, 255, 0.87);
4857
+ color: #FFFFFF;
4845
4858
  }
4846
4859
 
4847
4860
  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
4848
4861
  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
4849
- color: rgba(255, 255, 255, 0.87);
4862
+ color: #FFFFFF;
4850
4863
  }
4851
4864
 
4852
4865
  .p-menubar .p-submenu-list {
4853
4866
  padding: 0.25rem 0;
4854
4867
  background: #374151;
4855
- border: 1px solid #424b57;
4868
+ border: 1px solid var(--primary-light-color);
4856
4869
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
4857
4870
  width: 12.5rem;
4858
4871
  }
4859
4872
 
4860
4873
  .p-menubar .p-submenu-list .p-menuitem-separator {
4861
- border-top: 1px solid #424b57;
4874
+ border-top: 1px solid var(--primary-light-color);
4862
4875
  margin: 0.25rem 0;
4863
4876
  }
4864
4877
 
@@ -4871,7 +4884,7 @@
4871
4884
  }
4872
4885
 
4873
4886
  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
4874
- color: rgba(255, 255, 255, 0.87);
4887
+ color: #FFFFFF;
4875
4888
  background: rgba(255, 255, 255, 0.03);
4876
4889
  }
4877
4890
 
@@ -4884,12 +4897,12 @@
4884
4897
  .p-menubar.p-menubar-mobile .p-menubar-root-list {
4885
4898
  padding: 0.25rem 0;
4886
4899
  background: #374151;
4887
- border: 1px solid #424b57;
4900
+ border: 1px solid var(--primary-light-color);
4888
4901
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
4889
4902
  }
4890
4903
 
4891
4904
  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
4892
- border-top: 1px solid #424b57;
4905
+ border-top: 1px solid var(--primary-light-color);
4893
4906
  margin: 0.25rem 0;
4894
4907
  }
4895
4908
 
@@ -4904,7 +4917,7 @@
4904
4917
  }
4905
4918
 
4906
4919
  .p-menubar .p-menubar-button:hover {
4907
- color: rgba(255, 255, 255, 0.87);
4920
+ color: #FFFFFF;
4908
4921
  background: rgba(255, 255, 255, 0.03);
4909
4922
  }
4910
4923
 
@@ -4919,30 +4932,30 @@
4919
4932
  display: none;
4920
4933
  padding: 0.25rem 0;
4921
4934
  background: #374151;
4922
- border: 1px solid #424b57;
4935
+ border: 1px solid var(--primary-light-color);
4923
4936
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
4924
4937
  width: 100%;
4925
4938
  }
4926
4939
 
4927
4940
  .p-menubar .p-menubar-root-list .p-menu-separator {
4928
- border-top: 1px solid #424b57;
4941
+ border-top: 1px solid var(--primary-light-color);
4929
4942
  margin: 0.25rem 0;
4930
4943
  }
4931
4944
 
4932
4945
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link>.p-menuitem-content {
4933
- color: rgba(255, 255, 255, 0.87);
4946
+ color: #FFFFFF;
4934
4947
  transition: box-shadow 0.2s;
4935
4948
  border-radius: 0;
4936
4949
  }
4937
4950
 
4938
4951
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link>.p-menuitem-content .p-menuitem-link {
4939
- color: rgba(255, 255, 255, 0.87);
4952
+ color: #FFFFFF;
4940
4953
  padding: 0.75rem 1.25rem;
4941
4954
  user-select: none;
4942
4955
  }
4943
4956
 
4944
4957
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4945
- color: rgba(255, 255, 255, 0.87);
4958
+ color: #FFFFFF;
4946
4959
  }
4947
4960
 
4948
4961
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -4955,17 +4968,17 @@
4955
4968
  }
4956
4969
 
4957
4970
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link.p-highlight>.p-menuitem-content {
4958
- color: rgba(255, 255, 255, 0.87);
4959
- background: rgba(34, 211, 238, 0.16);
4971
+ color: #FFFFFF;
4972
+ background: rgba(140, 100, 255, 0.18);
4960
4973
  }
4961
4974
 
4962
4975
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4963
- color: rgba(255, 255, 255, 0.87);
4976
+ color: #FFFFFF;
4964
4977
  }
4965
4978
 
4966
4979
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4967
4980
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link.p-highlight>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4968
- color: rgba(255, 255, 255, 0.87);
4981
+ color: #FFFFFF;
4969
4982
  }
4970
4983
 
4971
4984
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link.p-highlight.p-focus>.p-menuitem-content {
@@ -4973,49 +4986,49 @@
4973
4986
  }
4974
4987
 
4975
4988
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content {
4976
- color: rgba(255, 255, 255, 0.87);
4977
- background: #424b57;
4989
+ color: #FFFFFF;
4990
+ background: var(--primary-light-color);
4978
4991
  }
4979
4992
 
4980
4993
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
4981
- color: rgba(255, 255, 255, 0.87);
4994
+ color: #FFFFFF;
4982
4995
  }
4983
4996
 
4984
4997
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
4985
4998
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
4986
- color: rgba(255, 255, 255, 0.87);
4999
+ color: #FFFFFF;
4987
5000
  }
4988
5001
 
4989
5002
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
4990
- color: rgba(255, 255, 255, 0.87);
5003
+ color: #FFFFFF;
4991
5004
  background: rgba(255, 255, 255, 0.03);
4992
5005
  }
4993
5006
 
4994
5007
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
4995
- color: rgba(255, 255, 255, 0.87);
5008
+ color: #FFFFFF;
4996
5009
  }
4997
5010
 
4998
5011
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
4999
5012
  .p-menubar .p-menubar-root-list>.p-menuitem>.p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
5000
- color: rgba(255, 255, 255, 0.87);
5013
+ color: #FFFFFF;
5001
5014
  }
5002
5015
  }
5003
5016
 
5004
5017
  .p-panelmenu-header-content .menuHead:hover {
5005
- background-color: #424b57;
5018
+ background-color: var(--primary-light-color);
5006
5019
  border-radius: 6px;
5007
5020
  }
5008
5021
 
5009
5022
  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
5010
- border: 1px solid #424b57;
5011
- color: rgba(255, 255, 255, 0.87);
5012
- background: #1f2937;
5023
+ border: 1px solid var(--primary-light-color);
5024
+ color: #FFFFFF;
5025
+ background: #18191D;
5013
5026
  border-radius: 6px;
5014
5027
  transition: box-shadow 0.2s;
5015
5028
  }
5016
5029
 
5017
5030
  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
5018
- color: rgba(255, 255, 255, 0.87);
5031
+ color: #FFFFFF;
5019
5032
  padding: 1.25rem;
5020
5033
  font-weight: 700;
5021
5034
  }
@@ -5028,21 +5041,21 @@
5028
5041
 
5029
5042
  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
5030
5043
  background: rgba(255, 255, 255, 0.03);
5031
- border-color: #424b57;
5032
- color: rgba(255, 255, 255, 0.87);
5044
+ border-color: var(--primary-light-color);
5045
+ color: #FFFFFF;
5033
5046
  }
5034
5047
 
5035
5048
  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
5036
- background: #1f2937;
5037
- border-color: #424b57;
5038
- color: rgba(255, 255, 255, 0.87);
5049
+ background: #18191D;
5050
+ border-color: var(--primary-light-color);
5051
+ color: #FFFFFF;
5039
5052
  border-bottom-right-radius: 0;
5040
5053
  border-bottom-left-radius: 0;
5041
5054
  margin-bottom: 0;
5042
5055
  }
5043
5056
 
5044
5057
  .solid-panel-menu .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content:hover {
5045
- background-color: #1f2937;
5058
+ background-color: #18191D;
5046
5059
  }
5047
5060
 
5048
5061
  .p-panelmenu-panel .p-highlight {
@@ -5051,16 +5064,16 @@
5051
5064
  }
5052
5065
 
5053
5066
  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
5054
- border-color: #424b57;
5067
+ border-color: var(--primary-light-color);
5055
5068
  background: rgba(255, 255, 255, 0.03);
5056
- color: rgba(255, 255, 255, 0.87);
5069
+ color: #FFFFFF;
5057
5070
  }
5058
5071
 
5059
5072
  .p-panelmenu .p-panelmenu-content {
5060
5073
  padding: 0.25rem 0;
5061
- border: 1px solid #424b57;
5062
- background: #1f2937;
5063
- color: rgba(255, 255, 255, 0.87);
5074
+ border: 1px solid var(--primary-light-color);
5075
+ background: #18191D;
5076
+ color: #FFFFFF;
5064
5077
  border-top: 0;
5065
5078
  border-top-right-radius: 0;
5066
5079
  border-top-left-radius: 0;
@@ -5069,19 +5082,19 @@
5069
5082
  }
5070
5083
 
5071
5084
  .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content {
5072
- color: rgba(255, 255, 255, 0.87);
5085
+ color: #FFFFFF;
5073
5086
  transition: box-shadow 0.2s;
5074
5087
  border-radius: 0;
5075
5088
  }
5076
5089
 
5077
5090
  .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link {
5078
- color: rgba(255, 255, 255, 0.87);
5091
+ color: #FFFFFF;
5079
5092
  padding: 0.75rem 1.25rem;
5080
5093
  user-select: none;
5081
5094
  }
5082
5095
 
5083
5096
  .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
5084
- color: rgba(255, 255, 255, 0.87);
5097
+ color: #FFFFFF;
5085
5098
  }
5086
5099
 
5087
5100
  .p-panelmenu .p-panelmenu-content .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -5094,17 +5107,17 @@
5094
5107
  }
5095
5108
 
5096
5109
  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight>.p-menuitem-content {
5097
- color: rgba(255, 255, 255, 0.87);
5098
- background: rgba(34, 211, 238, 0.16);
5110
+ color: #FFFFFF;
5111
+ background: rgba(140, 100, 255, 0.18);
5099
5112
  }
5100
5113
 
5101
5114
  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
5102
- color: rgba(255, 255, 255, 0.87);
5115
+ color: #FFFFFF;
5103
5116
  }
5104
5117
 
5105
5118
  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
5106
5119
  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
5107
- color: rgba(255, 255, 255, 0.87);
5120
+ color: #FFFFFF;
5108
5121
  }
5109
5122
 
5110
5123
  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus>.p-menuitem-content {
@@ -5112,62 +5125,62 @@
5112
5125
  }
5113
5126
 
5114
5127
  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content {
5115
- color: rgba(255, 255, 255, 0.87);
5116
- background: #424b57;
5128
+ color: #FFFFFF;
5129
+ background: var(--primary-light-color);
5117
5130
  }
5118
5131
 
5119
5132
  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
5120
- color: rgba(255, 255, 255, 0.87);
5133
+ color: #FFFFFF;
5121
5134
  }
5122
5135
 
5123
5136
  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
5124
5137
  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
5125
- color: rgba(255, 255, 255, 0.87);
5138
+ color: #FFFFFF;
5126
5139
  }
5127
5140
 
5128
5141
  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
5129
- color: rgba(255, 255, 255, 0.87);
5142
+ color: #FFFFFF;
5130
5143
  background: rgba(255, 255, 255, 0.03);
5131
5144
  border-radius: 8px;
5132
5145
  }
5133
5146
 
5134
5147
  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
5135
- color: rgba(255, 255, 255, 0.87);
5148
+ color: #FFFFFF;
5136
5149
  }
5137
5150
 
5138
5151
  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
5139
5152
  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
5140
- color: rgba(255, 255, 255, 0.87);
5153
+ color: #FFFFFF;
5141
5154
  }
5142
5155
 
5143
5156
  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
5144
- border-top: 1px solid #424b57;
5157
+ border-top: 1px solid var(--primary-light-color);
5145
5158
  margin: 0.25rem 0;
5146
5159
  }
5147
5160
 
5148
5161
  .p-slidemenu {
5149
5162
  padding: 0.25rem 0;
5150
5163
  background: #374151;
5151
- color: rgba(255, 255, 255, 0.87);
5152
- border: 1px solid #424b57;
5164
+ color: #FFFFFF;
5165
+ border: 1px solid var(--primary-light-color);
5153
5166
  border-radius: 6px;
5154
5167
  width: 12.5rem;
5155
5168
  }
5156
5169
 
5157
5170
  .p-slidemenu .p-menuitem-link>.p-menuitem-content {
5158
- color: rgba(255, 255, 255, 0.87);
5171
+ color: #FFFFFF;
5159
5172
  transition: box-shadow 0.2s;
5160
5173
  border-radius: 0;
5161
5174
  }
5162
5175
 
5163
5176
  .p-slidemenu .p-menuitem-link>.p-menuitem-content .p-menuitem-link {
5164
- color: rgba(255, 255, 255, 0.87);
5177
+ color: #FFFFFF;
5165
5178
  padding: 0.75rem 1.25rem;
5166
5179
  user-select: none;
5167
5180
  }
5168
5181
 
5169
5182
  .p-slidemenu .p-menuitem-link>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
5170
- color: rgba(255, 255, 255, 0.87);
5183
+ color: #FFFFFF;
5171
5184
  }
5172
5185
 
5173
5186
  .p-slidemenu .p-menuitem-link>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -5180,17 +5193,17 @@
5180
5193
  }
5181
5194
 
5182
5195
  .p-slidemenu .p-menuitem-link.p-highlight>.p-menuitem-content {
5183
- color: rgba(255, 255, 255, 0.87);
5184
- background: rgba(34, 211, 238, 0.16);
5196
+ color: #FFFFFF;
5197
+ background: rgba(140, 100, 255, 0.18);
5185
5198
  }
5186
5199
 
5187
5200
  .p-slidemenu .p-menuitem-link.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
5188
- color: rgba(255, 255, 255, 0.87);
5201
+ color: #FFFFFF;
5189
5202
  }
5190
5203
 
5191
5204
  .p-slidemenu .p-menuitem-link.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
5192
5205
  .p-slidemenu .p-menuitem-link.p-highlight>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
5193
- color: rgba(255, 255, 255, 0.87);
5206
+ color: #FFFFFF;
5194
5207
  }
5195
5208
 
5196
5209
  .p-slidemenu .p-menuitem-link.p-highlight.p-focus>.p-menuitem-content {
@@ -5198,67 +5211,67 @@
5198
5211
  }
5199
5212
 
5200
5213
  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content {
5201
- color: rgba(255, 255, 255, 0.87);
5202
- background: #424b57;
5214
+ color: #FFFFFF;
5215
+ background: var(--primary-light-color);
5203
5216
  }
5204
5217
 
5205
5218
  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
5206
- color: rgba(255, 255, 255, 0.87);
5219
+ color: #FFFFFF;
5207
5220
  }
5208
5221
 
5209
5222
  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
5210
5223
  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
5211
- color: rgba(255, 255, 255, 0.87);
5224
+ color: #FFFFFF;
5212
5225
  }
5213
5226
 
5214
5227
  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
5215
- color: rgba(255, 255, 255, 0.87);
5228
+ color: #FFFFFF;
5216
5229
  background: rgba(255, 255, 255, 0.03);
5217
5230
  }
5218
5231
 
5219
5232
  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
5220
- color: rgba(255, 255, 255, 0.87);
5233
+ color: #FFFFFF;
5221
5234
  }
5222
5235
 
5223
5236
  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
5224
5237
  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
5225
- color: rgba(255, 255, 255, 0.87);
5238
+ color: #FFFFFF;
5226
5239
  }
5227
5240
 
5228
5241
  .p-slidemenu.p-slidemenu-overlay {
5229
5242
  background: #374151;
5230
- border: 1px solid #424b57;
5243
+ border: 1px solid var(--primary-light-color);
5231
5244
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
5232
5245
  }
5233
5246
 
5234
5247
  .p-slidemenu .p-slidemenu-list {
5235
5248
  padding: 0.25rem 0;
5236
5249
  background: #374151;
5237
- border: 1px solid #424b57;
5250
+ border: 1px solid var(--primary-light-color);
5238
5251
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
5239
5252
  }
5240
5253
 
5241
5254
  .p-slidemenu .p-slidemenu.p-slidemenu-active>.p-slidemenu-link {
5242
- background: rgba(34, 211, 238, 0.16);
5255
+ background: rgba(140, 100, 255, 0.18);
5243
5256
  }
5244
5257
 
5245
5258
  .p-slidemenu .p-slidemenu.p-slidemenu-active>.p-slidemenu-link .p-slidemenu-text {
5246
- color: rgba(255, 255, 255, 0.87);
5259
+ color: #FFFFFF;
5247
5260
  }
5248
5261
 
5249
5262
  .p-slidemenu .p-slidemenu.p-slidemenu-active>.p-slidemenu-link .p-slidemenu-icon,
5250
5263
  .p-slidemenu .p-slidemenu.p-slidemenu-active>.p-slidemenu-link .p-slidemenu-icon {
5251
- color: rgba(255, 255, 255, 0.87);
5264
+ color: #FFFFFF;
5252
5265
  }
5253
5266
 
5254
5267
  .p-slidemenu .p-slidemenu-separator {
5255
- border-top: 1px solid #424b57;
5268
+ border-top: 1px solid var(--primary-light-color);
5256
5269
  margin: 0.25rem 0;
5257
5270
  }
5258
5271
 
5259
5272
  .p-slidemenu .p-slidemenu-backward {
5260
5273
  padding: 0.75rem 1.25rem;
5261
- color: rgba(255, 255, 255, 0.87);
5274
+ color: #FFFFFF;
5262
5275
  }
5263
5276
 
5264
5277
  .p-steps .p-steps-item .p-menuitem-link {
@@ -5269,7 +5282,7 @@
5269
5282
  }
5270
5283
 
5271
5284
  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
5272
- color: rgba(255, 255, 255, 0.87);
5285
+ color: #FFFFFF;
5273
5286
  border: 0 none;
5274
5287
  background: transparent;
5275
5288
  min-width: 2rem;
@@ -5292,18 +5305,18 @@
5292
5305
  }
5293
5306
 
5294
5307
  .p-steps .p-steps-item.p-highlight .p-steps-number {
5295
- background: rgba(34, 211, 238, 0.16);
5296
- color: rgba(255, 255, 255, 0.87);
5308
+ background: rgba(140, 100, 255, 0.18);
5309
+ color: #FFFFFF;
5297
5310
  }
5298
5311
 
5299
5312
  .p-steps .p-steps-item.p-highlight .p-steps-title {
5300
5313
  font-weight: 700;
5301
- color: rgba(255, 255, 255, 0.87);
5314
+ color: #FFFFFF;
5302
5315
  }
5303
5316
 
5304
5317
  .p-steps .p-steps-item:before {
5305
5318
  content: " ";
5306
- border-top: 1px solid #424b57;
5319
+ border-top: 1px solid var(--primary-light-color);
5307
5320
  width: 100%;
5308
5321
  top: 50%;
5309
5322
  left: 0;
@@ -5314,15 +5327,15 @@
5314
5327
 
5315
5328
  .p-tabmenu .p-tabmenu-nav {
5316
5329
  background: transparent;
5317
- border: 1px solid #424b57;
5330
+ border: 1px solid var(--primary-light-color);
5318
5331
  border-width: 0 0 2px 0;
5319
5332
  }
5320
5333
 
5321
5334
  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
5322
- border: solid #424b57;
5335
+ border: solid var(--primary-light-color);
5323
5336
  border-width: 0 0 2px 0;
5324
- border-color: transparent transparent #424b57 transparent;
5325
- /* background: #1f2937; */
5337
+ border-color: transparent transparent rgba(216, 226, 234, 0.08) transparent;
5338
+ /* background: #18191D; */
5326
5339
  color: rgba(255, 255, 255, 0.6);
5327
5340
  padding: 1.25rem;
5328
5341
  font-weight: 700;
@@ -5340,13 +5353,13 @@
5340
5353
  }
5341
5354
 
5342
5355
  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
5343
- /* background: #1f2937; */
5356
+ /* background: #18191D; */
5344
5357
  border-color: #9B5AED;
5345
- color: rgba(255, 255, 255, 0.87);
5358
+ color: #FFFFFF;
5346
5359
  }
5347
5360
 
5348
5361
  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
5349
- /* background: #1f2937; */
5362
+ /* background: #18191D; */
5350
5363
  border-color: #9B5AED;
5351
5364
  color: #9B5AED;
5352
5365
  }
@@ -5354,39 +5367,39 @@
5354
5367
  .p-tieredmenu {
5355
5368
  padding: 0.25rem 0;
5356
5369
  background: #374151;
5357
- color: rgba(255, 255, 255, 0.87);
5358
- border: 1px solid #424b57;
5370
+ color: #FFFFFF;
5371
+ border: 1px solid var(--primary-light-color);
5359
5372
  border-radius: 6px;
5360
5373
  width: 12.5rem;
5361
5374
  }
5362
5375
 
5363
5376
  .p-tieredmenu.p-tieredmenu-overlay {
5364
5377
  background: #374151;
5365
- border: 1px solid #424b57;
5378
+ border: 1px solid var(--primary-light-color);
5366
5379
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
5367
5380
  }
5368
5381
 
5369
5382
  .p-tieredmenu .p-submenu-list {
5370
5383
  padding: 0.25rem 0;
5371
5384
  background: #374151;
5372
- border: 1px solid #424b57;
5385
+ border: 1px solid var(--primary-light-color);
5373
5386
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
5374
5387
  }
5375
5388
 
5376
5389
  .p-tieredmenu .p-menuitem>.p-menuitem-content {
5377
- color: rgba(255, 255, 255, 0.87);
5390
+ color: #FFFFFF;
5378
5391
  transition: box-shadow 0.2s;
5379
5392
  border-radius: 0;
5380
5393
  }
5381
5394
 
5382
5395
  .p-tieredmenu .p-menuitem>.p-menuitem-content .p-menuitem-link {
5383
- color: rgba(255, 255, 255, 0.87);
5396
+ color: #FFFFFF;
5384
5397
  padding: 0.75rem 1.25rem;
5385
5398
  user-select: none;
5386
5399
  }
5387
5400
 
5388
5401
  .p-tieredmenu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
5389
- color: rgba(255, 255, 255, 0.87);
5402
+ color: #FFFFFF;
5390
5403
  }
5391
5404
 
5392
5405
  .p-tieredmenu .p-menuitem>.p-menuitem-content .p-menuitem-link .p-menuitem-icon {
@@ -5399,17 +5412,17 @@
5399
5412
  }
5400
5413
 
5401
5414
  .p-tieredmenu .p-menuitem.p-highlight>.p-menuitem-content {
5402
- color: rgba(255, 255, 255, 0.87);
5403
- background: rgba(34, 211, 238, 0.16);
5415
+ color: #FFFFFF;
5416
+ background: rgba(140, 100, 255, 0.18);
5404
5417
  }
5405
5418
 
5406
5419
  .p-tieredmenu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
5407
- color: rgba(255, 255, 255, 0.87);
5420
+ color: #FFFFFF;
5408
5421
  }
5409
5422
 
5410
5423
  .p-tieredmenu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
5411
5424
  .p-tieredmenu .p-menuitem.p-highlight>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
5412
- color: rgba(255, 255, 255, 0.87);
5425
+ color: #FFFFFF;
5413
5426
  }
5414
5427
 
5415
5428
  .p-tieredmenu .p-menuitem.p-highlight.p-focus>.p-menuitem-content {
@@ -5417,35 +5430,35 @@
5417
5430
  }
5418
5431
 
5419
5432
  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content {
5420
- color: rgba(255, 255, 255, 0.87);
5421
- background: #424b57;
5433
+ color: #FFFFFF;
5434
+ background: var(--primary-light-color);
5422
5435
  }
5423
5436
 
5424
5437
  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-text {
5425
- color: rgba(255, 255, 255, 0.87);
5438
+ color: #FFFFFF;
5426
5439
  }
5427
5440
 
5428
5441
  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-menuitem-icon,
5429
5442
  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus>.p-menuitem-content .p-menuitem-link .p-submenu-icon {
5430
- color: rgba(255, 255, 255, 0.87);
5443
+ color: #FFFFFF;
5431
5444
  }
5432
5445
 
5433
5446
  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover {
5434
- color: rgba(255, 255, 255, 0.87);
5447
+ color: #FFFFFF;
5435
5448
  background: rgba(255, 255, 255, 0.03);
5436
5449
  }
5437
5450
 
5438
5451
  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
5439
- color: rgba(255, 255, 255, 0.87);
5452
+ color: #FFFFFF;
5440
5453
  }
5441
5454
 
5442
5455
  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
5443
5456
  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled)>.p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
5444
- color: rgba(255, 255, 255, 0.87);
5457
+ color: #FFFFFF;
5445
5458
  }
5446
5459
 
5447
5460
  .p-tieredmenu .p-menuitem-separator {
5448
- border-top: 1px solid #424b57;
5461
+ border-top: 1px solid var(--primary-light-color);
5449
5462
  margin: 0.25rem 0;
5450
5463
  }
5451
5464
 
@@ -5658,7 +5671,7 @@
5658
5671
  }
5659
5672
 
5660
5673
  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
5661
- background-color: #424b57;
5674
+ background-color: var(--primary-light-color);
5662
5675
  width: 1rem;
5663
5676
  height: 1rem;
5664
5677
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
@@ -5670,8 +5683,8 @@
5670
5683
  }
5671
5684
 
5672
5685
  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
5673
- background: rgba(34, 211, 238, 0.16);
5674
- color: rgba(255, 255, 255, 0.87);
5686
+ background: rgba(140, 100, 255, 0.18);
5687
+ color: #FFFFFF;
5675
5688
  }
5676
5689
 
5677
5690
  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators {
@@ -5687,8 +5700,8 @@
5687
5700
  }
5688
5701
 
5689
5702
  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
5690
- background: rgba(34, 211, 238, 0.16);
5691
- color: rgba(255, 255, 255, 0.87);
5703
+ background: rgba(140, 100, 255, 0.18);
5704
+ color: #FFFFFF;
5692
5705
  }
5693
5706
 
5694
5707
  .p-galleria .p-galleria-thumbnail-container {
@@ -5745,17 +5758,17 @@
5745
5758
  }
5746
5759
 
5747
5760
  .p-avatar {
5748
- background-color: #424b57;
5761
+ background-color: var(--primary-light-color);
5749
5762
  border-radius: 6px;
5750
5763
  }
5751
5764
 
5752
5765
  .p-avatar-group .p-avatar {
5753
- border: 2px solid #1f2937;
5766
+ border: 2px solid #18191D;
5754
5767
  }
5755
5768
 
5756
5769
  .p-chip {
5757
- background-color: #424b57;
5758
- color: rgba(255, 255, 255, 0.87);
5770
+ background-color: var(--primary-light-color);
5771
+ color: #FFFFFF;
5759
5772
  border-radius: 16px;
5760
5773
  padding: 0 0.75rem;
5761
5774
  }
@@ -5775,7 +5788,7 @@
5775
5788
  }
5776
5789
 
5777
5790
  .p-scrolltop.p-link {
5778
- background: rgba(34, 211, 238, 0.16);
5791
+ background: rgba(140, 100, 255, 0.18);
5779
5792
  }
5780
5793
 
5781
5794
  .p-scrolltop.p-link:hover {
@@ -5784,7 +5797,7 @@
5784
5797
 
5785
5798
  .p-scrolltop .p-scrolltop-icon {
5786
5799
  font-size: 1.5rem;
5787
- color: rgba(255, 255, 255, 0.87);
5800
+ color: #FFFFFF;
5788
5801
  }
5789
5802
 
5790
5803
  .p-skeleton {
@@ -5833,7 +5846,7 @@
5833
5846
 
5834
5847
  .p-inplace .p-inplace-display:not(.p-disabled):hover {
5835
5848
  background: rgba(255, 255, 255, 0.03);
5836
- color: rgba(255, 255, 255, 0.87);
5849
+ color: #FFFFFF;
5837
5850
  }
5838
5851
 
5839
5852
  .p-inplace .p-inplace-display:focus {
@@ -5843,7 +5856,7 @@
5843
5856
  }
5844
5857
 
5845
5858
  .p-metergroup .p-metergroup-meter-container {
5846
- background: #424b57;
5859
+ background: var(--primary-light-color);
5847
5860
  border-radius: 6px;
5848
5861
  }
5849
5862
 
@@ -5863,7 +5876,7 @@
5863
5876
  .p-progressbar {
5864
5877
  border: 0 none;
5865
5878
  height: 1.5rem;
5866
- background: #424b57;
5879
+ background: var(--primary-light-color);
5867
5880
  border-radius: 6px;
5868
5881
  }
5869
5882
 
@@ -5879,9 +5892,9 @@
5879
5892
  }
5880
5893
 
5881
5894
  .p-terminal {
5882
- background: #1f2937;
5883
- color: rgba(255, 255, 255, 0.87);
5884
- border: 1px solid #424b57;
5895
+ background: #18191D;
5896
+ color: #FFFFFF;
5897
+ border: 1px solid var(--primary-light-color);
5885
5898
  padding: 1.25rem;
5886
5899
  }
5887
5900
 
@@ -6014,7 +6027,7 @@
6014
6027
 
6015
6028
  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
6016
6029
  border-style: solid;
6017
- border-color: #424b57;
6030
+ border-color: var(--primary-light-color);
6018
6031
  }
6019
6032
 
6020
6033
  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
@@ -6080,4 +6093,94 @@
6080
6093
  .solid-auth-subtitle a {
6081
6094
  color: var(--auth-subtitle-color) !important;
6082
6095
  }
6096
+
6097
+ .solid-global-search-element {
6098
+ border: 1px solid var(--primary-light-color);
6099
+ }
6100
+
6101
+ .custom-filter-button {
6102
+ border-left: 1px solid var(--primary-light-color);
6103
+ }
6104
+
6105
+ .solid-layout-accordion label {
6106
+ color: #FFFFFF;
6107
+ }
6108
+
6109
+ .solid-column-panel.p-panel .p-panel-header {
6110
+ background: var(--solid-light-grey);
6111
+ }
6112
+
6113
+ .solid-column-panel.p-panel .p-panel-header,
6114
+ .solid-column-panel.p-panel .p-panel-content {
6115
+ border: 1px solid var(--primary-light-color);
6116
+ }
6117
+
6118
+ .form-field-label {
6119
+ color: #fff !important;
6120
+ }
6121
+
6122
+ .solid-standard-autocomplete .p-autocomplete-dropdown.p-button {
6123
+ background-color: var(--solid-light-grey);
6124
+ border-color: var(--primary-light-color);
6125
+ color: #FFF;
6126
+ }
6127
+
6128
+ .solid-standard-autocomplete .p-inputtext:focus+.p-button {
6129
+ border-color: var(--primary-light-color) !important;
6130
+ }
6131
+
6132
+ .solid-custom-editor .ql-toolbar.ql-snow {
6133
+ border: 1px solid var(--primary-light-color) !important;
6134
+ }
6135
+
6136
+ /* .solid-custom-editor .ql-toolbar.ql-snow span{
6137
+ color: #FFF !important;
6138
+ } */
6139
+ .solid-custom-editor .ql-container.ql-snow {
6140
+ border: 1px solid var(--primary-light-color) !important;
6141
+ }
6142
+
6143
+ .solid-file-reader path:first-child {
6144
+ fill: var(--solid-file-wrapper) !important;
6145
+ }
6146
+
6147
+ .active-menu-image {
6148
+ background-color: var(--solid-login-bg-color);
6149
+ }
6150
+
6151
+
6152
+ .solid-kanban-board-wrapper {
6153
+ border-top: 1px solid var(--primary-light-color);
6154
+ }
6155
+
6156
+ .kanban-group-heading {
6157
+ color: #fff;
6158
+ }
6159
+
6160
+ .solid-kanban-card,
6161
+ .solid-media-card {
6162
+ border: 1px solid var(--primary-light-color);
6163
+ background: #171717;
6164
+ }
6165
+
6166
+ .solid-kanban-card:hover,
6167
+ .solid-media-card:hover {
6168
+ border: 1px solid var(--purple-900);
6169
+ background: var(--surface-hover);
6170
+ }
6171
+
6172
+ .solid-mimetype-chip {
6173
+ background: var(--gray-700);
6174
+ }
6175
+
6176
+ .kanban-image-preview,
6177
+ .kanban-media-image-preview,
6178
+ .kanban-media-view-card {
6179
+ background-color: var(--surface-hover);
6180
+ }
6181
+
6182
+ .kanban-count-badge {
6183
+ background: var(--primary-light-color);
6184
+ color: var(--primary-color);
6185
+ }
6083
6186
  }