primeng 13.0.0-rc.2 → 13.0.3

package/resources/themes/lara-dark-purple/theme.css

@@ -40,7 +40,7 @@
   --surface-overlay:#22272d;
   --surface-border:#444c56;
   --surface-hover:rgba(255,255,255,.03);
-  --focus-ring: 0 0 0 0.2rem #e7e1fe;
+  --focus-ring: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   --maskbg: rgba(0, 0, 0, 0.4);
 }
 
@@ -118,7 +118,7 @@
 .p-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
 .p-component-overlay-enter {
@@ -264,7 +264,7 @@
 .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
@@ -331,7 +331,7 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   margin: 0;
   padding: 0.75rem 1.25rem;
   color: rgba(255, 255, 255, 0.87);
-  background: #3d444d;
+  background: #2f343a;
   font-weight: 700;
 }
 
@@ -384,19 +384,21 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 .p-datepicker .p-datepicker-header .p-datepicker-next:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title {
   line-height: 2rem;
 }
-.p-datepicker .p-datepicker-header .p-datepicker-title select {
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+  color: rgba(255, 255, 255, 0.87);
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  font-weight: 700;
+  padding: 0.5rem;
 }
-.p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
-  border-color: #C4B5FD;
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+  color: #C4B5FD;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
   margin-right: 0.5rem;
@@ -429,7 +431,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 .p-datepicker table td > span:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-datepicker table td.p-datepicker-today > span {
   background: transparent;
@@ -468,7 +470,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 .p-datepicker .p-timepicker button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-datepicker .p-timepicker button:last-child {
   margin-top: 0.2em;
@@ -494,8 +496,20 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(196, 181, 253, 0.16);
 }
+.p-datepicker .p-yearpicker {
+  margin: 0.5rem 0;
+}
+.p-datepicker .p-yearpicker .p-yearpicker-year {
+  padding: 0.5rem;
+  transition: box-shadow 0.2s;
+  border-radius: 6px;
+}
+.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(196, 181, 253, 0.16);
+}
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #444c56;
+  border-left: 1px solid #444c56;
   padding-right: 0.5rem;
   padding-left: 0.5rem;
   padding-top: 0;
@@ -503,10 +517,10 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 }
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
   padding-left: 0;
+  border-left: 0 none;
 }
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
   padding-right: 0;
-  border-right: 0 none;
 }
 .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
   background: rgba(255, 255, 255, 0.03);
@@ -514,15 +528,23 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
+}
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.03);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
 @media screen and (max-width: 769px) {
@@ -542,7 +564,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 .p-cascadeselect:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
 .p-cascadeselect .p-cascadeselect-label {
@@ -589,7 +611,7 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
 .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
   color: rgba(255, 255, 255, 0.87);
@@ -645,7 +667,7 @@ p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
 .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
 .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
@@ -684,7 +706,7 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
 .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
@@ -720,7 +742,7 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
 
 .p-colorpicker-panel {
   background: #22272d;
-  border-color: #444c56;
+  border: 1px solid #444c56;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -743,7 +765,7 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
 .p-dropdown:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
 .p-dropdown.p-dropdown-clearable .p-dropdown-label {
@@ -828,7 +850,7 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   margin: 0;
   padding: 0.75rem 1.25rem;
   color: rgba(255, 255, 255, 0.87);
-  background: #3d444d;
+  background: #2f343a;
   font-weight: 700;
 }
 
@@ -1051,7 +1073,7 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
 .p-inputswitch.p-focus .p-inputswitch-slider {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
   background: rgba(255, 255, 255, 0.03);
@@ -1087,7 +1109,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
 .p-inputtext:enabled:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
 .p-inputtext.ng-dirty.ng-invalid {
@@ -1213,7 +1235,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
 .p-listbox .p-listbox-list .p-listbox-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
   margin-right: 0.5rem;
@@ -1222,7 +1244,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   margin: 0;
   padding: 0.75rem 1.25rem;
   color: rgba(255, 255, 255, 0.87);
-  background: #3d444d;
+  background: #2f343a;
   font-weight: 700;
 }
 .p-listbox .p-listbox-list .p-listbox-empty-message {
@@ -1251,7 +1273,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
 .p-multiselect .p-multiselect-label {
@@ -1327,7 +1349,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-multiselect-panel .p-multiselect-items:not(.p-multiselect-virtualscroll) {
   padding: 0.75rem 0;
@@ -1355,7 +1377,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
@@ -1364,7 +1386,7 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
   margin: 0;
   padding: 0.75rem 1.25rem;
   color: rgba(255, 255, 255, 0.87);
-  background: #3d444d;
+  background: #2f343a;
   font-weight: 700;
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
@@ -1432,7 +1454,7 @@ p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
 .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
@@ -1484,7 +1506,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
 .p-rating .p-rating-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-rating .p-rating-icon:first-child {
   margin-left: 0;
@@ -1571,7 +1593,7 @@ p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
 .p-slider .p-slider-handle:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-slider .p-slider-range {
   background: #C4B5FD;
@@ -1647,7 +1669,7 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-treeselect:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   border-color: #C4B5FD;
 }
 .p-treeselect .p-treeselect-label {
@@ -1781,7 +1803,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-button .p-button-icon-left {
   margin-right: 0.5rem;
@@ -2164,7 +2186,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 }
 .p-button.p-button-link:enabled:focus {
   background: transparent;
-  box-shadow: 0 0 0 1px #e7e1fe;
+  box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.5);
   border-color: transparent;
 }
 .p-button.p-button-link:enabled:active {
@@ -2258,7 +2280,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-carousel .p-carousel-content .p-carousel-next:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-carousel .p-carousel-indicators {
   padding: 1rem;
@@ -2360,14 +2382,14 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   color: rgba(255, 255, 255, 0.87);
 }
 .p-datatable .p-sortable-column:focus {
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
   outline: 0 none;
 }
 .p-datatable .p-datatable-tbody > tr {
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #e7e1fe;
+  outline-color: rgba(196, 181, 253, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2401,7 +2423,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
   margin-right: 0.5rem;
@@ -2427,6 +2449,10 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-datatable .p-datatable-scrollable-footer {
   background: #22272d;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #22272d;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
@@ -2568,7 +2594,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-column-filter-menu-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
 .p-column-filter-clear-button {
@@ -2588,7 +2614,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-column-filter-clear-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
 .p-column-filter-overlay {
@@ -2622,7 +2648,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
   border-top: 1px solid #444c56;
@@ -2710,7 +2736,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left {
   font-family: "PrimeIcons" !important;
@@ -2731,7 +2757,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .fc.fc-unthemed .fc-toolbar .fc-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button {
   background: #22272d;
@@ -2757,7 +2783,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   z-index: 1;
 }
 .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button {
@@ -2823,7 +2849,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body {
   padding: 1.25rem;
@@ -2872,7 +2898,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .fc.fc-theme-standard .fc-toolbar .fc-button:disabled {
   opacity: 0.4;
@@ -2899,7 +2925,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .fc.fc-theme-standard .fc-toolbar .fc-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button {
   background: #22272d;
@@ -2925,7 +2951,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus, .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   z-index: 1;
 }
 .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button {
@@ -2997,7 +3023,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
   color: rgba(255, 255, 255, 0.87);
@@ -3057,7 +3083,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
 .p-paginator {
@@ -3192,7 +3218,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-picklist .p-picklist-list .p-picklist-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
   color: rgba(255, 255, 255, 0.87);
@@ -3274,7 +3300,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
   margin-right: 0.5rem;
@@ -3289,7 +3315,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
   background: rgba(196, 181, 253, 0.16);
@@ -3367,7 +3393,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-tree.p-tree-horizontal .p-treenode .p-treenode-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
 .p-treetable .p-paginator-top {
@@ -3414,7 +3440,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background: #22272d;
 }
 .p-treetable .p-sortable-column {
-  outline-color: #e7e1fe;
+  outline-color: rgba(196, 181, 253, 0.5);
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: rgba(255, 255, 255, 0.6);
@@ -3447,7 +3473,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background: #22272d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
-  outline-color: #e7e1fe;
+  outline-color: rgba(196, 181, 253, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3473,7 +3499,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox {
   margin-right: 0.5rem;
@@ -3600,7 +3626,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
   background: rgba(255, 255, 255, 0.03);
@@ -3714,7 +3740,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
   background: rgba(255, 255, 255, 0.03);
@@ -3753,7 +3779,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-panel .p-panel-header .p-panel-header-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-panel.p-panel-toggleable .p-panel-header {
   padding: 0.75rem 1.25rem;
@@ -3821,7 +3847,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #e7e1fe;
+  box-shadow: inset 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
   background: #22272d;
@@ -3852,7 +3878,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-tabview .p-tabview-nav-btn.p-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #e7e1fe;
+  box-shadow: inset 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-tabview .p-tabview-panels {
   background: #22272d;
@@ -3952,7 +3978,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-dialog .p-dialog-header .p-dialog-header-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
   margin-right: 0;
@@ -4053,7 +4079,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-sidebar .p-sidebar-header + .p-sidebar-content {
   padding-top: 0;
@@ -4097,7 +4123,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-fileupload .p-fileupload-content {
   background: #22272d;
@@ -4129,7 +4155,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 }
 
 .p-breadcrumb {
-  background: #3d444d;
+  background: #2f343a;
   border: 1px solid #444c56;
   border-radius: 6px;
   padding: 1rem;
@@ -4141,7 +4167,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-breadcrumb ul li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
   color: rgba(255, 255, 255, 0.87);
@@ -4162,7 +4188,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 
 .p-contextmenu {
   padding: 0.25rem 0;
-  background: #3d444d;
+  background: #2f343a;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #444c56;
   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);
@@ -4201,11 +4227,11 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-contextmenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-contextmenu .p-submenu-list {
   padding: 0.25rem 0;
-  background: #3d444d;
+  background: #2f343a;
   border: 1px solid #444c56;
   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);
   border-radius: 6px;
@@ -4295,7 +4321,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 }
 .p-megamenu {
   padding: 0.5rem;
-  background: #3d444d;
+  background: #2f343a;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #444c56;
   border-radius: 6px;
@@ -4333,7 +4359,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
 .p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
@@ -4383,10 +4409,10 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-megamenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-megamenu .p-megamenu-panel {
-  background: #3d444d;
+  background: #2f343a;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #444c56;
   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);
@@ -4395,7 +4421,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   margin: 0;
   padding: 0.75rem 1.25rem;
   color: rgba(255, 255, 255, 0.87);
-  background: #3d444d;
+  background: #2f343a;
   font-weight: 700;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
@@ -4436,7 +4462,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 
 .p-menu {
   padding: 0.25rem 0;
-  background: #3d444d;
+  background: #2f343a;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #444c56;
   border-radius: 6px;
@@ -4474,10 +4500,10 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-menu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-menu.p-menu-overlay {
-  background: #3d444d;
+  background: #2f343a;
   border: 1px solid #444c56;
   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,7 +4511,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   margin: 0;
   padding: 0.75rem 1.25rem;
   color: rgba(255, 255, 255, 0.87);
-  background: #3d444d;
+  background: #2f343a;
   font-weight: 700;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
@@ -4503,7 +4529,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 
 .p-menubar {
   padding: 0.5rem;
-  background: #3d444d;
+  background: #2f343a;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #444c56;
   border-radius: 6px;
@@ -4540,7 +4566,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-menubar .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
   padding: 0.75rem 1.25rem;
@@ -4575,7 +4601,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
 .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
@@ -4595,7 +4621,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 }
 .p-menubar .p-submenu-list {
   padding: 0.25rem 0;
-  background: #3d444d;
+  background: #2f343a;
   border: 1px solid #444c56;
   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);
   width: 12.5rem;
@@ -4642,13 +4668,13 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   .p-menubar .p-menubar-button:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem #e7e1fe;
+    box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
   }
   .p-menubar .p-menubar-root-list {
     position: absolute;
     display: none;
     padding: 0.25rem 0;
-    background: #3d444d;
+    background: #2f343a;
     border: 1px solid #444c56;
     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);
     width: 100%;
@@ -4696,7 +4722,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 1px #e7e1fe;
+    box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
   }
   .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
     margin-left: auto;
@@ -4763,7 +4789,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-panelmenu .p-panelmenu-header > a:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover {
   background: rgba(255, 255, 255, 0.03);
@@ -4829,7 +4855,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
   margin-right: 0.5rem;
@@ -4843,7 +4869,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 
 .p-slidemenu {
   padding: 0.25rem 0;
-  background: #3d444d;
+  background: #2f343a;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #444c56;
   border-radius: 6px;
@@ -4881,16 +4907,16 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-slidemenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-slidemenu.p-slidemenu-overlay {
-  background: #3d444d;
+  background: #2f343a;
   border: 1px solid #444c56;
   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);
 }
 .p-slidemenu .p-slidemenu-list {
   padding: 0.25rem 0;
-  background: #3d444d;
+  background: #2f343a;
   border: 1px solid #444c56;
   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);
 }
@@ -4939,7 +4965,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-steps .p-steps-item.p-highlight .p-steps-number {
   background: rgba(196, 181, 253, 0.16);
@@ -4987,7 +5013,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.2rem #e7e1fe;
+  box-shadow: inset 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: #22272d;
@@ -5002,7 +5028,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 
 .p-tieredmenu {
   padding: 0.25rem 0;
-  background: #3d444d;
+  background: #2f343a;
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #444c56;
   border-radius: 6px;
@@ -5040,16 +5066,16 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-tieredmenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #e7e1fe;
+  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.5);
 }
 .p-tieredmenu.p-tieredmenu-overlay {
-  background: #3d444d;
+  background: #2f343a;
   border: 1px solid #444c56;
   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);
 }
 .p-tieredmenu .p-submenu-list {
   padding: 0.25rem 0;
-  background: #3d444d;
+  background: #2f343a;
   border: 1px solid #444c56;
   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);
 }
@@ -5148,7 +5174,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-message .p-message-close:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-message.p-message-info {
   background: #e9e9ff;
@@ -5250,7 +5276,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-toast .p-toast-message .p-toast-icon-close:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 .p-toast .p-toast-message.p-toast-message-info {
   background: #e9e9ff;
@@ -5389,7 +5415,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
 .p-galleria-mask {
@@ -5531,7 +5557,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-chip .pi-chip-remove-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
 .p-inplace .p-inplace-display {
@@ -5546,7 +5572,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-inplace .p-inplace-display:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem #e7e1fe;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
 }
 
 .p-progressbar {
@@ -5561,7 +5587,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
   background: #C4B5FD;
 }
 .p-progressbar .p-progressbar-label {
-  color: rgba(255, 255, 255, 0.87);
+  color: #1c2127;
   line-height: 1.5rem;
 }
 
@@ -5681,3 +5707,10 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
 .p-button.p-button-danger:enabled:focus {
   box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(252, 165, 165, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
 }
+
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #C4B5FD;
+}
+.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #C4B5FD;
+}