From 1abd44429a21cc1b61e5dc7e6bf57819d570d59e Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 25 Jun 2020 16:04:00 +0300
Subject: [PATCH] Made ripple an option

---
 public/themes/arya-blue/theme.css             |   2 +-
 public/themes/arya-green/theme.css            |   2 +-
 public/themes/arya-orange/theme.css           |   2 +-
 public/themes/arya-purple/theme.css           |   2 +-
 public/themes/bootstrap4-dark-blue/theme.css  | 106 +++---
 .../themes/bootstrap4-dark-purple/theme.css   | 310 +++++++++---------
 public/themes/bootstrap4-light-blue/theme.css |   2 +-
 .../themes/bootstrap4-light-purple/theme.css  | 308 ++++++++---------
 public/themes/luna-amber/theme.css            |   2 +-
 public/themes/luna-blue/theme.css             |   2 +-
 public/themes/luna-green/theme.css            |   2 +-
 public/themes/luna-pink/theme.css             |   2 +-
 .../themes/md-dark-deeppurple-green/theme.css |   2 +-
 public/themes/md-dark-indigo-pink/theme.css   |   2 +-
 .../md-light-deeppurple-green/theme.css       |   2 +-
 public/themes/md-light-indigo-pink/theme.css  |   2 +-
 .../mdc-dark-deeppurple-green/theme.css       |   2 +-
 public/themes/mdc-dark-indigo-pink/theme.css  |   2 +-
 .../mdc-light-deeppurple-green/theme.css      |   2 +-
 public/themes/mdc-light-indigo-pink/theme.css |   2 +-
 public/themes/nova-accent/theme.css           |   2 +-
 public/themes/nova-alt/theme.css              |   2 +-
 public/themes/nova-vue/theme.css              |   2 +-
 public/themes/nova/theme.css                  |   2 +-
 public/themes/rhea/theme.css                  |   2 +-
 public/themes/saga-blue/theme.css             |   2 +-
 public/themes/saga-green/theme.css            |   2 +-
 public/themes/saga-orange/theme.css           |   2 +-
 public/themes/vela-blue/theme.css             |   2 +-
 public/themes/vela-green/theme.css            |   2 +-
 public/themes/vela-orange/theme.css           |   2 +-
 public/themes/vela-purple/theme.css           |   2 +-
 src/App.vue                                   |   9 +-
 src/AppConfigurator.vue                       |  15 +-
 .../images/themes/bootstrap4-dark-purple.svg  |   2 +-
 .../images/themes/bootstrap4-light-purple.svg |   2 +-
 src/assets/styles/app/_config.scss            |   1 -
 src/components/button/Button.css              |   4 +-
 src/components/button/Button.vue              |   2 +-
 src/components/common/Common.css              |   6 +-
 src/components/ripple/Ripple.js               |  33 +-
 src/main.js                                   |   2 +-
 src/views/button/ButtonDemo.vue               |  44 ++-
 src/views/button/ButtonDoc.vue                |  42 ++-
 src/views/dialog/DialogDemo.vue               |  10 +-
 src/views/dialog/DialogDoc.vue                |  10 +-
 src/views/steps/StepsDemo.vue                 |   5 +-
 47 files changed, 514 insertions(+), 455 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index e65885ded..092251159 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1514,7 +1514,7 @@
   color: #64B5F6;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 43fbcee67..810324664 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1514,7 +1514,7 @@
   color: #81C784;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 52335a6d4..77b4906be 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1514,7 +1514,7 @@
   color: #FFD54F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index fc2763039..a61449ba4 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1514,7 +1514,7 @@
   color: #BA68C8;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 63d9a1c5d..6b8e959a2 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -51,7 +51,7 @@
 .p-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -69,7 +69,7 @@
 .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
 .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
@@ -176,7 +176,7 @@
 .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
@@ -209,7 +209,7 @@
 .p-datepicker table td > span:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-datepicker table td.p-datepicker-today > span {
   background: transparent;
@@ -290,7 +290,7 @@
 .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
   background: #20262e;
@@ -298,7 +298,7 @@
 .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 
 @media screen and (max-width: 769px) {
@@ -329,7 +329,7 @@
 .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
 .p-checkbox .p-checkbox-box.p-highlight {
@@ -358,7 +358,7 @@
 .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
@@ -416,7 +416,7 @@
 .p-dropdown:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
 .p-dropdown .p-dropdown-label {
@@ -630,7 +630,7 @@
 .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
   background: #3f4b5b;
@@ -666,7 +666,7 @@
 .p-inputtext:enabled:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
 .p-inputtext.p-error, .p-inputtext.p-invalid {
@@ -766,7 +766,7 @@
 .p-listbox .p-listbox-list .p-listbox-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
@@ -789,7 +789,7 @@
 .p-multiselect:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
 .p-multiselect .p-multiselect-label {
@@ -871,7 +871,7 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
@@ -917,7 +917,7 @@
 .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
@@ -954,7 +954,7 @@
 .p-rating .p-rating-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-rating .p-rating-icon:first-child {
   margin-left: 0;
@@ -1038,7 +1038,7 @@
 .p-slider .p-slider-handle:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-slider .p-slider-range {
   background: #8dd0ff;
@@ -1142,7 +1142,7 @@
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-button .p-button-icon-left {
   margin-right: 0.5rem;
@@ -1514,12 +1514,12 @@
   color: #56bdff;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
   background: transparent;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   border-color: transparent;
 }
 .p-button.p-button-link:enabled:active {
@@ -1611,7 +1611,7 @@
   background: #2a323d;
 }
 .p-datatable .p-sortable-column {
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: #e3f3fe;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: rgba(255, 255, 255, 0.6);
@@ -1644,7 +1644,7 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: #e3f3fe;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -1850,7 +1850,7 @@
 .fc .fc-toolbar .fc-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .fc .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc .fc-toolbar .fc-button.fc-timeGridDay-button {
   background: #6c757d;
@@ -1876,7 +1876,7 @@
 .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
   z-index: 1;
 }
 .fc .fc-toolbar .fc-button-group .fc-button {
@@ -1930,7 +1930,7 @@
 .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
   color: #151515;
@@ -1991,7 +1991,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover {
   color: rgba(255, 255, 255, 0.87);
@@ -2110,7 +2110,7 @@
 .p-picklist .p-picklist-list .p-picklist-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
   color: #151515;
@@ -2181,7 +2181,7 @@
 .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
   background: #8dd0ff;
@@ -2257,7 +2257,7 @@
   background: #2a323d;
 }
 .p-treetable .p-sortable-column {
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: #e3f3fe;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: rgba(255, 255, 255, 0.6);
@@ -2290,7 +2290,7 @@
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: #e3f3fe;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -2406,7 +2406,7 @@
 .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
   background: #20262e;
@@ -2513,7 +2513,7 @@
 .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
   background: #20262e;
@@ -2549,7 +2549,7 @@
 .p-panel .p-panel-header .p-panel-header-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-panel.p-panel-toggleable .p-panel-header {
   padding: 0.5rem 1.25rem;
@@ -2600,7 +2600,7 @@
 .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
   background: #2a323d;
@@ -2666,7 +2666,7 @@
 .p-dialog .p-dialog-header .p-dialog-header-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
   margin-right: 0;
@@ -2799,7 +2799,7 @@
 .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-fileupload .p-fileupload-content {
   background: #2a323d;
@@ -2840,7 +2840,7 @@
 .p-breadcrumb ul li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
   color: #8dd0ff;
@@ -2899,7 +2899,7 @@
 .p-contextmenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-contextmenu .p-submenu-list {
   padding: 0.5rem 0;
@@ -2964,7 +2964,7 @@
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
 .p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
@@ -3014,7 +3014,7 @@
 .p-megamenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-megamenu .p-megamenu-panel {
   background: #2a323d;
@@ -3093,7 +3093,7 @@
 .p-menu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-menu.p-menu-overlay {
   border: 1px solid #3f4b5b;
@@ -3152,7 +3152,7 @@
 .p-menubar .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
   padding: 1rem;
@@ -3187,7 +3187,7 @@
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
 .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
@@ -3254,7 +3254,7 @@
   .p-menubar .p-menubar-button:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+    box-shadow: 0 0 0 1px #e3f3fe;
   }
   .p-menubar .p-menubar-root-list {
     position: absolute;
@@ -3308,7 +3308,7 @@
   .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
   }
   .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
     margin-left: auto;
@@ -3375,7 +3375,7 @@
 .p-panelmenu .p-panelmenu-header > a:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover {
   background: #20262e;
@@ -3441,7 +3441,7 @@
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
   margin-right: 0.5rem;
@@ -3494,7 +3494,7 @@
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-steps .p-steps-item.p-highlight .p-steps-number {
   background: #8dd0ff;
@@ -3542,7 +3542,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: #2a323d;
@@ -3595,7 +3595,7 @@
 .p-tieredmenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
 }
 .p-tieredmenu.p-menu-overlay {
   border: 1px solid #3f4b5b;
@@ -3747,7 +3747,7 @@
 .p-message .p-message-close:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-message .p-message-text {
   font-size: 1rem;
@@ -3931,7 +3931,7 @@
 .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 
 .p-galleria-mask.p-component-overlay {
@@ -3950,7 +3950,7 @@
 .p-inplace .p-inplace-display:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 
 .p-progressbar {
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 63d9a1c5d..ed29fe715 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -7,7 +7,7 @@
   --surface-e: #2a323d;
   --text-color: rgba(255, 255, 255, 0.87);
   --text-color-secondary: rgba(255, 255, 255, 0.6);
-  --primary-color: #8dd0ff;
+  --primary-color: #c298d8;
   --primary-color-text: #151515;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
@@ -51,7 +51,7 @@
 .p-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -69,8 +69,8 @@
 .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
-  border-color: #8dd0ff;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
 }
 .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
   padding: 0.25rem 0;
@@ -85,7 +85,7 @@
 .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.25rem 0.75rem;
   margin-right: 0.5rem;
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
   border-radius: 4px;
 }
@@ -118,7 +118,7 @@
 }
 .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
   color: #151515;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-autocomplete-panel.p-error > .p-inputtext, .p-autocomplete-panel.p-invalid > .p-inputtext {
   border-color: #f19ea6;
@@ -176,8 +176,8 @@
 .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
-  border-color: #8dd0ff;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
   margin-right: 0.5rem;
@@ -204,20 +204,20 @@
 }
 .p-datepicker table td > span.p-highlight {
   color: #151515;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-datepicker table td > span:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-datepicker table td.p-datepicker-today > span {
   background: transparent;
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #151515;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-datepicker .p-datepicker-buttonbar {
   padding: 1rem 0;
@@ -264,7 +264,7 @@
 }
 .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
   color: #151515;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
   border-right: 1px solid #3f4b5b;
@@ -290,7 +290,7 @@
 .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
   background: #20262e;
@@ -298,7 +298,7 @@
 .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 
 @media screen and (max-width: 769px) {
@@ -329,16 +329,16 @@
 .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
-  border-color: #8dd0ff;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
 }
 .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #8dd0ff;
-  background: #8dd0ff;
+  border-color: #c298d8;
+  background: #c298d8;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #1dadff;
-  background: #1dadff;
+  border-color: #9954bb;
+  background: #9954bb;
   color: #151515;
 }
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
@@ -358,13 +358,13 @@
 .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
-  border-color: #8dd0ff;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 0.25rem 0.75rem;
   margin-right: 0.5rem;
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
   border-radius: 4px;
 }
@@ -416,8 +416,8 @@
 .p-dropdown:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
-  border-color: #8dd0ff;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
 }
 .p-dropdown .p-dropdown-label {
   border: 0 none;
@@ -479,7 +479,7 @@
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
   color: #151515;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
@@ -532,7 +532,7 @@
 .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
 .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
 .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
@@ -558,7 +558,7 @@
 .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
 .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #8dd0ff;
+  stroke: #c298d8;
 }
 
 .p-inputgroup-addon {
@@ -630,19 +630,19 @@
 .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
   background: #3f4b5b;
 }
 .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
   background: #151515;
 }
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-inputswitch.p-error, .p-inputswitch.p-invalid {
   border-color: #f19ea6;
@@ -666,8 +666,8 @@
 .p-inputtext:enabled:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
-  border-color: #8dd0ff;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
 }
 .p-inputtext.p-error, .p-inputtext.p-invalid {
   border-color: #f19ea6;
@@ -761,12 +761,12 @@
 }
 .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
   color: #151515;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-listbox .p-listbox-list .p-listbox-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
@@ -789,8 +789,8 @@
 .p-multiselect:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
-  border-color: #8dd0ff;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
 }
 .p-multiselect .p-multiselect-label {
   padding: 0.5rem 0.75rem;
@@ -862,7 +862,7 @@
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
   color: #151515;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
@@ -871,7 +871,7 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
@@ -917,8 +917,8 @@
 .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
-  border-color: #8dd0ff;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
   font-size: 0.75rem;
@@ -926,12 +926,12 @@
   color: #151515;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #8dd0ff;
-  background: #8dd0ff;
+  border-color: #c298d8;
+  background: #c298d8;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #1dadff;
-  background: #1dadff;
+  border-color: #9954bb;
+  background: #9954bb;
   color: #151515;
 }
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
@@ -954,13 +954,13 @@
 .p-rating .p-rating-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-rating .p-rating-icon:first-child {
   margin-left: 0;
 }
 .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
   color: #f19ea6;
@@ -1030,22 +1030,22 @@
 .p-slider .p-slider-handle {
   height: 1.143rem;
   width: 1.143rem;
-  background: #8dd0ff;
-  border: 2px solid #8dd0ff;
+  background: #c298d8;
+  border: 2px solid #c298d8;
   border-radius: 4px;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
 }
 .p-slider .p-slider-handle:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-slider .p-slider-range {
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background: #56bdff;
-  border-color: #56bdff;
+  background: #aa70c7;
+  border-color: #aa70c7;
 }
 
 .p-togglebutton.p-button {
@@ -1092,57 +1092,57 @@
 
 .p-button {
   color: #151515;
-  background: #8dd0ff;
-  border: 1px solid #8dd0ff;
+  background: #c298d8;
+  border: 1px solid #c298d8;
   padding: 0.5rem 0.75rem;
   font-size: 1rem;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   border-radius: 4px;
 }
 .p-button:enabled:hover {
-  background: #56bdff;
+  background: #aa70c7;
   color: #151515;
-  border-color: #56bdff;
+  border-color: #aa70c7;
 }
 .p-button:enabled:active {
-  background: #1dadff;
+  background: #9954bb;
   color: #151515;
-  border-color: #1dadff;
+  border-color: #9954bb;
 }
 .p-button.p-button-outlined {
   background-color: transparent;
-  color: #8dd0ff;
+  color: #c298d8;
   border: 1px solid;
 }
 .p-button.p-button-outlined:enabled:hover {
-  background: rgba(141, 208, 255, 0.04);
-  color: #8dd0ff;
+  background: rgba(194, 152, 216, 0.04);
+  color: #c298d8;
   border: 1px solid;
 }
 .p-button.p-button-outlined:enabled:active {
-  background: rgba(141, 208, 255, 0.16);
-  color: #8dd0ff;
+  background: rgba(194, 152, 216, 0.16);
+  color: #c298d8;
   border: 1px solid;
 }
 .p-button.p-button-text {
   background-color: transparent;
-  color: #8dd0ff;
+  color: #c298d8;
   border-color: transparent;
 }
 .p-button.p-button-text:enabled:hover {
-  background: rgba(141, 208, 255, 0.04);
-  color: #8dd0ff;
+  background: rgba(194, 152, 216, 0.04);
+  color: #c298d8;
   border-color: transparent;
 }
 .p-button.p-button-text:enabled:active {
-  background: rgba(141, 208, 255, 0.16);
-  color: #8dd0ff;
+  background: rgba(194, 152, 216, 0.16);
+  color: #c298d8;
   border-color: transparent;
 }
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-button .p-button-icon-left {
   margin-right: 0.5rem;
@@ -1161,7 +1161,7 @@
   min-width: 1rem;
   height: 1rem;
   line-height: 1rem;
-  color: #8dd0ff;
+  color: #c298d8;
   background-color: #151515;
 }
 .p-button.p-button-raised {
@@ -1505,26 +1505,26 @@
 }
 
 .p-button.p-button-link {
-  color: #8dd0ff;
+  color: #c298d8;
   background: transparent;
   border: transparent;
 }
 .p-button.p-button-link:enabled:hover {
   background: transparent;
-  color: #56bdff;
+  color: #aa70c7;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
   background: transparent;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
   border-color: transparent;
 }
 .p-button.p-button-link:enabled:active {
   background: transparent;
-  color: #8dd0ff;
+  color: #c298d8;
   border-color: transparent;
 }
 
@@ -1563,7 +1563,7 @@
   background: #20262e;
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
 }
 
@@ -1611,7 +1611,7 @@
   background: #2a323d;
 }
 .p-datatable .p-sortable-column {
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: #f0e6f5;
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: rgba(255, 255, 255, 0.6);
@@ -1622,7 +1622,7 @@
   height: 1.143rem;
   min-width: 1.143rem;
   line-height: 1.143rem;
-  color: #8dd0ff;
+  color: #c298d8;
   background: #151515;
   margin-left: 0.5rem;
 }
@@ -1635,16 +1635,16 @@
 }
 .p-datatable .p-sortable-column.p-highlight {
   background: #2a323d;
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-datatable .p-datatable-tbody > tr {
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: #f0e6f5;
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -1660,7 +1660,7 @@
   color: rgba(255, 255, 255, 0.87);
 }
 .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
 }
 .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
@@ -1670,17 +1670,17 @@
   color: #151515;
 }
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #8dd0ff;
+  box-shadow: inset 0 2px 0 0 #c298d8;
 }
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #8dd0ff;
+  box-shadow: inset 0 -2px 0 0 #c298d8;
 }
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #20262e;
   color: rgba(255, 255, 255, 0.87);
 }
 .p-datatable .p-column-resizer-helper {
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-datatable .p-datatable-scrollable-header,
 .p-datatable .p-datatable-scrollable-footer {
@@ -1714,7 +1714,7 @@
   background: rgba(0, 0, 0, 0.05);
 }
 .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
 }
 .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
@@ -1808,8 +1808,8 @@
   border-right: 1px solid #3f4b5b;
 }
 .fc .fc-view-container .fc-event {
-  background: #56bdff;
-  border: 1px solid #56bdff;
+  background: #aa70c7;
+  border: 1px solid #aa70c7;
   color: #151515;
 }
 .fc .fc-view-container .fc-divider {
@@ -1818,8 +1818,8 @@
 }
 .fc .fc-toolbar .fc-button {
   color: #151515;
-  background: #8dd0ff;
-  border: 1px solid #8dd0ff;
+  background: #c298d8;
+  border: 1px solid #c298d8;
   font-size: 1rem;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   border-radius: 4px;
@@ -1827,9 +1827,9 @@
   align-items: center;
 }
 .fc .fc-toolbar .fc-button:hover {
-  background: #56bdff;
+  background: #aa70c7;
   color: #151515;
-  border-color: #56bdff;
+  border-color: #aa70c7;
 }
 .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
   font-family: "PrimeIcons" !important;
@@ -1850,7 +1850,7 @@
 .fc .fc-toolbar .fc-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .fc .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc .fc-toolbar .fc-button.fc-timeGridDay-button {
   background: #6c757d;
@@ -1876,7 +1876,7 @@
 .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
   z-index: 1;
 }
 .fc .fc-toolbar .fc-button-group .fc-button {
@@ -1930,11 +1930,11 @@
 .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
   color: #151515;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 
 @media screen and (max-width: 769px) {
@@ -1958,11 +1958,11 @@
   color: rgba(255, 255, 255, 0.87);
 }
 .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
 }
 .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #0e9bff;
+  color: #8942ae;
 }
 .p-organizationchart .p-organizationchart-line-down {
   background: #3f4b5b;
@@ -1991,7 +1991,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover {
   color: rgba(255, 255, 255, 0.87);
@@ -1999,7 +1999,7 @@
 
 .p-paginator {
   background: #2a323d;
-  color: #8dd0ff;
+  color: #c298d8;
   border: solid #3f4b5b;
   border-width: 0;
   padding: 0.75rem;
@@ -2011,7 +2011,7 @@
 .p-paginator .p-paginator-last {
   background-color: transparent;
   border: 1px solid #3f4b5b;
-  color: #8dd0ff;
+  color: #c298d8;
   min-width: 2.357rem;
   height: 2.357rem;
   margin: 0 0 0 -1px;
@@ -2024,7 +2024,7 @@
 .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
   background: #20262e;
   border-color: #3f4b5b;
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-paginator .p-paginator-first {
   border-top-left-radius: 4px;
@@ -2044,7 +2044,7 @@
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 1px solid #3f4b5b;
-  color: #8dd0ff;
+  color: #c298d8;
   min-width: 2.357rem;
   height: 2.357rem;
   margin: 0 0 0 -1px;
@@ -2053,7 +2053,7 @@
 .p-paginator .p-paginator-pages .p-paginator-page {
   background-color: transparent;
   border: 1px solid #3f4b5b;
-  color: #8dd0ff;
+  color: #c298d8;
   min-width: 2.357rem;
   height: 2.357rem;
   margin: 0 0 0 -1px;
@@ -2061,14 +2061,14 @@
   border-radius: 0;
 }
 .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background: #8dd0ff;
-  border-color: #8dd0ff;
+  background: #c298d8;
+  border-color: #c298d8;
   color: #151515;
 }
 .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
   background: #20262e;
   border-color: #3f4b5b;
-  color: #8dd0ff;
+  color: #c298d8;
 }
 
 .p-picklist .p-picklist-buttons {
@@ -2110,11 +2110,11 @@
 .p-picklist .p-picklist-list .p-picklist-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
   color: #151515;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 
 @media screen and (max-width: 769px) {
@@ -2181,10 +2181,10 @@
 .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
@@ -2257,7 +2257,7 @@
   background: #2a323d;
 }
 .p-treetable .p-sortable-column {
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: #f0e6f5;
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: rgba(255, 255, 255, 0.6);
@@ -2268,7 +2268,7 @@
   height: 1.143rem;
   min-width: 1.143rem;
   line-height: 1.143rem;
-  color: #8dd0ff;
+  color: #c298d8;
   background: #151515;
   margin-left: 0.5rem;
 }
@@ -2281,16 +2281,16 @@
 }
 .p-treetable .p-sortable-column.p-highlight {
   background: #2a323d;
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-treetable .p-treetable-tbody > tr {
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: #f0e6f5;
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -2313,7 +2313,7 @@
   color: rgba(255, 255, 255, 0.87);
 }
 .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
 }
 .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
@@ -2330,7 +2330,7 @@
   color: rgba(255, 255, 255, 0.87);
 }
 .p-treetable .p-column-resizer-helper {
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-treetable .p-treetable-scrollable-header,
 .p-treetable .p-treetable-scrollable-footer {
@@ -2406,7 +2406,7 @@
 .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
   background: #20262e;
@@ -2513,7 +2513,7 @@
 .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
   background: #20262e;
@@ -2549,7 +2549,7 @@
 .p-panel .p-panel-header .p-panel-header-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-panel.p-panel-toggleable .p-panel-header {
   padding: 0.5rem 1.25rem;
@@ -2600,7 +2600,7 @@
 .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
   background: #2a323d;
@@ -2666,7 +2666,7 @@
 .p-dialog .p-dialog-header .p-dialog-header-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
   margin-right: 0;
@@ -2799,7 +2799,7 @@
 .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-fileupload .p-fileupload-content {
   background: #2a323d;
@@ -2817,14 +2817,14 @@
 }
 
 .p-fileupload-choose:not(.p-disabled):hover {
-  background: #56bdff;
+  background: #aa70c7;
   color: #151515;
-  border-color: #56bdff;
+  border-color: #aa70c7;
 }
 .p-fileupload-choose:not(.p-disabled):active {
-  background: #1dadff;
+  background: #9954bb;
   color: #151515;
-  border-color: #1dadff;
+  border-color: #9954bb;
 }
 
 .p-breadcrumb {
@@ -2840,13 +2840,13 @@
 .p-breadcrumb ul li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #8dd0ff;
+  color: #c298d8;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
@@ -2899,7 +2899,7 @@
 .p-contextmenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-contextmenu .p-submenu-list {
   padding: 0.5rem 0;
@@ -2964,7 +2964,7 @@
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
 .p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
@@ -3014,7 +3014,7 @@
 .p-megamenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-megamenu .p-megamenu-panel {
   background: #2a323d;
@@ -3093,7 +3093,7 @@
 .p-menu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-menu.p-menu-overlay {
   border: 1px solid #3f4b5b;
@@ -3152,7 +3152,7 @@
 .p-menubar .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
   padding: 1rem;
@@ -3187,7 +3187,7 @@
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
 .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
@@ -3254,7 +3254,7 @@
   .p-menubar .p-menubar-button:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+    box-shadow: 0 0 0 1px #f0e6f5;
   }
   .p-menubar .p-menubar-root-list {
     position: absolute;
@@ -3308,7 +3308,7 @@
   .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+    box-shadow: inset 0 0 0 0.15rem #f0e6f5;
   }
   .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
     margin-left: auto;
@@ -3375,7 +3375,7 @@
 .p-panelmenu .p-panelmenu-header > a:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover {
   background: #20262e;
@@ -3441,7 +3441,7 @@
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
   margin-right: 0.5rem;
@@ -3494,10 +3494,10 @@
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
 }
 .p-steps .p-steps-item.p-highlight .p-steps-title {
@@ -3542,7 +3542,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: #2a323d;
@@ -3595,7 +3595,7 @@
 .p-tieredmenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem #f0e6f5;
 }
 .p-tieredmenu.p-menu-overlay {
   border: 1px solid #3f4b5b;
@@ -3747,7 +3747,7 @@
 .p-message .p-message-close:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 .p-message .p-message-text {
   font-size: 1rem;
@@ -3884,7 +3884,7 @@
   background: #687c97;
 }
 .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
 }
 .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator {
@@ -3903,7 +3903,7 @@
   background: rgba(255, 255, 255, 0.6);
 }
 .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
 }
 .p-galleria .p-galleria-thumbnail-container {
@@ -3931,7 +3931,7 @@
 .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 
 .p-galleria-mask.p-component-overlay {
@@ -3950,7 +3950,7 @@
 .p-inplace .p-inplace-display:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 1px rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 1px #f0e6f5;
 }
 
 .p-progressbar {
@@ -3962,7 +3962,7 @@
 .p-progressbar .p-progressbar-value {
   border: 0 none;
   margin: 0;
-  background: #8dd0ff;
+  background: #c298d8;
 }
 .p-progressbar .p-progressbar-label {
   color: rgba(255, 255, 255, 0.87);
@@ -3985,7 +3985,7 @@
 }
 
 .p-badge {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
   font-size: 0.75rem;
   font-weight: 700;
@@ -4027,7 +4027,7 @@
 }
 
 .p-tag {
-  background: #8dd0ff;
+  background: #c298d8;
   color: #151515;
   font-size: 0.75rem;
   font-weight: 700;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index cf158e4ba..fdcdd1b20 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1514,7 +1514,7 @@
   color: #0069d9;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index cf158e4ba..295530b95 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -7,7 +7,7 @@
   --surface-e: #ffffff;
   --text-color: #212529;
   --text-color-secondary: $shade600;
-  --primary-color: #007bff;
+  --primary-color: #883cae;
   --primary-color-text: #ffffff;
   --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
@@ -51,7 +51,7 @@
 .p-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
 .p-autocomplete .p-autocomplete-loader {
@@ -69,8 +69,8 @@
 .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
 }
 .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
   padding: 0.25rem 0;
@@ -85,7 +85,7 @@
 .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.25rem 0.75rem;
   margin-right: 0.5rem;
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
   border-radius: 4px;
 }
@@ -118,7 +118,7 @@
 }
 .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
   color: #ffffff;
-  background: #007bff;
+  background: #883cae;
 }
 .p-autocomplete-panel.p-error > .p-inputtext, .p-autocomplete-panel.p-invalid > .p-inputtext {
   border-color: #dc3545;
@@ -176,8 +176,8 @@
 .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
 }
 .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
   margin-right: 0.5rem;
@@ -204,12 +204,12 @@
 }
 .p-datepicker table td > span.p-highlight {
   color: #ffffff;
-  background: #007bff;
+  background: #883cae;
 }
 .p-datepicker table td > span:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-datepicker table td.p-datepicker-today > span {
   background: #ced4da;
@@ -217,7 +217,7 @@
 }
 .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
-  background: #007bff;
+  background: #883cae;
 }
 .p-datepicker .p-datepicker-buttonbar {
   padding: 1rem 0;
@@ -264,7 +264,7 @@
 }
 .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
   color: #ffffff;
-  background: #007bff;
+  background: #883cae;
 }
 .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
   border-right: 1px solid rgba(0, 0, 0, 0.125);
@@ -290,7 +290,7 @@
 .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  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 {
   background: #e9ecef;
@@ -298,7 +298,7 @@
 .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
 @media screen and (max-width: 769px) {
@@ -329,16 +329,16 @@
 .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
 }
 .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #007bff;
-  background: #007bff;
+  border-color: #883cae;
+  background: #883cae;
 }
 .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #0062cc;
-  background: #0062cc;
+  border-color: #68329e;
+  background: #68329e;
   color: #ffffff;
 }
 .p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
@@ -358,13 +358,13 @@
 .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
 }
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 0.25rem 0.75rem;
   margin-right: 0.5rem;
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
   border-radius: 4px;
 }
@@ -416,8 +416,8 @@
 .p-dropdown:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
 }
 .p-dropdown .p-dropdown-label {
   border: 0 none;
@@ -479,7 +479,7 @@
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
   color: #ffffff;
-  background: #007bff;
+  background: #883cae;
 }
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
   color: #212529;
@@ -532,7 +532,7 @@
 .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
 .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #007bff;
+  color: #883cae;
 }
 .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
 .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
@@ -558,7 +558,7 @@
 .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
 .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #007bff;
+  stroke: #883cae;
 }
 
 .p-inputgroup-addon {
@@ -630,19 +630,19 @@
 .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
   background: #ced4da;
 }
 .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background: #007bff;
+  background: #883cae;
 }
 .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
   background: #ffffff;
 }
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background: #007bff;
+  background: #883cae;
 }
 .p-inputswitch.p-error, .p-inputswitch.p-invalid {
   border-color: #dc3545;
@@ -666,8 +666,8 @@
 .p-inputtext:enabled:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
 }
 .p-inputtext.p-error, .p-inputtext.p-invalid {
   border-color: #dc3545;
@@ -761,12 +761,12 @@
 }
 .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
   color: #ffffff;
-  background: #007bff;
+  background: #883cae;
 }
 .p-listbox .p-listbox-list .p-listbox-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
   color: #212529;
@@ -789,8 +789,8 @@
 .p-multiselect:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
 }
 .p-multiselect .p-multiselect-label {
   padding: 0.5rem 0.75rem;
@@ -862,7 +862,7 @@
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
   color: #ffffff;
-  background: #007bff;
+  background: #883cae;
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
   color: #212529;
@@ -871,7 +871,7 @@
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
@@ -917,8 +917,8 @@
 .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
-  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
 }
 .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
   font-size: 0.75rem;
@@ -926,12 +926,12 @@
   color: #ffffff;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #007bff;
-  background: #007bff;
+  border-color: #883cae;
+  background: #883cae;
 }
 .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #0062cc;
-  background: #0062cc;
+  border-color: #68329e;
+  background: #68329e;
   color: #ffffff;
 }
 .p-radiobutton.p-error > .p-checkbox-box, .p-radiobutton.p-invalid > .p-checkbox-box {
@@ -954,13 +954,13 @@
 .p-rating .p-rating-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-rating .p-rating-icon:first-child {
   margin-left: 0;
 }
 .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #007bff;
+  color: #883cae;
 }
 .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
   color: #dc3545;
@@ -1030,22 +1030,22 @@
 .p-slider .p-slider-handle {
   height: 1.143rem;
   width: 1.143rem;
-  background: #007bff;
-  border: 2px solid #007bff;
+  background: #883cae;
+  border: 2px solid #883cae;
   border-radius: 4px;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
 }
 .p-slider .p-slider-handle:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-slider .p-slider-range {
-  background: #007bff;
+  background: #883cae;
 }
 .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background: #0069d9;
-  border-color: #0069d9;
+  background: #7a38a7;
+  border-color: #7a38a7;
 }
 
 .p-togglebutton.p-button {
@@ -1092,57 +1092,57 @@
 
 .p-button {
   color: #ffffff;
-  background: #007bff;
-  border: 1px solid #007bff;
+  background: #883cae;
+  border: 1px solid #883cae;
   padding: 0.5rem 0.75rem;
   font-size: 1rem;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   border-radius: 4px;
 }
 .p-button:enabled:hover {
-  background: #0069d9;
+  background: #7a38a7;
   color: #ffffff;
-  border-color: #0069d9;
+  border-color: #7a38a7;
 }
 .p-button:enabled:active {
-  background: #0062cc;
+  background: #68329e;
   color: #ffffff;
-  border-color: #0062cc;
+  border-color: #68329e;
 }
 .p-button.p-button-outlined {
   background-color: transparent;
-  color: #007bff;
+  color: #883cae;
   border: 1px solid;
 }
 .p-button.p-button-outlined:enabled:hover {
-  background: rgba(0, 123, 255, 0.04);
-  color: #007bff;
+  background: rgba(136, 60, 174, 0.04);
+  color: #883cae;
   border: 1px solid;
 }
 .p-button.p-button-outlined:enabled:active {
-  background: rgba(0, 123, 255, 0.16);
-  color: #007bff;
+  background: rgba(136, 60, 174, 0.16);
+  color: #883cae;
   border: 1px solid;
 }
 .p-button.p-button-text {
   background-color: transparent;
-  color: #007bff;
+  color: #883cae;
   border-color: transparent;
 }
 .p-button.p-button-text:enabled:hover {
-  background: rgba(0, 123, 255, 0.04);
-  color: #007bff;
+  background: rgba(136, 60, 174, 0.04);
+  color: #883cae;
   border-color: transparent;
 }
 .p-button.p-button-text:enabled:active {
-  background: rgba(0, 123, 255, 0.16);
-  color: #007bff;
+  background: rgba(136, 60, 174, 0.16);
+  color: #883cae;
   border-color: transparent;
 }
 .p-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-button .p-button-icon-left {
   margin-right: 0.5rem;
@@ -1161,7 +1161,7 @@
   min-width: 1rem;
   height: 1rem;
   line-height: 1rem;
-  color: #007bff;
+  color: #883cae;
   background-color: #ffffff;
 }
 .p-button.p-button-raised {
@@ -1505,26 +1505,26 @@
 }
 
 .p-button.p-button-link {
-  color: #007bff;
+  color: #883cae;
   background: transparent;
   border: transparent;
 }
 .p-button.p-button-link:enabled:hover {
   background: transparent;
-  color: #0069d9;
+  color: #7a38a7;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
   background: transparent;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   border-color: transparent;
 }
 .p-button.p-button-link:enabled:active {
   background: transparent;
-  color: #007bff;
+  color: #883cae;
   border-color: transparent;
 }
 
@@ -1563,7 +1563,7 @@
   background: rgba(0, 0, 0, 0.125);
 }
 .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
 }
 
@@ -1611,7 +1611,7 @@
   background: #ffffff;
 }
 .p-datatable .p-sortable-column {
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: rgba(136, 60, 174, 0.5);
 }
 .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #6c757d;
@@ -1622,7 +1622,7 @@
   height: 1.143rem;
   min-width: 1.143rem;
   line-height: 1.143rem;
-  color: #007bff;
+  color: #883cae;
   background: #ffffff;
   margin-left: 0.5rem;
 }
@@ -1635,16 +1635,16 @@
 }
 .p-datatable .p-sortable-column.p-highlight {
   background: #ffffff;
-  color: #007bff;
+  color: #883cae;
 }
 .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #007bff;
+  color: #883cae;
 }
 .p-datatable .p-datatable-tbody > tr {
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: rgba(136, 60, 174, 0.5);
 }
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
@@ -1660,7 +1660,7 @@
   color: #212529;
 }
 .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
 }
 .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
@@ -1670,17 +1670,17 @@
   color: #ffffff;
 }
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #007bff;
+  box-shadow: inset 0 2px 0 0 #883cae;
 }
 .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #007bff;
+  box-shadow: inset 0 -2px 0 0 #883cae;
 }
 .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
   background: #e9ecef;
   color: #212529;
 }
 .p-datatable .p-column-resizer-helper {
-  background: #007bff;
+  background: #883cae;
 }
 .p-datatable .p-datatable-scrollable-header,
 .p-datatable .p-datatable-scrollable-footer {
@@ -1714,7 +1714,7 @@
   background: rgba(0, 0, 0, 0.05);
 }
 .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
 }
 .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
@@ -1808,8 +1808,8 @@
   border-right: 1px solid rgba(0, 0, 0, 0.125);
 }
 .fc .fc-view-container .fc-event {
-  background: #0069d9;
-  border: 1px solid #0069d9;
+  background: #7a38a7;
+  border: 1px solid #7a38a7;
   color: #ffffff;
 }
 .fc .fc-view-container .fc-divider {
@@ -1818,8 +1818,8 @@
 }
 .fc .fc-toolbar .fc-button {
   color: #ffffff;
-  background: #007bff;
-  border: 1px solid #007bff;
+  background: #883cae;
+  border: 1px solid #883cae;
   font-size: 1rem;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   border-radius: 4px;
@@ -1827,9 +1827,9 @@
   align-items: center;
 }
 .fc .fc-toolbar .fc-button:hover {
-  background: #0069d9;
+  background: #7a38a7;
   color: #ffffff;
-  border-color: #0069d9;
+  border-color: #7a38a7;
 }
 .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
   font-family: "PrimeIcons" !important;
@@ -1850,7 +1850,7 @@
 .fc .fc-toolbar .fc-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .fc .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc .fc-toolbar .fc-button.fc-timeGridDay-button {
   background: #6c757d;
@@ -1876,7 +1876,7 @@
 .fc .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   z-index: 1;
 }
 .fc .fc-toolbar .fc-button-group .fc-button {
@@ -1930,11 +1930,11 @@
 .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
   color: #ffffff;
-  background: #007bff;
+  background: #883cae;
 }
 
 @media screen and (max-width: 769px) {
@@ -1958,11 +1958,11 @@
   color: #212529;
 }
 .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
 }
 .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #003e80;
+  color: #3e1b4f;
 }
 .p-organizationchart .p-organizationchart-line-down {
   background: rgba(0, 0, 0, 0.125);
@@ -1991,7 +1991,7 @@
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-organizationchart .p-organizationchart-node-content .p-node-toggler:hover {
   color: #212529;
@@ -1999,7 +1999,7 @@
 
 .p-paginator {
   background: #ffffff;
-  color: #007bff;
+  color: #883cae;
   border: solid rgba(0, 0, 0, 0.125);
   border-width: 0;
   padding: 0.75rem;
@@ -2011,7 +2011,7 @@
 .p-paginator .p-paginator-last {
   background-color: #ffffff;
   border: 1px solid #dee2e6;
-  color: #007bff;
+  color: #883cae;
   min-width: 2.357rem;
   height: 2.357rem;
   margin: 0 0 0 -1px;
@@ -2024,7 +2024,7 @@
 .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
   background: #e9ecef;
   border-color: #dee2e6;
-  color: #007bff;
+  color: #883cae;
 }
 .p-paginator .p-paginator-first {
   border-top-left-radius: 4px;
@@ -2044,7 +2044,7 @@
 .p-paginator .p-paginator-current {
   background-color: #ffffff;
   border: 1px solid #dee2e6;
-  color: #007bff;
+  color: #883cae;
   min-width: 2.357rem;
   height: 2.357rem;
   margin: 0 0 0 -1px;
@@ -2053,7 +2053,7 @@
 .p-paginator .p-paginator-pages .p-paginator-page {
   background-color: #ffffff;
   border: 1px solid #dee2e6;
-  color: #007bff;
+  color: #883cae;
   min-width: 2.357rem;
   height: 2.357rem;
   margin: 0 0 0 -1px;
@@ -2061,14 +2061,14 @@
   border-radius: 0;
 }
 .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background: #007bff;
-  border-color: #007bff;
+  background: #883cae;
+  border-color: #883cae;
   color: #ffffff;
 }
 .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
   background: #e9ecef;
   border-color: #dee2e6;
-  color: #007bff;
+  color: #883cae;
 }
 
 .p-picklist .p-picklist-buttons {
@@ -2110,11 +2110,11 @@
 .p-picklist .p-picklist-list .p-picklist-item:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
   color: #ffffff;
-  background: #007bff;
+  background: #883cae;
 }
 
 @media screen and (max-width: 769px) {
@@ -2181,10 +2181,10 @@
 .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
 }
 .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
@@ -2257,7 +2257,7 @@
   background: #ffffff;
 }
 .p-treetable .p-sortable-column {
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: rgba(136, 60, 174, 0.5);
 }
 .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #6c757d;
@@ -2268,7 +2268,7 @@
   height: 1.143rem;
   min-width: 1.143rem;
   line-height: 1.143rem;
-  color: #007bff;
+  color: #883cae;
   background: #ffffff;
   margin-left: 0.5rem;
 }
@@ -2281,16 +2281,16 @@
 }
 .p-treetable .p-sortable-column.p-highlight {
   background: #ffffff;
-  color: #007bff;
+  color: #883cae;
 }
 .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #007bff;
+  color: #883cae;
 }
 .p-treetable .p-treetable-tbody > tr {
   background: #ffffff;
   color: #212529;
   transition: box-shadow 0.15s;
-  outline-color: rgba(38, 143, 255, 0.5);
+  outline-color: rgba(136, 60, 174, 0.5);
 }
 .p-treetable .p-treetable-tbody > tr > td {
   text-align: left;
@@ -2313,7 +2313,7 @@
   color: #212529;
 }
 .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
 }
 .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
@@ -2330,7 +2330,7 @@
   color: #212529;
 }
 .p-treetable .p-column-resizer-helper {
-  background: #007bff;
+  background: #883cae;
 }
 .p-treetable .p-treetable-scrollable-header,
 .p-treetable .p-treetable-scrollable-footer {
@@ -2406,7 +2406,7 @@
 .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
   background: #e9ecef;
@@ -2513,7 +2513,7 @@
 .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
   background: #e9ecef;
@@ -2549,7 +2549,7 @@
 .p-panel .p-panel-header .p-panel-header-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-panel.p-panel-toggleable .p-panel-header {
   padding: 0.5rem 1.25rem;
@@ -2600,7 +2600,7 @@
 .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
   background: #ffffff;
@@ -2666,7 +2666,7 @@
 .p-dialog .p-dialog-header .p-dialog-header-icon:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
   margin-right: 0;
@@ -2799,7 +2799,7 @@
 .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-fileupload .p-fileupload-content {
   background: #ffffff;
@@ -2817,14 +2817,14 @@
 }
 
 .p-fileupload-choose:not(.p-disabled):hover {
-  background: #0069d9;
+  background: #7a38a7;
   color: #ffffff;
-  border-color: #0069d9;
+  border-color: #7a38a7;
 }
 .p-fileupload-choose:not(.p-disabled):active {
-  background: #0062cc;
+  background: #68329e;
   color: #ffffff;
-  border-color: #0062cc;
+  border-color: #68329e;
 }
 
 .p-breadcrumb {
@@ -2840,13 +2840,13 @@
 .p-breadcrumb ul li .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
-  color: #007bff;
+  color: #883cae;
 }
 .p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: #007bff;
+  color: #883cae;
 }
 .p-breadcrumb ul li.p-breadcrumb-chevron {
   margin: 0 0.5rem 0 0.5rem;
@@ -2899,7 +2899,7 @@
 .p-contextmenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-contextmenu .p-submenu-list {
   padding: 0.5rem 0;
@@ -2964,7 +2964,7 @@
 .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
 .p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
@@ -3014,7 +3014,7 @@
 .p-megamenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-megamenu .p-megamenu-panel {
   background: #ffffff;
@@ -3093,7 +3093,7 @@
 .p-menu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-menu.p-menu-overlay {
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -3152,7 +3152,7 @@
 .p-menubar .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
   padding: 1rem;
@@ -3187,7 +3187,7 @@
 .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
 .p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
@@ -3254,7 +3254,7 @@
   .p-menubar .p-menubar-button:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   }
   .p-menubar .p-menubar-root-list {
     position: absolute;
@@ -3308,7 +3308,7 @@
   .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
     outline: 0 none;
     outline-offset: 0;
-    box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+    box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
   }
   .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
     margin-left: auto;
@@ -3375,7 +3375,7 @@
 .p-panelmenu .p-panelmenu-header > a:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover {
   background: #e9ecef;
@@ -3441,7 +3441,7 @@
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
   margin-right: 0.5rem;
@@ -3494,10 +3494,10 @@
 .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
 }
 .p-steps .p-steps-item.p-highlight .p-steps-title {
@@ -3542,7 +3542,7 @@
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
   background: #ffffff;
@@ -3595,7 +3595,7 @@
 .p-tieredmenu .p-menuitem-link:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
 }
 .p-tieredmenu.p-menu-overlay {
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -3747,7 +3747,7 @@
 .p-message .p-message-close:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 .p-message .p-message-text {
   font-size: 1rem;
@@ -3884,7 +3884,7 @@
   background: rgba(0, 0, 0, 0.125);
 }
 .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
 }
 .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator {
@@ -3903,7 +3903,7 @@
   background: rgba(255, 255, 255, 0.6);
 }
 .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
 }
 .p-galleria .p-galleria-thumbnail-container {
@@ -3931,7 +3931,7 @@
 .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
 .p-galleria-mask.p-component-overlay {
@@ -3950,7 +3950,7 @@
 .p-inplace .p-inplace-display:focus {
   outline: 0 none;
   outline-offset: 0;
-  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
 }
 
 .p-progressbar {
@@ -3962,7 +3962,7 @@
 .p-progressbar .p-progressbar-value {
   border: 0 none;
   margin: 0;
-  background: #007bff;
+  background: #883cae;
 }
 .p-progressbar .p-progressbar-label {
   color: #212529;
@@ -3985,7 +3985,7 @@
 }
 
 .p-badge {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
@@ -4027,7 +4027,7 @@
 }
 
 .p-tag {
-  background: #007bff;
+  background: #883cae;
   color: #ffffff;
   font-size: 0.75rem;
   font-weight: 700;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 62c7b9531..fe0fa0293 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1514,7 +1514,7 @@
   color: #FFE082;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 408b1a125..1fde1756d 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1514,7 +1514,7 @@
   color: #81D4FA;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index e41faa7d6..c5a68da07 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1514,7 +1514,7 @@
   color: #C5E1A5;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 2dc38f0db..3a62e86d7 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1514,7 +1514,7 @@
   color: #F48FB1;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/md-dark-deeppurple-green/theme.css b/public/themes/md-dark-deeppurple-green/theme.css
index 6b50d7599..28ab71aec 100644
--- a/public/themes/md-dark-deeppurple-green/theme.css
+++ b/public/themes/md-dark-deeppurple-green/theme.css
@@ -1530,7 +1530,7 @@
   color: #303F9F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/md-dark-indigo-pink/theme.css b/public/themes/md-dark-indigo-pink/theme.css
index 6b50d7599..28ab71aec 100644
--- a/public/themes/md-dark-indigo-pink/theme.css
+++ b/public/themes/md-dark-indigo-pink/theme.css
@@ -1530,7 +1530,7 @@
   color: #303F9F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/md-light-deeppurple-green/theme.css b/public/themes/md-light-deeppurple-green/theme.css
index 6b50d7599..28ab71aec 100644
--- a/public/themes/md-light-deeppurple-green/theme.css
+++ b/public/themes/md-light-deeppurple-green/theme.css
@@ -1530,7 +1530,7 @@
   color: #303F9F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/md-light-indigo-pink/theme.css b/public/themes/md-light-indigo-pink/theme.css
index 6b50d7599..28ab71aec 100644
--- a/public/themes/md-light-indigo-pink/theme.css
+++ b/public/themes/md-light-indigo-pink/theme.css
@@ -1530,7 +1530,7 @@
   color: #303F9F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/mdc-dark-deeppurple-green/theme.css b/public/themes/mdc-dark-deeppurple-green/theme.css
index 6b50d7599..28ab71aec 100644
--- a/public/themes/mdc-dark-deeppurple-green/theme.css
+++ b/public/themes/mdc-dark-deeppurple-green/theme.css
@@ -1530,7 +1530,7 @@
   color: #303F9F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/mdc-dark-indigo-pink/theme.css b/public/themes/mdc-dark-indigo-pink/theme.css
index 6b50d7599..28ab71aec 100644
--- a/public/themes/mdc-dark-indigo-pink/theme.css
+++ b/public/themes/mdc-dark-indigo-pink/theme.css
@@ -1530,7 +1530,7 @@
   color: #303F9F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/mdc-light-deeppurple-green/theme.css b/public/themes/mdc-light-deeppurple-green/theme.css
index 6b50d7599..28ab71aec 100644
--- a/public/themes/mdc-light-deeppurple-green/theme.css
+++ b/public/themes/mdc-light-deeppurple-green/theme.css
@@ -1530,7 +1530,7 @@
   color: #303F9F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/mdc-light-indigo-pink/theme.css b/public/themes/mdc-light-indigo-pink/theme.css
index 6b50d7599..28ab71aec 100644
--- a/public/themes/mdc-light-indigo-pink/theme.css
+++ b/public/themes/mdc-light-indigo-pink/theme.css
@@ -1530,7 +1530,7 @@
   color: #303F9F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index abe35d81b..ba5d32c87 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1506,7 +1506,7 @@
   color: #005b9f;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 05944f1aa..a79c346d5 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1514,7 +1514,7 @@
   color: #005b9f;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 0a6dad190..ad8030cdf 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1514,7 +1514,7 @@
   color: #246749;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 1bd976cef..3f046050a 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1514,7 +1514,7 @@
   color: #005b9f;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index dc5ecba4e..28daf3ff2 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1506,7 +1506,7 @@
   color: #617c8a;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index c6a085d63..8a15e7f8c 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1514,7 +1514,7 @@
   color: #1976D2;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 26bbc21f0..8672044ca 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1514,7 +1514,7 @@
   color: #388E3C;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 1e5e28e69..79783c5ce 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1514,7 +1514,7 @@
   color: #FFA000;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index fcc3022b9..8ee919be4 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1513,7 +1513,7 @@
   color: #64B5F6;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index c74ac1ffc..317d808f4 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1513,7 +1513,7 @@
   color: #81C784;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 26351c545..ed075c55a 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1513,7 +1513,7 @@
   color: #FFD54F;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 281f64928..8244b2ce8 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1513,7 +1513,7 @@
   color: #BA68C8;
   border-color: transparent;
 }
-.p-button.p-button-link:enabled:hover .p-button-text {
+.p-button.p-button-link:enabled:hover .p-button-label {
   text-decoration: underline;
 }
 .p-button.p-button-link:enabled:focus {
diff --git a/src/App.vue b/src/App.vue
index 2846d8ffc..ae3eed72b 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -81,6 +81,9 @@ export default {
             EventBus.$emit('change-theme', event);
             this.$appState.darkTheme = event.dark;
 
+            if (event.theme.startsWith('md')) {
+                this.$appState.ripple = true;
+            }
         },
         addClass(element, className) {
             if (!this.hasClass(element, className)) {
@@ -113,7 +116,11 @@ export default {
     },
     computed: {
         containerClass() {
-            return [{'layout-news-active': this.newsActive, 'p-input-filled': this.$appState.inputStyle === 'filled'}];
+            return [{
+                'layout-news-active': this.newsActive, 
+                'p-input-filled': this.$appState.inputStyle === 'filled',
+                'p-ripple-disabled': this.$appState.ripple === false
+            }];
         }
     },
     components: {
diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index d34e89c2b..1b9d65be4 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -12,13 +12,16 @@
                 <div>
                     <h4>Component Scale</h4>
                     <div class="config-scale">
-                        <Button icon="pi pi-minus" @click="decrementScale()" class="p-button-secondary" :disabled="scale === scales[0]"/>
+                        <Button icon="pi pi-minus" @click="decrementScale()" class="p-button-text" :disabled="scale === scales[0]"/>
                         <i class="pi pi-circle-on" v-for="s of scales" :class="{'scale-active': s === scale}" :key="s"/>
-                        <Button icon="pi pi-plus"  @click="incrementScale()" class="p-button-secondary" :disabled="scale === scales[scales.length - 1]" />
+                        <Button icon="pi pi-plus"  @click="incrementScale()" class="p-button-text" :disabled="scale === scales[scales.length - 1]" />
                     </div>
 
                     <AppInputStyleSwitch />
 
+                    <h4>Ripple Effect</h4>
+                    <InputSwitch :value="rippleActive" @input="onRippleChange"  />
+
                     <h4>Free Themes</h4>
                     <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
 
@@ -38,7 +41,7 @@
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-light-purple', true)"/>
+                                <img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-dark-blue', true)"/>
                             </button>
                             <span>Light</span>
                         </div>
@@ -310,6 +313,9 @@ export default {
     computed: {
         containerClass() {
             return ['layout-config', {'layout-config-active': this.active}];
+        },
+        rippleActive() {
+            return this.$appState.ripple;
         }
     },
     methods: {
@@ -357,6 +363,9 @@ export default {
         incrementScale() {
             this.scale++;
             document.documentElement.style.fontSize = this.scale + 'px';
+        },
+        onRippleChange(value) {
+            this.$appState.ripple = value;
         }
     }
 }
diff --git a/src/assets/images/themes/bootstrap4-dark-purple.svg b/src/assets/images/themes/bootstrap4-dark-purple.svg
index bb0d50c9a..c97df7743 100644
--- a/src/assets/images/themes/bootstrap4-dark-purple.svg
+++ b/src/assets/images/themes/bootstrap4-dark-purple.svg
@@ -1,4 +1,4 @@
 <svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#9954BB"/>
+<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#883CAE"/>
 <path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.12 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7Z" fill="#121212"/>
 </svg>
diff --git a/src/assets/images/themes/bootstrap4-light-purple.svg b/src/assets/images/themes/bootstrap4-light-purple.svg
index c70c4aeb9..b9c644c3b 100644
--- a/src/assets/images/themes/bootstrap4-light-purple.svg
+++ b/src/assets/images/themes/bootstrap4-light-purple.svg
@@ -1,4 +1,4 @@
 <svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#9954BB"/>
+<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#883CAE"/>
 <path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.12 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7Z" fill="white"/>
 </svg>
diff --git a/src/assets/styles/app/_config.scss b/src/assets/styles/app/_config.scss
index 4ffa093d0..769b4ce01 100644
--- a/src/assets/styles/app/_config.scss
+++ b/src/assets/styles/app/_config.scss
@@ -83,7 +83,6 @@
 
         .p-button {
             margin-right: .5rem;
-            border: 0 none !important;
         }
 
         i {
diff --git a/src/components/button/Button.css b/src/components/button/Button.css
index 1b4cf06cb..70bf4d0b2 100755
--- a/src/components/button/Button.css
+++ b/src/components/button/Button.css
@@ -10,7 +10,7 @@
     position: relative;
 }
 
-.p-button-text {
+.p-button-label {
     flex: 1 1 auto;
 }
 
@@ -26,7 +26,7 @@
     justify-content: center;
 }
 
-.p-button-icon-only .p-button-text {
+.p-button-icon-only .p-button-label {
     visibility: hidden;
     width: 0;
     flex: 0 0 auto;
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index 6bdfa4e63..5df79d8aa 100755
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -1,7 +1,7 @@
 <template>
     <button :class="buttonClass" v-on="$listeners" type="button" v-ripple>
         <span v-if="icon" :class="iconClass"></span>
-        <span class="p-button-text">{{label||'&nbsp;'}}</span>
+        <span class="p-button-label">{{label||'&nbsp;'}}</span>
         <span class="p-badge" v-if="badge" :class="badgeClass">{{badge}}</span>
     </button>
 </template>
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
index 8034d863e..3ae425202 100755
--- a/src/components/common/Common.css
+++ b/src/components/common/Common.css
@@ -164,6 +164,10 @@ button {
 .p-ink-active {
     animation: ripple 0.4s linear;
 }
+
+.p-ripple-disabled .p-ink {
+    display: none !important;
+}
   
 @-webkit-keyframes ripple {  
     100% {
@@ -177,4 +181,4 @@ button {
         opacity: 0;
         transform: scale(2.5);
     }
-}
+}
\ No newline at end of file
diff --git a/src/components/ripple/Ripple.js b/src/components/ripple/Ripple.js
index e1434efcb..2373f5c3f 100644
--- a/src/components/ripple/Ripple.js
+++ b/src/components/ripple/Ripple.js
@@ -29,23 +29,24 @@ function remove(el) {
 function onMouseDown(event) {
     let target = event.currentTarget;
     let ink = getInk(target);
-
-    if (ink) {
-        DomHandler.removeClass(ink, 'p-ink-active');
-        if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
-            let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
-            ink.style.height = d + 'px';
-            ink.style.width = d + 'px';
-        }
-
-        let offset = DomHandler.getOffset(target);
-        let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
-        let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
-
-        ink.style.top = y + 'px';
-        ink.style.left = x + 'px';
-        DomHandler.addClass(ink, 'p-ink-active');
+    if (!ink || getComputedStyle(ink, null).display === 'none') {
+        return;
     }
+
+    DomHandler.removeClass(ink, 'p-ink-active');
+    if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
+        let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
+        ink.style.height = d + 'px';
+        ink.style.width = d + 'px';
+    }
+
+    let offset = DomHandler.getOffset(target);
+    let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
+    let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
+
+    ink.style.top = y + 'px';
+    ink.style.left = x + 'px';
+    DomHandler.addClass(ink, 'p-ink-active');
 }
 
 function onMouseLeave(event) {
diff --git a/src/main.js b/src/main.js
index 9474ca730..2578db6f0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -90,7 +90,7 @@ Vue.use(Vuelidate);
 Vue.use(ToastService);
 Vue.directive('tooltip', Tooltip);
 
-Vue.prototype.$appState = Vue.observable({ inputStyle: 'outlined', darkTheme: false })
+Vue.prototype.$appState = Vue.observable({ inputStyle: 'outlined', darkTheme: false, ripple: false });
 
 Vue.config.productionTip = false;
 
diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue
index 840dc1e62..e90bc054b 100755
--- a/src/views/button/ButtonDemo.vue
+++ b/src/views/button/ButtonDemo.vue
@@ -11,19 +11,13 @@
             <div class="card">
                 <h5>Basic</h5>
                 <Button label="Submit" />
-                <Button label="Submit" disabled="disabled" />
+                <Button label="Disabled" disabled="disabled" />
 
                 <h5>Icons</h5>
                 <Button icon="pi pi-check" />
                 <Button label="Submit" icon="pi pi-check" />
                 <Button label="Submit" icon="pi pi-check" iconPos="right" />
 
-                <h5>Text Buttons</h5>
-                <Button label="Submit" class="p-button-text" />
-                <Button icon="pi pi-check" class="p-button-text" />
-                <Button label="Cancel" icon="pi pi-times" class="p-button-text" />
-                <Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text" />
-
                 <h5>Severities</h5>
                 <Button label="Primary" />
                 <Button label="Secondary" class="p-button-secondary" />
@@ -42,7 +36,6 @@
                 <Button label="Warning" class="p-button-raised p-button-warning" />
                 <Button label="Help" class="p-button-raised p-button-help" />
                 <Button label="Danger" class="p-button-raised p-button-danger" />
-                <Button label="Submit" class="p-button-raised p-button-text" />
 
                 <h5>Rounded Buttons</h5>
                 <Button label="Primary" class="p-button-rounded" />
@@ -52,7 +45,24 @@
                 <Button label="Warning" class="p-button-rounded p-button-warning" />
                 <Button label="Help" class="p-button-rounded p-button-help" />
                 <Button label="Danger" class="p-button-rounded p-button-danger" />
-                <Button label="Submit" class="p-button-rounded p-button-text" />
+
+                <h5>Text Buttons</h5>
+                <Button label="Primary" class="p-button-text" />
+                <Button label="Secondary" class="p-button-secondary p-button-text" />
+                <Button label="Success" class="p-button-success p-button-text" />
+                <Button label="Info" class="p-button-info p-button-text" />
+                <Button label="Warning" class="p-button-warning p-button-text" />
+                <Button label="Help" class="p-button-help p-button-text" />
+                <Button label="Danger" class="p-button-danger p-button-text" />
+
+                <h5>Raised Text Buttons</h5>
+                <Button label="Primary" class="p-button-raised p-button-text" />
+                <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" />
+                <Button label="Success" class="p-button-raised p-button-success p-button-text" />
+                <Button label="Info" class="p-button-raised p-button-info p-button-text" />
+                <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
+                <Button label="Help" class="p-button-raised p-button-help p-button-text" />
+                <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
 
                 <h5>Outlined Buttons</h5>
                 <Button label="Primary" class="p-button-outlined" />
@@ -68,18 +78,26 @@
                 <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
                 <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
                 <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
-                <Button icon="pi pi-lock" class="p-button-rounded p-button-warning" />
-                <Button icon="pi pi-lock" class="p-button-rounded p-button-help" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
                 <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
+
+                <h5>Rounded Text Icon Buttons</h5>
                 <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
 
                 <h5>Rounded and Outlined Icon Buttons</h5>
                 <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />
                 <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" />
                 <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" />
                 <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" />
-                <Button icon="pi pi-lock" class="p-button-rounded p-button-warning p-button-outlined" />
-                <Button icon="pi pi-lock" class="p-button-rounded p-button-help p-button-outlined" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" />
                 <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" />
 
                 <h5>Badges</h5>
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index f38692796..f14151d20 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -208,12 +208,6 @@ import Button from 'primevue/button';
 &lt;Button label="Submit" icon="pi pi-check" /&gt;
 &lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
 
-&lt;h5&gt;Text Buttons&lt;/h5&gt;
-&lt;Button label="Submit" class="p-button-text" /&gt;
-&lt;Button icon="pi pi-check" class="p-button-text" /&gt;
-&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
-&lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text" /&gt;
-
 &lt;h5&gt;Severities&lt;/h5&gt;
 &lt;Button label="Primary" /&gt;
 &lt;Button label="Secondary" class="p-button-secondary" /&gt;
@@ -232,7 +226,6 @@ import Button from 'primevue/button';
 &lt;Button label="Warning" class="p-button-raised p-button-warning" /&gt;
 &lt;Button label="Help" class="p-button-raised p-button-help" /&gt;
 &lt;Button label="Danger" class="p-button-raised p-button-danger" /&gt;
-&lt;Button label="Submit" class="p-button-raised p-button-text" /&gt;
 
 &lt;h5&gt;Rounded Buttons&lt;/h5&gt;
 &lt;Button label="Primary" class="p-button-rounded" /&gt;
@@ -242,7 +235,24 @@ import Button from 'primevue/button';
 &lt;Button label="Warning" class="p-button-rounded p-button-warning" /&gt;
 &lt;Button label="Help" class="p-button-rounded p-button-help" /&gt;
 &lt;Button label="Danger" class="p-button-rounded p-button-danger" /&gt;
-&lt;Button label="Submit" class="p-button-rounded p-button-text" /&gt;
+
+&lt;h5&gt;Text Buttons&lt;/h5&gt;
+&lt;Button label="Primary" class="p-button-text" /&gt;
+&lt;Button label="Secondary" class="p-button-secondary p-button-text" /&gt;
+&lt;Button label="Success" class="p-button-success p-button-text" /&gt;
+&lt;Button label="Info" class="p-button-info p-button-text" /&gt;
+&lt;Button label="Warning" class="p-button-warning p-button-text" /&gt;
+&lt;Button label="Help" class="p-button-help p-button-text" /&gt;
+&lt;Button label="Danger" class="p-button-danger p-button-text" /&gt;
+
+&lt;h5&gt;Raised Text Buttons&lt;/h5&gt;
+&lt;Button label="Primary" class="p-button-raised p-button-text" /&gt;
+&lt;Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" /&gt;
+&lt;Button label="Success" class="p-button-raised p-button-success p-button-text" /&gt;
+&lt;Button label="Info" class="p-button-raised p-button-info p-button-text" /&gt;
+&lt;Button label="Warning" class="p-button-raised p-button-warning p-button-text" /&gt;
+&lt;Button label="Help" class="p-button-raised p-button-help p-button-text" /&gt;
+&lt;Button label="Danger" class="p-button-raised p-button-danger p-button-text" /&gt;
 
 &lt;h5&gt;Outlined Buttons&lt;/h5&gt;
 &lt;Button label="Primary" class="p-button-outlined" /&gt;
@@ -258,18 +268,26 @@ import Button from 'primevue/button';
 &lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /&gt;
 &lt;Button icon="pi pi-search" class="p-button-rounded p-button-success" /&gt;
 &lt;Button icon="pi pi-user" class="p-button-rounded p-button-info" /&gt;
-&lt;Button icon="pi pi-lock" class="p-button-rounded p-button-warning" /&gt;
-&lt;Button icon="pi pi-lock" class="p-button-rounded p-button-help" /&gt;
+&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /&gt;
+&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help" /&gt;
 &lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger" /&gt;
+
+&lt;h5&gt;Rounded Text Icon Buttons&lt;/h5&gt;
 &lt;Button icon="pi pi-check" class="p-button-rounded p-button-text" /&gt;
+&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" /&gt;
+&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" /&gt;
+&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" /&gt;
+&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /&gt;
+&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /&gt;
+&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /&gt;
 
 &lt;h5&gt;Rounded and Outlined Icon Buttons&lt;/h5&gt;
 &lt;Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /&gt;
 &lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" /&gt;
 &lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" /&gt;
 &lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" /&gt;
-&lt;Button icon="pi pi-lock" class="p-button-rounded p-button-warning p-button-outlined" /&gt;
-&lt;Button icon="pi pi-lock" class="p-button-rounded p-button-help p-button-outlined" /&gt;
+&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" /&gt;
+&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" /&gt;
 &lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" /&gt;
 
 &lt;h5&gt;Badges&lt;/h5&gt;
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 68b3effe5..86e1f1b2e 100755
--- a/src/views/dialog/DialogDemo.vue
+++ b/src/views/dialog/DialogDemo.vue
@@ -16,8 +16,8 @@
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     <template #footer>
-                        <Button label="Yes" icon="pi pi-check" @click="closeBasic" />
                         <Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-secondary"/>
+                        <Button label="Yes" icon="pi pi-check" @click="closeBasic" />
                     </template>
                 </Dialog>
 
@@ -38,8 +38,8 @@
                         cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
                         eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
                     <template #footer>
-                        <Button label="Yes" icon="pi pi-check" @click="closeBasic2" />
                         <Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-secondary"/>
+                        <Button label="Yes" icon="pi pi-check" @click="closeBasic2" />
                     </template>
                 </Dialog>
 
@@ -50,8 +50,8 @@
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     <template #footer>
-                        <Button label="Yes" icon="pi pi-check" @click="closeModal" />
                         <Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
+                        <Button label="Yes" icon="pi pi-check" @click="closeModal" />
                     </template>
                 </Dialog>
 
@@ -62,8 +62,8 @@
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     <template #footer>
-                        <Button label="Yes" icon="pi pi-check" @click="closeMaximizable" />
                         <Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-secondary"/>
+                        <Button label="Yes" icon="pi pi-check" @click="closeMaximizable" />
                     </template>
                 </Dialog>
 
@@ -90,8 +90,8 @@
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     <template #footer>
+                        <Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-secondary" />
                         <Button label="Yes" icon="pi pi-check" @click="closePosition" />
-                        <Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-secondary"/>
                     </template>
                 </Dialog>
             </div>
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index 200d12c16..9f41c6ad5 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -241,8 +241,8 @@ export default {
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
     &lt;template #footer&gt;
-        &lt;Button label="Yes" icon="pi pi-check" @click="closeBasic" /&gt;
         &lt;Button label="No" icon="pi pi-times" @click="closeBasic" class="p-button-secondary"/&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeBasic" /&gt;
     &lt;/template&gt;
 &lt;/Dialog&gt;
 
@@ -263,8 +263,8 @@ export default {
         cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe
         eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.&lt;/p&gt;
     &lt;template #footer&gt;
-        &lt;Button label="Yes" icon="pi pi-check" @click="closeBasic2" /&gt;
         &lt;Button label="No" icon="pi pi-times" @click="closeBasic2" class="p-button-secondary"/&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeBasic2" /&gt;
     &lt;/template&gt;
 &lt;/Dialog&gt;
 
@@ -275,8 +275,8 @@ export default {
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
     &lt;template #footer&gt;
-        &lt;Button label="Yes" icon="pi pi-check" @click="closeModal" /&gt;
         &lt;Button label="No" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeModal" /&gt;
     &lt;/template&gt;
 &lt;/Dialog&gt;
 
@@ -287,8 +287,8 @@ export default {
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
     &lt;template #footer&gt;
-        &lt;Button label="Yes" icon="pi pi-check" @click="closeMaximizable" /&gt;
         &lt;Button label="No" icon="pi pi-times" @click="closeMaximizable" class="p-button-secondary"/&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closeMaximizable" /&gt;
     &lt;/template&gt;
 &lt;/Dialog&gt;
 
@@ -315,8 +315,8 @@ export default {
         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
     &lt;template #footer&gt;
-        &lt;Button label="Yes" icon="pi pi-check" @click="closePosition" /&gt;
         &lt;Button label="No" icon="pi pi-times" @click="closePosition" class="p-button-secondary"/&gt;
+        &lt;Button label="Yes" icon="pi pi-check" @click="closePosition" /&gt;
     &lt;/template&gt;
 &lt;/Dialog&gt;
 </template>
diff --git a/src/views/steps/StepsDemo.vue b/src/views/steps/StepsDemo.vue
index e9bf94cb9..9c0493bda 100755
--- a/src/views/steps/StepsDemo.vue
+++ b/src/views/steps/StepsDemo.vue
@@ -8,7 +8,10 @@
         </div>
 
         <div class="content-section implementation">
-            <Steps :model="items" :readonly="true" style="margin-bottom: 1rem"/>
+            <div class="card">
+                <Steps :model="items" :readonly="true" />
+            </div>
+
             <keep-alive>
                 <router-view :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete" />
             </keep-alive>