From bd1b2ab1b063677a4f318586b4222c0b20cf27d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Thu, 18 Nov 2021 11:45:01 +0300
Subject: [PATCH] Keyboard Support for Year Picker and Month Picker #1744

---
 public/themes/arya-blue/theme.css             | 20 ++---
 public/themes/arya-green/theme.css            | 20 ++---
 public/themes/arya-orange/theme.css           | 20 ++---
 public/themes/arya-purple/theme.css           | 20 ++---
 public/themes/bootstrap4-dark-blue/theme.css  | 20 ++---
 .../themes/bootstrap4-dark-purple/theme.css   | 20 ++---
 public/themes/bootstrap4-light-blue/theme.css | 20 ++---
 .../themes/bootstrap4-light-purple/theme.css  | 20 ++---
 public/themes/fluent-light/theme.css          | 20 ++---
 public/themes/lara-light-blue/theme.css       | 20 ++---
 public/themes/lara-light-indigo/theme.css     | 20 ++---
 public/themes/lara-light-purple/theme.css     | 20 ++---
 public/themes/lara-light-teal/theme.css       | 20 ++---
 public/themes/luna-amber/theme.css            | 20 ++---
 public/themes/luna-blue/theme.css             | 20 ++---
 public/themes/luna-green/theme.css            | 20 ++---
 public/themes/luna-pink/theme.css             | 20 ++---
 public/themes/md-dark-deeppurple/theme.css    | 22 ++---
 public/themes/md-dark-indigo/theme.css        | 22 ++---
 public/themes/md-light-deeppurple/theme.css   | 22 ++---
 public/themes/md-light-indigo/theme.css       | 22 ++---
 public/themes/mdc-dark-deeppurple/theme.css   | 22 ++---
 public/themes/mdc-dark-indigo/theme.css       | 22 ++---
 public/themes/mdc-light-deeppurple/theme.css  | 22 ++---
 public/themes/mdc-light-indigo/theme.css      | 22 ++---
 public/themes/nova-accent/theme.css           | 20 ++---
 public/themes/nova-alt/theme.css              | 20 ++---
 public/themes/nova/theme.css                  | 20 ++---
 public/themes/rhea/theme.css                  | 20 ++---
 public/themes/saga-blue/theme.css             | 20 ++---
 public/themes/saga-green/theme.css            | 20 ++---
 public/themes/saga-orange/theme.css           | 20 ++---
 public/themes/saga-purple/theme.css           | 20 ++---
 public/themes/tailwind-light/theme.css        | 20 ++---
 public/themes/vela-blue/theme.css             | 20 ++---
 public/themes/vela-green/theme.css            | 20 ++---
 public/themes/vela-orange/theme.css           | 20 ++---
 public/themes/vela-purple/theme.css           | 20 ++---
 src/components/calendar/Calendar.vue          | 84 ++++++++++++++++---
 39 files changed, 346 insertions(+), 514 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index a4692a6b5..17f47f3bc 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #93cbf9;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.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-highlight):not(.p-disabled):focus {
+.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 1px #93cbf9;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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-yearpicker .p-yearpicker-year: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 1px #93cbf9;
@@ -2292,6 +2292,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #93cbf9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #93cbf9;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3282,6 +3279,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #93cbf9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #93cbf9;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5299,7 +5293,7 @@
   background: #64B5F6;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index a6b527484..6890d5856 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #a7d8a9;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.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-highlight):not(.p-disabled):focus {
+.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 1px #a7d8a9;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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-yearpicker .p-yearpicker-year: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 1px #a7d8a9;
@@ -2292,6 +2292,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #a7d8a9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #a7d8a9;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3282,6 +3279,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #a7d8a9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #a7d8a9;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5299,7 +5293,7 @@
   background: #81C784;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 58381a645..5cbd1d19b 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.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-highlight):not(.p-disabled):focus {
+.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 1px #ffe284;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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-yearpicker .p-yearpicker-year: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 1px #ffe284;
@@ -2292,6 +2292,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #ffe284;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #ffe284;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3282,6 +3279,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #ffe284;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #ffe284;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5299,7 +5293,7 @@
   background: #FFD54F;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index c5b680777..c501ef1f9 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.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-highlight):not(.p-disabled):focus {
+.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 1px #cf95d9;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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-yearpicker .p-yearpicker-year: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 1px #cf95d9;
@@ -2292,6 +2292,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #cf95d9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #cf95d9;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3282,6 +3279,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #cf95d9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #cf95d9;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5299,7 +5293,7 @@
   background: #BA68C8;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index a5de41cfb..d3b38ecb8 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #e3f3fe;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 1px #e3f3fe;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 1px #e3f3fe;
@@ -2304,6 +2304,7 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
+  outline-color: #e3f3fe;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #e3f3fe;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #8dd0ff;
   color: #151515;
@@ -3294,6 +3291,7 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
+  outline-color: #e3f3fe;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #e3f3fe;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #8dd0ff;
   color: #151515;
@@ -5311,7 +5305,7 @@
   background: #8dd0ff;
 }
 .p-progressbar .p-progressbar-label {
-  color: #151515;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index cc6e67840..ba681ea59 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #f0e6f5;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 1px #f0e6f5;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 1px #f0e6f5;
@@ -2304,6 +2304,7 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
+  outline-color: #f0e6f5;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #f0e6f5;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #c298d8;
   color: #151515;
@@ -3294,6 +3291,7 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
+  outline-color: #f0e6f5;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #f0e6f5;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #c298d8;
   color: #151515;
@@ -5311,7 +5305,7 @@
   background: #c298d8;
 }
 .p-progressbar .p-progressbar-label {
-  color: #151515;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 7fde176a2..b8b743d57 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 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-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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(38, 143, 255, 0.5);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 rgba(38, 143, 255, 0.5);
@@ -2304,6 +2304,7 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
+  outline-color: rgba(38, 143, 255, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid rgba(38, 143, 255, 0.5);
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #007bff;
   color: #ffffff;
@@ -3294,6 +3291,7 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
+  outline-color: rgba(38, 143, 255, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #212529;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid rgba(38, 143, 255, 0.5);
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #007bff;
   color: #ffffff;
@@ -5311,7 +5305,7 @@
   background: #007bff;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #212529;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index b8f5f9f47..85b7a132a 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 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-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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(136, 60, 174, 0.5);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 rgba(136, 60, 174, 0.5);
@@ -2304,6 +2304,7 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
+  outline-color: rgba(136, 60, 174, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid rgba(136, 60, 174, 0.5);
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #883cae;
   color: #ffffff;
@@ -3294,6 +3291,7 @@
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
+  outline-color: rgba(136, 60, 174, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #212529;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid rgba(136, 60, 174, 0.5);
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #883cae;
   color: #ffffff;
@@ -5311,7 +5305,7 @@
   background: #883cae;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #212529;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 835bc537a..7d18b50ce 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #605e5c;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #f3f2f1;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: inset 0 0 0 1px #605e5c;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #f3f2f1;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: inset 0 0 0 1px #605e5c;
@@ -2292,6 +2292,7 @@
   background: #ffffff;
   color: #323130;
   transition: box-shadow 0.2s;
+  outline-color: #605e5c;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #605e5c;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #edebe9;
   color: #323130;
@@ -3282,6 +3279,7 @@
   background: #ffffff;
   color: #323130;
   transition: box-shadow 0.2s;
+  outline-color: #605e5c;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #323130;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #605e5c;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #edebe9;
   color: #323130;
@@ -5250,7 +5244,7 @@
   background: #0078d4;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #323130;
   line-height: 2px;
 }
 
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index ab0d9b534..a27483ee2 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -521,18 +521,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #BFDBFE;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #BFDBFE;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #BFDBFE;
@@ -2327,6 +2327,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #BFDBFE;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2368,10 +2369,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #BFDBFE;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #EFF6FF;
   color: #3B82F6;
@@ -3317,6 +3314,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #BFDBFE;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3350,10 +3348,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #BFDBFE;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #EFF6FF;
   color: #3B82F6;
@@ -5285,7 +5279,7 @@
   background: #3B82F6;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #495057;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 9430f9950..d832ea4fd 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -521,18 +521,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #C7D2FE;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #C7D2FE;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #C7D2FE;
@@ -2327,6 +2327,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #C7D2FE;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2368,10 +2369,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #C7D2FE;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #EEF2FF;
   color: #4338CA;
@@ -3317,6 +3314,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #C7D2FE;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3350,10 +3348,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #C7D2FE;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #EEF2FF;
   color: #4338CA;
@@ -5285,7 +5279,7 @@
   background: #6366F1;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #495057;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 9338c7a2c..447db6d7a 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -521,18 +521,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #DDD6FE;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #DDD6FE;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #DDD6FE;
@@ -2327,6 +2327,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #DDD6FE;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2368,10 +2369,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #DDD6FE;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #F5F3FF;
   color: #6D28D9;
@@ -3317,6 +3314,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #DDD6FE;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3350,10 +3348,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #DDD6FE;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #F5F3FF;
   color: #6D28D9;
@@ -5285,7 +5279,7 @@
   background: #8B5CF6;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #495057;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 9971781da..b2b7ccb06 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -521,18 +521,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #99F6E4;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #99F6E4;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #99F6E4;
@@ -2327,6 +2327,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #99F6E4;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2368,10 +2369,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #99F6E4;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #F0FDFA;
   color: #0F766E;
@@ -3317,6 +3314,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #99F6E4;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3350,10 +3348,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #99F6E4;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #F0FDFA;
   color: #0F766E;
@@ -5285,7 +5279,7 @@
   background: #14B8A6;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #495057;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 6f254360d..f35c73610 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #4c4c4c;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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.1rem white;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #4c4c4c;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.1rem white;
@@ -2304,6 +2304,7 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: white;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid white;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #FFE082;
   color: #212529;
@@ -3294,6 +3291,7 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: white;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #dedede;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid white;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #FFE082;
   color: #212529;
@@ -5262,7 +5256,7 @@
   background: #FFE082;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: #dedede;
   line-height: 24px;
 }
 
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 6738348b1..27d92cf43 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #4c4c4c;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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.1rem white;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #4c4c4c;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.1rem white;
@@ -2304,6 +2304,7 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: white;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid white;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #81D4FA;
   color: #212529;
@@ -3294,6 +3291,7 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: white;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #dedede;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid white;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #81D4FA;
   color: #212529;
@@ -5262,7 +5256,7 @@
   background: #81D4FA;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: #dedede;
   line-height: 24px;
 }
 
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 0bc98e31e..1e1d54d08 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #4c4c4c;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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.1rem white;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #4c4c4c;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.1rem white;
@@ -2304,6 +2304,7 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: white;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid white;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #C5E1A5;
   color: #212529;
@@ -3294,6 +3291,7 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: white;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #dedede;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid white;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #C5E1A5;
   color: #212529;
@@ -5262,7 +5256,7 @@
   background: #C5E1A5;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: #dedede;
   line-height: 24px;
 }
 
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 9a82b1b48..b1426323a 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.1rem white;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #4c4c4c;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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.1rem white;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #4c4c4c;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.1rem white;
@@ -2304,6 +2304,7 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: white;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid white;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #F48FB1;
   color: #212529;
@@ -3294,6 +3291,7 @@
   background: #323232;
   color: #dedede;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: white;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #dedede;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid white;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #F48FB1;
   color: #212529;
@@ -5262,7 +5256,7 @@
   background: #F48FB1;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: #dedede;
   line-height: 24px;
 }
 
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 9b9bd52c2..e5c84c559 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -510,18 +510,18 @@
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: none;
@@ -2316,6 +2316,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2357,10 +2358,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(206, 147, 216, 0.16);
   color: #CE93D8;
@@ -3306,6 +3303,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3339,10 +3337,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(206, 147, 216, 0.16);
   color: #CE93D8;
@@ -5323,7 +5317,7 @@
   background: #CE93D8;
 }
 .p-progressbar .p-progressbar-label {
-  color: #121212;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 4px;
 }
 
@@ -6513,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar.p-progressbar-determinate .p-progressbar-label {
+.p-progressbar .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index bf2d40328..836fe4aac 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -510,18 +510,18 @@
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: none;
@@ -2316,6 +2316,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2357,10 +2358,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(159, 168, 218, 0.16);
   color: #9FA8DA;
@@ -3306,6 +3303,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3339,10 +3337,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(159, 168, 218, 0.16);
   color: #9FA8DA;
@@ -5323,7 +5317,7 @@
   background: #9FA8DA;
 }
 .p-progressbar .p-progressbar-label {
-  color: #121212;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 4px;
 }
 
@@ -6513,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar.p-progressbar-determinate .p-progressbar-label {
+.p-progressbar .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index a2e25976f..206fc6fbc 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -510,18 +510,18 @@
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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(0, 0, 0, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: none;
@@ -2316,6 +2316,7 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2357,10 +2358,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(103, 58, 183, 0.12);
   color: #673AB7;
@@ -3306,6 +3303,7 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3339,10 +3337,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(103, 58, 183, 0.12);
   color: #673AB7;
@@ -5323,7 +5317,7 @@
   background: #673AB7;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
   line-height: 4px;
 }
 
@@ -6513,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar.p-progressbar-determinate .p-progressbar-label {
+.p-progressbar .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index a3f203dbb..eb772ecb8 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -510,18 +510,18 @@
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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(0, 0, 0, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: none;
@@ -2316,6 +2316,7 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2357,10 +2358,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(63, 81, 181, 0.12);
   color: #3F51B5;
@@ -3306,6 +3303,7 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3339,10 +3337,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(63, 81, 181, 0.12);
   color: #3F51B5;
@@ -5323,7 +5317,7 @@
   background: #3F51B5;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
   line-height: 4px;
 }
 
@@ -6513,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar.p-progressbar-determinate .p-progressbar-label {
+.p-progressbar .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 470137435..1013269c7 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -510,18 +510,18 @@
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: none;
@@ -2316,6 +2316,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2357,10 +2358,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(206, 147, 216, 0.16);
   color: #CE93D8;
@@ -3306,6 +3303,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3339,10 +3337,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(206, 147, 216, 0.16);
   color: #CE93D8;
@@ -5323,7 +5317,7 @@
   background: #CE93D8;
 }
 .p-progressbar .p-progressbar-label {
-  color: #121212;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 4px;
 }
 
@@ -6513,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar.p-progressbar-determinate .p-progressbar-label {
+.p-progressbar .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index c05c6501c..c2eea4e89 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -510,18 +510,18 @@
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(255, 255, 255, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: none;
@@ -2316,6 +2316,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2357,10 +2358,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(159, 168, 218, 0.16);
   color: #9FA8DA;
@@ -3306,6 +3303,7 @@
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3339,10 +3337,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(159, 168, 218, 0.16);
   color: #9FA8DA;
@@ -5323,7 +5317,7 @@
   background: #9FA8DA;
 }
 .p-progressbar .p-progressbar-label {
-  color: #121212;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 4px;
 }
 
@@ -6513,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar.p-progressbar-determinate .p-progressbar-label {
+.p-progressbar .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index d2f7d4377..e9bb074c6 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -510,18 +510,18 @@
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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(0, 0, 0, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: none;
@@ -2316,6 +2316,7 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2357,10 +2358,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(103, 58, 183, 0.12);
   color: #673AB7;
@@ -3306,6 +3303,7 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3339,10 +3337,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(103, 58, 183, 0.12);
   color: #673AB7;
@@ -5323,7 +5317,7 @@
   background: #673AB7;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
   line-height: 4px;
 }
 
@@ -6513,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar.p-progressbar-determinate .p-progressbar-label {
+.p-progressbar .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 14ed86ff5..d077cadc9 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -510,18 +510,18 @@
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: rgba(0, 0, 0, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: none;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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(0, 0, 0, 0.04);
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: none;
@@ -2316,6 +2316,7 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2357,10 +2358,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(63, 81, 181, 0.12);
   color: #3F51B5;
@@ -3306,6 +3303,7 @@
   background: #ffffff;
   color: rgba(0, 0, 0, 0.87);
   transition: none;
+  outline-color: transparent;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3339,10 +3337,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(0, 0, 0, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid transparent;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(63, 81, 181, 0.12);
   color: #3F51B5;
@@ -5323,7 +5317,7 @@
   background: #3F51B5;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
   line-height: 4px;
 }
 
@@ -6513,7 +6507,7 @@
 .p-progressbar {
   border-radius: 0;
 }
-.p-progressbar.p-progressbar-determinate .p-progressbar-label {
+.p-progressbar .p-progressbar-label {
   display: none;
 }
 
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 9e4146bf2..ba9be8686 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #eaeaea;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #8dcdff;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #eaeaea;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #8dcdff;
@@ -2292,6 +2292,7 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
+  outline-color: #8dcdff;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #8dcdff;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #e02365;
   color: #ffffff;
@@ -3282,6 +3279,7 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
+  outline-color: #8dcdff;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #333333;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #8dcdff;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #e02365;
   color: #ffffff;
@@ -5250,7 +5244,7 @@
   background: #007ad9;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #333333;
   line-height: 24px;
 }
 
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 1c91af55d..9e5d569d8 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #eaeaea;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #8dcdff;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #eaeaea;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #8dcdff;
@@ -2304,6 +2304,7 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
+  outline-color: #8dcdff;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #8dcdff;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #007ad9;
   color: #ffffff;
@@ -3294,6 +3291,7 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
+  outline-color: #8dcdff;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #333333;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #8dcdff;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #007ad9;
   color: #ffffff;
@@ -5262,7 +5256,7 @@
   background: #007ad9;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #333333;
   line-height: 24px;
 }
 
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index fc082028d..a4199756b 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #eaeaea;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #8dcdff;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #eaeaea;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #8dcdff;
@@ -2304,6 +2304,7 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
+  outline-color: #8dcdff;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2345,10 +2346,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #8dcdff;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #007ad9;
   color: #ffffff;
@@ -3294,6 +3291,7 @@
   background: #ffffff;
   color: #333333;
   transition: background-color 0.2s, box-shadow 0.2s;
+  outline-color: #8dcdff;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3327,10 +3325,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #333333;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #8dcdff;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #007ad9;
   color: #ffffff;
@@ -5262,7 +5256,7 @@
   background: #007ad9;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #333333;
   line-height: 24px;
 }
 
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index efebd9f05..1d1a8ad61 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #e4e9ec;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #f4f4f4;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #e4e9ec;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #f4f4f4;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #e4e9ec;
@@ -2292,6 +2292,7 @@
   background: #ffffff;
   color: #666666;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: #e4e9ec;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 700;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #e4e9ec;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #AFD3C8;
   color: #385048;
@@ -3282,6 +3279,7 @@
   background: #ffffff;
   color: #666666;
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  outline-color: #e4e9ec;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #666666;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #e4e9ec;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #AFD3C8;
   color: #385048;
@@ -5250,7 +5244,7 @@
   background: #7B95A3;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #666666;
   line-height: 24px;
 }
 
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 8005d317b..551ffcf8f 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #a6d5fa;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #a6d5fa;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #a6d5fa;
@@ -2292,6 +2292,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #a6d5fa;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #a6d5fa;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #E3F2FD;
   color: #495057;
@@ -3282,6 +3279,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #a6d5fa;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #a6d5fa;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #E3F2FD;
   color: #495057;
@@ -5299,7 +5293,7 @@
   background: #2196F3;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #495057;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index e05fe82b3..fbe9eab46 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #b7e0b8;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #b7e0b8;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #b7e0b8;
@@ -2292,6 +2292,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #b7e0b8;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #b7e0b8;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #E8F5E9;
   color: #495057;
@@ -3282,6 +3279,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #b7e0b8;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #b7e0b8;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #E8F5E9;
   color: #495057;
@@ -5299,7 +5293,7 @@
   background: #4CAF50;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #495057;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 9a60444a4..3596f3b3b 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #ffe69c;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #ffe69c;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #ffe69c;
@@ -2292,6 +2292,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #ffe69c;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #ffe69c;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #FFF3E0;
   color: #495057;
@@ -3282,6 +3279,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #ffe69c;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #ffe69c;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #FFF3E0;
   color: #495057;
@@ -5299,7 +5293,7 @@
   background: #FFC107;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: #495057;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 697047db9..a5e8bc139 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 0.2rem #df9eea;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 #df9eea;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #e9ecef;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 #df9eea;
@@ -2292,6 +2292,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #df9eea;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #df9eea;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #F3E5F5;
   color: #495057;
@@ -3282,6 +3279,7 @@
   background: #ffffff;
   color: #495057;
   transition: box-shadow 0.2s;
+  outline-color: #df9eea;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #495057;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #df9eea;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #F3E5F5;
   color: #495057;
@@ -5299,7 +5293,7 @@
   background: #9C27B0;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #495057;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 2b96c9ce9..1e4c3e847 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -521,18 +521,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #6366F1;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
   background: #f4f4f5;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+.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 1px #6366F1;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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: #f4f4f5;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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 1px #6366F1;
@@ -2327,6 +2327,7 @@
   background: #ffffff;
   color: #3f3f46;
   transition: none;
+  outline-color: #6366F1;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2368,10 +2369,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 500;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #6366F1;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #EEF2FF;
   color: #312E81;
@@ -3317,6 +3314,7 @@
   background: #ffffff;
   color: #3f3f46;
   transition: none;
+  outline-color: #6366F1;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3350,10 +3348,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: #3f3f46;
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #6366F1;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: #EEF2FF;
   color: #312E81;
@@ -5334,7 +5328,7 @@
   background: #4F46E5;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: #3f3f46;
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index c34acc028..a2072f618 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #93cbf9;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.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-highlight):not(.p-disabled):focus {
+.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 1px #93cbf9;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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-yearpicker .p-yearpicker-year: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 1px #93cbf9;
@@ -2292,6 +2292,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #93cbf9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #93cbf9;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3282,6 +3279,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #93cbf9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #93cbf9;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(100, 181, 246, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5299,7 +5293,7 @@
   background: #64B5F6;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index a678d5752..2bb48dd99 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #a7d8a9;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.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-highlight):not(.p-disabled):focus {
+.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 1px #a7d8a9;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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-yearpicker .p-yearpicker-year: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 1px #a7d8a9;
@@ -2292,6 +2292,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #a7d8a9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #a7d8a9;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3282,6 +3279,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #a7d8a9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #a7d8a9;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(129, 199, 132, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5299,7 +5293,7 @@
   background: #81C784;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index f865db3f4..f8d14359e 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.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-highlight):not(.p-disabled):focus {
+.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 1px #ffe284;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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-yearpicker .p-yearpicker-year: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 1px #ffe284;
@@ -2292,6 +2292,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #ffe284;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #ffe284;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3282,6 +3279,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #ffe284;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #ffe284;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(255, 213, 79, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5299,7 +5293,7 @@
   background: #FFD54F;
 }
 .p-progressbar .p-progressbar-label {
-  color: #212529;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index bff939cbc..c616a4d27 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -486,18 +486,18 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
 }
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+.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-highlight):not(.p-disabled):focus {
+.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 1px #cf95d9;
 }
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year: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-yearpicker .p-yearpicker-year: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 1px #cf95d9;
@@ -2292,6 +2292,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #cf95d9;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -2333,10 +2334,6 @@
 .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
   font-weight: 600;
 }
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 1px solid #cf95d9;
-  outline-offset: -1px;
-}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -3282,6 +3279,7 @@
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.2s;
+  outline-color: #cf95d9;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -3315,10 +3313,6 @@
 .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
   color: rgba(255, 255, 255, 0.87);
 }
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 1px solid #cf95d9;
-  outline-offset: -1px;
-}
 .p-treetable .p-treetable-tbody > tr.p-highlight {
   background: rgba(186, 104, 200, 0.16);
   color: rgba(255, 255, 255, 0.87);
@@ -5299,7 +5293,7 @@
   background: #BA68C8;
 }
 .p-progressbar .p-progressbar-label {
-  color: #ffffff;
+  color: rgba(255, 255, 255, 0.87);
   line-height: 1.5rem;
 }
 
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 7ad52d731..f4758c65e 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -680,10 +680,12 @@ export default {
         },
         switchToMonthView(event) {
             this.currentView = 'month';
+            setTimeout(this.updateFocus, 0);
             event.preventDefault();
         },
         switchToYearView(event) {
             this.currentView = 'year';
+            setTimeout(this.updateFocus, 0);
             event.preventDefault();
         },
         isEnabled() {
@@ -1352,6 +1354,8 @@ export default {
                 this.currentView = 'date';
                 this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
             }
+
+            setTimeout(this.updateFocus, 0);
         },
         onYearSelect(event, year) {
             if (this.view === 'year') {
@@ -1362,6 +1366,8 @@ export default {
                 this.currentView = 'month';
                 this.$emit('year-change', {month: this.currentMonth + 1, year: this.currentYear});
             }
+
+            setTimeout(this.updateFocus, 0);
         },
         enableModality() {
             if (!this.mask) {
@@ -1783,7 +1789,9 @@ export default {
                 }
 
                 //enter
-                case 13: {
+                //space
+                case 13:
+                case 32: {
                     this.onDateSelect(event, date);
                     event.preventDefault();
                     break;
@@ -1817,7 +1825,7 @@ export default {
                 }
                 else {
                     let prevMonthContainer = this.overlay.children[groupIndex - 1];
-                    let cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
+                    let cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
                     let focusCell = cells[cells.length - 1];
                     focusCell.tabIndex = '0';
                     focusCell.focus();
@@ -1830,7 +1838,7 @@ export default {
                 }
                 else {
                     let nextMonthContainer = this.overlay.children[groupIndex + 1];
-                    let focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
+                    let focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
                     focusCell.tabIndex = '0';
                     focusCell.focus();
                 }
@@ -1863,6 +1871,10 @@ export default {
                         prevCell.tabIndex = '0';
                         prevCell.focus();
                     }
+                    else {
+                        this.navigationState = {backward: true};
+                        this.navBackward(event);
+                    }
                     event.preventDefault();
                     break;
                 }
@@ -1875,12 +1887,18 @@ export default {
                         nextCell.tabIndex = '0';
                         nextCell.focus();
                     }
+                    else {
+                        this.navigationState = {backward: false};
+                        this.navForward(event);
+                    }
                     event.preventDefault();
                     break;
                 }
 
                 //enter
-                case 13: {
+                //space
+                case 13:
+                case 32: {
                     this.onMonthSelect(event, index);
                     event.preventDefault();
                     break;
@@ -1914,7 +1932,7 @@ export default {
                     cell.tabIndex = '-1';
                     var cells = cell.parentElement.children;
                     var cellIndex = DomHandler.index(cell);
-                    let nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex -3];
+                    let nextCell = cells[event.which === 40 ? cellIndex + 2 : cellIndex - 2];
                     if (nextCell) {
                         nextCell.tabIndex = '0';
                         nextCell.focus();
@@ -1931,6 +1949,10 @@ export default {
                         prevCell.tabIndex = '0';
                         prevCell.focus();
                     }
+                    else {
+                        this.navigationState = {backward: true};
+                        this.navBackward(event);
+                    }
                     event.preventDefault();
                     break;
                 }
@@ -1943,13 +1965,19 @@ export default {
                         nextCell.tabIndex = '0';
                         nextCell.focus();
                     }
+                    else {
+                        this.navigationState = {backward: false};
+                        this.navForward(event);
+                    }
                     event.preventDefault();
                     break;
                 }
 
                 //enter
-                case 13: {
-                    this.onMonthSelect(event, index);
+                //space
+                case 13:
+                case 32: {
+                    this.onYearSelect(event, index);
                     event.preventDefault();
                     break;
                 }
@@ -1974,6 +2002,7 @@ export default {
         },
         updateFocus() {
             let cell;
+
             if (this.navigationState) {
                 if (this.navigationState.button) {
                     this.initFocusableCell();
@@ -1985,11 +2014,32 @@ export default {
                 }
                 else {
                     if (this.navigationState.backward) {
-                        let cells = DomHandler.find(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
-                        cell = cells[cells.length - 1];
+                        let cells;
+
+                        if (this.currentView === 'month') {
+                            cells = DomHandler.find(this.overlay, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
+                        }
+                        else if (this.currentView === 'year') {
+                            cells = DomHandler.find(this.overlay, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+                        }
+                        else {
+                            cells = DomHandler.find(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                        }
+
+                        if (cells && cells.length > 0) {
+                            cell = cells[cells.length - 1];
+                        }
                     }
                     else {
-                        cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
+                        if (this.currentView === 'month') {
+                            cell = DomHandler.findSingle(this.overlay, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
+                        }
+                        else if (this.currentView === 'year') {
+                            cell = DomHandler.findSingle(this.overlay, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+                        }
+                        else {
+                            cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                        }
                     }
 
                     if (cell) {
@@ -2013,19 +2063,29 @@ export default {
                 cells.forEach(cell => cell.tabIndex = -1);
                 cell = selectedCell || cells[0];
             }
+            else if (this.currentView === 'year') {
+                let cells = DomHandler.find(this.overlay, '.p-yearpicker .p-yearpicker-year');
+                let selectedCell= DomHandler.findSingle(this.overlay, '.p-yearpicker .p-yearpicker-year.p-highlight');
+                cells.forEach(cell => cell.tabIndex = -1);
+                cell = selectedCell || cells[0];
+            }
             else {
                 cell = DomHandler.findSingle(this.overlay, 'span.p-highlight');
                 if (!cell) {
-                    let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not(.p-disabled)');
+                    let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink');
                     if (todayCell)
                         cell = todayCell;
                     else
-                        cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled)');
+                        cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink');
                 }
             }
 
             if (cell) {
                 cell.tabIndex = '0';
+
+                if (!this.navigationState || !this.navigationState.button) {
+                    cell.focus();
+                }
             }
         },
         trapFocus(event) {