From b893f1ca26dac0dcf03c578d739a8b687211e377 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Mon, 22 Jul 2024 14:42:48 -0700
Subject: [PATCH 01/28] updating primevue primeflex and primeicons

---
 package-lock.json                          | 147 ++++++++++++++++++---
 package.json                               |   7 +-
 src/components/RoarDataTable.vue           |   8 +-
 src/components/reports/TableRoarScores.vue |   2 +-
 src/main.js                                |  10 +-
 5 files changed, 139 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4a87e93b4..3fd174588 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@bdelab/roav-crowding": "1.1.12",
         "@bdelab/roav-mep": "^1.1.17",
         "@bdelab/roav-ran": "^1.0.21",
+        "@primevue/core": "^4.0.1",
         "@sentry/browser": "^8.0.0",
         "@sentry/integrations": "^7.114.0",
         "@sentry/vite-plugin": "^2.16.1",
@@ -42,9 +43,9 @@
         "papaparse": "^5.3.2",
         "pinia": "^2.0.33",
         "pinia-plugin-persistedstate": "^3.1.0",
-        "primeflex": "^3.1.3",
-        "primeicons": "^5.0.0",
-        "primevue": "^3.32.1",
+        "primeflex": "^3.2.0",
+        "primeicons": "^7.0.0",
+        "primevue": "^4.0.0",
         "sharp": "^0.33.3",
         "showdown": "^2.1.0",
         "survey-vue3-ui": "^1.9.131",
@@ -7645,6 +7646,56 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@primeuix/styled": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
+      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
+      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.1.tgz",
+      "integrity": "sha512-BreY1LybcRmzI8zXktqKVoq1eMeH//Ab4NUpzyFMdRKq4QoTvVuYMrlS9PGlQi+c9RmAcb6rzIIpcczqEGEAaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.1.tgz",
+      "integrity": "sha512-tK3cYOSabRiSmAMuivw2QM/oG1ER5RGL9k7Vua7arQiwBghyPg04J/XllJ9SjORyNIY+dwbLuNyUwLKty4S0Hg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "license": "BSD-3-Clause"
@@ -26181,19 +26232,30 @@
       }
     },
     "node_modules/primeflex": {
-      "version": "3.3.1",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.2.0.tgz",
+      "integrity": "sha512-GjVNrp2k/MbO/vqs0wYUjsM6ejexymbGmtEzFpib5JEuwhL6HVJoxr3tmuAaL8RnOWNOPecVFauF2RqP2UXOhw==",
       "license": "MIT"
     },
     "node_modules/primeicons": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-5.0.0.tgz",
-      "integrity": "sha512-heygWF0X5HFI1otlZE62pp6ye7sZ8om78J9au2BRkg8O7Y8AHTZ9qKMRzchZUHLe8zUAvdi6hZzzm9XxgwIExw=="
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+      "license": "MIT"
     },
     "node_modules/primevue": {
-      "version": "3.43.0",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.1.tgz",
+      "integrity": "sha512-mAIoOcx7pnqPOhohw+JYyuVO46R4hUMComFTNzjHabEIsUIyIgTXNtWqiSwbn7zE4hEhnPwNa9XX97XE4Cz+1g==",
       "license": "MIT",
-      "peerDependencies": {
-        "vue": "^3.0.0"
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.1",
+        "@primevue/icons": "4.0.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
       }
     },
     "node_modules/private": {
@@ -30111,9 +30173,10 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -37417,6 +37480,37 @@
         "tslib": "^2.6.0"
       }
     },
+    "@primeuix/styled": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
+      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
+      "requires": {
+        "@primeuix/utils": "^0.0.5"
+      }
+    },
+    "@primeuix/utils": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
+      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA=="
+    },
+    "@primevue/core": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.1.tgz",
+      "integrity": "sha512-BreY1LybcRmzI8zXktqKVoq1eMeH//Ab4NUpzyFMdRKq4QoTvVuYMrlS9PGlQi+c9RmAcb6rzIIpcczqEGEAaw==",
+      "requires": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5"
+      }
+    },
+    "@primevue/icons": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.1.tgz",
+      "integrity": "sha512-tK3cYOSabRiSmAMuivw2QM/oG1ER5RGL9k7Vua7arQiwBghyPg04J/XllJ9SjORyNIY+dwbLuNyUwLKty4S0Hg==",
+      "requires": {
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.1"
+      }
+    },
     "@protobufjs/aspromise": {
       "version": "1.1.2"
     },
@@ -50588,16 +50682,25 @@
       "dev": true
     },
     "primeflex": {
-      "version": "3.3.1"
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.2.0.tgz",
+      "integrity": "sha512-GjVNrp2k/MbO/vqs0wYUjsM6ejexymbGmtEzFpib5JEuwhL6HVJoxr3tmuAaL8RnOWNOPecVFauF2RqP2UXOhw=="
     },
     "primeicons": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-5.0.0.tgz",
-      "integrity": "sha512-heygWF0X5HFI1otlZE62pp6ye7sZ8om78J9au2BRkg8O7Y8AHTZ9qKMRzchZUHLe8zUAvdi6hZzzm9XxgwIExw=="
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
     },
     "primevue": {
-      "version": "3.43.0",
-      "requires": {}
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.1.tgz",
+      "integrity": "sha512-mAIoOcx7pnqPOhohw+JYyuVO46R4hUMComFTNzjHabEIsUIyIgTXNtWqiSwbn7zE4hEhnPwNa9XX97XE4Cz+1g==",
+      "requires": {
+        "@primeuix/styled": "^0.0.5",
+        "@primeuix/utils": "^0.0.5",
+        "@primevue/core": "4.0.1",
+        "@primevue/icons": "4.0.1"
+      }
     },
     "private": {
       "version": "0.1.8"
@@ -53319,9 +53422,9 @@
       }
     },
     "vite": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "requires": {
         "esbuild": "^0.18.10",
         "fsevents": "~2.3.2",
diff --git a/package.json b/package.json
index 8ef1ffbc4..50478d026 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@bdelab/roav-crowding": "1.1.12",
     "@bdelab/roav-mep": "^1.1.17",
     "@bdelab/roav-ran": "^1.0.21",
+    "@primevue/core": "^4.0.1",
     "@sentry/browser": "^8.0.0",
     "@sentry/integrations": "^7.114.0",
     "@sentry/vite-plugin": "^2.16.1",
@@ -62,9 +63,9 @@
     "papaparse": "^5.3.2",
     "pinia": "^2.0.33",
     "pinia-plugin-persistedstate": "^3.1.0",
-    "primeflex": "^3.1.3",
-    "primeicons": "^5.0.0",
-    "primevue": "^3.32.1",
+    "primeflex": "^3.2.0",
+    "primeicons": "^7.0.0",
+    "primevue": "^4.0.0",
     "sharp": "^0.33.3",
     "showdown": "^2.1.0",
     "survey-vue3-ui": "^1.9.131",
diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index bb7cb3e42..a07a2122c 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -225,9 +225,9 @@
                 date-format="mm/dd/yy"
                 placeholder="mm/dd/yyyy"
               />
-              <div v-if="col.dataType === 'boolean' && !col.useMultiSelect" class="flex flex-row gap-2">
-                <PvTriStateCheckbox v-model="filterModel.value" input-id="booleanFilter" style="padding-top: 2px" />
-                <label for="booleanFilter">{{ col.header + '?' }}</label>
+              <!--  TODO CHECK IF THIS IS WORKING> -->
+              <div v-if="col.dataType === 'boolean'" class="flex flex-row gap-2">
+                <PvDropdown v-model="filterModel.value" :options="['True', 'False']" style="margin-bottom: 0.5rem" />
               </div>
               <div v-if="col.dataType === 'score'">
                 <PvDropdown
@@ -352,7 +352,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useToast } from 'primevue/usetoast';
-import { FilterMatchMode, FilterOperator } from 'primevue/api';
+import { FilterMatchMode, FilterOperator } from 'primevue/core/api';
 import SkeletonTable from '@/components/SkeletonTable.vue';
 import _get from 'lodash/get';
 import _map from 'lodash/map';
diff --git a/src/components/reports/TableRoarScores.vue b/src/components/reports/TableRoarScores.vue
index 83eef81d0..82e1505d3 100644
--- a/src/components/reports/TableRoarScores.vue
+++ b/src/components/reports/TableRoarScores.vue
@@ -114,7 +114,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { FilterMatchMode, FilterOperator } from 'primevue/api';
+import { FilterMatchMode, FilterOperator } from 'primevue/core/api';
 import { storeToRefs } from 'pinia';
 import Papa from 'papaparse';
 import { flattenObj } from '@/helpers';
diff --git a/src/main.js b/src/main.js
index 84650ce91..7c89bbb38 100644
--- a/src/main.js
+++ b/src/main.js
@@ -63,7 +63,7 @@ import PvTabView from 'primevue/tabview';
 import PvTag from 'primevue/tag';
 import PvToast from 'primevue/toast';
 import PvTreeTable from 'primevue/treetable';
-import PvTriStateCheckbox from 'primevue/tristatecheckbox';
+// import PvTriStateCheckbox from 'primevue/tristatecheckbox';
 import PvFieldset from 'primevue/fieldset';
 
 // PrimeVue directive imports
@@ -81,9 +81,9 @@ import RoarDataTable from '@/components/RoarDataTable.vue';
 import LanguageSelector from '@/components/LanguageSelector.vue';
 
 // Style assets
-import 'primevue/resources/primevue.css'; // primevue css
-import 'primeicons/primeicons.css'; // icons
-import 'primeflex/primeflex.scss'; // primeflex
+// import 'primevue/resources/primevue.css'; // primevue css
+// import 'primeicons/primeicons.css'; // icons
+// import 'primeflex/primeflex.scss'; // primeflex
 
 import './assets/styles/theme-tailwind.css'; // base theme (pulled from Primevue)
 import './assets/styles/theme.scss'; // ROAR theme
@@ -173,7 +173,7 @@ app.component('PvTabView', PvTabView);
 app.component('PvTag', PvTag);
 app.component('PvToast', PvToast);
 app.component('PvTreeTable', PvTreeTable);
-app.component('PvTriStateCheckbox', PvTriStateCheckbox);
+// app.component('PvTriStateCheckbox', PvTriStateCheckbox);
 
 app.component('RoarDataTable', RoarDataTable);
 app.component('LanguageSelector', LanguageSelector);

From 193f1a2c5f38e08dc8e68cb7cdaee0c791a5072a Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Mon, 22 Jul 2024 17:17:41 -0700
Subject: [PATCH 02/28] adding new components and update others

---
 package-lock.json                             | 341 +++++++++++-------
 package.json                                  |   3 +-
 src/assets/styles/components/datatable.scss   |  43 +--
 src/assets/styles/components/dataview.scss    |   6 -
 src/assets/styles/components/datepicker.scss  |   4 -
 src/assets/styles/components/dropdown.scss    |   3 -
 src/assets/styles/components/input-group.scss |  40 --
 src/assets/styles/components/input-text.scss  |  82 -----
 src/assets/styles/theme-tailwind.css          |  32 +-
 src/assets/styles/theme.css                   | 235 +-----------
 src/assets/styles/theme.scss                  |   1 -
 src/components/CardAdministration.vue         |   2 +-
 src/components/ConsentPicker.vue              |  57 +--
 src/components/CreateAdministration.vue       |  56 +--
 src/components/CreateAdministrator.vue        |  16 +-
 src/components/CreateOrgs.vue                 |  32 +-
 src/components/ListOrgs.vue                   |   8 +-
 src/components/OrgPicker.vue                  |   8 +-
 src/components/RoarDataTable.vue              |  47 +--
 src/components/TaskPicker.vue                 |  13 +-
 src/components/VariantCard.vue                |   4 +-
 src/components/auth/AuthEmailLink.vue         |   4 +-
 src/components/reports/TableRoarScores.vue    |   2 +-
 src/main.js                                   |  48 ++-
 src/pages/ProgressReport.vue                  |   8 +-
 src/pages/ScoreReport.vue                     |   8 +-
 src/pages/SignIn.vue                          |   6 +-
 27 files changed, 384 insertions(+), 725 deletions(-)
 delete mode 100644 src/assets/styles/components/input-text.scss

diff --git a/package-lock.json b/package-lock.json
index 3fd174588..58e3a5299 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@bdelab/roav-mep": "^1.1.17",
         "@bdelab/roav-ran": "^1.0.21",
         "@primevue/core": "^4.0.1",
+        "@primevue/themes": "^4.0.1",
         "@sentry/browser": "^8.0.0",
         "@sentry/integrations": "^7.114.0",
         "@sentry/vite-plugin": "^2.16.1",
@@ -54,7 +55,7 @@
         "vega-lite": "^5.16.3",
         "video.js": "^8.10.0",
         "vite-plugin-node-polyfills": "^0.9.0",
-        "vue": "^3.2.25",
+        "vue": "^3.4.33",
         "vue-draggable-next": "^2.2.1",
         "vue-google-maps-community-fork": "^0.3.1",
         "vue-i18n": "^9.9.1",
@@ -7696,6 +7697,18 @@
         "node": ">=12.11.0"
       }
     },
+    "node_modules/@primevue/themes": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.1.tgz",
+      "integrity": "sha512-DIfQTH/SMY5/ekZM3wnAaC2Te69X9fwVmyxjyAf6yS3e8V9l/jj1BGjinHPlDE0n1G6daHC6qruX4QIR6Jtpwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.0.5"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "license": "BSD-3-Clause"
@@ -9083,53 +9096,86 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.33.tgz",
+      "integrity": "sha512-MoIREbkdPQlnGfSKDMgzTqzqx5nmEjIc0ydLVYlTACGBsfvOJ4tHSbZXKVF536n6fB+0eZaGEOqsGThPpdvF5A==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "@vue/shared": "3.3.10",
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.33",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
     "node_modules/@vue/compiler-core/node_modules/estree-walker": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.33.tgz",
+      "integrity": "sha512-GzB8fxEHKw0gGet5BKlpfXEqoBnzSVWwMnT+dc25wE7pFEfrU/QsvjZMP9rD4iVXHBBoemTct8mN0GJEI6ZX5A==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.3.10",
-        "@vue/shared": "3.3.10"
+        "@vue/compiler-core": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.33.tgz",
+      "integrity": "sha512-7rk7Vbkn21xMwIUpHQR4hCVejwE6nvhBOiDgoBcR03qvGqRKA7dCBSsHZhwhYUsmjlbJ7OtD5UFIyhP6BY+c8A==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "@vue/compiler-core": "3.3.10",
-        "@vue/compiler-dom": "3.3.10",
-        "@vue/compiler-ssr": "3.3.10",
-        "@vue/reactivity-transform": "3.3.10",
-        "@vue/shared": "3.3.10",
+        "@babel/parser": "^7.24.7",
+        "@vue/compiler-core": "3.4.33",
+        "@vue/compiler-dom": "3.4.33",
+        "@vue/compiler-ssr": "3.4.33",
+        "@vue/shared": "3.4.33",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5",
-        "postcss": "^8.4.32",
-        "source-map-js": "^1.0.2"
+        "magic-string": "^0.30.10",
+        "postcss": "^8.4.39",
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-sfc/node_modules/estree-walker": {
       "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/@vue/compiler-sfc/node_modules/magic-string": {
+      "version": "0.30.10",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
+      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      }
+    },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.33.tgz",
+      "integrity": "sha512-0WveC9Ai+eT/1b6LCV5IfsufBZ0HP7pSSTdDjcuW302tTEgoBw8rHVHKPbGUtzGReUFCRXbv6zQDDgucnV2WzQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.10",
-        "@vue/shared": "3.3.10"
+        "@vue/compiler-dom": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -9137,57 +9183,53 @@
       "license": "MIT"
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.10",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/shared": "3.3.10"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.33.tgz",
+      "integrity": "sha512-B24QIelahDbyHipBgbUItQblbd4w5HpG3KccL+YkGyo3maXyS253FzcTR3pSz739OTphmzlxP7JxEMWBpewilA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "@vue/compiler-core": "3.3.10",
-        "@vue/shared": "3.3.10",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5"
+        "@vue/shared": "3.4.33"
       }
     },
-    "node_modules/@vue/reactivity-transform/node_modules/estree-walker": {
-      "version": "2.0.2",
-      "license": "MIT"
-    },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.33.tgz",
+      "integrity": "sha512-6wavthExzT4iAxpe8q37/rDmf44nyOJGISJPxCi9YsQO+8w9v0gLCFLfH5TzD1V1AYrTAdiF4Y1cgUmP68jP6w==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.3.10",
-        "@vue/shared": "3.3.10"
+        "@vue/reactivity": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.33.tgz",
+      "integrity": "sha512-iHsMCUSFJ+4z432Bn9kZzHX+zOXa6+iw36DaVRmKYZpPt9jW9riF32SxNwB124i61kp9+AZtheQ/mKoJLerAaQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/runtime-core": "3.3.10",
-        "@vue/shared": "3.3.10",
-        "csstype": "^3.1.2"
+        "@vue/reactivity": "3.4.33",
+        "@vue/runtime-core": "3.4.33",
+        "@vue/shared": "3.4.33",
+        "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.33.tgz",
+      "integrity": "sha512-jTH0d6gQcaYideFP/k0WdEu8PpRS9MF8d0b6SfZzNi+ap972pZ0TNIeTaESwdOtdY0XPVj54XEJ6K0wXxir4fw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.10",
-        "@vue/shared": "3.3.10"
+        "@vue/compiler-ssr": "3.4.33",
+        "@vue/shared": "3.4.33"
       },
       "peerDependencies": {
-        "vue": "3.3.10"
+        "vue": "3.4.33"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.33.tgz",
+      "integrity": "sha512-aoRY0jQk3A/cuvdkodTrM4NMfxco8n55eG4H7ML/CRy7OryHfiqvug4xrCBBMbbN+dvXAetDDwZW9DXWWjBntA==",
       "license": "MIT"
     },
     "node_modules/@vuelidate/core": {
@@ -12366,6 +12408,8 @@
     },
     "node_modules/csstype": {
       "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
     "node_modules/csv-loader": {
@@ -25359,7 +25403,9 @@
       "license": "MIT"
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -25629,7 +25675,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.32",
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "funding": [
         {
           "type": "opencollective",
@@ -25647,8 +25695,8 @@
       "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -27904,7 +27952,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -30684,14 +30734,16 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.33.tgz",
+      "integrity": "sha512-VdMCWQOummbhctl4QFMcW6eNtXHsFyDlX60O/tsSQuCcuDOnJ1qPOhhVla65Niece7xq/P2zyZReIO5mP+LGTQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.10",
-        "@vue/compiler-sfc": "3.3.10",
-        "@vue/runtime-dom": "3.3.10",
-        "@vue/server-renderer": "3.3.10",
-        "@vue/shared": "3.3.10"
+        "@vue/compiler-dom": "3.4.33",
+        "@vue/compiler-sfc": "3.4.33",
+        "@vue/runtime-dom": "3.4.33",
+        "@vue/server-renderer": "3.4.33",
+        "@vue/shared": "3.4.33"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -37511,6 +37563,14 @@
         "@primevue/core": "4.0.1"
       }
     },
+    "@primevue/themes": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.1.tgz",
+      "integrity": "sha512-DIfQTH/SMY5/ekZM3wnAaC2Te69X9fwVmyxjyAf6yS3e8V9l/jj1BGjinHPlDE0n1G6daHC6qruX4QIR6Jtpwg==",
+      "requires": {
+        "@primeuix/styled": "^0.0.5"
+      }
+    },
     "@protobufjs/aspromise": {
       "version": "1.1.2"
     },
@@ -38497,101 +38557,122 @@
       "requires": {}
     },
     "@vue/compiler-core": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.33.tgz",
+      "integrity": "sha512-MoIREbkdPQlnGfSKDMgzTqzqx5nmEjIc0ydLVYlTACGBsfvOJ4tHSbZXKVF536n6fB+0eZaGEOqsGThPpdvF5A==",
       "requires": {
-        "@babel/parser": "^7.23.5",
-        "@vue/shared": "3.3.10",
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.33",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "dependencies": {
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+        },
         "estree-walker": {
-          "version": "2.0.2"
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
         }
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.33.tgz",
+      "integrity": "sha512-GzB8fxEHKw0gGet5BKlpfXEqoBnzSVWwMnT+dc25wE7pFEfrU/QsvjZMP9rD4iVXHBBoemTct8mN0GJEI6ZX5A==",
       "requires": {
-        "@vue/compiler-core": "3.3.10",
-        "@vue/shared": "3.3.10"
+        "@vue/compiler-core": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.3.10",
-      "requires": {
-        "@babel/parser": "^7.23.5",
-        "@vue/compiler-core": "3.3.10",
-        "@vue/compiler-dom": "3.3.10",
-        "@vue/compiler-ssr": "3.3.10",
-        "@vue/reactivity-transform": "3.3.10",
-        "@vue/shared": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.33.tgz",
+      "integrity": "sha512-7rk7Vbkn21xMwIUpHQR4hCVejwE6nvhBOiDgoBcR03qvGqRKA7dCBSsHZhwhYUsmjlbJ7OtD5UFIyhP6BY+c8A==",
+      "requires": {
+        "@babel/parser": "^7.24.7",
+        "@vue/compiler-core": "3.4.33",
+        "@vue/compiler-dom": "3.4.33",
+        "@vue/compiler-ssr": "3.4.33",
+        "@vue/shared": "3.4.33",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5",
-        "postcss": "^8.4.32",
-        "source-map-js": "^1.0.2"
+        "magic-string": "^0.30.10",
+        "postcss": "^8.4.39",
+        "source-map-js": "^1.2.0"
       },
       "dependencies": {
         "estree-walker": {
-          "version": "2.0.2"
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+          "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+        },
+        "magic-string": {
+          "version": "0.30.10",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
+          "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+          "requires": {
+            "@jridgewell/sourcemap-codec": "^1.4.15"
+          }
         }
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.33.tgz",
+      "integrity": "sha512-0WveC9Ai+eT/1b6LCV5IfsufBZ0HP7pSSTdDjcuW302tTEgoBw8rHVHKPbGUtzGReUFCRXbv6zQDDgucnV2WzQ==",
       "requires": {
-        "@vue/compiler-dom": "3.3.10",
-        "@vue/shared": "3.3.10"
+        "@vue/compiler-dom": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "@vue/devtools-api": {
       "version": "6.5.1"
     },
     "@vue/reactivity": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.33.tgz",
+      "integrity": "sha512-B24QIelahDbyHipBgbUItQblbd4w5HpG3KccL+YkGyo3maXyS253FzcTR3pSz739OTphmzlxP7JxEMWBpewilA==",
       "requires": {
-        "@vue/shared": "3.3.10"
-      }
-    },
-    "@vue/reactivity-transform": {
-      "version": "3.3.10",
-      "requires": {
-        "@babel/parser": "^7.23.5",
-        "@vue/compiler-core": "3.3.10",
-        "@vue/shared": "3.3.10",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.5"
-      },
-      "dependencies": {
-        "estree-walker": {
-          "version": "2.0.2"
-        }
+        "@vue/shared": "3.4.33"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.33.tgz",
+      "integrity": "sha512-6wavthExzT4iAxpe8q37/rDmf44nyOJGISJPxCi9YsQO+8w9v0gLCFLfH5TzD1V1AYrTAdiF4Y1cgUmP68jP6w==",
       "requires": {
-        "@vue/reactivity": "3.3.10",
-        "@vue/shared": "3.3.10"
+        "@vue/reactivity": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.33.tgz",
+      "integrity": "sha512-iHsMCUSFJ+4z432Bn9kZzHX+zOXa6+iw36DaVRmKYZpPt9jW9riF32SxNwB124i61kp9+AZtheQ/mKoJLerAaQ==",
       "requires": {
-        "@vue/runtime-core": "3.3.10",
-        "@vue/shared": "3.3.10",
-        "csstype": "^3.1.2"
+        "@vue/reactivity": "3.4.33",
+        "@vue/runtime-core": "3.4.33",
+        "@vue/shared": "3.4.33",
+        "csstype": "^3.1.3"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.3.10",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.33.tgz",
+      "integrity": "sha512-jTH0d6gQcaYideFP/k0WdEu8PpRS9MF8d0b6SfZzNi+ap972pZ0TNIeTaESwdOtdY0XPVj54XEJ6K0wXxir4fw==",
       "requires": {
-        "@vue/compiler-ssr": "3.3.10",
-        "@vue/shared": "3.3.10"
+        "@vue/compiler-ssr": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "@vue/shared": {
-      "version": "3.3.10"
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.33.tgz",
+      "integrity": "sha512-aoRY0jQk3A/cuvdkodTrM4NMfxco8n55eG4H7ML/CRy7OryHfiqvug4xrCBBMbbN+dvXAetDDwZW9DXWWjBntA=="
     },
     "@vuelidate/core": {
       "version": "2.0.3",
@@ -40870,7 +40951,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.3"
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "csv-loader": {
       "version": "3.0.5",
@@ -50219,7 +50302,9 @@
       "version": "2.1.0"
     },
     "picocolors": {
-      "version": "1.0.0"
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "picomatch": {
       "version": "2.3.1"
@@ -50372,11 +50457,13 @@
       "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q=="
     },
     "postcss": {
-      "version": "8.4.32",
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "requires": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       }
     },
     "postcss-calc": {
@@ -51804,7 +51891,9 @@
       "version": "0.5.7"
     },
     "source-map-js": {
-      "version": "1.0.2"
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
     },
     "source-map-support": {
       "version": "0.4.18",
@@ -53648,13 +53737,15 @@
       "version": "1.1.2"
     },
     "vue": {
-      "version": "3.3.10",
-      "requires": {
-        "@vue/compiler-dom": "3.3.10",
-        "@vue/compiler-sfc": "3.3.10",
-        "@vue/runtime-dom": "3.3.10",
-        "@vue/server-renderer": "3.3.10",
-        "@vue/shared": "3.3.10"
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.33.tgz",
+      "integrity": "sha512-VdMCWQOummbhctl4QFMcW6eNtXHsFyDlX60O/tsSQuCcuDOnJ1qPOhhVla65Niece7xq/P2zyZReIO5mP+LGTQ==",
+      "requires": {
+        "@vue/compiler-dom": "3.4.33",
+        "@vue/compiler-sfc": "3.4.33",
+        "@vue/runtime-dom": "3.4.33",
+        "@vue/server-renderer": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "vue-demi": {
diff --git a/package.json b/package.json
index 50478d026..1a974cd30 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@bdelab/roav-mep": "^1.1.17",
     "@bdelab/roav-ran": "^1.0.21",
     "@primevue/core": "^4.0.1",
+    "@primevue/themes": "^4.0.1",
     "@sentry/browser": "^8.0.0",
     "@sentry/integrations": "^7.114.0",
     "@sentry/vite-plugin": "^2.16.1",
@@ -74,7 +75,7 @@
     "vega-lite": "^5.16.3",
     "video.js": "^8.10.0",
     "vite-plugin-node-polyfills": "^0.9.0",
-    "vue": "^3.2.25",
+    "vue": "^3.4.33",
     "vue-draggable-next": "^2.2.1",
     "vue-google-maps-community-fork": "^0.3.1",
     "vue-i18n": "^9.9.1",
diff --git a/src/assets/styles/components/datatable.scss b/src/assets/styles/components/datatable.scss
index 31dec26d7..11ac36e6e 100644
--- a/src/assets/styles/components/datatable.scss
+++ b/src/assets/styles/components/datatable.scss
@@ -1,9 +1,3 @@
-.p-datatable .p-paginator-top {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-  justify-content: center;
-  display: flex;
-}
 .p-datatable .p-paginator-bottom {
   border-width: 0 0 1px 0;
   border-radius: 0;
@@ -163,42 +157,7 @@
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }
-.p-datatable.p-datatable-gridlines .p-datatable-header {
-  border-width: 1px 1px 0 1px;
-}
-.p-datatable.p-datatable-gridlines .p-datatable-footer {
-  border-width: 0 1px 1px 1px;
-}
-.p-datatable.p-datatable-gridlines .p-paginator-top {
-  border-width: 0 1px 0 1px;
-}
-.p-datatable.p-datatable-gridlines .p-paginator-bottom {
-  border-width: 0 1px 1px 1px;
-}
-.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
-  border-width: 1px 1px 1px 1px;
-}
-.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
-  border-width: 1px;
-}
-.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
-  border-width: 1px;
-}
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th {
-  border-left-width: 0;
-}
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td {
-  border-left-width: 0;
-}
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td,
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td {
-  border-top-width: 0;
-  padding-left: 0.5rem;
-  padding-top: 2px;
-}
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td {
-  border-left-width: 0;
-}
+
 .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
   background: var(--surface-b);
 }
diff --git a/src/assets/styles/components/dataview.scss b/src/assets/styles/components/dataview.scss
index f5318fdda..79fe9f94f 100644
--- a/src/assets/styles/components/dataview.scss
+++ b/src/assets/styles/components/dataview.scss
@@ -1,9 +1,3 @@
-.p-dataview .p-paginator-top {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-  display: flex;
-  justify-content: center;
-}
 .p-dataview .p-paginator-bottom {
   border-width: 0 0 1px 0;
   border-radius: 0;
diff --git a/src/assets/styles/components/datepicker.scss b/src/assets/styles/components/datepicker.scss
index 484d62aee..24b8af0ed 100644
--- a/src/assets/styles/components/datepicker.scss
+++ b/src/assets/styles/components/datepicker.scss
@@ -1,7 +1,3 @@
-.p-calendar.p-invalid.p-component > .p-inputtext {
-  border-color: var(--red-100);
-}
-
 .p-datepicker {
   padding: var(--inline-spacing);
   background: var(--surface-a);
diff --git a/src/assets/styles/components/dropdown.scss b/src/assets/styles/components/dropdown.scss
index 199167767..9f5773180 100644
--- a/src/assets/styles/components/dropdown.scss
+++ b/src/assets/styles/components/dropdown.scss
@@ -120,6 +120,3 @@
 .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
   background-color: var(--surface-a);
 }
-.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
-  background-color: transparent;
-}
diff --git a/src/assets/styles/components/input-group.scss b/src/assets/styles/components/input-group.scss
index 1378cad61..e8d4fe927 100644
--- a/src/assets/styles/components/input-group.scss
+++ b/src/assets/styles/components/input-group.scss
@@ -11,51 +11,11 @@
   border-right: 1px solid var(--surface-300);
 }
 
-.p-inputgroup > .p-component,
-.p-inputgroup > .p-inputwrapper > .p-inputtext,
-.p-inputgroup > .p-float-label > .p-component {
-  border-radius: 0;
-  margin: 0;
-}
-.p-inputgroup > .p-component + .p-inputgroup-addon,
-.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
-.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
-  border-left: 0 none;
-}
-.p-inputgroup > .p-component:focus,
-.p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
-.p-inputgroup > .p-float-label > .p-component:focus {
-  z-index: 1;
-}
-.p-inputgroup > .p-component:focus ~ label,
-.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label,
-.p-inputgroup > .p-float-label > .p-component:focus ~ label {
-  z-index: 1;
-}
-
-.p-inputgroup-addon:first-child,
-.p-inputgroup button:first-child,
-.p-inputgroup input:first-child,
-.p-inputgroup > .p-inputwrapper:first-child,
-.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-
 .p-inputgroup .p-float-label:first-child input {
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
 }
 
-.p-inputgroup-addon:last-child,
-.p-inputgroup button:last-child,
-.p-inputgroup input:last-child,
-.p-inputgroup > .p-inputwrapper:last-child,
-.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
 .p-inputgroup .p-float-label:last-child input {
   border-top-right-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
diff --git a/src/assets/styles/components/input-text.scss b/src/assets/styles/components/input-text.scss
deleted file mode 100644
index 546130154..000000000
--- a/src/assets/styles/components/input-text.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-.p-inputtext {
-  font-size: 1rem;
-  color: var(--text-color);
-  background: var(--surface-a);
-  padding: var(--inline-spacing-larger) var(--inline-spacing-larger);
-  border: 1px solid var(--surface-300);
-  transition: none;
-  appearance: none;
-  border-radius: var(--border-radius);
-}
-.p-inputtext:enabled:hover {
-  border-color: var(--surface-300);
-}
-.p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px transparent;
-  border-color: var(--primary-color);
-}
-.p-inputtext.p-invalid.p-component {
-  border-color: var(--red-100);
-}
-.p-inputtext.p-inputtext-sm {
-  font-size: 0.875rem;
-  padding: 0.65625rem 0.65625rem;
-}
-.p-inputtext.p-inputtext-lg {
-  font-size: 1.25rem;
-  padding: 0.9375rem 0.9375rem;
-}
-
-.p-float-label > label {
-  left: var(--inline-spacing-larger);
-  color: var(--text-color-secondary);
-  transition-duration: 0.2s;
-}
-
-.p-float-label > .p-invalid + label {
-  color: var(--red-100);
-}
-
-.p-input-icon-left > i:first-of-type {
-  left: var(--inline-spacing-larger);
-  color: var(--text-color-secondary);
-}
-
-.p-input-icon-left > .p-inputtext {
-  padding-left: 2.5rem;
-}
-
-.p-input-icon-left.p-float-label > label {
-  left: 2.5rem;
-}
-
-.p-input-icon-right > i:last-of-type {
-  right: var(--inline-spacing-larger);
-  color: var(--text-color-secondary);
-}
-
-.p-input-icon-right > .p-inputtext {
-  padding-right: 2.5rem;
-}
-
-.p-input-filled .p-inputtext {
-  background-color: var(--surface-b);
-}
-.p-input-filled .p-inputtext:enabled:hover {
-  background-color: var(--surface-b);
-}
-.p-input-filled .p-inputtext:enabled:focus {
-  background-color: var(--surface-a);
-}
-
-.p-inputtext-sm .p-inputtext {
-  font-size: 0.875rem;
-  padding: 0.65625rem 0.65625rem;
-}
-
-.p-inputtext-lg .p-inputtext {
-  font-size: 1.25rem;
-  padding: 0.9375rem 0.9375rem;
-}
diff --git a/src/assets/styles/theme-tailwind.css b/src/assets/styles/theme-tailwind.css
index 6fb745717..88d3a1a44 100644
--- a/src/assets/styles/theme-tailwind.css
+++ b/src/assets/styles/theme-tailwind.css
@@ -269,15 +269,6 @@
   box-shadow: 0 0 0 1px var(--indigo-500);
 }
 
-.p-paginator {
-  background: var(--surface-a);
-  color: var(--text-color-secondary);
-  border: solid var(--surface-c);
-  border-width: 0;
-  padding: var(--inline-spacing-larger) 1.5rem;
-  border-radius: var(--border-radius);
-  width: 80%;
-}
 .p-paginator .p-paginator-first,
 .p-paginator .p-paginator-prev,
 .p-paginator .p-paginator-next,
@@ -319,9 +310,7 @@
   margin-left: var(--inline-spacing);
   margin-right: var(--inline-spacing);
 }
-.p-paginator .p-paginator-page-input .p-inputtext {
-  max-width: 3rem;
-}
+
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 1px solid var(--surface-300);
@@ -352,6 +341,18 @@
   color: var(--text-color);
 }
 
+.p-datatable-gridlines .p-datatable-paginator-top {
+  border-width: 1px 0px 0px 0px !important;
+}
+
+.p-togglebutton.p-togglebutton-checked::before {
+  background: var(--primary-color) !important;
+}
+
+.p-togglebutton.p-togglebutton-checked > .p-togglebutton-content {
+  color: white !important;
+}
+
 .p-picklist .p-picklist-header {
   background: var(--surface-b);
   color: var(--text-color);
@@ -503,10 +504,6 @@
   font-size: 2rem;
 }
 
-.p-treetable .p-paginator-top {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
 .p-treetable .p-paginator-bottom {
   border-width: 0 0 1px 0;
   border-radius: 0;
@@ -639,7 +636,7 @@
   font-size: 2rem;
 }
 .p-treetable.p-treetable-gridlines .p-datatable-header {
-  border-width: 1px 1px 0 1px;
+  border-width: 1px 0 0 0;
 }
 .p-treetable.p-treetable-gridlines .p-treetable-footer {
   border-width: 0 1px 1px 1px;
@@ -1007,7 +1004,6 @@
 .p-tabview .p-tabview-panels {
   background: var(--surface-a);
   padding: 1.25rem 0rem;
-  border: 1px solid var(--surface-d);
   color: var(--text-color);
   border-bottom-right-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
diff --git a/src/assets/styles/theme.css b/src/assets/styles/theme.css
index ae02cd733..e560e2c5d 100644
--- a/src/assets/styles/theme.css
+++ b/src/assets/styles/theme.css
@@ -334,14 +334,6 @@
   color: #3f3f46;
 }
 
-.p-autocomplete.p-invalid.p-component > .p-inputtext {
-  border-color: #f0a9a7;
-}
-
-.p-calendar.p-invalid.p-component > .p-inputtext {
-  border-color: #f0a9a7;
-}
-
 .p-dropdown {
   background: #ffffff;
   border: 1px solid #d4d4d8;
@@ -487,10 +479,6 @@
   background-color: #ffffff;
 }
 
-.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
-  background-color: transparent;
-}
-
 .p-editor-container .p-editor-toolbar {
   background: #fafafa;
   border-top-right-radius: 0.375rem;
@@ -632,63 +620,16 @@
   border-right: 1px solid #d4d4d8;
 }
 
-.p-inputgroup > .p-component,
-.p-inputgroup > .p-inputwrapper > .p-inputtext,
-.p-inputgroup > .p-float-label > .p-component {
-  border-radius: 0;
-  margin: 0;
-}
-
-.p-inputgroup > .p-component + .p-inputgroup-addon,
-.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
-.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
-  border-left: 0 none;
-}
-
-.p-inputgroup > .p-component:focus,
-.p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
-.p-inputgroup > .p-float-label > .p-component:focus {
-  z-index: 1;
-}
-
-.p-inputgroup > .p-component:focus ~ label,
-.p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label,
-.p-inputgroup > .p-float-label > .p-component:focus ~ label {
-  z-index: 1;
-}
-
-.p-inputgroup-addon:first-child,
-.p-inputgroup button:first-child,
-.p-inputgroup input:first-child,
-.p-inputgroup > .p-inputwrapper:first-child,
-.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
 .p-inputgroup .p-float-label:first-child input {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
 
-.p-inputgroup-addon:last-child,
-.p-inputgroup button:last-child,
-.p-inputgroup input:last-child,
-.p-inputgroup > .p-inputwrapper:last-child,
-.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
 .p-inputgroup .p-float-label:last-child input {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
 }
 
-.p-inputnumber.p-invalid.p-component > .p-inputtext {
-  border-color: #f0a9a7;
-}
-
 .p-inputswitch {
   width: 3rem;
   height: 1.75rem;
@@ -698,58 +639,6 @@
   border-color: #f0a9a7;
 }
 
-.p-inputtext {
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
-  font-size: 1rem;
-  color: #3f3f46;
-  background: #ffffff;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid #d4d4d8;
-  transition: none;
-  appearance: none;
-  border-radius: 0.375rem;
-}
-
-.p-inputtext:enabled:hover {
-  border-color: #d4d4d8;
-}
-
-.p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-  border-color: #8c1515;
-}
-
-.p-inputtext.p-invalid.p-component {
-  border-color: #f0a9a7;
-}
-
-.p-inputtext.p-inputtext-sm {
-  font-size: 0.875rem;
-  padding: 0.65625rem 0.65625rem;
-}
-
-.p-inputtext.p-inputtext-lg {
-  font-size: 1.25rem;
-  padding: 0.9375rem 0.9375rem;
-}
-
 .p-float-label > label {
   left: 0.75rem;
   color: #71717a;
@@ -765,10 +654,6 @@
   color: #71717a;
 }
 
-.p-input-icon-left > .p-inputtext {
-  padding-left: 2.5rem;
-}
-
 .p-input-icon-left.p-float-label > label {
   left: 2.5rem;
 }
@@ -778,10 +663,6 @@
   color: #71717a;
 }
 
-.p-input-icon-right > .p-inputtext {
-  padding-right: 2.5rem;
-}
-
 ::-webkit-input-placeholder {
   color: #71717a;
 }
@@ -798,28 +679,6 @@
   color: #71717a;
 }
 
-.p-input-filled .p-inputtext {
-  background-color: #fafafa;
-}
-
-.p-input-filled .p-inputtext:enabled:hover {
-  background-color: #fafafa;
-}
-
-.p-input-filled .p-inputtext:enabled:focus {
-  background-color: #ffffff;
-}
-
-.p-inputtext-sm .p-inputtext {
-  font-size: 0.875rem;
-  padding: 0.65625rem 0.65625rem;
-}
-
-.p-inputtext-lg .p-inputtext {
-  font-size: 1.25rem;
-  padding: 0.9375rem 0.9375rem;
-}
-
 .p-listbox {
   background: #ffffff;
   color: #3f3f46;
@@ -966,10 +825,6 @@
   border-top-left-radius: 0.375rem;
 }
 
-.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding-right: 1.75rem;
-}
-
 .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
   right: 0.75rem;
   color: #71717a;
@@ -1057,10 +912,6 @@
   background-color: #ffffff;
 }
 
-.p-password.p-invalid.p-component > .p-inputtext {
-  border-color: #f0a9a7;
-}
-
 .p-password-panel {
   padding: 1.25rem;
   background: #ffffff;
@@ -1210,11 +1061,6 @@
   color: #312e81;
 }
 
-.p-datatable .p-paginator-top {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
-
 .p-datatable .p-paginator-bottom {
   border-width: 0 0 1px 0;
   border-radius: 0;
@@ -1408,51 +1254,6 @@
   font-size: 2rem;
 }
 
-.p-datatable.p-datatable-gridlines .p-datatable-header {
-  border-width: 1px 1px 0 1px;
-}
-
-.p-datatable.p-datatable-gridlines .p-datatable-footer {
-  border-width: 0 1px 1px 1px;
-}
-
-.p-datatable.p-datatable-gridlines .p-paginator-top {
-  border-width: 0 1px 0 1px;
-}
-
-.p-datatable.p-datatable-gridlines .p-paginator-bottom {
-  border-width: 0 1px 1px 1px;
-}
-
-.p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
-  border-width: 1px 1px 1px 1px;
-}
-
-.p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
-  border-width: 1px;
-}
-
-.p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
-  border-width: 1px;
-}
-
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-thead > tr > th + th {
-  border-left-width: 0;
-}
-
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr > td + td {
-  border-left-width: 0;
-}
-
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr + tr > td,
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tbody > tr:first-child > td {
-  border-top-width: 0;
-}
-
-.p-datatable.p-datatable-gridlines.p-datatable-scrollable .p-datatable-tfoot > tr > td + td {
-  border-left-width: 0;
-}
-
 .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
   background: #fcfcfc;
 }
@@ -1510,11 +1311,6 @@
   padding: 0.9375rem 1.875rem;
 }
 
-.p-dataview .p-paginator-top {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
-
 .p-dataview .p-paginator-bottom {
   border-width: 0 0 1px 0;
   border-radius: 0;
@@ -2221,10 +2017,6 @@
   margin-right: 0.5rem;
 }
 
-.p-paginator .p-paginator-page-input .p-inputtext {
-  max-width: 3rem;
-}
-
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 1px solid #d4d4d8;
@@ -2441,11 +2233,6 @@
   font-size: 2rem;
 }
 
-.p-treetable .p-paginator-top {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
-
 .p-treetable .p-paginator-bottom {
   border-width: 0 0 1px 0;
   border-radius: 0;
@@ -2604,9 +2391,8 @@
 }
 
 .p-treetable.p-treetable-gridlines .p-datatable-header {
-  border-width: 1px 1px 0 1px;
+  border-width: 1px 0 0 0;
 }
-
 .p-treetable.p-treetable-gridlines .p-treetable-footer {
   border-width: 0 1px 1px 1px;
 }
@@ -5394,25 +5180,6 @@
 }
 
 /* Customizations to the designer theme should be defined here */
-.p-inputtext,
-.p-togglebutton,
-.p-selectbutton,
-.p-inputgroup {
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 1px 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-.p-inputgroup .p-inputtext,
-.p-inputgroup .p-togglebutton,
-.p-inputgroup .p-selectbutton {
-  box-shadow: none;
-}
-
-.p-inputtext.p-invalid.p-component:enabled:focus {
-  box-shadow: 0 0 0 1px #f0a9a7;
-}
 
 .p-highlight {
   font-weight: 600;
diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index 404594ca9..4f15de341 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -18,7 +18,6 @@
 
 @import 'components/input-group';
 @import 'components/input-switch';
-@import 'components/input-text';
 
 @import 'components/listbox';
 
diff --git a/src/components/CardAdministration.vue b/src/components/CardAdministration.vue
index e43505a4b..79274988c 100644
--- a/src/components/CardAdministration.vue
+++ b/src/components/CardAdministration.vue
@@ -88,7 +88,7 @@
               type="bar"
               :data="setBarChartData(node.data.stats?.assignment)"
               :options="setBarChartOptions(node.data.stats?.assignment)"
-              class="h-3rem"
+              class="h-3rem w-full"
             />
           </template>
         </PvColumn>
diff --git a/src/components/ConsentPicker.vue b/src/components/ConsentPicker.vue
index 415f73125..3f2e23d0e 100644
--- a/src/components/ConsentPicker.vue
+++ b/src/components/ConsentPicker.vue
@@ -3,27 +3,11 @@
     <div class="card flex justify-content-center">
       <div class="flex flex-wrap gap-3">
         <div class="flex align-items-center">
-          <PvRadioButton
-            v-model="decision"
-            input-id="helpChoose"
-            class="border-2 border-circle border-300"
-            style="width: 15px; height: 15px"
-            name="help"
-            value="help"
-            @change="whatDecision"
-          />
+          <PvRadioButton v-model="decision" input-id="helpChoose" name="help" value="help" @change="whatDecision" />
           <label for="helpChoose" class="ml-2">Help me choose</label>
         </div>
         <div class="flex align-items-center">
-          <PvRadioButton
-            v-model="decision"
-            input-id="iKnow"
-            class="border-2 border-circle border-300"
-            style="width: 15px; height: 15px"
-            name="know"
-            value="know"
-            @change="whatDecision"
-          />
+          <PvRadioButton v-model="decision" input-id="iKnow" name="know" value="know" @change="whatDecision" />
           <label for="iKnow" class="ml-2">I know what to select</label>
         </div>
       </div>
@@ -148,16 +132,16 @@
           <h3 class="mb-4 mt-4">Compensation Amount and Expected Time</h3>
           <div class="flex flex-row">
             <div class="mr-1">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvInputText id="consent-amount" v-model="amount" class="w-full" disabled="true" />
                 <label for="consent-amount" class="text-sm w-full">Payment Amount $$</label>
-              </span>
+              </PvFloatLabel>
             </div>
             <div class="ml-3">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvInputText id="consent-time" v-model="expectedTime" class="w-full" disabled="true" />
                 <label for="consent-time" class="text-sm w-full">Expected Time Amount</label>
-              </span>
+              </PvFloatLabel>
             </div>
           </div>
         </div>
@@ -185,16 +169,16 @@
           <h3 class="mb-4 mt-5">Consent Amount and Expected Time</h3>
           <div class="flex flex-row">
             <div class="mr-1">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvInputText id="consent-amount" v-model="amount" class="w-full" disabled="true" />
                 <label for="consent-amount" class="text-sm w-full">Payment Amount $$</label>
-              </span>
+              </PvFloatLabel>
             </div>
             <div class="ml-3">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvInputText id="consent-time" v-model="expectedTime" class="w-full" disabled="true" />
                 <label for="consent-time" class="text-sm w-full">Expected Time Amount</label>
-              </span>
+              </PvFloatLabel>
             </div>
           </div>
         </div>
@@ -218,6 +202,7 @@
               <div class="flex align-items-center justify-content-center">
                 <PvButton
                   class="border-circle w-6rem h-6rem m-2 surface-hover text-primary border-none font-bold flex align-items-center justify-content-center hover:text-100 hover:bg-primary"
+                  style="height: 6rem; width: 6rem"
                   label="Show Consent"
                   @click="seeConsent(result.consent[0])"
                 />
@@ -587,24 +572,4 @@ watch(noConsent, () => {
   border-color: var(--primary-color);
   color: white;
 }
-.p-radiobutton.p-component.p-radiobutton-checked {
-  position: relative;
-  width: 20px; /* adjust as needed */
-  height: 20px; /* adjust as needed */
-  background-color: var(--primary-color);
-  border-color: var(--primary-color) !important;
-  border-radius: 50%; /* make the element itself circular */
-}
-
-.p-radiobutton.p-component.p-radiobutton-checked::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 5px; /* adjust size of the inner circle as needed */
-  height: 5px; /* adjust size of the inner circle as needed */
-  background-color: white; /* color of the inner circle */
-  border-radius: 50%; /* make the inner element circular */
-  transform: translate(-50%, -50%); /* center the inner circle */
-}
 </style>
diff --git a/src/components/CreateAdministration.vue b/src/components/CreateAdministration.vue
index d1743e1e0..e428e43c4 100644
--- a/src/components/CreateAdministration.vue
+++ b/src/components/CreateAdministration.vue
@@ -15,7 +15,7 @@
       <div class="bg-gray-100 rounded p-5">
         <div class="formgrid grid mt-5">
           <div class="field col-12 xl:col-6 mb-5">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvInputText
                 id="administration-name"
                 v-model="state.administrationName"
@@ -28,11 +28,11 @@
                 class="p-error white-space-nowrap overflow-hidden text-overflow-ellipsis"
                 >Please name your administration</small
               >
-            </span>
+            </PvFloatLabel>
           </div>
 
           <div class="field col-12 xl:col-6 mb-5">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvInputText
                 id="administration-public-name"
                 v-model="state.administrationPublicName"
@@ -45,19 +45,20 @@
                 class="p-error white-space-nowrap overflow-hidden text-overflow-ellipsis"
                 >Please provide a public-facing name for this administration</small
               >
-            </span>
+            </PvFloatLabel>
           </div>
         </div>
         <div class="formgrid grid">
           <div class="field col-12 md:col-6 mb-5">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvCalendar
                 v-model="state.dateStarted"
-                class="w-full"
+                class="w-full p-0"
                 :min-date="minStartDate"
                 :number-of-months="1"
                 :manual-input="false"
-                icon="pi pi-calendar text-white p-1"
+                show-icon
+                icon="pi pi-calendar text-primary"
                 input-id="start-date"
                 show-button-bar
                 data-cy="input-start-date"
@@ -66,18 +67,19 @@
               <small v-if="v$.dateStarted.required.$invalid && submitted" class="p-error"
                 >Please select a start date.</small
               >
-            </span>
+            </PvFloatLabel>
           </div>
           <div class="field col-12 md:col-6">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvCalendar
                 v-model="state.dateClosed"
-                class="w-full"
+                class="w-full p-0"
                 :min-date="minEndDate"
                 input-id="end-date"
                 :number-of-months="1"
                 :manual-input="false"
-                icon="pi pi-calendar text-white p-1"
+                show-icon
+                icon="pi pi-calendar text-primary"
                 show-button-bar
                 data-cy="input-end-date"
               />
@@ -85,7 +87,7 @@
               <small v-if="v$.dateClosed.required.$invalid && submitted" class="p-error"
                 >Please select an end date.</small
               >
-            </span>
+            </PvFloatLabel>
           </div>
         </div>
 
@@ -122,19 +124,11 @@
             <div class="flex">
               <label style="font-weight: bold" class="mb-2 mx-2">Sequential?</label>
               <span class="flex gap-2">
-                <PvRadioButton
-                  v-model="state.sequential"
-                  class="border-2 border-circle border-300"
-                  style="width: 15px; height: 15px"
-                  input-id="Yes"
-                  :value="true"
-                />
+                <PvRadioButton v-model="state.sequential" input-id="Yes" :value="true" />
                 <label for="Yes">Yes</label>
                 <PvRadioButton
                   v-model="state.sequential"
                   data-cy="radio-button-not-sequential"
-                  class="border-2 border-circle border-300"
-                  style="width: 15px; height: 15px"
                   input-id="No"
                   :value="false"
                 />
@@ -764,24 +758,4 @@ function findVariantWithParams(variants, params) {
     display: none;
   }
 }
-.p-radiobutton.p-component.p-radiobutton-checked {
-  position: relative;
-  width: 20px; /* adjust as needed */
-  height: 20px; /* adjust as needed */
-  background-color: var(--primary-color);
-  border-color: var(--primary-color) !important;
-  border-radius: 50%; /* make the element itself circular */
-}
-
-.p-radiobutton.p-component.p-radiobutton-checked::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 5px; /* adjust size of the inner circle as needed */
-  height: 5px; /* adjust size of the inner circle as needed */
-  background-color: white; /* color of the inner circle */
-  border-radius: 50%; /* make the inner element circular */
-  transform: translate(-50%, -50%); /* center the inner circle */
-}
 </style>
diff --git a/src/components/CreateAdministrator.vue b/src/components/CreateAdministrator.vue
index a24280fc5..8adbd507a 100644
--- a/src/components/CreateAdministrator.vue
+++ b/src/components/CreateAdministrator.vue
@@ -15,7 +15,7 @@
         <div v-if="initialized && !registering" class="w-full">
           <div class="grid">
             <div class="col-12 md:col-6 lg:col-3 my-3">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvInputText
                   id="first-name"
                   v-model="firstName"
@@ -23,11 +23,11 @@
                   data-cy="input-administrator-first-name"
                 />
                 <label for="first-name">First Name</label>
-              </span>
+              </PvFloatLabel>
             </div>
 
             <div class="col-12 md:col-6 lg:col-3 my-3">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvInputText
                   id="middle-name"
                   v-model="middleName"
@@ -35,21 +35,21 @@
                   data-cy="input-administrator-middle-name"
                 />
                 <label for="middle-name">Middle Name</label>
-              </span>
+              </PvFloatLabel>
             </div>
 
             <div class="col-12 md:col-6 lg:col-3 my-3">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvInputText id="last-name" v-model="lastName" class="w-full" data-cy="input-administrator-last-name" />
                 <label for="last-name">Last Name</label>
-              </span>
+              </PvFloatLabel>
             </div>
 
             <div class="col-12 md:col-6 lg:col-3 my-3">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvInputText id="email" v-model="email" class="w-full" data-cy="input-administrator-email" />
                 <label for="email">Email</label>
-              </span>
+              </PvFloatLabel>
             </div>
           </div>
 
diff --git a/src/components/CreateOrgs.vue b/src/components/CreateOrgs.vue
index 32f32aad9..ccfc54a35 100644
--- a/src/components/CreateOrgs.vue
+++ b/src/components/CreateOrgs.vue
@@ -15,7 +15,7 @@
       <div class="bg-gray-100 rounded p-4">
         <div class="grid column-gap-3 mt-5 rounded">
           <div class="col-12 md:col-6 lg:col-3 xl:col-3">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvDropdown
                 v-model="orgType"
                 input-id="org-type"
@@ -27,13 +27,13 @@
                 data-cy="dropdown-org-type"
               />
               <label for="org-type">Org Type<span id="required-asterisk">*</span></label>
-            </span>
+            </PvFloatLabel>
           </div>
         </div>
 
         <div v-if="parentOrgRequired" class="grid mt-4">
           <div class="col-12 md:col-6 lg:col-4">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvDropdown
                 v-model="state.parentDistrict"
                 input-id="parent-district"
@@ -47,11 +47,11 @@
               />
               <label for="parent-district">District<span id="required-asterisk">*</span></label>
               <small v-if="v$.parentDistrict.$invalid && submitted" class="p-error"> Please select a district. </small>
-            </span>
+            </PvFloatLabel>
           </div>
 
           <div v-if="orgType.singular === 'class'" class="col-12 md:col-6 lg:col-4">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvDropdown
                 v-model="state.parentSchool"
                 input-id="parent-school"
@@ -65,29 +65,29 @@
               />
               <label for="parent-school">School<span id="required-asterisk">*</span></label>
               <small v-if="v$.parentSchool.$invalid && submitted" class="p-error"> Please select a district. </small>
-            </span>
+            </PvFloatLabel>
           </div>
         </div>
 
         <div class="grid mt-3">
           <div class="col-12 md:col-6 lg:col-4 mt-3">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvInputText id="org-name" v-model="state.orgName" class="w-full" data-cy="input-org-name" />
               <label for="org-name">{{ orgTypeLabel }} Name<span id="required-asterisk">*</span></label>
               <small v-if="v$.orgName.$invalid && submitted" class="p-error">Please supply a name</small>
-            </span>
+            </PvFloatLabel>
           </div>
 
           <div class="col-12 md:col-6 lg:col-4 mt-3">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvInputText id="org-initial" v-model="state.orgInitials" class="w-full" data-cy="input-org-initials" />
               <label for="org-initial">{{ orgTypeLabel }} Abbreviation<span id="required-asterisk">*</span></label>
               <small v-if="v$.orgInitials.$invalid && submitted" class="p-error">Please supply an abbreviation</small>
-            </span>
+            </PvFloatLabel>
           </div>
 
           <div v-if="orgType?.singular === 'class'" class="col-12 md:col-6 lg:col-4 mt-3">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvDropdown
                 v-model="state.grade"
                 input-id="grade"
@@ -100,7 +100,7 @@
               />
               <label for="grade">Grade<span id="required-asterisk">*</span></label>
               <small v-if="v$.grade.$invalid && submitted" class="p-error">Please select a grade</small>
-            </span>
+            </PvFloatLabel>
           </div>
         </div>
 
@@ -109,7 +109,7 @@
         <div v-if="['district', 'school', 'group'].includes(orgType?.singular)">
           <div class="grid column-gap-3">
             <div v-if="['district', 'school'].includes(orgType?.singular)" class="col-12 md:col-6 lg:col-4 mt-5">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvInputText
                   v-model="state.ncesId"
                   v-tooltip="ncesTooltip"
@@ -118,7 +118,7 @@
                   data-cy="input-nces-id"
                 />
                 <label for="nces-id">NCES ID</label>
-              </span>
+              </PvFloatLabel>
             </div>
           </div>
           <div class="grid mt-3">
@@ -153,7 +153,7 @@
 
         <div class="grid mt-3">
           <div class="col-12 md:col-6 lg:col-4 mt-3" data-cy="div-auto-complete">
-            <span class="p-float-label">
+            <PvFloatLabel>
               <PvAutoComplete
                 v-model="state.tags"
                 multiple
@@ -166,7 +166,7 @@
                 @complete="searchTags"
               />
               <label for="tags">Tags</label>
-            </span>
+            </PvFloatLabel>
           </div>
         </div>
         <div class="flex flex-row align-items-center justify-content-stagap-2 flex-order-0 my-3">
diff --git a/src/components/ListOrgs.vue b/src/components/ListOrgs.vue
index 42475b71b..c566f2e28 100644
--- a/src/components/ListOrgs.vue
+++ b/src/components/ListOrgs.vue
@@ -18,7 +18,7 @@
               v-if="activeOrgType === 'schools' || activeOrgType === 'classes'"
               class="col-12 md:col-6 lg:col-3 xl:col-3 mt-3"
             >
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvDropdown
                   v-model="selectedDistrict"
                   input-id="district"
@@ -31,10 +31,10 @@
                   data-cy="dropdown-parent-district"
                 />
                 <label for="district">District</label>
-              </span>
+              </PvFloatLabel>
             </div>
             <div v-if="orgType.id === 'classes'" class="col-12 md:col-6 lg:col-3 xl:col-3 mt-3">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvDropdown
                   v-model="selectedSchool"
                   input-id="school"
@@ -47,7 +47,7 @@
                   data-cy="dropdown-parent-school"
                 />
                 <label for="school">School</label>
-              </span>
+              </PvFloatLabel>
             </div>
           </div>
           <RoarDataTable
diff --git a/src/components/OrgPicker.vue b/src/components/OrgPicker.vue
index c1f8a7fd4..b065abe3c 100644
--- a/src/components/OrgPicker.vue
+++ b/src/components/OrgPicker.vue
@@ -9,7 +9,7 @@
                 v-if="activeOrgType === 'schools' || activeOrgType === 'classes'"
                 class="col-6 md:col-5 lg:col-5 xl:col-5 mt-3"
               >
-                <span class="p-float-label">
+                <PvFloatLabel>
                   <PvDropdown
                     id="district"
                     v-model="selectedDistrict"
@@ -23,10 +23,10 @@
                     data-cy="dropdown-selected-district"
                   />
                   <label for="district">Select from district</label>
-                </span>
+                </PvFloatLabel>
               </div>
               <div v-if="orgType.id === 'classes'" class="col-6 md:col-5 lg:col-5 xl:col-5 mt-3">
-                <span class="p-float-label">
+                <PvFloatLabel>
                   <PvDropdown
                     id="school"
                     v-model="selectedSchool"
@@ -40,7 +40,7 @@
                     data-cy="dropdown-selected-school"
                   />
                   <label for="school">Select from school</label>
-                </span>
+                </PvFloatLabel>
               </div>
             </div>
             <div class="card flex justify-content-center">
diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index a07a2122c..8fff9b456 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -5,7 +5,7 @@
   <div v-else>
     <div class="w-full gap-1 pt-1 flex justify-content-center align-items-center flex-wrap mt-3">
       <slot name="filterbar"></slot>
-      <span class="p-float-label my-3">
+      <PvFloatLabel>
         <PvMultiSelect
           id="ms-columns"
           v-tooltip.top="'Show and hide columns'"
@@ -18,8 +18,8 @@
           @update:model-value="onColumnToggle"
         />
         <label for="ms-columns" class="view-label2">Select Columns</label>
-      </span>
-      <span class="p-float-label my-3">
+      </PvFloatLabel>
+      <PvFloatLabel>
         <PvMultiSelect
           id="ms-freeze"
           :model-value="frozenColumns"
@@ -32,7 +32,7 @@
           @update:model-value="onFreezeToggle"
         />
         <label for="ms-columns" class="view-label2">Freeze Columns</label>
-      </span>
+      </PvFloatLabel>
       <span class="flex flex-row flex-wrap justify-content-end gap-2 max-h-3 export-wrapper">
         <PvButton
           v-tooltip.bottom="'Expand or Compress table rows'"
@@ -202,7 +202,12 @@
             </template>
             <template v-if="col.dataType" #filter="{ filterModel }">
               <div v-if="col.dataType === 'text' && !col.useMultiSelect" class="filter-content">
-                <PvInputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Filter" />
+                <PvInputText
+                  v-model="filterModel.value"
+                  type="text"
+                  class="p-column-filter w-full"
+                  placeholder="Filter"
+                />
               </div>
               <PvInputNumber
                 v-if="col.dataType === 'number' && !col.useMultiSelect"
@@ -309,23 +314,21 @@
               </div>
             </template>
             <template #filterclear="{ filterCallback }">
-              <div class="flex flex-row-reverse">
-                <PvButton
-                  type="button"
-                  text
-                  icon="pi pi-times"
-                  class="p-2 bg-primary text-white border-round border-none hover:bg-red-900"
-                  severity="primary"
-                  @click="filterCallback()"
-                  >Clear</PvButton
-                >
-              </div>
+              <PvButton
+                type="button"
+                text
+                icon="pi pi-times"
+                class="bg-primary w-4 text-white border-round border-none hover:bg-red-900"
+                severity="primary"
+                @click="filterCallback()"
+                >Clear
+              </PvButton>
             </template>
             <template #filterapply="{ filterCallback }">
               <PvButton
                 type="button"
                 icon="pi pi-times"
-                class="px-2 p-2 bg-primary text-white border-round border-none hover:bg-red-900"
+                class="bg-primary w-4 text-white border-round border-none hover:bg-red-900"
                 severity="primary"
                 @click="filterCallback()"
                 >Apply
@@ -352,7 +355,7 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useToast } from 'primevue/usetoast';
-import { FilterMatchMode, FilterOperator } from 'primevue/core/api';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
 import SkeletonTable from '@/components/SkeletonTable.vue';
 import _get from 'lodash/get';
 import _map from 'lodash/map';
@@ -642,10 +645,12 @@ button.p-button.p-component.softer {
   color: black;
 }
 
-button.p-column-filter-menu-button.p-link,
-g {
+svg.p-icon.p-button-icon {
   color: white;
-  margin-left: 10px;
+}
+
+svg.p-icon.p-button-icon:hover {
+  color: gray;
 }
 
 .p-datatable .p-datatable-tbody > tr > td {
diff --git a/src/components/TaskPicker.vue b/src/components/TaskPicker.vue
index 052fdc2c4..480426f03 100644
--- a/src/components/TaskPicker.vue
+++ b/src/components/TaskPicker.vue
@@ -10,10 +10,15 @@
     <div class="w-full flex flex-column lg:flex-row gap-2">
       <div v-if="tasksPaneOpen" class="w-full lg:w-6">
         <div class="flex flex-row mb-2">
-          <div class="flex flex-column flex-grow-1 p-input-icon-left">
-            <i class="pi pi-search" />
-            <PvInputText v-model="searchTerm" placeholder="Variant name, ID, or Task ID" data-cy="input-variant-name" />
-          </div>
+          <PvIconField class="w-full">
+            <PvInputIcon class="pi pi-search" />
+            <PvInputText
+              v-model="searchTerm"
+              class="w-full"
+              placeholder="Variant name, ID, or Task ID"
+              data-cy="input-variant-name"
+            />
+          </PvIconField>
           <PvButton
             v-if="searchTerm"
             class="bg-primary text-white border-none border-round pl-3 pr-3 hover:bg-red-900"
diff --git a/src/components/VariantCard.vue b/src/components/VariantCard.vue
index bd78eede5..4aefef8bd 100644
--- a/src/components/VariantCard.vue
+++ b/src/components/VariantCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!hasControls"
-    class="flex-1 flex h-6rem flex-row gap-2 border-1 border-round surface-border bg-white-alpha-90 mb-2 hover:surface-hover"
+    class="flex-1 flex flex-row gap-2 border-1 border-round surface-border bg-white-alpha-90 mb-2 hover:surface-hover"
   >
     <div class="w-11 mt-3 flex flex-row p-0 mb-2">
       <div>
@@ -76,7 +76,7 @@
     </div>
   </div>
   <!---------- end card without buttons ----- >-->
-  <div v-else :id="variant.id" class="h-6rem" :class="isActive()">
+  <div v-else :id="variant.id" :class="isActive()">
     <div class="ml-0 pl-0 flex flex-column">
       <PvButton
         class="surface-hover border-y-1 border-200 border-noround m-0 hover:bg-primary p-0"
diff --git a/src/components/auth/AuthEmailLink.vue b/src/components/auth/AuthEmailLink.vue
index e47067cd2..653e3ec76 100644
--- a/src/components/auth/AuthEmailLink.vue
+++ b/src/components/auth/AuthEmailLink.vue
@@ -1,10 +1,10 @@
 <template>
   <AppSpinner v-if="localStorageEmail" />
   <div v-else class="field col">
-    <span class="p-float-label">
+    <PvFloatLabel>
       <PvInputText id="email" v-model="formEmail" />
       <label for="email">Email</label>
-    </span>
+    </PvFloatLabel>
     <div class="col-12 mb-3">
       <PvButton label="Finish signing in" @click="loginFromEmailLink(formEmail)" />
     </div>
diff --git a/src/components/reports/TableRoarScores.vue b/src/components/reports/TableRoarScores.vue
index 82e1505d3..0dfa244dd 100644
--- a/src/components/reports/TableRoarScores.vue
+++ b/src/components/reports/TableRoarScores.vue
@@ -114,7 +114,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { FilterMatchMode, FilterOperator } from 'primevue/core/api';
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
 import { storeToRefs } from 'pinia';
 import Papa from 'papaparse';
 import { flattenObj } from '@/helpers';
diff --git a/src/main.js b/src/main.js
index 7c89bbb38..8bb1546e9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -63,8 +63,10 @@ import PvTabView from 'primevue/tabview';
 import PvTag from 'primevue/tag';
 import PvToast from 'primevue/toast';
 import PvTreeTable from 'primevue/treetable';
-// import PvTriStateCheckbox from 'primevue/tristatecheckbox';
+import PvFloatLabel from 'primevue/floatlabel';
 import PvFieldset from 'primevue/fieldset';
+import PvIconField from 'primevue/iconfield';
+import PvInputIcon from 'primevue/inputicon';
 
 // PrimeVue directive imports
 import PvTooltip from 'primevue/tooltip';
@@ -81,15 +83,16 @@ import RoarDataTable from '@/components/RoarDataTable.vue';
 import LanguageSelector from '@/components/LanguageSelector.vue';
 
 // Style assets
-// import 'primevue/resources/primevue.css'; // primevue css
-// import 'primeicons/primeicons.css'; // icons
-// import 'primeflex/primeflex.scss'; // primeflex
-
+// import '@primevue/resources/primevue.css'; // primevue css
+import Aura from '@primevue/themes/aura';
+import 'primeicons/primeicons.css'; // icons
+import 'primeflex/primeflex.scss'; // primeflex
 import './assets/styles/theme-tailwind.css'; // base theme (pulled from Primevue)
 import './assets/styles/theme.scss'; // ROAR theme
 
 // translations
 import { i18n } from '@/translations/i18n.js';
+import { definePreset } from '@primevue/themes';
 // https://www.npmjs.com/package/vue-country-flag-next
 
 import { VueRecaptchaPlugin } from 'vue-recaptcha';
@@ -105,7 +108,34 @@ app.use(VueRecaptchaPlugin, {
 
 initSentry(app);
 
-app.use(PrimeVue, { ripple: true });
+const MyPreset = definePreset(Aura, {
+  primitive: {
+    red: { 500: '#8c1515', 700: '#5b0c0f', 400: '#5b0c0f', 600: '#5b0c0f' },
+    surface: { 100: '#adb5bd', 500: '#8c1515' },
+  },
+  semantic: {
+    primary: {
+      50: '{surface.200}',
+      100: '{surface.300}',
+      200: '{red.200}',
+      300: '{red.300}',
+      400: '{red.400}',
+      500: '{red.500}',
+      600: '{red.600}',
+      700: '{red.700}',
+      800: '{red.800}',
+      900: '{red.900}',
+      950: '{red.950}',
+    },
+  },
+});
+
+app.use(PrimeVue, {
+  theme: {
+    preset: MyPreset,
+  },
+  ripple: true,
+});
 app.use(ToastService);
 app.use(ConfirmationService);
 app.use(pinia);
@@ -116,6 +146,7 @@ app.use(VueGoogleMaps, {
     libraries: 'places',
   },
 });
+
 app.use(createHead());
 app.use(TextClamp);
 app.use(VueQueryPlugin);
@@ -173,8 +204,9 @@ app.component('PvTabView', PvTabView);
 app.component('PvTag', PvTag);
 app.component('PvToast', PvToast);
 app.component('PvTreeTable', PvTreeTable);
-// app.component('PvTriStateCheckbox', PvTriStateCheckbox);
-
+app.component('PvFloatLabel', PvFloatLabel);
+app.component('PvIconField', PvIconField);
+app.component('PvInputIcon', PvInputIcon);
 app.component('RoarDataTable', RoarDataTable);
 app.component('LanguageSelector', LanguageSelector);
 app.component('PvFieldset', PvFieldset);
diff --git a/src/pages/ProgressReport.vue b/src/pages/ProgressReport.vue
index 7cdd7ce29..c6ca0f4f0 100644
--- a/src/pages/ProgressReport.vue
+++ b/src/pages/ProgressReport.vue
@@ -119,7 +119,7 @@
         >
           <template #filterbar>
             <div v-if="schoolsInfo" class="flex flex-row gap-2">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvMultiSelect
                   id="ms-school-filter"
                   v-model="filterSchools"
@@ -132,10 +132,10 @@
                   data-cy="filter-by-school"
                 />
                 <label for="ms-school-filter">Filter by School</label>
-              </span>
+              </PvFloatLabel>
             </div>
             <div class="flex flex-row gap-2">
-              <span class="p-float-label">
+              <PvFloatLabel>
                 <PvMultiSelect
                   id="ms-grade-filter"
                   v-model="filterGrades"
@@ -148,7 +148,7 @@
                   data-cy="filter-by-grade"
                 />
                 <label for="ms-school-filter">Filter by Grade</label>
-              </span>
+              </PvFloatLabel>
             </div>
           </template>
         </RoarDataTable>
diff --git a/src/pages/ScoreReport.vue b/src/pages/ScoreReport.vue
index 84a482ad4..2b71c8466 100644
--- a/src/pages/ScoreReport.vue
+++ b/src/pages/ScoreReport.vue
@@ -132,7 +132,7 @@
             <template #filterbar>
               <div class="flex flex-row flex-wrap gap-2 align-items-center justify-content-center">
                 <div v-if="schoolsInfo" class="flex flex-row my-3">
-                  <span class="p-float-label">
+                  <PvFloatLabel>
                     <PvMultiSelect
                       id="ms-school-filter"
                       v-model="filterSchools"
@@ -145,10 +145,10 @@
                       data-cy="filter-by-school"
                     />
                     <label for="ms-school-filter">Filter by School</label>
-                  </span>
+                  </PvFloatLabel>
                 </div>
                 <div class="flex flex-row gap-2 my-3">
-                  <span class="p-float-label">
+                  <PvFloatLabel>
                     <PvMultiSelect
                       id="ms-grade-filter"
                       v-model="filterGrades"
@@ -161,7 +161,7 @@
                       data-cy="filter-by-grade"
                     />
                     <label for="ms-school-filter">Filter by Grade</label>
-                  </span>
+                  </PvFloatLabel>
                 </div>
               </div>
             </template>
diff --git a/src/pages/SignIn.vue b/src/pages/SignIn.vue
index ae4baa395..266d9e358 100644
--- a/src/pages/SignIn.vue
+++ b/src/pages/SignIn.vue
@@ -104,18 +104,18 @@
         <div v-if="signInMethods.includes('classlink')">
           <PvButton
             v-if="!isLevante"
-            class="flex surface-0 p-1 mr-1 border-black-alpha-10 justify-content-center hover:border-primary hover:surface-ground"
+            class="flex surface-0 p-1 mr-1 border-black-alpha-10 text-black justify-content-center hover:border-primary hover:surface-ground"
             style="border-radius: 3rem; height: 3rem"
             @click="authWithClassLink"
           >
             <img src="../assets/provider-classlink-logo.png" alt="The ClassLink Logo" class="flex mr-2 w-2" />
-            <span>ClassLink</span>
+            <span class="text-black">ClassLink</span>
           </PvButton>
         </div>
         <div v-if="signInMethods.includes('password')" class="flex flex-row gap-2">
           <PvPassword v-model="modalPassword" placeholder="Password" :feedback="false"></PvPassword>
           <PvButton
-            class="flex p-3 border-none border-round hover:bg-black-alpha-20"
+            class="flex p-3 border-none border-round bg-primary hover:bg-black-alpha-20"
             :label="$t('authSignIn.buttonLabel') + ' &rarr;'"
             @click="authWithEmail({ email, password: modalPassword, useLink: false, usePassword: true })"
           />

From a67602512436800024b95b22eda15d4609d0ae30 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Tue, 23 Jul 2024 15:30:40 -0700
Subject: [PATCH 03/28] Style Manage Tasks and Variants

---
 src/assets/styles/theme-tailwind.css    |   4 +-
 src/components/RoarDataTable.vue        |   2 +
 src/components/auth/SignIn.vue          |   8 +-
 src/components/tasks/ManageTasks.vue    | 264 ++++++++++++++----------
 src/components/tasks/ManageVariants.vue | 194 +++++++++--------
 src/pages/SignIn.vue                    |   9 +-
 6 files changed, 276 insertions(+), 205 deletions(-)

diff --git a/src/assets/styles/theme-tailwind.css b/src/assets/styles/theme-tailwind.css
index 88d3a1a44..90c15d308 100644
--- a/src/assets/styles/theme-tailwind.css
+++ b/src/assets/styles/theme-tailwind.css
@@ -348,7 +348,9 @@
 .p-togglebutton.p-togglebutton-checked::before {
   background: var(--primary-color) !important;
 }
-
+input.p-inputtext.p-component.p-password-input {
+  width: 31.4rem !important;
+}
 .p-togglebutton.p-togglebutton-checked > .p-togglebutton-content {
   color: white !important;
 }
diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index 8fff9b456..02f42daf6 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -616,6 +616,8 @@ const emit = defineEmits(['export-all', 'selection', 'reset-filters', 'export-se
   height: 16px;
   color: var(--text-color);
   border-radius: var(--border-radius);
+  display: flex;
+  justify-content: center;
   transition: none;
 }
 
diff --git a/src/components/auth/SignIn.vue b/src/components/auth/SignIn.vue
index f1f70cc0f..9b74c727a 100644
--- a/src/components/auth/SignIn.vue
+++ b/src/components/auth/SignIn.vue
@@ -6,7 +6,7 @@
           <PvInputText
             :id="$t('authSignIn.emailId')"
             v-model="v$.email.$model"
-            :class="{ 'p-invalid': invalid }"
+            :class="[{ 'p-invalid': invalid }, 'w-full']"
             aria-describedby="email-error"
             :placeholder="$t('authSignIn.emailPlaceholder')"
             data-cy="input-username-email"
@@ -29,8 +29,6 @@
               v-model="v$.password.$model"
               :class="{ 'p-invalid': invalid }"
               toggle-mask
-              show-icon="pi pi-eye-slash"
-              hide-icon="pi pi-eye"
               :feedback="false"
               :placeholder="$t('authSignIn.passwordPlaceholder')"
               data-cy="input-password"
@@ -57,8 +55,6 @@
             v-model="v$.password.$model"
             :class="{ 'p-invalid': invalid }"
             toggle-mask
-            show-icon="pi pi-eye-slash"
-            hide-icon="pi pi-eye"
             :feedback="false"
             :placeholder="$t('authSignIn.passwordPlaceholder')"
             data-cy="input-password"
@@ -110,7 +106,7 @@
       </div>
       <PvButton
         type="submit"
-        class="mt-5 flex w-5 p-3 border-none border-round hover:bg-black-alpha-20"
+        class="mt-5 flex w-5 p-3 surface-200 text-black-alpha-90 border-none border-round hover:bg-primary hover:text-white"
         :label="$t('authSignIn.buttonLabel') + ' &rarr;'"
       />
       <hr class="opacity-20 mt-5" />
diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index b390481aa..dca02f0e3 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -12,83 +12,108 @@
       <!-- <p class="login-title" align="left">Register for ROAR</p> -->
       <form class="p-fluid" @submit.prevent="handleNewTaskSubmit(!t$.$invalid)">
         <!-- Task name -->
-        <div class="flex flex-column row-gap-3">
-          <section class="form-section">
-            <div class="p-input-icon-right">
-              <label for="taskName">
-                <small class="text-gray-400 font-bold">Task Name </small>
-                <span class="required">*</span></label
-              >
-              <PvInputText
-                v-model="t$.taskName.$model"
-                name="taskName"
-                :class="{ 'p-invalid': t$.taskName.$invalid && submitted }"
-                aria-describedby="activation-code-error"
-              />
-            </div>
-            <span v-if="t$.taskName.$error && submitted">
-              <span v-for="(error, index) of t$.taskName.$errors" :key="index">
-                <small class="p-error">{{ error.$message }}</small>
+        <div class="flex justify-content-center align-items-center">
+          <div class="flex flex-column align-items-center gap-3 w-50">
+            <section class="flex flex-column w-full">
+              <div class="grid grid-nogutter align-items-center">
+                <div class="col-fixed">
+                  <label for="taskName">
+                    <small class="text-gray-400 font-bold">Task Name </small>
+                    <span class="required text-primary">*</span>
+                  </label>
+                </div>
+                <div class="col">
+                  <PvInputText
+                    v-model="t$.taskName.$model"
+                    name="taskName"
+                    :class="{ 'p-invalid': t$.taskName.$invalid && submitted }"
+                    style="width: 60vh"
+                    aria-describedby="activation-code-error"
+                  />
+                </div>
+              </div>
+              <span v-if="t$.taskName.$error && submitted">
+                <span v-for="(error, index) of t$.taskName.$errors" :key="index">
+                  <small class="p-error">{{ error.$message }}</small>
+                </span>
               </span>
-            </span>
-            <small v-if="(t$.taskName.$invalid && submitted) || t$.taskName.$pending.$response" class="p-error">
-              {{ t$.taskName.required.$message.replace('Value', 'Task Name') }}
-            </small>
-          </section>
-          <!-- Task ID -->
-          <section class="form-section">
-            <div class="p-input-icon-right">
-              <label for="taskId">
-                <small class="text-gray-400 font-bold">Task ID </small>
-                <span class="required">*</span></label
-              >
-              <PvInputText
-                v-model="t$.taskId.$model"
-                name="taskId"
-                :class="{ 'p-invalid': t$.taskId.$invalid && submitted }"
-                aria-describedby="activation-code-error"
-              />
-            </div>
-            <span v-if="t$.taskId.$error && submitted">
-              <span v-for="(error, index) of t$.taskId.$errors" :key="index">
-                <small class="p-error">{{ error.$message }}</small>
+              <small v-if="(t$.taskName.$invalid && submitted) || t$.taskName.$pending.$response" class="p-error">
+                {{ t$.taskName.required.$message.replace('Value', 'Task Name') }}
+              </small>
+            </section>
+            <!-- Task ID -->
+            <section class="flex flex-column w-full">
+              <div class="grid grid-nogutter align-items-center">
+                <div class="col-fixed">
+                  <label for="taskId">
+                    <small class="text-gray-400 font-bold">Task ID </small>
+                    <span class="required text-primary">*</span>
+                  </label>
+                </div>
+                <div class="col">
+                  <PvInputText
+                    v-model="t$.taskId.$model"
+                    name="taskId"
+                    :class="{ 'p-invalid': t$.taskId.$invalid && submitted }"
+                    style="width: 60vh"
+                    aria-describedby="activation-code-error"
+                  />
+                </div>
+              </div>
+              <span v-if="t$.taskId.$error && submitted">
+                <span v-for="(error, index) of t$.taskId.$errors" :key="index">
+                  <small class="p-error">{{ error.$message }}</small>
+                </span>
               </span>
-            </span>
-            <small v-else-if="(t$.taskId.$invalid && submitted) || t$.taskId.$pending.$response" class="p-error">
-              {{ t$.taskId.required.$message.replace('Value', 'Task ID') }}
-            </small>
-          </section>
-          <!-- Cover Image -->
-          <section class="form-section">
-            <div>
-              <label for="coverImage">
-                <small class="text-gray-400 font-bold">Cover Image (URL)</small>
-              </label>
-              <PvInputText v-model="taskFields.coverImage" name="coverImage" />
-            </div>
-          </section>
-          <!--Description-->
-          <section class="form-section">
-            <div class="p-input-icon-right">
-              <label for="description">
-                <small class="text-gray-400 font-bold">Description</small>
-              </label>
-              <PvInputText v-model="taskFields.description" name="description" />
-            </div>
-          </section>
-          <!--Task URL-->
-          <section class="form-section">
-            <div v-if="isExternalTask">
-              <label for="taskURL">
-                <small class="text-gray-400 font-bold">Task URL </small>
-                <span class="required">*</span></label
-              >
-              <PvInputText
-                v-model="t$.taskURL.$model"
-                name="taskURL"
-                :class="{ 'p-invalid': t$.taskURL.$invalid && submitted }"
-                aria-describedby="first-name-error"
-              />
+              <small v-else-if="(t$.taskId.$invalid && submitted) || t$.taskId.$pending.$response" class="p-error">
+                {{ t$.taskId.required.$message.replace('Value', 'Task ID') }}
+              </small>
+            </section>
+            <!-- Cover Image -->
+            <section class="flex flex-column w-full">
+              <div class="grid grid-nogutter align-items-center">
+                <div class="col-fixed">
+                  <label for="coverImage">
+                    <small class="text-gray-400 font-bold">Cover Image (URL)</small>
+                  </label>
+                </div>
+                <div class="col">
+                  <PvInputText v-model="taskFields.coverImage" style="width: 60vh" name="coverImage" />
+                </div>
+              </div>
+            </section>
+            <!--Description-->
+            <section class="flex flex-column w-full">
+              <div class="grid grid-nogutter align-items-center">
+                <div class="col-fixed">
+                  <label for="description">
+                    <small class="text-gray-400 font-bold">Description</small>
+                  </label>
+                </div>
+                <div class="col">
+                  <PvInputText v-model="taskFields.description" style="width: 60vh" name="description" />
+                </div>
+              </div>
+            </section>
+            <!--Task URL-->
+            <section v-if="isExternalTask" class="flex flex-column w-full">
+              <div class="grid grid-nogutter align-items-center">
+                <div class="col-fixed">
+                  <label for="taskURL">
+                    <small class="text-gray-400 font-bold">Task URL </small>
+                    <span class="required">*</span>
+                  </label>
+                </div>
+                <div class="col">
+                  <PvInputText
+                    v-model="t$.taskURL.$model"
+                    name="taskURL"
+                    :class="{ 'p-invalid': t$.taskURL.$invalid && submitted }"
+                    style="width: 60vh"
+                    aria-describedby="first-name-error"
+                  />
+                </div>
+              </div>
               <span v-if="t$.taskURL.$error && submitted">
                 <span v-for="(error, index) of t$.taskURL.$errors" :key="index">
                   <small class="p-error">{{ error.$message }}</small>
@@ -97,8 +122,8 @@
               <small v-else-if="(t$.taskURL.$invalid && submitted) || t$.taskURL.$pending.$response" class="p-error">
                 {{ t$.taskURL.required.$message.replace('Value', 'Task URL') }}
               </small>
-            </div>
-          </section>
+            </section>
+          </div>
         </div>
 
         <div v-if="!isExternalTask">
@@ -107,16 +132,26 @@
           </h3>
           <h4 class="text-center">Create the configurable game parameters for variants of this task.</h4>
           <div v-for="(param, index) in gameConfig" :key="index">
-            <div class="flex gap-2 align-content-start flex-grow-0 params-container">
-              <PvInputText v-model="param.name" placeholder="Name" />
+            <div class="flex gap-2 justify-content-center align-content-center flex-grow-0 params-container mt-2">
+              <PvInputText v-model="param.name" style="width: 30vh" placeholder="Name" />
 
-              <PvDropdown v-model="param.type" :options="typeOptions" />
+              <PvDropdown v-model="param.type" style="width: 20vh" :options="typeOptions" />
 
-              <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
+              <PvInputText
+                v-if="param.type === 'string'"
+                v-model="param.value"
+                style="width: 30vh"
+                placeholder="Value"
+              />
 
-              <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
+              <PvDropdown
+                v-else-if="param.type === 'boolean'"
+                v-model="param.value"
+                style="width: 30vh"
+                :options="[true, false]"
+              />
 
-              <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
+              <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" style="width: 30vh" />
 
               <PvButton
                 icon="pi pi-trash"
@@ -155,8 +190,8 @@
           </div>
         </div>
 
-        <div class="w-full flex justify-content-center">
-          <div v-if="!isExternalTask" class="w-2">
+        <div class="w-full flex justify-content-center align-content-center">
+          <div v-if="!isExternalTask">
             <PvButton
               label="Add Field"
               text
@@ -165,7 +200,7 @@
               @click="addField(gameConfig)"
             />
           </div>
-          <div v-else class="w-2">
+          <div v-else>
             <PvButton
               label="Add Field"
               text
@@ -193,11 +228,11 @@
             <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>Registered Task</b> </label>
           </div>
         </div>
-        <div class="form-submit">
+        <div class="form-submit flex justify-content-center align-content-center">
           <PvButton
             type="submit"
             label="Submit"
-            class="submit-button bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            class="submit-button bg-primary h-3rem text-white border-none border-round p-2 hover:bg-red-900"
             severity="primary"
           />
         </div>
@@ -212,7 +247,7 @@
       <p>roar.education/?participantId=[$PARTICIPANT_ID]&completed=[$BOOLEAN]</p>
       <PvButton
         label="Create Another Task"
-        class="submit-button bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+        class="submit-button bg-primary h-3rem text-white border-none border-round p-2 hover:bg-red-900"
         @click="created = false"
       />
     </div>
@@ -221,7 +256,7 @@
   <div v-show="viewModel === 'Update Task'">
     <h1 class="text-center font-bold">Update a Task</h1>
     <form @submit.prevent="handleUpdateTask()">
-      <section class="flex flex-column gap-2 mb-4 p-4">
+      <section class="flex flex-row justify-content-center align-items-center gap-2 mb-4 p-4">
         <label for="variant-fields" class="my-2">
           <small class="text-gray-400 font-bold">Select an Existing Task </small>
           <span class="required">*</span></label
@@ -229,6 +264,7 @@
         <PvDropdown
           v-model="selectedTask"
           :options="formattedTasks"
+          style="width: 50vh"
           option-label="name"
           option-value="id"
           placeholder="Select a Task"
@@ -317,14 +353,15 @@
             />
           </div>
         </div>
-        <PvButton
-          label="Add Field"
-          text
-          icon="pi pi-plus"
-          class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-          @click="newField"
-        />
-
+        <div class="w-full flex justify-content-start">
+          <PvButton
+            label="Add Field"
+            text
+            icon="pi pi-plus"
+            class="my-4 bg-primary text-white w-2 border-none border-round p-2 hover:bg-red-900"
+            @click="newField"
+          />
+        </div>
         <div class="flex flex-column w-full">
           <label for="gameConfigOutput">
             <strong>Game Parameters</strong>
@@ -405,18 +442,23 @@
             </div>
           </div>
         </div>
-        <PvButton
-          label="Add Parameter"
-          text
-          icon="pi pi-plus"
-          class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-          @click="addGameConfig"
-        />
+        <div class="w-full flex justify-content-start">
+          <PvButton
+            label="Add Parameter"
+            text
+            icon="pi pi-plus"
+            class="my-4 bg-primary text-white w-2 border-none border-round p-2 hover:bg-red-900"
+            @click="addGameConfig"
+          />
+        </div>
       </section>
-
-      <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-        >Update Task</PvButton
-      >
+      <div class="w-full flex justify-content-center">
+        <PvButton
+          type="submit"
+          class="my-4 bg-primary text-white w-3 h-3rem border-none border-round p-2 hover:bg-red-900"
+          >Update Task</PvButton
+        >
+      </div>
     </form>
   </div>
 </template>
@@ -787,6 +829,10 @@ const clearFieldConfigArrays = () => {
   border-top-right-radius: 25rem;
   border-bottom-right-radius: 25rem;
 }
+.col-fixed {
+  flex: 0 0 auto;
+  width: 15vh; /* Adjust this value as needed */
+}
 
 .select-button .p-button:first-of-type:not(:only-of-type) {
   border-top-left-radius: 25rem;
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index e21467d7c..feb523f10 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -11,69 +11,76 @@
       <form class="p-fluid" @submit.prevent="handleVariantSubmit(!v$.$invalid)">
         <h1 class="text-center font-bold">Create a New Variant</h1>
 
-        <div class="flex flex-column row-gap-3">
-          <section class="form-section">
-            <div class="flex justify-content-between align-items-center">
-              <label for="variant-fields">
-                <small class="text-gray-400 font-bold">Select an Existing Task </small>
-                <span class="required">*</span></label
-              >
-              <div class="flex flex-column gap-2 align-items-end">
-                <div class="flex flex-row align-items-center justify-content-end gap-2 flex-order-1">
-                  <!--                    This does not seemt to function properly, comming it out for now.-->
-                  <!--                    <label class="ml-7" for="chbx-registeredTask">Search registered tasks only?</label>-->
-                  <!--                    <PvCheckbox v-model="registeredTasksOnly" input-id="chbx-registeredTask" :binary="true" />-->
+        <div class="flex justify-content-center align-items-center vh-100">
+          <div class="flex flex-column align-items-center gap-3 w-50">
+            <!-- Select an Existing Task -->
+            <section class="flex flex-column w-full">
+              <div class="grid grid-nogutter align-items-center">
+                <div class="col-fixed">
+                  <label for="variant-fields">
+                    <small class="text-gray-400 font-bold">Select an Existing Task </small>
+                    <span class="required">*</span>
+                  </label>
+                </div>
+                <div class="col">
+                  <PvDropdown
+                    v-model="v$.selectedGame.$model"
+                    :options="formattedTasks"
+                    option-label="name"
+                    placeholder="Select a Game"
+                    style="width: 60vh"
+                    :loading="isFetchingTasks"
+                    :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
+                    name="variant-fields"
+                    @click="clearFieldParamArrays()"
+                  ></PvDropdown>
                 </div>
               </div>
-            </div>
-            <PvDropdown
-              v-model="v$.selectedGame.$model"
-              :options="formattedTasks"
-              option-label="name"
-              placeholder="Select a Game"
-              :loading="isFetchingTasks"
-              :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
-              name="variant-fields"
-              @click="clearFieldParamArrays()"
-            ></PvDropdown>
-            <span v-if="v$.selectedGame.$error && submitted">
-              <span v-for="(error, index) of v$.selectedGame.$errors" :key="index">
-                <small class="p-error">{{ error.$message }}</small>
+              <span v-if="v$.selectedGame.$error && submitted">
+                <span v-for="(error, index) of v$.selectedGame.$errors" :key="index">
+                  <small class="p-error">{{ error.$message }}</small>
+                </span>
               </span>
-            </span>
-            <small
-              v-else-if="(v$.selectedGame.$invalid && submitted) || v$.selectedGame.$pending.$response"
-              class="p-error"
-            >
-              {{ v$.selectedGame.id.required.$message.replace('Value', 'Task selection') }}
-            </small>
-          </section>
-
-          <section class="form-section">
-            <div class="p-input-icon-right">
-              <label for="variantName">
-                <small class="text-gray-400 font-bold">Variant Name </small>
-                <span class="required">*</span></label
+              <small
+                v-else-if="(v$.selectedGame.$invalid && submitted) || v$.selectedGame.$pending.$response"
+                class="p-error"
               >
-              <PvInputText
-                v-model="v$.variantName.$model"
-                name="variantName"
-                :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
-                aria-describedby="activation-code-error"
-              />
-            </div>
-            <span v-if="v$.variantName.$error && submitted">
-              <span v-for="(error, index) of v$.variantName.$errors" :key="index">
-                <small class="p-error">{{ error.$message }}</small>
+                {{ v$.selectedGame.id.required.$message.replace('Value', 'Task selection') }}
+              </small>
+            </section>
+
+            <!-- Variant Name -->
+            <section class="flex flex-column w-full">
+              <div class="grid grid-nogutter align-items-center">
+                <div class="col-fixed">
+                  <label for="variantName">
+                    <small class="text-gray-400 font-bold">Variant Name </small>
+                    <span class="required">*</span>
+                  </label>
+                </div>
+                <div class="col">
+                  <PvInputText
+                    v-model="v$.variantName.$model"
+                    name="variantName"
+                    style="width: 60vh"
+                    :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
+                    aria-describedby="activation-code-error"
+                  />
+                </div>
+              </div>
+              <span v-if="v$.variantName.$error && submitted">
+                <span v-for="(error, index) of v$.variantName.$errors" :key="index">
+                  <small class="p-error">{{ error.$message }}</small>
+                </span>
               </span>
-            </span>
-            <small
-              v-else-if="(v$.variantName.$invalid && submitted) || v$.variantName.$pending.$response"
-              class="p-error"
-            >
-              {{ v$.variantName.required.$message.replace('Value', 'Variant Name') }}
-            </small>
-          </section>
+              <small
+                v-else-if="(v$.variantName.$invalid && submitted) || v$.variantName.$pending.$response"
+                class="p-error"
+              >
+                {{ v$.variantName.required.$message.replace('Value', 'Variant Name') }}
+              </small>
+            </section>
+          </div>
         </div>
 
         <div class="flex flex-column align-items-center">
@@ -150,25 +157,26 @@
 
             <div v-if="newParams.length > 0" class="w-full">
               <div v-for="(field, index) in newParams" :key="index" class="flex align-items-center column-gap-2 mb-1">
-                <PvInputText v-model="field.name" placeholder="Field Name" />
+                <PvInputText v-model="field.name" style="width: 30vh" placeholder="Field Name" />
                 <PvDropdown
                   v-model="field.type"
                   :options="['string', 'number', 'boolean']"
                   placeholder="Field Type"
+                  style="width: 20vh"
                   class="w-fit"
                 />
 
                 <PvInputText
                   v-if="field.type === 'string'"
                   v-model="field.value"
+                  style="width: 30vh"
                   placeholder="Field Value"
-                  class="w-full"
                 />
                 <PvInputNumber
                   v-if="field.type === 'number'"
                   v-model="field.value"
                   placeholder="Field Value"
-                  class="w-full"
+                  style="width: 30vh"
                 />
                 <PvDropdown
                   v-if="field.type === 'boolean'"
@@ -177,7 +185,7 @@
                   :options="booleanDropDownOptions"
                   option-label="label"
                   option-value="value"
-                  class="w-full"
+                  style="width: 30vh"
                 />
                 <PvButton
                   type="button"
@@ -228,11 +236,11 @@
             </div>
           </div>
         </div>
-        <div class="form-submit">
+        <div class="form-submit flex justify-content-center align-content-center">
           <PvButton
             type="submit"
             label="Submit"
-            class="submit-button w-2 my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
+            class="submit-button w-2 my-4 h-3rem bg-primary text-white border-none border-round p-2 hover:bg-red-900"
             severity="primary"
           />
         </div>
@@ -271,9 +279,9 @@
       </section>
 
       <section v-if="selectedVariant" class="flex flex-column align-items-start mt-4 p-4">
-        <div class="flex flex-column w-full">
+        <div class="flex flex-column w-full justify-content-center align-items-center">
           <label for="fieldsOutput">
-            <strong>Fields</strong>
+            <strong class="text-xl">Fields</strong>
           </label>
           <div v-for="(value, key) in selectedVariant" id="fieldsOutput" :key="key">
             <div v-if="!ignoreFields.includes(key)">
@@ -284,7 +292,7 @@
                 <label :for="key" class="w-1">
                   <em>{{ key }}</em>
                 </label>
-                <PvInputText id="inputEditVariantType" :placeholder="typeof value" disabled class="w-2 text-center" />
+                <PvInputText id="inputEditVariantType" class="w-2 text-center" :placeholder="typeof value" disabled />
                 <PvInputText
                   v-if="typeof value === 'string'"
                   v-model="updatedVariantData[key]"
@@ -316,21 +324,30 @@
           </div>
 
           <div v-if="addedFields.length > 0" class="w-full">
-            <div v-for="(field, index) in addedFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
-              <PvInputText v-model="field.name" placeholder="Field Name" />
-              <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+            <div
+              v-for="(field, index) in addedFields"
+              :key="index"
+              class="flex align-items-center justify-content-center column-gap-2 mb-1"
+            >
+              <PvInputText v-model="field.name" style="width: 30vh" placeholder="Field Name" />
+              <PvDropdown
+                v-model="field.type"
+                style="width: 20vh"
+                :options="['string', 'number', 'boolean']"
+                placeholder="Field Type"
+              />
 
               <PvInputText
                 v-if="field.type === 'string'"
                 v-model="field.value"
                 placeholder="Field Value"
-                class="flex-grow-1"
+                style="width: 30vh"
               />
               <PvInputNumber
                 v-if="field.type === 'number'"
                 v-model="field.value"
                 placeholder="Field Value"
-                class="flex-grow-1"
+                style="width: 30vh"
               />
               <PvDropdown
                 v-if="field.type === 'boolean'"
@@ -339,7 +356,7 @@
                 :options="booleanDropDownOptions"
                 option-label="label"
                 option-value="value"
-                class="flex-grow-1"
+                style="width: 30vh"
               />
               <PvButton
                 type="button"
@@ -350,13 +367,15 @@
             </div>
           </div>
         </div>
-        <PvButton
-          label="Add Field"
-          text
-          icon="pi pi-plus"
-          class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-          @click="addField"
-        />
+        <div class="w-full flex justify-content-center">
+          <PvButton
+            label="Add Field"
+            text
+            icon="pi pi-plus"
+            class="my-4 bg-primary w-2 text-white border-none border-round p-2 hover:bg-red-900"
+            @click="addField"
+          />
+        </div>
 
         <!--          **** Disabling the function to edit game params for now ****-->
 
@@ -426,10 +445,13 @@
         <!--          </div>-->
         <!--          <PvButton label="Add Param" text icon="pi pi-plus" class="my-4" @click="addParam" />-->
       </section>
-
-      <PvButton type="submit" class="my-4 bg-primary text-white border-none border-round p-2 hover:bg-red-900"
-        >Update Variant</PvButton
-      >
+      <div class="w-full flex justify-content-center">
+        <PvButton
+          type="submit"
+          class="my-4 bg-primary h-3rem w-3 text-white border-none border-round p-2 hover:bg-red-900"
+          >Update Variant</PvButton
+        >
+      </div>
     </form>
   </div>
 </template>
@@ -839,6 +861,10 @@ const clearFieldParamArrays = () => {
   border-top-right-radius: 25rem;
   border-bottom-right-radius: 25rem;
 }
+.col-fixed {
+  flex: 0 0 auto;
+  width: 20vh; /* Adjust this value as needed */
+}
 
 .select-button .p-button:first-of-type:not(:only-of-type) {
   border-top-left-radius: 25rem;
diff --git a/src/pages/SignIn.vue b/src/pages/SignIn.vue
index 266d9e358..33f42fc08 100644
--- a/src/pages/SignIn.vue
+++ b/src/pages/SignIn.vue
@@ -26,8 +26,8 @@
           <div class="flex">
             <PvButton
               label="Sign in with Google"
-              class="flex surface-0 p-1 mr-1 border-black-alpha-10 w-full text-center justify-content-center hover:border-primary hover:surface-ground"
-              style="border-radius: 3rem; height: 3rem"
+              class="flex surface-0 p-1 mr-1 border-black-alpha-10 w-full text-center text-black justify-content-center hover:border-primary hover:surface-ground"
+              style="border-radius: 3rem; height: 3rem; color: black !important"
               @click="authWithGoogle"
             >
               <img src="../assets/provider-google-logo.svg" alt="The Google Logo" class="flex mr-2 w-2" />
@@ -36,7 +36,7 @@
             <PvButton
               v-if="!isLevante"
               class="flex surface-0 p-1 mr-1 border-black-alpha-10 w-full justify-content-center hover:border-primary hover:surface-ground"
-              style="border-radius: 3rem; height: 3rem"
+              style="border-radius: 3rem; height: 3rem; color: black !important"
               @click="authWithClever"
             >
               <img src="../assets/provider-clever-logo.svg" alt="The Clever Logo" class="flex mr-2 w-2" />
@@ -45,7 +45,7 @@
             <PvButton
               v-if="!isLevante"
               class="flex surface-0 p-1 mr-1 border-black-alpha-10 w-full justify-content-center hover:border-primary hover:surface-ground"
-              style="border-radius: 3rem; height: 3rem"
+              style="border-radius: 3rem; height: 3rem; color: black !important"
               @click="authWithClassLink"
             >
               <img src="../assets/provider-classlink-logo.png" alt="The ClassLink Logo" class="flex mr-2 w-2" />
@@ -115,7 +115,6 @@
         <div v-if="signInMethods.includes('password')" class="flex flex-row gap-2">
           <PvPassword v-model="modalPassword" placeholder="Password" :feedback="false"></PvPassword>
           <PvButton
-            class="flex p-3 border-none border-round bg-primary hover:bg-black-alpha-20"
             :label="$t('authSignIn.buttonLabel') + ' &rarr;'"
             @click="authWithEmail({ email, password: modalPassword, useLink: false, usePassword: true })"
           />

From 6c1179782b7d8818fe062d805573c01f20f8eba5 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Tue, 23 Jul 2024 16:07:26 -0700
Subject: [PATCH 04/28] going back on RoarDataTable

---
 src/components/RoarDataTable.vue | 561 ++-----------------------------
 src/main.js                      |   2 +-
 2 files changed, 33 insertions(+), 530 deletions(-)

diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index 48a626792..31bfd5295 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -98,355 +98,6 @@
           @row-select="onSelectionChange"
           @row-unselect="onSelectionChange"
         >
-          <PvColumnGroup type="header" class="mt-2">
-            <PvRow v-if="groupheaders" class="flex mt-2">
-              <!-- Spacer Header -->
-              <!-- colspan = getSpacerHeaderWidth-->
-              <PvColumn
-                header="Student Information"
-                :colspan="getSpacerColumnWidth"
-                header-style="background-color: var(--primary-color); color:white; border:1px border-left-none solid white; justify-content:center; margin-top:1rem; text-align: center;"
-              />
-              <!-- Foundations -->
-              <!-- v-if="primarySpacerColumns" :colspan="primarySpacerColumns" -->
-              <PvColumn
-                v-if="primarySpacerColumns"
-                :colspan="primarySpacerColumns"
-                header-style="background-color: var(--primary-color); color:white; border:1px solid white; justify-content:center; margin-top:1rem; text-align: center;"
-              >
-                <template v-slot:header>
-                  <div class="flex flex-row">
-                    <div>Foundational</div>
-                    <div class="ml-2">
-                      <PvButton class="p-0 border-none border-circle bg-primary" @click="toggle($event, 'primary')"
-                        ><i v-tooltip.top="'Learn more'" class="pi pi-info-circle text-white p-1 border-circle"></i
-                      ></PvButton>
-                    </div>
-                  </div>
-                </template>
-              </PvColumn>
-              <!-- Spanish -->
-              <!-- v-if="spanishColumns" :colspan="spanishColumns" -->
-              <PvColumn
-                v-if="spanishSpacerColumns"
-                :colspan="spanishSpacerColumns"
-                header-style="background-color: var(--primary-color); color:white; border:1px solid white; justify-content:center; margin-top:1rem; text-align: center;"
-              >
-                <template v-slot:header>
-                  <div class="flex flex-row">
-                    <div>Spanish</div>
-                    <div class="ml-2">
-                      <PvButton class="p-0 border-none border-circle bg-primary" @click="toggle($event, 'spanish')"
-                        ><i v-tooltip.top="'Learn more'" class="pi pi-info-circle text-white p-1 border-circle"></i
-                      ></PvButton>
-                    </div>
-                  </div>
-                </template>
-              </PvColumn>
-              <!-- Spanish  Math-->
-              <!-- v-if="spanishMathColumns" :colspan="spanishMathColumns" -->
-              <PvColumn
-                v-if="spanishMathSpacerColumns"
-                :colspan="spanishMathSpacerColumns"
-                header-style="background-color: var(--primary-color); color:white; border:1px solid white; justify-content:center; margin-top:1rem; text-align: center;"
-              >
-                <template v-slot:header>
-                  <div class="flex flex-row">
-                    <div>Spanish Math</div>
-                    <div class="ml-2">
-                      <PvButton class="p-0 border-none border-circle bg-primary" @click="toggle($event, 'spanishmath')"
-                        ><i v-tooltip.top="'Learn more'" class="pi pi-info-circle text-white p-1 border-circle"></i
-                      ></PvButton>
-                    </div>
-                  </div>
-                </template>
-              </PvColumn>
-              <!-- inDev -->
-              <!-- v-if="supplemenaryColumns" :colspan="supplementaryColumns" -->
-              <PvColumn
-                v-if="supplementarySpacerColumns"
-                :colspan="supplementarySpacerColumns"
-                header-style="background-color: var(--primary-color); color:white; border:1px solid white; justify-content:center; margin-top:1rem; text-align: center;"
-              >
-                <template v-slot:header>
-                  <div class="flex flex-row">
-                    <div>Supplementary<br />(In Development)</div>
-                    <div class="mt-1 ml-2">
-                      <PvButton
-                        class="p-0 border-none border-circle bg-primary"
-                        @click="toggle($event, 'supplementary')"
-                        ><i v-tooltip.top="'Learn more'" class="pi pi-info-circle text-white p-1 border-circle"></i
-                      ></PvButton>
-                    </div>
-                  </div>
-                </template>
-              </PvColumn>
-              <!-- inRoam -->
-              <!-- v-if="mathSpacerColumns" :colspan="supplementaryColumns" -->
-              <PvColumn
-                v-if="mathSpacerColumns"
-                :colspan="mathSpacerColumns"
-                header-style="background-color: var(--primary-color); color:white; border:1px solid white; justify-content:center; margin-top:1rem; text-align: center;"
-              >
-                <template v-slot:header>
-                  <div class="flex flex-row">
-                    <div>Math<br />(In Development)</div>
-                    <div class="mt-1 ml-2">
-                      <PvButton class="p-0 border-none border-circle bg-primary" @click="toggle($event, 'math')"
-                        ><i v-tooltip.top="'Learn more'" class="pi pi-info-circle text-white p-1 border-circle"></i
-                      ></PvButton>
-                    </div>
-                  </div>
-                </template>
-              </PvColumn>
-              <!-- inRoav -->
-              <!-- v-if="visionSpacerColumns" :colspan="supplementaryColumns" -->
-              <PvColumn
-                v-if="visionSpacerColumns"
-                :colspan="visionSpacerColumns"
-                header-style="background-color: var(--primary-color); color:white; border:1px solid white; justify-content:center; margin-top:1rem; text-align: center;"
-              >
-                <template v-slot:header>
-                  <div class="flex flex-row">
-                    <div>Vision<br />(In Development)</div>
-                    <div class="mt-1">
-                      <PvButton class="p-0 border-none border-circle bg-primary" @click="toggle($event, 'vision')"
-                        ><i v-tooltip.top="'Learn more'" class="pi pi-info-circle text-white p-1 border-circle"></i
-                      ></PvButton>
-                    </div>
-                  </div>
-                </template>
-              </PvColumn>
-            </PvRow>
-            <PvRow>
-              <PvColumn
-                selection-mode="multiple"
-                header-style="background-color: var(--primary-color); border:none;"
-                :reorderable-column="false"
-                frozen
-              />
-              <PvColumn
-                v-for="(col, index) of computedColumns"
-                :key="col.field + '_' + index"
-                :field="col.field"
-                :data-type="col.dataType"
-                :sortable="col.sort !== false"
-                :show-filter-match-modes="
-                  !col.useMultiSelect && col.dataType !== 'score' && col.dataType !== 'progress'
-                "
-                :show-filter-operator="col.allowMultipleFilters === true"
-                :filter-field="col?.filterField ? col.filterField : col.field"
-                :show-add-button="col.allowMultipleFilters === true"
-                :frozen="col.pinned"
-                :style="col.style"
-                align-frozen="left"
-                header-style="background:var(--primary-color); color:white; padding-top:0; margin-top:0; padding-bottom:0; margin-bottom:0; border:0; margin-left:0"
-              >
-                <template #header>
-                  <div
-                    v-tooltip.top="`${toolTipByHeader(col.header)}`"
-                    :style="[
-                      toolTipByHeader(col.header).length > 0
-                        ? 'text-decoration: underline dotted #0000CD; text-underline-offset: 3px'
-                        : null,
-                    ]"
-                  >
-                    {{ col.header }}
-                  </div>
-                </template>
-                <template v-if="col.dataType" #filter="{ filterModel }">
-                  <div v-if="col.dataType === 'text' && !col.useMultiSelect" class="filter-content">
-                    <PvInputText
-                      v-model="filterModel.value"
-                      type="text"
-                      class="p-column-filter p-3"
-                      placeholder="Filter"
-                    />
-                  </div>
-                  <PvInputNumber
-                    v-if="col.dataType === 'number' && !col.useMultiSelect"
-                    v-model="filterModel.value"
-                    type="text"
-                    class="p-column-filter"
-                    placeholder="Search"
-                  />
-                  <PvMultiSelect
-                    v-if="col.useMultiSelect"
-                    v-model="filterModel.value"
-                    :options="_get(refOptions, col.field)"
-                    placeholder="Any"
-                    :show-toggle-all="false"
-                    class="p-column-filter"
-                  />
-                  <PvCalendar
-                    v-if="col.dataType === 'date' && !col.useMultiSelect"
-                    v-model="filterModel.value"
-                    date-format="mm/dd/yy"
-                    placeholder="mm/dd/yyyy"
-                  />
-                  <div v-if="col.dataType === 'boolean' && !col.useMultiSelect" class="flex flex-row gap-2">
-                    <PvTriStateCheckbox v-model="filterModel.value" input-id="booleanFilter" style="padding-top: 2px" />
-                    <label for="booleanFilter">{{ col.header + '?' }}</label>
-                  </div>
-                  <div v-if="col.dataType === 'score'">
-                    <PvDropdown
-                      v-model="filterModel.value"
-                      option-label="label"
-                      option-group-label="label"
-                      option-group-children="items"
-                      :options="taskFilterOptions"
-                      data-cy="score-filter-dropdown"
-                      style="margin-bottom: 0.5rem"
-                    >
-                      <template #option="{ option }">
-                        <div class="flex align-items-center">
-                          <div v-if="supportLevelColors[option]" class="flex gap-2">
-                            <div
-                              class="small-circle tooltip"
-                              :style="`background-color: ${supportLevelColors[option]};`"
-                            />
-                            <span class="tooltiptext">{{ option }}</span>
-                          </div>
-                          <div v-else-if="progressTags[option]">
-                            <PvTag
-                              :severity="progressTags[option]?.severity"
-                              :value="progressTags[option]?.value"
-                              :icon="progressTags[option]?.icon"
-                              class="p-0.5 m-0 font-bold"
-                            />
-                          </div>
-                          <div v-else>
-                            <span class="tooltiptext">{{ option }}</span>
-                          </div>
-                        </div>
-                      </template>
-                      <template #value="{ value }">
-                        <div v-if="supportLevelColors[value]" class="flex gap-2">
-                          <div
-                            class="small-circle tooltip"
-                            :style="`background-color: ${supportLevelColors[value]};`"
-                          />
-                          <span class="tooltiptext">{{ value }}</span>
-                        </div>
-                        <div v-else-if="progressTags[value]">
-                          <PvTag
-                            :severity="progressTags[value]?.severity"
-                            :value="progressTags[value]?.value"
-                            :icon="progressTags[value]?.icon"
-                            class="p-0.5 m-0 font-bold"
-                          />
-                        </div>
-                        <div v-else>
-                          <span class="tooltiptext">{{ value }}</span>
-                        </div>
-                      </template>
-                    </PvDropdown>
-                  </div>
-                  <div v-if="col.dataType === 'progress'">
-                    <PvDropdown
-                      v-model="filterModel.value"
-                      :options="['Assigned', 'Started', 'Completed', 'Optional']"
-                      style="margin-bottom: 0.5rem"
-                      data-cy="progress-filter-dropdown"
-                    >
-                      <template #option="{ option }">
-                        <div v-if="progressTags[option]" class="flex align-items-center">
-                          <PvTag
-                            :severity="progressTags[option]?.severity"
-                            :value="progressTags[option]?.value"
-                            :icon="progressTags[option]?.icon"
-                            :style="`min-width: 2rem; font-weight: bold`"
-                            rounded
-                          />
-                        </div>
-                      </template>
-                      <template #value="{ value }">
-                        <PvTag
-                          v-if="progressTags[value]"
-                          :severity="progressTags[value]?.severity"
-                          :value="progressTags[value]?.value"
-                          :icon="progressTags[value]?.icon"
-                          :style="`min-width: 2rem; font-weight: bold`"
-                          rounded
-                        />
-                      </template>
-                    </PvDropdown>
-                  </div>
-                </template>
-              </PvColumn>
-            </PvRow>
-          </PvColumnGroup>
-          <PvOverlayPanel ref="op" append-to="body" class="overflow-y-scroll" style="width: 60vh; max-height: 30vh">
-            <template v-if="selectedColumn === 'primary'">
-              <h3 class="font-bold">Foundational</h3>
-              <div>
-                <h4 class="font-bold">Word</h4>
-                Word indicates which students are in need of support in word-level decoding and automaticity. Word has
-                been validated, and national norms are provided.<br />
-                <h4 class="font-bold">Sentence</h4>
-                Sentence indicates which students are in need of support in sentence-level fluency. Sentence has been
-                validated, and national norms are provided.<br />
-                <h4 class="font-bold">Phoneme</h4>
-                Phoneme indicates which students are in need of support in phonological awareness. Below this student
-                table, in the Phoneme tab, you will find scores for subdomains of phonological awareness skills that can
-                guide instruction. Phoneme has been validated, and national norms are provided. <br />
-                <h4 class="font-bold">Letter</h4>
-                Letter indicates which students are in need of support in letter names and sounds. Below this student
-                table, in the Letter tab, you will find scores for subdomains of letter skills that can guide
-                instruction. Letter has been validated, and raw scores are provided.
-              </div>
-            </template>
-            <template v-if="selectedColumn === 'spanish'">
-              <h3 class="font-bold">Spanish</h3>
-              <div>
-                Spanish-language versions of the assessments provide additional information for Spanish-speaking
-                students. <br />
-                <br />
-                Spanish assessments are undergoing validation, and raw scores are provided. <br /><br />
-                These scores will be included in the development of national norms and support categories.
-              </div>
-            </template>
-            <template v-if="selectedColumn === 'spanishmath'">
-              <h3 class="font-bold">Spanish Math</h3>
-              <div>
-                Spanish-language mathematics assessments provide additional insight into areas such as arithmetic
-                fluency, calculation ability, and mathematical procedures based on common core standards <br />
-                <br />
-                Mathematics assessments are undergoing validation, and raw scores are provided. <br /><br />
-                These scores will be included in the development of national norms and support categories.
-              </div>
-            </template>
-            <template v-else-if="selectedColumn === 'supplementary'">
-              <h3 class="font-bold">Supplementary</h3>
-              <div>
-                Supplementary assessments provide additional insight into areas such as morphology, syntax, language
-                comprehension, and rapid automatized naming. <br />
-                <br />
-                Supplementary assessments are undergoing validation, and raw scores are provided. <br /><br />
-                These scores will be included in the development of national norms and support categories.
-              </div>
-            </template>
-            <template v-else-if="selectedColumn === 'math'">
-              <h3 class="font-bold">Math</h3>
-              <div>
-                Mathematics assessments provide additional insight into areas such as arithmetic fluency, calculation
-                ability, and mathematical procedures based on common core standards<br />
-                <br />
-                Mathematics assessments are undergoing validation, and raw scores are provided. <br /><br />
-                These scores will be included in the development of national norms and support categories.
-              </div>
-            </template>
-            <template v-else-if="selectedColumn === 'vision'">
-              <h3 class="font-bold">Vision</h3>
-              <div>
-                Vision assessments provide additional insight into areas such as visual acuity and visual crowding.
-                <br />
-                <br />
-                Vision assessments are undergoing validation, and raw scores are provided. <br /><br />
-                These scores will be included in the development of national norms and support categories.
-              </div>
-            </template>
-          </PvOverlayPanel>
           <PvColumn
             selection-mode="multiple"
             header-style="background-color: var(--primary-color); border:none;"
@@ -468,6 +119,18 @@
             align-frozen="left"
             header-style="background:var(--primary-color); color:white; padding-top:0; margin-top:0; padding-bottom:0; margin-bottom:0; border:0; margin-left:0"
           >
+            <template #header>
+              <div
+                v-tooltip.top="`${toolTipByHeader(col.header)}`"
+                :style="[
+                  toolTipByHeader(col.header).length > 0
+                    ? 'text-decoration: underline dotted #0000CD; text-underline-offset: 3px'
+                    : null,
+                ]"
+              >
+                {{ col.header }}
+              </div>
+            </template>
             <template #body="{ data: colData }">
               <!-- If column is a score field, use a dedicated component to render tags and scores -->
               <div v-if="col.field && col.field?.split('.')[0] === 'scores'">
@@ -539,12 +202,7 @@
             </template>
             <template v-if="col.dataType" #filter="{ filterModel }">
               <div v-if="col.dataType === 'text' && !col.useMultiSelect" class="filter-content">
-                <PvInputText
-                  v-model="filterModel.value"
-                  type="text"
-                  class="p-column-filter w-full"
-                  placeholder="Filter"
-                />
+                <PvInputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Filter" />
               </div>
               <PvInputNumber
                 v-if="col.dataType === 'number' && !col.useMultiSelect"
@@ -567,7 +225,6 @@
                 date-format="mm/dd/yy"
                 placeholder="mm/dd/yyyy"
               />
-              <!--  TODO CHECK IF THIS IS WORKING> -->
               <div v-if="col.dataType === 'boolean'" class="flex flex-row gap-2">
                 <PvDropdown v-model="filterModel.value" :options="['True', 'False']" style="margin-bottom: 0.5rem" />
               </div>
@@ -651,21 +308,23 @@
               </div>
             </template>
             <template #filterclear="{ filterCallback }">
-              <PvButton
-                type="button"
-                text
-                icon="pi pi-times"
-                class="bg-primary w-4 text-white border-round border-none hover:bg-red-900"
-                severity="primary"
-                @click="filterCallback()"
-                >Clear
-              </PvButton>
+              <div class="flex flex-row-reverse">
+                <PvButton
+                  type="button"
+                  text
+                  icon="pi pi-times"
+                  class="p-2 bg-primary text-white border-round border-none hover:bg-red-900"
+                  severity="primary"
+                  @click="filterCallback()"
+                  >Clear</PvButton
+                >
+              </div>
             </template>
             <template #filterapply="{ filterCallback }">
               <PvButton
                 type="button"
                 icon="pi pi-times"
-                class="bg-primary w-4 text-white border-round border-none hover:bg-red-900"
+                class="px-2 p-2 bg-primary text-white border-round border-none hover:bg-red-900"
                 severity="primary"
                 @click="filterCallback()"
                 >Apply
@@ -689,7 +348,6 @@
     </div>
   </div>
 </template>
-
 <script setup>
 import { ref, computed } from 'vue';
 import { useToast } from 'primevue/usetoast';
@@ -748,7 +406,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  groupheaders: { type: Boolean, default: false },
 });
 
 const inputColumns = ref(props.columns);
@@ -816,7 +473,7 @@ const exportCSV = (exportSelected) => {
 };
 
 const compressedRows = ref(false);
-const padding = '1rem 1rem';
+const padding = '1rem 1.5rem';
 
 function increasePadding() {
   if (!countForVisualize.value) {
@@ -911,139 +568,6 @@ function getUniqueOptions(column) {
   return options;
 }
 
-const primaryTasks = [
-  'scores.letter.percentCorrect',
-  'scores.letter.percentile',
-  'scores.pa.percentile',
-  'scores.swr.percentile',
-  'scores.sre.percentile',
-  'scores.pa.standardScore',
-  'scores.swr.standardScore',
-  'scores.sre.standardScore',
-  'scores.sre.rawScore',
-  'scores.pa.rawScore',
-  'scores.swr.rawScore',
-  'scores.sre.rawScore',
-];
-
-const spanishTasks = [
-  'scores.letter-es.percentCorrect',
-  'scores.letter-es.percentile',
-  'scores.pa-es.percentCorrect',
-  'scores.swr-es.percentCorrect',
-  'scores.sre-es.correctIncorrectDifference',
-  'scores.pa-es.percentile',
-  'scores.swr-es.percentile',
-  'scores.sre-es.percentile',
-  'scores.letter-es.rawScore',
-  'scores.pa-es.rawScore',
-  'scores.swr-es.rawScore',
-  'scores.sre-es.rawScore',
-];
-
-const spanishMathTasks = [
-  'scores.fluency-arf-es.percentCorrect',
-  'scores.fluency-calf-es.percentCorrect',
-  'scores.fluency-arf-es.percentile',
-  'scores.fluency-calf-es.percentile',
-];
-
-const supplementaryTasks = [
-  'scores.morphology.percentCorrect',
-  'scores.cva.percentCorrect',
-  'scores.vocab.percentCorrect',
-  'scores.trog.percentCorrect',
-  'scores.phonics.percentCorrect',
-  'scores.morphology.percentile',
-  'scores.cva.percentile',
-  'scores.vocab.percentile',
-  'scores.trog.percentile',
-  'scores.phonics.percentile',
-];
-
-const roamTasks = [
-  'scores.fluency-arf.percentile',
-  'scores.fluency-calf.percentile',
-  'scores.roam-alpaca.percentile',
-  'scores.egma-math.percentile',
-  'scores.fluency-arf.percentCorrect',
-  'scores.fluency-calf.percentCorrect',
-  'scores.roam-alpaca.percentCorrect',
-  'scores.egma-math.percentCorrect',
-];
-
-const roavTasks = [
-  'scores.ran.percentile',
-  'scores.crowding.percentile',
-  'scores.roav-mep.percentile',
-  'scores.mep.percentile',
-  'scores.mep-pseudo.percentile',
-  'scores.ran.percentCorrect',
-  'scores.crowding.percentCorrect',
-  'scores.roav-mep.percentCorrect',
-  'scores.mep.percentCorrect',
-  'scores.mep-pseudo.percentCorrect',
-];
-const getSpacerColumnWidth = computed(() => {
-  // Look through computedColumns.value
-  // Find first instance of a Spanish or supplementary or math or vision column
-  // If found, return the index of that first column, return that as the length of the spacer row
-  const columns = computedColumns.value;
-  const allTasks = [
-    ...primaryTasks,
-    ...spanishTasks,
-    ...spanishMathTasks,
-    ...supplementaryTasks,
-    ...roamTasks,
-    ...roavTasks,
-  ];
-  for (let i = 0; i < columns.length; i++) {
-    if (allTasks.includes(columns[i].field)) {
-      return i + 1;
-    }
-  }
-  return columns.length;
-});
-
-const primarySpacerColumns = computed(() => {
-  // Return the number of the primary columns in computedColumns.value
-  // Return 0 if no Spanish columns
-  const columns = computedColumns.value;
-  return columns.filter((column) => primaryTasks.includes(column.field)).length;
-});
-
-const spanishSpacerColumns = computed(() => {
-  // Return the number of the spanish columns in computedColumns.value
-  // Return 0 if no Spanish columns
-  const columns = computedColumns.value;
-  return columns.filter((column) => spanishTasks.includes(column.field)).length;
-});
-
-const spanishMathSpacerColumns = computed(() => {
-  // Return the number of the spanish columns in computedColumns.value
-  // Return 0 if no Spanish columns
-  const columns = computedColumns.value;
-  return columns.filter((column) => spanishMathTasks.includes(column.field)).length;
-});
-
-const supplementarySpacerColumns = computed(() => {
-  // Return the number of supplementary columns in computedColumns.value
-  const columns = computedColumns.value;
-  return columns.filter((column) => supplementaryTasks.includes(column.field)).length;
-});
-
-const mathSpacerColumns = computed(() => {
-  // Return the number of math columns in computedColumns.value
-  const columns = computedColumns.value;
-  return columns.filter((column) => roamTasks.includes(column.field)).length;
-});
-
-const visionSpacerColumns = computed(() => {
-  // Return the number of vision columns in computedColumns.value
-  const columns = computedColumns.value;
-  return columns.filter((column) => roavTasks.includes(column.field)).length;
-});
-
 function getFormattedDate(date) {
   if (date && !isNaN(date)) {
     return date.toLocaleDateString('en-us', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' });
@@ -1063,13 +587,6 @@ const onFreezeToggle = (selected) => {
   });
 };
 
-const op = ref();
-const selectedColumn = ref(null);
-
-const toggle = (event, column) => {
-  selectedColumn.value = column;
-  op.value.toggle(event);
-};
 // Pass through data table events
 const emit = defineEmits(['export-all', 'selection', 'reset-filters', 'export-selected']);
 </script>
@@ -1095,8 +612,6 @@ const emit = defineEmits(['export-all', 'selection', 'reset-filters', 'export-se
   height: 16px;
   color: var(--text-color);
   border-radius: var(--border-radius);
-  display: flex;
-  justify-content: center;
   transition: none;
 }
 
@@ -1126,27 +641,9 @@ button.p-button.p-component.softer {
   color: black;
 }
 
-svg.p-icon.p-button-icon {
-  color: white;
-}
-
-svg.p-icon.p-button-icon:hover {
-  color: gray;
-}
-button.p-button.p-component.p-button-outlined.p-button-sm.p-button-outlined.p-button-sm,
-button.p-button.p-component.p-button-sm.p-button-sm {
-  background-color: var(--primary-color);
-  color: white;
-  border: none;
-  padding: 0.5rem;
-  margin: 0.5rem;
-  border-radius: 0.35rem;
-}
-
 button.p-column-filter-menu-button.p-link,
 g {
   color: white;
-  padding: 5px;
   margin-left: 10px;
 }
 
@@ -1210,6 +707,12 @@ button.p-column-filter-menu-button.p-link:hover {
   width: auto; /* or set it to a specific width */
   margin: 0 auto; /* Center the message horizontally */
 }
+svg.p-icon.p-button-icon {
+  color: white;
+}
+svg.p-icon.p-button-icon:hover {
+  color: gray;
+}
 
 .scrollable-container::-webkit-scrollbar {
   width: 10px;
diff --git a/src/main.js b/src/main.js
index 45ebc1278..cdc4aeeb1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -209,7 +209,7 @@ app.component('PvTreeTable', PvTreeTable);
 app.component('PvFloatLabel', PvFloatLabel);
 app.component('PvIconField', PvIconField);
 app.component('PvInputIcon', PvInputIcon);
-app.component('PvTriStateCheckbox', PvTriStateCheckbox);
+
 app.component('PvColumnGroup', PvColumnGroup);
 app.component('PvRow', PvRow);
 

From 4dfea650e03a434b56184a1690c2246d6064ff70 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Thu, 25 Jul 2024 10:54:08 -0700
Subject: [PATCH 05/28] merging to main


From 6b229eaee7b900ac04772dba263fdcb7bbc83de5 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Fri, 26 Jul 2024 15:24:10 -0700
Subject: [PATCH 06/28] finishing admin dashboard

---
 src/assets/styles/components/datatable.scss   |  202 -
 src/assets/styles/components/dataview.scss    |   32 -
 src/assets/styles/components/datepicker.scss  |  218 -
 src/assets/styles/components/dropdown.scss    |  122 -
 src/assets/styles/components/editor.scss      |  102 -
 src/assets/styles/components/input-group.scss |   33 -
 .../styles/components/input-switch.scss       |   41 -
 src/assets/styles/components/listbox.scss     |   71 -
 src/assets/styles/components/multiselect.scss |  130 -
 .../styles/components/passwordpanel.scss      |   29 -
 .../styles/components/selectbutton.scss       |   54 -
 src/assets/styles/components/sidebar.scss     |   28 -
 src/assets/styles/components/speeddial.scss   |   60 -
 src/assets/styles/components/splitbutton.scss |  285 -
 .../styles/components/tabview-games.scss      |  163 -
 src/assets/styles/components/tabview.scss     |   59 -
 .../styles/components/togglebutton.scss       |   46 -
 src/assets/styles/theme-tailwind.css          | 2959 +---------
 src/assets/styles/theme.css                   | 5215 -----------------
 src/assets/styles/theme.scss                  |   28 -
 src/components/CardAdministration.vue         |    4 +-
 src/components/ConsentModal.vue               |    6 +-
 src/components/ConsentPicker.vue              |    6 +-
 src/components/CreateOrgs.vue                 |   25 +-
 src/components/ListOrgs.vue                   |    8 +
 src/components/NavBar.vue                     |   11 +-
 src/components/RoarDataTable.vue              |   35 +-
 src/components/auth/RegisterParent.vue        |    5 +-
 src/components/auth/RegisterStudent.vue       |   38 +-
 .../reports/IndividualScoreReportTask.vue     |    7 +-
 src/components/reports/tasks/TaskReport.vue   |   14 +-
 src/pages/HomeParticipant.vue                 |   50 +-
 src/pages/IndividualReport.vue                |    7 +-
 src/pages/ProgressReport.vue                  |    6 +
 src/pages/ScoreReport.vue                     |    7 +-
 src/pages/SignIn.vue                          |    5 +-
 36 files changed, 149 insertions(+), 9962 deletions(-)
 delete mode 100644 src/assets/styles/components/datatable.scss
 delete mode 100644 src/assets/styles/components/dataview.scss
 delete mode 100644 src/assets/styles/components/datepicker.scss
 delete mode 100644 src/assets/styles/components/dropdown.scss
 delete mode 100644 src/assets/styles/components/editor.scss
 delete mode 100644 src/assets/styles/components/input-group.scss
 delete mode 100644 src/assets/styles/components/input-switch.scss
 delete mode 100644 src/assets/styles/components/listbox.scss
 delete mode 100644 src/assets/styles/components/multiselect.scss
 delete mode 100644 src/assets/styles/components/passwordpanel.scss
 delete mode 100644 src/assets/styles/components/selectbutton.scss
 delete mode 100644 src/assets/styles/components/sidebar.scss
 delete mode 100644 src/assets/styles/components/speeddial.scss
 delete mode 100644 src/assets/styles/components/splitbutton.scss
 delete mode 100644 src/assets/styles/components/tabview-games.scss
 delete mode 100644 src/assets/styles/components/tabview.scss
 delete mode 100644 src/assets/styles/components/togglebutton.scss
 delete mode 100644 src/assets/styles/theme.css

diff --git a/src/assets/styles/components/datatable.scss b/src/assets/styles/components/datatable.scss
deleted file mode 100644
index 11336c4d7..000000000
--- a/src/assets/styles/components/datatable.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-.p-datatable .p-paginator-bottom {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
-.p-datatable .p-datatable-header {
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-c);
-  border-width: 1px 0 1px 0;
-  padding: 1.25rem 1.25rem;
-  font-weight: 600;
-}
-.p-datatable .p-datatable-footer {
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-c);
-  border-width: 0 0 1px 0;
-  padding: var(--inline-spacing-larger) 1.5rem;
-  font-weight: 600;
-}
-.p-datatable .p-datatable-thead > tr > th {
-  text-align: left;
-  padding: var(--inline-spacing-larger) 0.5rem;
-  border: 1px solid var(--surface-c);
-  border-width: 0 0 1px 0;
-  font-weight: 500;
-  color: var(--surface-500);
-  background: var(--surface-b);
-  transition: none;
-}
-.p-datatable .p-datatable-tfoot > tr > td {
-  text-align: left;
-  padding: 1rem 1rem;
-  border: 1px solid var(--surface-c);
-  border-width: 0 0 1px 0;
-  font-weight: 600;
-  color: var(--text-color);
-  background: var(--surface-b);
-}
-.p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: var(--text-color-secondary);
-  margin-left: var(--inline-spacing);
-}
-.p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 1.143rem;
-  min-width: 1.143rem;
-  line-height: 1.143rem;
-  color: var(--indigo-800);
-  background: var(--gray-200);
-  margin-left: var(--inline-spacing);
-}
-.p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background: var(--surface-c);
-  color: var(--text-color);
-}
-.p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: var(--text-color-secondary);
-}
-.p-datatable .p-sortable-column.p-highlight {
-  background: var(--surface-b);
-  color: var(--primary-color);
-}
-.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: var(--primary-color);
-}
-.p-datatable .p-sortable-column.p-highlight:hover {
-  background: var(--surface-c);
-  color: var(--primary-color);
-}
-.p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
-  color: var(--primary-color);
-}
-.p-datatable .p-sortable-column:focus {
-  box-shadow: inset 0 0 0 0.15rem var(--indigo-500);
-  outline: 0 none;
-}
-.p-datatable .p-datatable-tbody > tr {
-  background: var(--surface-a);
-  color: var(--text-color);
-  transition: none;
-}
-
-.p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
-  width: 1.7rem;
-  height: 1.7rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: var(--surface-400);
-  border-radius: 50%;
-  transition: none;
-}
-.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-700);
-}
-.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
-  margin-right: var(--inline-spacing);
-}
-.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
-  font-weight: 500;
-}
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 0.15rem solid var(--indigo-500);
-  outline-offset: -0.15rem;
-}
-.p-datatable .p-datatable-tbody > tr.p-highlight {
-  background: var(--gray-200);
-  color: var(--indigo-800);
-}
-.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 var(--gray-200);
-}
-.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 var(--gray-200);
-}
-.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
-  background: var(--surface-c);
-  color: var(--text-color);
-}
-.p-datatable .p-column-resizer-helper {
-  background: var(--primary-color);
-}
-.p-datatable .p-datatable-scrollable-header,
-.p-datatable .p-datatable-scrollable-footer {
-  background: var(--surface-b);
-}
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot,
-.p-datatable.p-datatable-scrollable
-  > .p-datatable-wrapper
-  > .p-virtualscroller
-  > .p-datatable-table
-  > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable
-  > .p-datatable-wrapper
-  > .p-virtualscroller
-  > .p-datatable-table
-  > .p-datatable-tfoot {
-  background-color: var(--surface-b);
-}
-.p-datatable .p-datatable-loading-icon {
-  font-size: 2rem;
-}
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
-  background: var(--surface-b);
-}
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: var(--gray-200);
-  color: var(--indigo-800);
-}
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: var(--indigo-800);
-}
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: var(--indigo-800);
-}
-.p-datatable.p-datatable-sm .p-datatable-header {
-  padding: 0.225rem 0.225rem;
-}
-.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-  padding: var(--border-radius) var(--inline-spacing-larger);
-}
-.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-  padding: var(--inline-spacing) var(--inline-spacing-larger);
-}
-.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
-  padding: var(--border-radius) var(--inline-spacing-larger);
-}
-.p-datatable.p-datatable-sm .p-datatable-footer {
-  padding: var(--border-radius) var(--inline-spacing-larger);
-}
-.p-datatable.p-datatable-lg .p-datatable-header {
-  padding: 1.5625rem 1.5625rem;
-}
-.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
-  padding: 0.9375rem 1.875rem;
-}
-.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
-  padding: 1.25rem 1.875rem;
-}
-.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
-  padding: 0.9375rem 1.875rem;
-}
-.p-datatable.p-datatable-lg .p-datatable-footer {
-  padding: 0.9375rem 1.875rem;
-}
diff --git a/src/assets/styles/components/dataview.scss b/src/assets/styles/components/dataview.scss
deleted file mode 100644
index 79fe9f94f..000000000
--- a/src/assets/styles/components/dataview.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.p-dataview .p-paginator-bottom {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
-.p-dataview .p-dataview-header {
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-c);
-  border-width: 1px 0 1px 0;
-  padding: 1.25rem 1.25rem;
-  font-weight: 600;
-}
-.p-dataview .p-dataview-content {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 0 none;
-  padding: 0;
-}
-.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div {
-  border: solid var(--surface-c);
-  border-width: 0 0 1px 0;
-}
-.p-dataview .p-dataview-footer {
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-c);
-  border-width: 0 0 1px 0;
-  padding: var(--inline-spacing-larger) 1.5rem;
-  font-weight: 600;
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
diff --git a/src/assets/styles/components/datepicker.scss b/src/assets/styles/components/datepicker.scss
deleted file mode 100644
index 24b8af0ed..000000000
--- a/src/assets/styles/components/datepicker.scss
+++ /dev/null
@@ -1,218 +0,0 @@
-.p-datepicker {
-  padding: var(--inline-spacing);
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 1px solid var(--surface-300);
-  border-radius: var(--border-radius);
-}
-.p-datepicker:not(.p-datepicker-inline) {
-  background: var(--surface-a);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-.p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
-  background: var(--surface-a);
-}
-.p-datepicker .p-datepicker-header {
-  padding: var(--inline-spacing);
-  color: var(--text-color);
-  background: var(--surface-a);
-  font-weight: 600;
-  margin: 0;
-  border-bottom: 1px solid var(--surface-d);
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-datepicker .p-datepicker-header .p-datepicker-prev,
-.p-datepicker .p-datepicker-header .p-datepicker-next {
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
-.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-c);
-}
-.p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
-.p-datepicker .p-datepicker-header .p-datepicker-next:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 2rem;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
-  color: var(--text-color);
-  transition: none;
-  font-weight: 600;
-  padding: var(--inline-spacing);
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
-  color: var(--primary-color);
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
-  margin-right: var(--inline-spacing);
-}
-.p-datepicker table {
-  font-size: 1rem;
-  margin: var(--inline-spacing) 0;
-}
-.p-datepicker table th {
-  padding: var(--inline-spacing);
-}
-.p-datepicker table th > span {
-  width: 2.5rem;
-  height: 2.5rem;
-}
-.p-datepicker table td {
-  padding: var(--inline-spacing);
-}
-.p-datepicker table td > span {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 50%;
-  transition: none;
-  border: 1px solid transparent;
-}
-.p-datepicker table td > span.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-datepicker table td > span:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-datepicker table td.p-datepicker-today > span {
-  background: var(--surface-300);
-  color: var(--text-color);
-  border-color: transparent;
-}
-.p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-datepicker .p-datepicker-buttonbar {
-  padding: 1rem 0;
-  border-top: 1px solid var(--surface-c);
-}
-.p-datepicker .p-datepicker-buttonbar .p-button {
-  width: auto;
-}
-.p-datepicker .p-timepicker {
-  border-top: 1px solid var(--surface-c);
-  padding: var(--inline-spacing);
-}
-.p-datepicker .p-timepicker button {
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-.p-datepicker .p-timepicker button:enabled:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-c);
-}
-.p-datepicker .p-timepicker button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-datepicker .p-timepicker button:last-child {
-  margin-top: 0.2em;
-}
-.p-datepicker .p-timepicker span {
-  font-size: 1.25rem;
-}
-.p-datepicker .p-timepicker > div {
-  padding: 0 var(--inline-spacing);
-}
-.p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-.p-datepicker .p-monthpicker {
-  margin: var(--inline-spacing) 0;
-}
-.p-datepicker .p-monthpicker .p-monthpicker-month {
-  padding: var(--inline-spacing);
-  transition: none;
-  border-radius: var(--border-radius);
-}
-.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-datepicker .p-yearpicker {
-  margin: var(--inline-spacing) 0;
-}
-.p-datepicker .p-yearpicker .p-yearpicker-year {
-  padding: var(--inline-spacing);
-  transition: none;
-  border-radius: var(--border-radius);
-}
-.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-left: 1px solid var(--surface-c);
-  padding-right: var(--inline-spacing);
-  padding-left: var(--inline-spacing);
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-  border-left: 0 none;
-}
-.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-}
-.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background: var(--surface-c);
-}
-.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 var(--indigo-500);
-}
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
-  background: var(--surface-c);
-}
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
-  background: var(--surface-c);
-}
-.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-
-@media screen and (max-width: 769px) {
-  .p-datepicker table th,
-  .p-datepicker table td {
-    padding: 0;
-  }
-}
diff --git a/src/assets/styles/components/dropdown.scss b/src/assets/styles/components/dropdown.scss
deleted file mode 100644
index 9f5773180..000000000
--- a/src/assets/styles/components/dropdown.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-.p-dropdown {
-  background: var(--surface-a);
-  border: 1px solid var(--surface-300);
-  transition: none;
-  border-radius: var(--border-radius);
-}
-.p-dropdown:not(.p-disabled):hover {
-  border-color: var(--surface-300);
-}
-.p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-  border-color: var(--primary-color);
-}
-.p-dropdown.p-dropdown-clearable .p-dropdown-label {
-  padding-right: 1.75rem;
-}
-.p-dropdown .p-dropdown-label {
-  background: transparent;
-  border: 0 none;
-}
-.p-dropdown .p-dropdown-label.p-placeholder {
-  color: var(--text-color-secondary);
-}
-.p-dropdown .p-dropdown-label:focus,
-.p-dropdown .p-dropdown-label:enabled:focus {
-  outline: 0 none;
-  box-shadow: none;
-}
-.p-dropdown .p-dropdown-trigger {
-  background: transparent;
-  color: var(--text-color-secondary);
-  width: 1.7rem;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-.p-dropdown .p-dropdown-clear-icon {
-  color: var(--text-color-secondary);
-  right: 3rem;
-}
-.p-dropdown.p-invalid.p-component {
-  border-color: var(--red-100);
-}
-
-.p-dropdown-panel {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 0 none;
-  border-radius: var(--border-radius);
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-.p-dropdown-panel .p-dropdown-header {
-  padding: var(--inline-spacing) var(--inline-spacing-larger);
-  border-bottom: 0 none;
-  color: var(--text-color);
-  background: var(--surface-b);
-  margin: 0;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
-  padding-right: 1.75rem;
-  margin-right: -1.75rem;
-}
-.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
-  right: var(--inline-spacing-larger);
-  color: var(--text-color-secondary);
-}
-.p-dropdown-panel .p-dropdown-items {
-  padding: 0.25rem 0;
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
-  margin: 0;
-  padding: var(--inline-spacing-larger) 1rem;
-  border: 0 none;
-  color: var(--text-color);
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
-  background: var(--surface-200);
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
-  color: var(--surface-900);
-  background: var(--surface-d);
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: var(--inline-spacing-larger) 1rem;
-  color: var(--text-color);
-  background: var(--surface-a);
-  font-weight: 600;
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-  padding: var(--inline-spacing-larger) 1rem;
-  color: var(--text-color);
-  background: transparent;
-}
-
-.p-input-filled .p-dropdown {
-  background: var(--surface-b);
-}
-.p-input-filled .p-dropdown:not(.p-disabled):hover {
-  background-color: var(--surface-b);
-}
-.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
-  background-color: var(--surface-a);
-}
diff --git a/src/assets/styles/components/editor.scss b/src/assets/styles/components/editor.scss
deleted file mode 100644
index bd1e32085..000000000
--- a/src/assets/styles/components/editor.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-.p-editor-container .p-editor-toolbar {
-  background: var(--surface-b);
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid var(--surface-d);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
-  stroke: var(--text-color-secondary);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
-  fill: var(--text-color-secondary);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
-  border: 0 none;
-  color: var(--text-color-secondary);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
-  color: var(--text-color);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
-  stroke: var(--text-color);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
-  fill: var(--text-color);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  color: var(--text-color);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-  stroke: var(--text-color);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-  fill: var(--text-color);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  background: var(--surface-a);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: var(--border-radius);
-  padding: 0.25rem 0;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
-  color: var(--text-color);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
-  padding: var(--inline-spacing-larger) 1rem;
-}
-.p-editor-container .p-editor-content {
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-editor-container .p-editor-content.ql-snow {
-  border: 1px solid var(--surface-d);
-}
-.p-editor-container .p-editor-content .ql-editor {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover,
-.p-editor-container .ql-snow.ql-toolbar button:focus {
-  color: var(--text-color);
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
-  stroke: var(--text-color);
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
-  fill: var(--text-color);
-}
-.p-editor-container .ql-snow.ql-toolbar button.ql-active,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
-  color: var(--primary-color);
-}
-.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
-  stroke: var(--primary-color);
-}
-.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
-  fill: var(--primary-color);
-}
-.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
-  color: var(--primary-color);
-}
diff --git a/src/assets/styles/components/input-group.scss b/src/assets/styles/components/input-group.scss
deleted file mode 100644
index e8d4fe927..000000000
--- a/src/assets/styles/components/input-group.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.p-inputgroup-addon {
-  background: var(--surface-b);
-  color: var(--text-color-secondary);
-  border-top: 1px solid var(--surface-300);
-  border-left: 1px solid var(--surface-300);
-  border-bottom: 1px solid var(--surface-300);
-  padding: var(--inline-spacing-larger) var(--inline-spacing-larger);
-  min-width: 3rem;
-}
-.p-inputgroup-addon:last-child {
-  border-right: 1px solid var(--surface-300);
-}
-
-.p-inputgroup .p-float-label:first-child input {
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-
-.p-inputgroup .p-float-label:last-child input {
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
-.p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-.p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 3rem;
-}
-
-.p-inputnumber.p-invalid.p-component > .p-inputtext {
-  border-color: var(--red-100);
-}
diff --git a/src/assets/styles/components/input-switch.scss b/src/assets/styles/components/input-switch.scss
deleted file mode 100644
index d5a9d411b..000000000
--- a/src/assets/styles/components/input-switch.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.p-inputswitch {
-  width: 3rem;
-  height: 1.75rem;
-}
-.p-inputswitch .p-inputswitch-slider {
-  background: var(--surface-300);
-  transition: none;
-  border-radius: 30px;
-}
-.p-inputswitch .p-inputswitch-slider:before {
-  background: var(--surface-a);
-  width: 1.25rem;
-  height: 1.25rem;
-  left: 0.25rem;
-  margin-top: -0.625rem;
-  border-radius: 50%;
-  transition-duration: 0.2s;
-}
-.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  transform: translateX(1.25rem);
-}
-.p-inputswitch.p-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background: var(--surface-400);
-}
-.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background: var(--primary-color);
-}
-.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  background: var(--surface-a);
-}
-.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background: var(--primary-color-hover);
-}
-.p-inputswitch.p-invalid {
-  border-color: var(--red-100);
-}
diff --git a/src/assets/styles/components/listbox.scss b/src/assets/styles/components/listbox.scss
deleted file mode 100644
index bc0105bce..000000000
--- a/src/assets/styles/components/listbox.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.p-listbox {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 1px solid var(--surface-300);
-  border-radius: var(--border-radius);
-  transition: none;
-}
-.p-listbox .p-listbox-header {
-  padding: var(--inline-spacing) var(--inline-spacing-larger);
-  border-bottom: 0 none;
-  color: var(--text-color);
-  background: var(--surface-b);
-  margin: 0;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-listbox .p-listbox-header .p-listbox-filter {
-  padding-right: 1.75rem;
-}
-.p-listbox .p-listbox-header .p-listbox-filter-icon {
-  right: var(--inline-spacing-larger);
-  color: var(--text-color-secondary);
-}
-.p-listbox .p-listbox-list {
-  padding: 0.25rem 0;
-  outline: 0 none;
-}
-.p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: var(--inline-spacing-larger) 1rem;
-  border: 0 none;
-  color: var(--text-color);
-  transition: none;
-  border-radius: 0;
-}
-.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-listbox .p-listbox-list .p-listbox-item-group {
-  margin: 0;
-  padding: var(--inline-spacing-larger) 1rem;
-  color: var(--text-color);
-  background: var(--surface-a);
-  font-weight: 600;
-}
-.p-listbox .p-listbox-list .p-listbox-empty-message {
-  padding: var(--inline-spacing-larger) 1rem;
-  color: var(--text-color);
-  background: transparent;
-}
-.p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
-  background: var(--surface-200);
-}
-.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
-  color: var(--surface-900);
-  background: var(--surface-d);
-}
-.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-listbox.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-  border-color: var(--primary-color);
-}
-.p-listbox.p-invalid {
-  border-color: var(--red-100);
-}
diff --git a/src/assets/styles/components/multiselect.scss b/src/assets/styles/components/multiselect.scss
deleted file mode 100644
index 635536b6d..000000000
--- a/src/assets/styles/components/multiselect.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-.p-multiselect {
-  background: var(--surface-a);
-  border: 1px solid var(--surface-300);
-  transition: none;
-  border-radius: var(--border-radius);
-}
-.p-multiselect:not(.p-disabled):hover {
-  border-color: var(--surface-300);
-}
-.p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-  border-color: var(--primary-color);
-}
-.p-multiselect .p-multiselect-label {
-  padding: var(--inline-spacing-larger) var(--inline-spacing-larger);
-  transition: none;
-}
-.p-multiselect .p-multiselect-label.p-placeholder {
-  color: var(--text-color-secondary);
-}
-
-.p-multiselect .p-multiselect-trigger {
-  background: transparent;
-  color: var(--text-color-secondary);
-  width: 3rem;
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-.p-multiselect.p-invalid.p-component {
-  border-color: var(--red-100);
-}
-
-.p-multiselect-panel {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 0 none;
-  border-radius: var(--border-radius);
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-.p-multiselect-panel .p-multiselect-header {
-  padding: var(--inline-spacing) var(--inline-spacing-larger);
-  border-bottom: 0 none;
-  color: var(--text-color);
-  background: var(--surface-b);
-  margin: 0;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding-right: 1.75rem;
-}
-.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  right: var(--inline-spacing-larger);
-  color: var(--text-color-secondary);
-}
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  margin-left: var(--inline-spacing);
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-c);
-}
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-multiselect-panel .p-multiselect-items {
-  padding: 0.25rem 0;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: var(--inline-spacing-larger) 1rem;
-  border: 0 none;
-  color: var(--text-color);
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
-  background: var(--surface-200);
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
-  color: var(--surface-900);
-  background: var(--surface-d);
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
-  margin: 0;
-  padding: var(--inline-spacing-larger) 1rem;
-  color: var(--text-color);
-  background: var(--surface-a);
-  font-weight: 600;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
-  padding: var(--inline-spacing-larger) 1rem;
-  color: var(--text-color);
-  background: transparent;
-}
-
-.p-input-filled .p-multiselect {
-  background: var(--surface-b);
-}
-.p-input-filled .p-multiselect:not(.p-disabled):hover {
-  background-color: var(--surface-b);
-}
-.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
-  background-color: var(--surface-a);
-}
diff --git a/src/assets/styles/components/passwordpanel.scss b/src/assets/styles/components/passwordpanel.scss
deleted file mode 100644
index 7accd8b93..000000000
--- a/src/assets/styles/components/passwordpanel.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.p-password.p-invalid.p-component > .p-inputtext {
-  border-color: var(--red-100);
-}
-
-.p-password-panel {
-  padding: 1.25rem;
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: var(--border-radius);
-}
-.p-password-panel .p-password-meter {
-  margin-bottom: var(--inline-spacing);
-  background: var(--surface-d);
-}
-.p-password-panel .p-password-meter .p-password-strength.weak {
-  background: var(--red-500);
-}
-.p-password-panel .p-password-meter .p-password-strength.medium {
-  background: var(--bright-yellow);
-}
-.p-password-panel .p-password-meter .p-password-strength.strong {
-  background: var(--bright-green);
-}
diff --git a/src/assets/styles/components/selectbutton.scss b/src/assets/styles/components/selectbutton.scss
deleted file mode 100644
index ab3106593..000000000
--- a/src/assets/styles/components/selectbutton.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.p-selectbutton .p-button {
-  background: var(--surface-a);
-  border: 1px solid var(--surface-300);
-  color: var(--text-color);
-  transition: none;
-}
-.p-selectbutton .p-button .p-button-icon-left,
-.p-selectbutton .p-button .p-button-icon-right {
-  color: var(--text-color-secondary);
-}
-.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background: var(--surface-c);
-  border-color: var(--surface-300);
-  color: var(--text-color);
-}
-.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
-  color: var(--text-color-secondary);
-}
-.p-selectbutton .p-button.p-highlight {
-  background: var(--primary-color);
-  border-color: var(--primary-color);
-  color: var(--surface-a);
-}
-.p-selectbutton .p-button.p-highlight .p-button-icon-left,
-.p-selectbutton .p-button.p-highlight .p-button-icon-right {
-  color: var(--surface-a);
-}
-.p-selectbutton .p-button.p-highlight:hover {
-  background: var(--primary-color-hover);
-  border-color: var(--primary-color-hover);
-  color: var(--surface-a);
-}
-.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
-.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
-  color: var(--surface-a);
-}
-.p-selectbutton.p-invalid > .p-button {
-  border-color: var(--red-100);
-}
-
-.select-button .p-button {
-  margin: 0px;
-  padding: 0.4rem 0.8rem;
-  font-size: 0.9rem;
-}
-.select-button .p-button:last-of-type:not(:only-of-type) {
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-.select-button .p-button:first-of-type:not(:only-of-type) {
-  border-top-right-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
diff --git a/src/assets/styles/components/sidebar.scss b/src/assets/styles/components/sidebar.scss
deleted file mode 100644
index 1c896cd72..000000000
--- a/src/assets/styles/components/sidebar.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.sidebar-container {
-  margin-bottom: auto;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.sidebar-info,
-.sidebar-actions {
-  padding: 1rem;
-  list-style: none;
-  margin: 0;
-  line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-
-  .sidebar-title {
-    border-bottom: 1px solid var(--surface-d);
-    padding-bottom: 1rem;
-    margin-bottom: 1rem;
-  }
-}
-
-.sidebar-actions {
-  gap: 1rem;
-}
diff --git a/src/assets/styles/components/speeddial.scss b/src/assets/styles/components/speeddial.scss
deleted file mode 100644
index 400640333..000000000
--- a/src/assets/styles/components/speeddial.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-.p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
-  font-size: 1.3rem;
-}
-
-.p-speeddial-action {
-  width: 3rem;
-  height: 3rem;
-  background: var(--text-color);
-  color: var(--surface-a);
-}
-.p-speeddial-action:hover {
-  background: var(--surface-800);
-  color: var(--surface-a);
-}
-
-.p-speeddial-direction-up .p-speeddial-item {
-  margin: 0.25rem 0;
-}
-.p-speeddial-direction-up .p-speeddial-item:first-child {
-  margin-bottom: var(--inline-spacing);
-}
-
-.p-speeddial-direction-down .p-speeddial-item {
-  margin: 0.25rem 0;
-}
-.p-speeddial-direction-down .p-speeddial-item:first-child {
-  margin-top: var(--inline-spacing);
-}
-
-.p-speeddial-direction-left .p-speeddial-item {
-  margin: 0 0.25rem;
-}
-.p-speeddial-direction-left .p-speeddial-item:first-child {
-  margin-right: var(--inline-spacing);
-}
-
-.p-speeddial-direction-right .p-speeddial-item {
-  margin: 0 0.25rem;
-}
-.p-speeddial-direction-right .p-speeddial-item:first-child {
-  margin-left: var(--inline-spacing);
-}
-
-.p-speeddial-circle .p-speeddial-item,
-.p-speeddial-semi-circle .p-speeddial-item,
-.p-speeddial-quarter-circle .p-speeddial-item {
-  margin: 0;
-}
-.p-speeddial-circle .p-speeddial-item:first-child,
-.p-speeddial-circle .p-speeddial-item:last-child,
-.p-speeddial-semi-circle .p-speeddial-item:first-child,
-.p-speeddial-semi-circle .p-speeddial-item:last-child,
-.p-speeddial-quarter-circle .p-speeddial-item:first-child,
-.p-speeddial-quarter-circle .p-speeddial-item:last-child {
-  margin: 0;
-}
-
-.p-speeddial-mask {
-  background-color: var(--maskbg);
-}
diff --git a/src/assets/styles/components/splitbutton.scss b/src/assets/styles/components/splitbutton.scss
deleted file mode 100644
index d3d28e415..000000000
--- a/src/assets/styles/components/splitbutton.scss
+++ /dev/null
@@ -1,285 +0,0 @@
-.p-splitbutton {
-  border-radius: var(--border-radius);
-}
-.p-splitbutton.p-button-outlined > .p-button {
-  background-color: transparent;
-  color: var(--primary-color);
-  border: 1px solid;
-}
-.p-splitbutton.p-button-outlined > .p-button:enabled:hover,
-.p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(79, 70, 229, 0.04);
-  color: var(--primary-color);
-}
-.p-splitbutton.p-button-outlined > .p-button:enabled:active,
-.p-splitbutton.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(79, 70, 229, 0.16);
-  color: var(--primary-color);
-}
-.p-splitbutton.p-button-outlined.p-button-plain > .p-button {
-  color: var(--text-color-secondary);
-  border-color: var(--text-color-secondary);
-}
-.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:hover,
-.p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: var(--surface-c);
-  color: var(--text-color-secondary);
-}
-.p-splitbutton.p-button-outlined.p-button-plain > .p-button:enabled:active,
-.p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: var(--surface-d);
-  color: var(--text-color-secondary);
-}
-.p-splitbutton.p-button-text > .p-button {
-  background-color: transparent;
-  color: var(--primary-color);
-  border-color: transparent;
-}
-.p-splitbutton.p-button-text > .p-button:enabled:hover,
-.p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(79, 70, 229, 0.04);
-  color: var(--primary-color);
-  border-color: transparent;
-}
-.p-splitbutton.p-button-text > .p-button:enabled:active,
-.p-splitbutton.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(79, 70, 229, 0.16);
-  color: var(--primary-color);
-  border-color: transparent;
-}
-.p-splitbutton.p-button-text.p-button-plain > .p-button {
-  color: var(--text-color-secondary);
-}
-.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:hover,
-.p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: var(--surface-c);
-  color: var(--text-color-secondary);
-}
-.p-splitbutton.p-button-text.p-button-plain > .p-button:enabled:active,
-.p-splitbutton.p-button-text.p-button-plain > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: var(--surface-d);
-  color: var(--text-color-secondary);
-}
-.p-splitbutton.p-button-raised {
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-.p-splitbutton.p-button-rounded {
-  border-radius: 2rem;
-}
-.p-splitbutton.p-button-rounded > .p-button {
-  border-radius: 2rem;
-}
-.p-splitbutton.p-button-sm > .p-button {
-  font-size: 0.875rem;
-  padding: 0.65625rem 0.875rem;
-}
-.p-splitbutton.p-button-sm > .p-button .p-button-icon {
-  font-size: 0.875rem;
-}
-.p-splitbutton.p-button-lg > .p-button {
-  font-size: 1.25rem;
-  padding: 0.9375rem 1.25rem;
-}
-.p-splitbutton.p-button-lg > .p-button .p-button-icon {
-  font-size: 1.25rem;
-}
-
-.p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
-  background-color: transparent;
-  color: var(--bluegray-500);
-  border: 1px solid;
-}
-.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:hover,
-.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(100, 116, 139, 0.04);
-  color: var(--bluegray-500);
-}
-.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:enabled:active,
-.p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(100, 116, 139, 0.16);
-  color: var(--bluegray-500);
-}
-.p-splitbutton.p-button-secondary.p-button-text > .p-button {
-  background-color: transparent;
-  color: var(--bluegray-500);
-  border-color: transparent;
-}
-.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:hover,
-.p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(100, 116, 139, 0.04);
-  border-color: transparent;
-  color: var(--bluegray-500);
-}
-.p-splitbutton.p-button-secondary.p-button-text > .p-button:enabled:active,
-.p-splitbutton.p-button-secondary.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(100, 116, 139, 0.16);
-  border-color: transparent;
-  color: var(--bluegray-500);
-}
-
-.p-splitbutton.p-button-info.p-button-outlined > .p-button {
-  background-color: transparent;
-  color: var(--blue-500);
-  border: 1px solid;
-}
-.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover,
-.p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(59, 130, 246, 0.04);
-  color: var(--blue-500);
-}
-.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active,
-.p-splitbutton.p-button-info.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(59, 130, 246, 0.16);
-  color: var(--blue-500);
-}
-.p-splitbutton.p-button-info.p-button-text > .p-button {
-  background-color: transparent;
-  color: var(--blue-500);
-  border-color: transparent;
-}
-.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover,
-.p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(59, 130, 246, 0.04);
-  border-color: transparent;
-  color: var(--blue-500);
-}
-.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active,
-.p-splitbutton.p-button-info.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(59, 130, 246, 0.16);
-  border-color: transparent;
-  color: var(--blue-500);
-}
-
-.p-splitbutton.p-button-success.p-button-outlined > .p-button {
-  background-color: transparent;
-  color: var(--bright-green);
-  border: 1px solid;
-}
-.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover,
-.p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(34, 197, 94, 0.04);
-  color: var(--bright-green);
-}
-.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active,
-.p-splitbutton.p-button-success.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(34, 197, 94, 0.16);
-  color: var(--bright-green);
-}
-.p-splitbutton.p-button-success.p-button-text > .p-button {
-  background-color: transparent;
-  color: var(--bright-green);
-  border-color: transparent;
-}
-.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover,
-.p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(34, 197, 94, 0.04);
-  border-color: transparent;
-  color: var(--bright-green);
-}
-.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active,
-.p-splitbutton.p-button-success.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(34, 197, 94, 0.16);
-  border-color: transparent;
-  color: var(--bright-green);
-}
-
-.p-splitbutton.p-button-warning.p-button-outlined > .p-button {
-  background-color: transparent;
-  color: var(--bright-yellow);
-  border: 1px solid;
-}
-.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover,
-.p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(245, 158, 11, 0.04);
-  color: var(--bright-yellow);
-}
-.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active,
-.p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(245, 158, 11, 0.16);
-  color: var(--bright-yellow);
-}
-.p-splitbutton.p-button-warning.p-button-text > .p-button {
-  background-color: transparent;
-  color: var(--bright-yellow);
-  border-color: transparent;
-}
-.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover,
-.p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(245, 158, 11, 0.04);
-  border-color: transparent;
-  color: var(--bright-yellow);
-}
-.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active,
-.p-splitbutton.p-button-warning.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(245, 158, 11, 0.16);
-  border-color: transparent;
-  color: var(--bright-yellow);
-}
-
-.p-splitbutton.p-button-help.p-button-outlined > .p-button {
-  background-color: transparent;
-  color: var(--purple-500);
-  border: 1px solid;
-}
-.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:hover,
-.p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(168, 85, 247, 0.04);
-  color: var(--purple-500);
-}
-.p-splitbutton.p-button-help.p-button-outlined > .p-button:enabled:active,
-.p-splitbutton.p-button-help.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(168, 85, 247, 0.16);
-  color: var(--purple-500);
-}
-.p-splitbutton.p-button-help.p-button-text > .p-button {
-  background-color: transparent;
-  color: var(--purple-500);
-  border-color: transparent;
-}
-.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:hover,
-.p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(168, 85, 247, 0.04);
-  border-color: transparent;
-  color: var(--purple-500);
-}
-.p-splitbutton.p-button-help.p-button-text > .p-button:enabled:active,
-.p-splitbutton.p-button-help.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(168, 85, 247, 0.16);
-  border-color: transparent;
-  color: var(--purple-500);
-}
-
-.p-splitbutton.p-button-danger.p-button-outlined > .p-button {
-  background-color: transparent;
-  color: var(--red-500);
-  border: 1px solid;
-}
-.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover,
-.p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(239, 68, 68, 0.04);
-  color: var(--red-500);
-}
-.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active,
-.p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(239, 68, 68, 0.16);
-  color: var(--red-500);
-}
-.p-splitbutton.p-button-danger.p-button-text > .p-button {
-  background-color: transparent;
-  color: var(--red-500);
-  border-color: transparent;
-}
-.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover,
-.p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):hover {
-  background: rgba(239, 68, 68, 0.04);
-  border-color: transparent;
-  color: var(--red-500);
-}
-.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active,
-.p-splitbutton.p-button-danger.p-button-text > .p-button:not(button):not(a):not(.p-disabled):active {
-  background: rgba(239, 68, 68, 0.16);
-  border-color: transparent;
-  color: var(--red-500);
-}
diff --git a/src/assets/styles/components/tabview-games.scss b/src/assets/styles/components/tabview-games.scss
deleted file mode 100644
index 153b4bde4..000000000
--- a/src/assets/styles/components/tabview-games.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-#games {
-  .p-tabview {
-    *[data-game-status='complete'] {
-      color: var(--green-600);
-    }
-
-    *[data-game-status='incomplete'] {
-      color: var(--red-600);
-    }
-  }
-
-  .p-tabview-panels {
-    padding: 0;
-  }
-
-  .roar-tabview-game {
-    --contentWidth: 52%; //set variable for width of content (title, text, footer)
-
-    display: inline-flex;
-    border-left: 1px solid var(--surface-d);
-    border-right: 1px solid var(--surface-d);
-    border-bottom: 1px solid var(--surface-d);
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    position: relative;
-    justify-content: space-between;
-
-    .roar-game-content {
-      padding-top: 1rem;
-      display: flex;
-      flex-direction: column;
-
-      > *:not(.roar-game-footer) {
-        margin-inline: 2rem;
-      }
-    }
-
-    .roar-game-title {
-      font-size: clamp(1.5rem, 2vw, 3.25rem);
-      padding-bottom: 1rem;
-      margin-bottom: 0.5rem;
-      border-bottom: 1px dotted var(--surface-d);
-    }
-
-    .roar-game-description {
-      color: var(--text-color);
-      font-size: 1.25rem;
-      line-height: 1.5;
-
-      p {
-        font-size: inherit;
-      }
-    }
-
-    .roar-game-meta {
-      padding-block: 0.5rem 1rem;
-      padding-bottom: 2rem;
-      display: inline-flex;
-      gap: 1rem;
-
-      .p-tag {
-        font-size: 0.65rem;
-        padding-inline: 0.5rem;
-        color: var(--surface-400);
-        background: transparent;
-        border: 1px solid var(--surface-300);
-        border-radius: 5px;
-      }
-    }
-
-    .roar-game-footer {
-      padding-block: 1rem;
-      padding-inline: 2rem;
-      border-top: 1px solid var(--surface-d);
-      border-bottom-left-radius: 4px;
-      display: inline-flex;
-      align-items: center;
-      width: 100%;
-      gap: 1rem;
-      margin-top: auto;
-
-      svg {
-        height: 2rem;
-        width: 2rem;
-      }
-    }
-
-    .roar-game-image {
-      width: calc(100% - var(--contentWidth)); //set width based on remaining avail space
-
-      img {
-        width: 100%;
-        height: 100%;
-        aspect-ratio: 16/9;
-        object-fit: cover;
-      }
-    }
-
-    a {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-bottom-right-radius: 4px;
-    }
-
-    // HOVER
-    &:hover {
-      color: var(--primary-color);
-      // background-color: var(--surface-b);
-
-      .roar-game-footer {
-        background: var(--primary-color);
-        color: var(--surface-a);
-
-        svg {
-          rect {
-            fill: var(--surface-a);
-          }
-          path {
-            fill: var(--primary-color);
-          }
-        }
-      }
-    }
-  }
-
-  // Mobile
-  @media screen and (max-width: 1100px) {
-    .roar-tabview-game {
-      flex-direction: row;
-      .roar-game-content {
-        width: 350px;
-      }
-
-      .roar-game-image {
-        width: 350px;
-      }
-    }
-  }
-  @media screen and (max-width: 768px) {
-    .roar-tabview-game {
-      flex-direction: row;
-      .roar-game-content {
-        width: 250px;
-      }
-      .roar-game-description {
-        font-size: 1rem;
-      }
-
-      .roar-game-image {
-        width: 350px;
-      }
-    }
-  }
-}
diff --git a/src/assets/styles/components/tabview.scss b/src/assets/styles/components/tabview.scss
deleted file mode 100644
index 7a6571d97..000000000
--- a/src/assets/styles/components/tabview.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.p-tabview {
-  .p-tabview-nav {
-    background: transparent;
-    background: var(--surface-b);
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    border: 1px solid var(--surface-d);
-    border-inline-color: var(--surface-d);
-
-    .p-tabview-header {
-      .p-tabview-nav-link {
-        border-block: 0;
-        border-inline: 1px solid transparent;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
-        background: transparent;
-        filter: grayscale(45%);
-
-        &:hover {
-          border-inline-color: var(--surface-d);
-        }
-      }
-
-      &:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
-        border-color: var(--surface-d);
-        background: var(--surface-c);
-      }
-
-      &.p-highlight .p-tabview-nav-link {
-        border-top-color: transparent;
-        border-inline-color: var(--surface-d);
-        filter: grayscale(0%);
-
-        *[data-game-status='incomplete'] {
-          color: var(--text-color-secondary);
-        }
-      }
-
-      &:first-child .p-tabview-nav-link {
-        border-left: 0;
-      }
-    }
-
-    li .p-tabview-nav-link:not(.p-disabled):focus {
-      box-shadow: inset 0 0 0 1px var(--primary-color);
-      box-shadow: none;
-      box-shadow:
-        0 0 10px 2px rgba(0, 0, 0, 0.2),
-        0 10px 2px 0 rgba(0, 0, 0, 0.2);
-    }
-  }
-
-  @media screen and (max-width: 1100px) {
-    .p-tabview-nav {
-      display: inline-flex;
-      white-space: nowrap;
-    }
-  }
-}
diff --git a/src/assets/styles/components/togglebutton.scss b/src/assets/styles/components/togglebutton.scss
deleted file mode 100644
index 5f4505030..000000000
--- a/src/assets/styles/components/togglebutton.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.p-togglebutton.p-button {
-  background: var(--surface-a);
-  border: 1px solid var(--surface-300);
-  color: var(--text-color);
-  transition: none;
-}
-.p-togglebutton.p-button .p-button-icon-left,
-.p-togglebutton.p-button .p-button-icon-right {
-  color: var(--text-color-secondary);
-}
-.p-togglebutton.p-button:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-  border-color: var(--primary-color);
-}
-.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
-  background: var(--surface-c);
-  border-color: var(--surface-300);
-  color: var(--text-color);
-}
-.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left,
-.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right {
-  color: var(--text-color-secondary);
-}
-.p-togglebutton.p-button.p-highlight {
-  background: var(--primary-color);
-  border-color: var(--primary-color);
-  color: var(--surface-a);
-}
-.p-togglebutton.p-button.p-highlight .p-button-icon-left,
-.p-togglebutton.p-button.p-highlight .p-button-icon-right {
-  color: var(--surface-a);
-}
-.p-togglebutton.p-button.p-highlight:hover {
-  background: var(--primary-color-hover);
-  border-color: var(--primary-color-hover);
-  color: var(--surface-a);
-}
-.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
-.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
-  color: var(--surface-a);
-}
-.p-togglebutton.p-button.p-invalid > .p-button {
-  border-color: var(--red-100);
-}
diff --git a/src/assets/styles/theme-tailwind.css b/src/assets/styles/theme-tailwind.css
index 90c15d308..322a874c4 100644
--- a/src/assets/styles/theme-tailwind.css
+++ b/src/assets/styles/theme-tailwind.css
@@ -1,2951 +1,12 @@
-.p-column-filter-overlay {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 0 none;
-  border-radius: var(--border-radius);
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  min-width: 12.5rem;
-}
-.p-column-filter-overlay .p-column-filter-row-items {
-  padding: 0.25rem 0;
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
-  margin: 0;
-  padding: var(--inline-spacing-larger) 1rem;
-  border: 0 none;
-  color: var(--text-color);
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem var(--indigo-500);
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-  border-top: 1px solid var(--surface-c);
-  margin: 0.25rem 0;
-}
-
-.p-column-filter-overlay-menu .p-column-filter-operator {
-  padding: var(--inline-spacing) var(--inline-spacing-larger);
-  border-bottom: 0 none;
-  color: var(--text-color);
-  background: var(--surface-b);
-  margin: 0;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-column-filter-overlay-menu .p-column-filter-constraint {
-  padding: 1.25rem;
-  border-bottom: 1px solid var(--surface-c);
-}
-.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
-  margin-bottom: var(--inline-spacing);
-}
-
-.p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
-  border-bottom: 0 none;
-}
-.p-column-filter-overlay-menu .p-column-filter-add-rule {
-  padding: var(--inline-spacing-larger) 1.25rem;
-}
-
-.fc.fc-unthemed .fc-view-container th {
-  background: var(--surface-b);
-  border: 1px solid var(--surface-d);
-  color: var(--text-color);
-}
-.fc.fc-unthemed .fc-view-container td.fc-widget-content {
-  border: 1px solid var(--surface-d);
-  color: var(--text-color);
-}
-.fc.fc-unthemed .fc-view-container td.fc-head-container {
-  border: 1px solid var(--surface-d);
-}
-.fc.fc-unthemed .fc-view-container .fc-view {
-  background: var(--surface-a);
-}
-.fc.fc-unthemed .fc-view-container .fc-row {
-  border-right: 1px solid var(--surface-d);
-}
-.fc.fc-unthemed .fc-view-container .fc-event {
-  background: var(--primary-color);
-  border: 1px solid var(--primary-color);
-  color: var(--surface-a);
-}
-.fc.fc-unthemed .fc-view-container .fc-divider {
-  background: var(--surface-b);
-  border: 1px solid var(--surface-d);
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid {
-  border-color: var(--surface-d);
-}
-.fc.fc-theme-standard .fc-view-harness th {
-  background: var(--surface-b);
-  border-color: var(--surface-d);
-  color: var(--text-color);
-}
-.fc.fc-theme-standard .fc-view-harness td {
-  color: var(--text-color);
-  border-color: var(--surface-d);
-}
-.fc.fc-theme-standard .fc-view-harness .fc-view {
-  background: var(--surface-a);
-}
-.fc.fc-theme-standard .fc-view-harness .fc-popover {
-  background: none;
-  border: 0 none;
-}
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header {
-  border: 1px solid var(--surface-d);
-  padding: 1.25rem;
-  background: var(--surface-b);
-  color: var(--text-color);
-}
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close {
-  opacity: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  font-family: 'PrimeIcons' !important;
-  font-size: 1rem;
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before {
-  content: '\e90b';
-}
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-c);
-}
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body {
-  padding: 1.25rem;
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  border-top: 0 none;
-}
-.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event {
-  color: var(--surface-a);
-  background: var(--primary-color);
-  border-color: var(--primary-color);
-}
-.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main {
-  color: var(--surface-a);
-}
-.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot {
-  background: var(--primary-color);
-  border-color: var(--primary-color);
-}
-.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover {
-  background: var(--surface-c);
-  color: var(--surface-900);
-}
-.fc.fc-theme-standard .fc-view-harness .fc-cell-shaded {
-  background: var(--surface-b);
-}
-
-.fc.fc-theme-standard .fc-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-
-.p-orderlist .p-orderlist-controls {
-  padding: 1.25rem;
-}
-
-.p-orderlist .p-orderlist-header {
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-d);
-  padding: 1.25rem;
-  font-weight: 700;
-  border-bottom: 0 none;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-orderlist .p-orderlist-list {
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  padding: 0.25rem 0;
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: var(--inline-spacing-larger) 1rem;
-  margin: 0;
-  border: 0 none;
-  color: var(--text-color);
-  background: transparent;
-  transition:
-    transform 0.2s,
-    none;
-}
-.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background: var(--surface-c);
-  color: var(--surface-900);
-}
-.p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem var(--indigo-500);
-}
-.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
-  background: var(--surface-b);
-}
-.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
-  background: var(--surface-c);
-}
-
-.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background: var(--surface-c);
-  color: var(--surface-900);
-}
-.p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background: var(--gray-200);
-  color: var(--indigo-800);
-}
-.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: var(--indigo-400);
-}
-.p-organizationchart .p-organizationchart-line-down {
-  background: var(--surface-d);
-}
-.p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid var(--surface-d);
-  border-color: var(--surface-d);
-}
-.p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid var(--surface-d);
-  border-color: var(--surface-d);
-}
-.p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  padding: 1.25rem;
-}
-.p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  background: inherit;
-  color: inherit;
-  border-radius: 50%;
-}
-.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-
-.p-paginator .p-paginator-first,
-.p-paginator .p-paginator-prev,
-.p-paginator .p-paginator-next,
-.p-paginator .p-paginator-last {
-  background-color: transparent;
-  border: 1px solid var(--surface-300);
-  color: var(--text-color-secondary);
-  min-width: 3rem;
-  height: 3rem;
-  margin: 0 0 0 -1px;
-  transition: none;
-  border-radius: 0;
-}
-.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background: var(--surface-c);
-  border-color: var(--surface-300);
-  color: var(--text-color);
-}
-.p-paginator .p-paginator-first {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.p-paginator .p-paginator-last {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.p-paginator .p-dropdown {
-  margin-left: var(--inline-spacing);
-  margin-right: var(--inline-spacing);
-  height: 3rem;
-}
-.p-paginator .p-dropdown .p-dropdown-label {
-  padding-right: 0;
-}
-.p-paginator .p-paginator-page-input {
-  margin-left: var(--inline-spacing);
-  margin-right: var(--inline-spacing);
-}
-
-.p-paginator .p-paginator-current {
-  background-color: transparent;
-  border: 1px solid var(--surface-300);
-  color: var(--text-color-secondary);
-  min-width: 3rem;
-  height: 3rem;
-  margin: 0 0 0 -1px;
-  padding: 0 var(--inline-spacing);
-}
-.p-paginator .p-paginator-pages .p-paginator-page {
-  background-color: transparent;
-  border: 1px solid var(--surface-300);
-  color: var(--text-color-secondary);
-  min-width: 3rem;
-  height: 3rem;
-  margin: 0 0 0 -1px;
-  transition: none;
-  border-radius: 0;
-}
-.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background: var(--gray-200);
-  border-color: var(--gray-200);
-  color: var(--indigo-800);
-}
-.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background: var(--surface-c);
-  border-color: var(--surface-300);
-  color: var(--text-color);
-}
-
-.p-datatable-gridlines .p-datatable-paginator-top {
-  border-width: 1px 0px 0px 0px !important;
-}
-
-.p-togglebutton.p-togglebutton-checked::before {
+button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-datatable-row-editor-save:hover,
+button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-datatable-row-editor-cancel:hover,
+button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-sm:hover {
+  background: var(--surface-400) !important;
+}
+button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-datatable-row-editor-save,
+button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-datatable-row-editor-cancel,
+button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-sm {
   background: var(--primary-color) !important;
-}
-input.p-inputtext.p-component.p-password-input {
-  width: 31.4rem !important;
-}
-.p-togglebutton.p-togglebutton-checked > .p-togglebutton-content {
-  color: white !important;
-}
-
-.p-picklist .p-picklist-header {
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-d);
-  padding: 1.25rem;
-  font-weight: 700;
-  border-bottom: 0 none;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-picklist .p-picklist-list {
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  padding: 0.25rem 0;
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-picklist .p-picklist-list .p-picklist-item {
-  padding: var(--inline-spacing-larger) 1rem;
-  margin: 0;
-  border: 0 none;
-  color: var(--text-color);
-  background: transparent;
-  transition:
-    transform 0.2s,
-    none;
-}
-.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background: var(--surface-c);
-  color: var(--surface-900);
-}
-.p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem var(--indigo-500);
-}
-.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  color: var(--indigo-800);
-  background: var(--gray-200);
-}
-.p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) {
-  background: var(--surface-b);
-}
-.p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover {
-  background: var(--surface-c);
-}
-
-.p-timeline .p-timeline-event-marker {
-  border: 2px solid var(--primary-color);
-  border-radius: 50%;
-  width: 1rem;
-  height: 1rem;
-  background-color: var(--surface-a);
-}
-.p-timeline .p-timeline-event-connector {
-  background-color: var(--surface-d);
-}
-.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
-.p-timeline.p-timeline-vertical .p-timeline-event-content {
-  padding: 0 1rem;
-}
-.p-timeline.p-timeline-vertical .p-timeline-event-connector {
-  width: 2px;
-}
-.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
-.p-timeline.p-timeline-horizontal .p-timeline-event-content {
-  padding: 1rem 0;
-}
-.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
-  height: 2px;
-}
-
-.p-tree {
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  padding: 1.25rem;
-  border-radius: var(--border-radius);
-}
-.p-tree .p-tree-container .p-treenode {
-  padding: 0.143rem;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content {
-  border-radius: var(--border-radius);
-  transition: none;
-  padding: 0;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  margin-right: var(--inline-spacing);
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-c);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  margin-right: var(--inline-spacing);
-  color: var(--text-color-secondary);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem var(--indigo-500);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background: var(--gray-200);
-  color: var(--indigo-800);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: var(--indigo-800);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover,
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover {
-  color: var(--indigo-800);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-  background: var(--surface-c);
-  color: var(--surface-900);
-}
-.p-tree .p-tree-filter-container {
-  margin-bottom: var(--inline-spacing);
-}
-.p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 1.75rem;
-}
-.p-tree .p-tree-filter-container .p-tree-filter-icon {
-  right: var(--inline-spacing-larger);
-  color: var(--text-color-secondary);
-}
-.p-tree .p-treenode-children {
-  padding: 0 0 0 1rem;
-}
-.p-tree .p-tree-loading-icon {
-  font-size: 2rem;
-}
-
-.p-treetable .p-paginator-bottom {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
-.p-treetable .p-treetable-header {
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-c);
-  border-width: 1px 0 1px 0;
-  padding: 1.25rem 1.25rem;
-  font-weight: 600;
-}
-.p-treetable .p-treetable-footer {
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-c);
-  border-width: 0 0 1px 0;
-  padding: var(--inline-spacing-larger) 1.5rem;
-  font-weight: 600;
-}
-.p-treetable .p-treetable-thead > tr > th {
-  text-align: left;
-  padding: var(--inline-spacing-larger) 1.5rem;
-  border: 1px solid var(--surface-c);
-  border-width: 0 0 1px 0;
-  font-weight: 500;
-  color: var(--surface-500);
-  background: var(--surface-b);
-  transition: none;
-}
-.p-treetable .p-treetable-tfoot > tr > td {
-  text-align: left;
-  padding: 1rem 1rem;
-  border: 1px solid var(--surface-c);
-  border-width: 0 0 1px 0;
-  font-weight: 600;
-  color: var(--text-color);
-  background: var(--surface-b);
-}
-.p-treetable .p-sortable-column {
-  outline-color: var(--indigo-500);
-}
-.p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: var(--text-color-secondary);
-  margin-left: var(--inline-spacing);
-}
-.p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 1.143rem;
-  min-width: 1.143rem;
-  line-height: 1.143rem;
-  color: var(--indigo-800);
-  background: var(--gray-200);
-  margin-left: var(--inline-spacing);
-}
-.p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background: var(--surface-c);
-  color: var(--text-color);
-}
-.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: var(--text-color-secondary);
-}
-.p-treetable .p-sortable-column.p-highlight {
-  background: var(--surface-b);
-  color: var(--primary-color);
-}
-.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: var(--primary-color);
-}
-.p-treetable .p-treetable-tbody > tr {
-  background: var(--surface-a);
-  color: var(--text-color);
-  transition: none;
-}
-.p-treetable .p-treetable-tbody > tr > td {
-  text-align: left;
-  border: 1px solid var(--surface-c);
-  border-width: 0 0 1px 0;
-  padding: 1rem 1.5rem;
-}
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-  margin-right: var(--inline-spacing);
-}
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-c);
-}
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 0.15rem solid var(--indigo-500);
-  outline-offset: -0.15rem;
-}
-.p-treetable .p-treetable-tbody > tr.p-highlight {
-  background: var(--gray-200);
-  color: var(--indigo-800);
-}
-.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: var(--indigo-800);
-}
-.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
-  color: var(--indigo-800);
-}
-.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
-  background: var(--surface-c);
-  color: var(--text-color);
-}
-.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
-  color: var(--text-color);
-}
-.p-treetable .p-column-resizer-helper {
-  background: var(--primary-color);
-}
-.p-treetable .p-treetable-scrollable-header,
-.p-treetable .p-treetable-scrollable-footer {
-  background: var(--surface-b);
-}
-.p-treetable .p-treetable-loading-icon {
-  font-size: 2rem;
-}
-.p-treetable.p-treetable-gridlines .p-datatable-header {
-  border-width: 1px 0 0 0;
-}
-.p-treetable.p-treetable-gridlines .p-treetable-footer {
-  border-width: 0 1px 1px 1px;
-}
-.p-treetable.p-treetable-gridlines .p-treetable-top {
-  border-width: 0 1px 0 1px;
-}
-.p-treetable.p-treetable-gridlines .p-treetable-bottom {
-  border-width: 0 1px 1px 1px;
-}
-.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
-  border-width: 1px;
-}
-.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
-  border-width: 1px;
-}
-.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
-  border-width: 1px;
-}
-.p-treetable.p-treetable-sm .p-treetable-header {
-  padding: 1.09375rem 1.09375rem;
-}
-.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
-  padding: var(--border-radius) var(--inline-spacing-larger);
-}
-.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
-  padding: var(--inline-spacing) var(--inline-spacing-larger);
-}
-.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
-  padding: var(--border-radius) var(--inline-spacing-larger);
-}
-.p-treetable.p-treetable-sm .p-treetable-footer {
-  padding: var(--border-radius) var(--inline-spacing-larger);
-}
-.p-treetable.p-treetable-lg .p-treetable-header {
-  padding: 1.5625rem 1.5625rem;
-}
-.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
-  padding: 0.9375rem 1.875rem;
-}
-.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
-  padding: 1.25rem 1.875rem;
-}
-.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
-  padding: 0.9375rem 1.875rem;
-}
-.p-treetable.p-treetable-lg .p-treetable-footer {
-  padding: 0.9375rem 1.875rem;
-}
-
-.p-accordion .p-accordion-header .p-accordion-header-link {
-  padding: 1.25rem;
-  border: 1px solid var(--surface-d);
-  color: var(--text-color);
-  background: var(--surface-b);
-  font-weight: 700;
-  border-radius: var(--border-radius);
-  transition: none;
-}
-.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon {
-  margin-right: var(--inline-spacing);
-}
-.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px var(--indigo-500);
-}
-.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
-  background: var(--surface-c);
-  border-color: var(--surface-d);
-  color: var(--text-color);
-}
-.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
-  background: var(--surface-b);
-  border-color: var(--surface-d);
-  color: var(--text-color);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
-  border-color: var(--surface-d);
-  background: var(--surface-c);
-  color: var(--text-color);
-}
-.p-accordion .p-accordion-content {
-  padding: 1.25rem;
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  border-top: 0;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-accordion .p-accordion-tab {
-  margin-bottom: 0;
-}
-.p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link {
-  border-radius: 0;
-}
-.p-accordion .p-accordion-tab .p-accordion-content {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header .p-accordion-header-link {
-  border-top: 0 none;
-}
-.p-accordion
-  .p-accordion-tab:not(:first-child)
-  .p-accordion-header:not(.p-highlight):not(.p-disabled):hover
-  .p-accordion-header-link,
-.p-accordion
-  .p-accordion-tab:not(:first-child)
-  .p-accordion-header:not(.p-disabled).p-highlight:hover
-  .p-accordion-header-link {
-  border-top: 0 none;
-}
-.p-accordion .p-accordion-tab:first-child .p-accordion-header .p-accordion-header-link {
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-accordion .p-accordion-tab:last-child .p-accordion-content {
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-
-.p-card {
-  background: var(--surface-a);
-  color: var(--text-color);
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  border-radius: var(--border-radius);
-}
-.p-card .p-card-body {
-  padding: 1.25rem;
-}
-.p-card .p-card-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: var(--inline-spacing);
-}
-.p-card .p-card-subtitle {
-  font-weight: 400;
-  margin-bottom: var(--inline-spacing);
-  color: var(--text-color-secondary);
-}
-.p-card .p-card-content {
-  padding: 1.25rem 0;
-}
-.p-card .p-card-footer {
-  padding: 1.25rem 0 0 0;
-}
-
-.p-fieldset {
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  border-radius: var(--border-radius);
-}
-.p-fieldset .p-fieldset-legend {
-  padding: 0.5rem;
-  color: var(--text-color);
-  font-weight: 700;
-  font-size: 1.25rem;
-}
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
-  padding: 0;
-  transition: none;
-}
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
-  padding: 1.25rem;
-  color: var(--text-color);
-  border-radius: var(--border-radius);
-  transition: none;
-}
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
-  margin-right: var(--inline-spacing);
-}
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  color: var(--surface-900);
-}
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
-  background: var(--surface-c);
-  border-color: var(--surface-d);
-  color: var(--surface-900);
-}
-.p-fieldset .p-fieldset-content {
-  padding: 0.25rem;
-}
-
-.p-divider .p-divider-content {
-  background-color: var(--surface-a);
-}
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px var(--surface-d);
-}
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 var(--inline-spacing);
-}
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-.p-divider.p-divider-vertical:before {
-  border-left: 1px var(--surface-d);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: var(--inline-spacing) 0;
-}
-
-.p-panel .p-panel-header {
-  border: 1px solid var(--surface-d);
-  padding: 1.25rem;
-  background: var(--surface-b);
-  color: var(--text-color);
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-panel .p-panel-header .p-panel-title {
-  font-weight: 700;
-  font-size: x-large;
-}
-.p-panel .p-panel-header .p-panel-header-icon {
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-.p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-c);
-}
-.p-panel .p-panel-header .p-panel-header-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-panel.p-panel-toggleable .p-panel-header {
-  padding: var(--inline-spacing-larger) 1.25rem;
-}
-.p-panel .p-panel-content {
-  padding: 1.25rem;
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-  border-top: 0 none;
-}
-.p-panel .p-panel-footer {
-  padding: var(--inline-spacing-larger) 1.25rem;
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  border-top: 0 none;
-}
-
-.p-scrollpanel .p-scrollpanel-bar {
-  background: var(--surface-300);
-  border: 0 none;
-  transition: none;
-  margin-left: 3px;
-}
-.p-scrollpanel .p-scrollpanel-bar:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  /* box-shadow: 0 0 0 1px var(--indigo-500); */
-}
-
-.p-splitter {
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  border-radius: var(--border-radius);
-  color: var(--text-color);
-}
-.p-splitter .p-splitter-gutter {
-  transition: none;
-  background: var(--surface-b);
-}
-.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-  background: var(--surface-d);
-  transition: none;
-}
-.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-splitter .p-splitter-gutter-resizing {
-  background: var(--surface-d);
-}
-
-.p-tabview .p-tabview-nav {
-  background: var(--surface-a);
-  border: 1px solid var(--surface-d);
-  border-width: 0 0 2px 0;
-}
-.p-tabview .p-tabview-nav li {
-  margin-right: 0;
-  box-shadow:
-    1px 0 1px 0 rgba(0, 0, 0, 0.2),
-    0 1px 1px 0 rgba(0, 0, 0, 0.19);
-}
-.p-tabview .p-tabview-nav li .p-tabview-nav-link {
-  border: solid var(--surface-d);
-  border-width: 0 0 2px 0;
-  border-color: transparent transparent var(--surface-d) transparent;
-  background: var(--surface-a);
-  color: var(--text-color-secondary);
-  padding: 1.25rem;
-  font-weight: 700;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-  transition: none;
-  margin: 0 0 -2px 0;
-}
-.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px var(--indigo-500);
-}
-.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
-  background: var(--surface-a);
-  border-color: var(--text-color-secondary);
-  color: var(--text-color-secondary);
-}
-.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
-  background: var(--surface-a);
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-  box-shadow:
-    0 0 10px 2px rgba(0, 0, 0, 0.2),
-    0 10px 2px 0 rgba(0, 0, 0, 0.2);
-}
-.p-tabview .p-tabview-nav-btn.p-link {
-  background: var(--surface-a);
-  color: var(--primary-color);
-  width: 3rem;
-  border-radius: 0;
-}
-.p-tabview .p-tabview-nav-btn.p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px var(--indigo-500);
-}
-.p-tabview .p-tabview-panels {
-  background: var(--surface-a);
-  padding: 1.25rem 0rem;
-  color: var(--text-color);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-
-.p-toolbar {
-  background: var(--surface-b);
-  border: 1px solid var(--surface-d);
-  padding: 1.25rem;
-  border-radius: var(--border-radius);
-}
-.p-toolbar .p-toolbar-separator {
-  margin: 0 var(--inline-spacing);
-}
-
-.p-confirm-popup {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 0 none;
-  border-radius: var(--border-radius);
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-.p-confirm-popup .p-confirm-popup-content {
-  padding: 1.25rem;
-}
-.p-confirm-popup .p-confirm-popup-footer {
-  text-align: right;
-  padding: 0 1rem 1rem 1rem;
-}
-
-.p-confirm-popup:after {
-  border: solid transparent;
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: var(--surface-a);
-}
-.p-confirm-popup:before {
-  border: solid transparent;
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: var(--surface-a);
-}
-.p-confirm-popup.p-confirm-popup-flipped:after {
-  border-top-color: var(--surface-a);
-}
-.p-confirm-popup.p-confirm-popup-flipped:before {
-  border-top-color: var(--surface-a);
-}
-.p-confirm-popup .p-confirm-popup-icon {
-  font-size: 1.5rem;
-}
-.p-confirm-popup .p-confirm-popup-message {
-  margin-left: 1rem;
-}
-
-.p-dialog {
-  border-radius: var(--border-radius);
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  border: 0 none;
-}
-.p-dialog .p-dialog-header {
-  border-bottom: 0 none;
-  background: var(--surface-a);
-  color: var(--text-color);
-  padding: 1.5rem;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-dialog .p-dialog-header .p-dialog-title {
-  font-weight: 600;
-  font-size: 1.5rem;
-}
-.p-dialog .p-dialog-header .p-dialog-header-icon {
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-  margin-right: var(--inline-spacing);
-}
-.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-c);
-}
-.p-dialog .p-dialog-header .p-dialog-header-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-}
-.p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
-  margin-right: 0;
-}
-.p-dialog .p-dialog-content {
-  background: var(--surface-a);
-  color: var(--text-color);
-  padding: 0 1.5rem 1.5rem 1.5rem;
-}
-.p-dialog .p-dialog-content:last-of-type {
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-dialog .p-dialog-footer {
-  border-top: 0 none;
-  background: var(--surface-a);
-  color: var(--text-color);
-  padding: 0 1.5rem 1.5rem 1.5rem;
-  text-align: right;
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-
-.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
-  font-size: 2rem;
-}
-.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-  margin-left: 1rem;
-}
-
-.p-overlaypanel {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border-radius: var(--border-radius);
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-.p-overlaypanel .p-overlaypanel-content {
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-.p-overlaypanel .p-overlaypanel-close {
-  background: var(--primary-color);
-  color: var(--surface-a);
-  width: 2rem;
-  height: 2rem;
-  transition: none;
-  border-radius: 50%;
-  position: absolute;
-  top: -1rem;
-  right: -1rem;
-}
-.p-overlaypanel .p-overlaypanel-close:enabled:hover {
-  background: var(--primary-color-hover);
-  color: var(--surface-a);
-}
-.p-overlaypanel:after {
-  border: solid transparent;
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: var(--surface-a);
-}
-.p-overlaypanel:before {
-  border: solid transparent;
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: var(--surface-b);
-}
-.p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: var(--surface-a);
-}
-.p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: var(--surface-a);
-}
-
-.p-sidebar {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 0 none;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-.p-sidebar .p-sidebar-header {
-  padding: 1.25rem;
-}
-.p-sidebar .p-sidebar-header .p-sidebar-close,
-.p-sidebar .p-sidebar-header .p-sidebar-icon {
-  width: 2rem;
-  height: 2rem;
-  color: var(--text-color-secondary);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
-.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
-  color: var(--surface-900);
-  border-color: transparent;
-  background: var(--surface-c);
-}
-.p-sidebar .p-sidebar-header .p-sidebar-close:focus,
-.p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-sidebar .p-sidebar-header + .p-sidebar-content {
-  padding-top: 0;
-}
-.p-sidebar .p-sidebar-content {
-  padding: 1.25rem;
-}
-
-.p-tooltip .p-tooltip-text {
-  background: var(--text-color);
-  color: var(--surface-a);
-  padding: var(--inline-spacing-larger) var(--inline-spacing-larger);
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: var(--border-radius);
-}
-.p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: var(--text-color);
-}
-.p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: var(--text-color);
-}
-.p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: var(--text-color);
-}
-.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: var(--text-color);
-}
-
-.p-fileupload .p-fileupload-content {
-  background: var(--surface-a);
-  padding: 2rem 1rem;
-  border: 1px solid var(--surface-d);
-  color: var(--text-color);
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-fileupload .p-fileupload-file {
-  padding: 1rem;
-  border: 1px solid var(--surface-d);
-  border-radius: var(--border-radius);
-  gap: var(--inline-spacing);
-  margin-bottom: var(--inline-spacing);
-}
-.p-fileupload .p-fileupload-file:last-child {
-  margin-bottom: 0;
-}
-.p-fileupload .p-fileupload-file-name {
-  margin-bottom: var(--inline-spacing);
-}
-.p-fileupload .p-fileupload-file-size {
-  margin-right: var(--inline-spacing);
-}
-.p-fileupload .p-progressbar {
-  height: 0.25rem;
-}
-.p-fileupload .p-fileupload-row > div {
-  padding: 1rem 1.5rem;
-}
-.p-fileupload.p-fileupload-advanced .p-message {
-  margin-top: 0;
-}
-
-.p-fileupload-choose:not(.p-disabled):hover {
-  background: var(--primary-color-hover);
-  color: var(--surface-a);
-  border-color: var(--primary-color-hover);
-}
-.p-fileupload-choose:not(.p-disabled):active {
-  background: var(--primary-color-hover);
-  color: var(--surface-a);
-  border-color: var(--primary-color-hover);
-}
-
-.p-breadcrumb {
-  background: var(--surface-a);
-  border: 1px solid var(--surface-d);
-  border-radius: var(--border-radius);
-  padding: 1rem;
-}
-.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
-  transition: none;
-  border-radius: var(--border-radius);
-}
-.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
-  color: var(--text-color-secondary);
-}
-.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
-  margin: 0 var(--inline-spacing) 0 var(--inline-spacing);
-  color: var(--text-color);
-}
-.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
-  color: var(--text-color-secondary);
-}
-
-.p-contextmenu {
-  padding: 0.25rem 0;
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: var(--border-radius);
-  width: 12.5rem;
-}
-.p-contextmenu .p-contextmenu-root-list {
-  outline: 0 none;
-}
-.p-contextmenu .p-submenu-list {
-  padding: 0.25rem 0;
-  background: var(--surface-a);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: var(--border-radius);
-}
-.p-contextmenu .p-menuitem > .p-menuitem-content {
-  color: var(--text-color);
-  transition: none;
-  border-radius: 0;
-}
-.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: var(--inline-spacing-larger) 1rem;
-  user-select: none;
-}
-.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: var(--text-color-secondary);
-  margin-right: var(--inline-spacing);
-}
-.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
-  color: var(--text-color);
-  background: var(--surface-c);
-}
-.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: var(--surface-c);
-}
-.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: var(--surface-900);
-  background: var(--surface-d);
-}
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--surface-900);
-}
-.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-contextmenu .p-menuitem-separator {
-  border-top: 1px solid var(--surface-c);
-  margin: 0.25rem 0;
-}
-.p-contextmenu .p-submenu-icon {
-  font-size: 0.875rem;
-}
-
-.p-dock .p-dock-list-container {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  padding: var(--inline-spacing) var(--inline-spacing);
-  border-radius: var(--inline-spacing);
-}
-.p-dock .p-dock-list-container .p-dock-list {
-  outline: 0 none;
-}
-.p-dock .p-dock-item {
-  padding: var(--inline-spacing);
-  border-radius: var(--border-radius);
-}
-.p-dock .p-dock-item.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem var(--indigo-500);
-}
-.p-dock .p-dock-link {
-  width: 4rem;
-  height: 4rem;
-}
-.p-dock.p-dock-top .p-dock-item-second-prev,
-.p-dock.p-dock-top .p-dock-item-second-next,
-.p-dock.p-dock-bottom .p-dock-item-second-prev,
-.p-dock.p-dock-bottom .p-dock-item-second-next {
-  margin: 0 0.9rem;
-}
-.p-dock.p-dock-top .p-dock-item-prev,
-.p-dock.p-dock-top .p-dock-item-next,
-.p-dock.p-dock-bottom .p-dock-item-prev,
-.p-dock.p-dock-bottom .p-dock-item-next {
-  margin: 0 1.3rem;
-}
-.p-dock.p-dock-top .p-dock-item-current,
-.p-dock.p-dock-bottom .p-dock-item-current {
-  margin: 0 1.5rem;
-}
-.p-dock.p-dock-left .p-dock-item-second-prev,
-.p-dock.p-dock-left .p-dock-item-second-next,
-.p-dock.p-dock-right .p-dock-item-second-prev,
-.p-dock.p-dock-right .p-dock-item-second-next {
-  margin: 0.9rem 0;
-}
-.p-dock.p-dock-left .p-dock-item-prev,
-.p-dock.p-dock-left .p-dock-item-next,
-.p-dock.p-dock-right .p-dock-item-prev,
-.p-dock.p-dock-right .p-dock-item-next {
-  margin: 1.3rem 0;
-}
-.p-dock.p-dock-left .p-dock-item-current,
-.p-dock.p-dock-right .p-dock-item-current {
-  margin: 1.5rem 0;
-}
-
-@media screen and (max-width: 960px) {
-  .p-dock.p-dock-top .p-dock-list-container,
-  .p-dock.p-dock-bottom .p-dock-list-container {
-    overflow-x: auto;
-    width: 100%;
-  }
-  .p-dock.p-dock-top .p-dock-list-container .p-dock-list,
-  .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list {
-    margin: 0 auto;
-  }
-  .p-dock.p-dock-left .p-dock-list-container,
-  .p-dock.p-dock-right .p-dock-list-container {
-    overflow-y: auto;
-    height: 100%;
-  }
-  .p-dock.p-dock-left .p-dock-list-container .p-dock-list,
-  .p-dock.p-dock-right .p-dock-list-container .p-dock-list {
-    margin: auto 0;
-  }
-  .p-dock .p-dock-list .p-dock-item {
-    transform: none;
-    margin: 0;
-  }
-}
-.p-megamenu {
-  padding: 1rem;
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-d);
-  border-radius: var(--border-radius);
-}
-.p-megamenu .p-megamenu-root-list {
-  outline: 0 none;
-}
-.p-megamenu .p-menuitem > .p-menuitem-content {
-  color: var(--text-color);
-  transition: none;
-  border-radius: 0;
-}
-.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: var(--inline-spacing-larger) 1rem;
-  user-select: none;
-}
-.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: var(--text-color-secondary);
-  margin-right: var(--inline-spacing);
-}
-.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
-  color: var(--text-color);
-  background: var(--surface-c);
-}
-.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: var(--surface-c);
-}
-.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: var(--surface-900);
-  background: var(--surface-d);
-}
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--surface-900);
-}
-.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-megamenu .p-megamenu-panel {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-.p-megamenu .p-submenu-header {
-  margin: 0;
-  padding: var(--inline-spacing-larger) 1rem;
-  color: var(--text-color);
-  background: var(--surface-a);
-  font-weight: 600;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-megamenu .p-submenu-list {
-  padding: 0.25rem 0;
-  width: 12.5rem;
-}
-.p-megamenu .p-submenu-list .p-menuitem-separator {
-  border-top: 1px solid var(--surface-c);
-  margin: 0.25rem 0;
-}
-.p-megamenu.p-megamenu-vertical {
-  width: 12.5rem;
-  padding: 0.25rem 0;
-}
-.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
-  color: var(--text-color);
-  transition: none;
-  border-radius: var(--border-radius);
-}
-.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: var(--inline-spacing-larger) 1rem;
-  user-select: none;
-}
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon {
-  color: var(--text-color-secondary);
-  margin-right: var(--inline-spacing);
-}
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--text-color-secondary);
-  margin-left: var(--inline-spacing);
-}
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-
-.p-menu {
-  padding: 0.25rem 0;
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 1px solid var(--surface-d);
-  border-radius: var(--border-radius);
-  width: 12.5rem;
-}
-.p-menu .p-menuitem > .p-menuitem-content {
-  color: var(--text-color);
-  transition: none;
-  border-radius: 0;
-  min-width: max-content;
-}
-.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: var(--inline-spacing-larger) 1rem;
-  user-select: none;
-}
-.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: var(--text-color-secondary);
-  margin-right: var(--inline-spacing);
-}
-.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-menu .p-menuitem.p-highlight > .p-menuitem-content {
-  color: var(--text-color);
-  background: var(--surface-c);
-}
-.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: var(--surface-c);
-}
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: var(--surface-900);
-  background: var(--surface-d);
-}
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--surface-900);
-}
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-menu.p-menu-overlay {
-  background: var(--surface-a);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  width: max-content;
-}
-.p-menu .p-submenu-header {
-  margin: 0;
-  padding: var(--inline-spacing-larger) 1rem;
-  color: var(--text-color);
-  background: var(--surface-a);
-  font-weight: 600;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-.p-menu .p-menuitem-separator {
-  border-top: 1px solid var(--surface-c);
-  margin: 0.25rem 0;
-}
-
-.p-menubar {
-  background: var(--surface-b);
-  color: var(--text-color);
-  border: 1px solid var(--surface-d);
-  border-radius: var(--border-radius);
-}
-.p-menubar .p-menubar-root-list {
-  outline: 0 none;
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
-  color: var(--text-color);
-  transition: none;
-  border-radius: var(--border-radius);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: var(--inline-spacing-larger) 1rem;
-  user-select: none;
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: var(--text-color-secondary);
-  margin-right: var(--inline-spacing);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-  margin-left: var(--inline-spacing);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-menubar
-  .p-menubar-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-menubar
-  .p-menubar-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-menubar
-  .p-menubar-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-menubar .p-menuitem > .p-menuitem-content {
-  color: var(--text-color);
-  transition: none;
-  border-radius: 0;
-}
-.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: var(--inline-spacing-larger) 1rem;
-  user-select: none;
-}
-.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: var(--text-color-secondary);
-  margin-right: var(--inline-spacing);
-}
-.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
-  color: var(--text-color);
-  background: var(--surface-c);
-}
-.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: var(--surface-c);
-}
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: var(--surface-900);
-  background: var(--surface-d);
-}
-.p-menubar
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-menubar
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-menubar
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--surface-900);
-}
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-menubar
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-menubar .p-submenu-list {
-  padding: 0.25rem 0;
-  background: var(--surface-a);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  width: 12.5rem;
-}
-.p-menubar .p-submenu-list .p-menuitem-separator {
-  border-top: 1px solid var(--surface-c);
-  margin: 0.25rem 0;
-}
-.p-menubar .p-submenu-list .p-submenu-icon {
-  font-size: 0.875rem;
-}
-
-@media screen and (max-width: 960px) {
-  .p-menubar {
-    position: relative;
-  }
-  .p-menubar .p-menubar-root-list {
-    position: absolute;
-    display: none;
-    padding: 0.25rem 0;
-    background: var(--surface-a);
-    border: 0 none;
-    box-shadow:
-      0 0 #0000,
-      0 0 #0000,
-      0 10px 15px -3px rgba(0, 0, 0, 0.1),
-      0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    width: 100%;
-  }
-  .p-menubar .p-menubar-root-list .p-menuitem-separator {
-    border-top: 1px solid var(--surface-c);
-    margin: 0.25rem 0;
-  }
-  .p-menubar .p-menubar-root-list .p-submenu-icon {
-    font-size: 0.875rem;
-  }
-  .p-menubar .p-menubar-root-list .p-menuitem {
-    width: 100%;
-    position: static;
-  }
-  .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    margin-left: auto;
-    transition: transform 0.2s;
-  }
-  .p-menubar
-    .p-menubar-root-list
-    .p-menuitem.p-menuitem-active
-    > .p-menuitem-content
-    > .p-menuitem-link
-    > .p-submenu-icon {
-    transform: rotate(-180deg);
-  }
-  .p-menubar .p-menubar-root-list .p-submenu-list {
-    width: 100%;
-    position: static;
-    box-shadow: none;
-    border: 0 none;
-  }
-  .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon {
-    transition: transform 0.2s;
-    transform: rotate(90deg);
-  }
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem-active
-    > .p-menuitem-content
-    > .p-menuitem-link
-    > .p-submenu-icon {
-    transform: rotate(-90deg);
-  }
-  .p-menubar .p-menubar-root-list .p-menuitem {
-    width: 100%;
-    position: static;
-  }
-  .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
-    padding-left: 2.25rem;
-  }
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-menuitem-content
-    .p-menuitem-link {
-    padding-left: 3.75rem;
-  }
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-menuitem-content
-    .p-menuitem-link {
-    padding-left: 5.25rem;
-  }
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-menuitem-content
-    .p-menuitem-link {
-    padding-left: 6.75rem;
-  }
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-menuitem-content
-    .p-menuitem-link {
-    padding-left: 8.25rem;
-  }
-  .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
-    display: flex;
-    flex-direction: column;
-    top: 100%;
-    left: 0;
-    z-index: 1;
-  }
-}
-.p-panelmenu .p-panelmenu-header {
-  outline: 0 none;
-}
-.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
-  border: 1px solid var(--surface-d);
-  color: var(--text-color);
-  background: var(--surface-b);
-  border-radius: var(--border-radius);
-  transition: none;
-}
-.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action {
-  padding: 1.25rem;
-  font-weight: 700;
-}
-.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon {
-  margin-right: var(--inline-spacing);
-}
-.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon {
-  margin-right: var(--inline-spacing);
-}
-.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus .p-panelmenu-header-content {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px var(--indigo-500);
-}
-.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
-  background: var(--surface-c);
-  border-color: var(--surface-d);
-  color: var(--text-color);
-}
-.p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
-  background: var(--surface-b);
-  border-color: var(--surface-d);
-  color: var(--text-color);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  margin-bottom: 0;
-}
-.p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
-  border-color: var(--surface-d);
-  background: var(--surface-c);
-  color: var(--text-color);
-}
-.p-panelmenu .p-panelmenu-content {
-  padding: 0.25rem 0;
-  border: 1px solid var(--surface-d);
-  background: var(--surface-a);
-  color: var(--text-color);
-  border-top: 0;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
-  outline: 0 none;
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
-  color: var(--text-color);
-  transition: none;
-  border-radius: 0;
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: var(--inline-spacing-larger) 1rem;
-  user-select: none;
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: var(--text-color-secondary);
-  margin-right: var(--inline-spacing);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
-  color: var(--text-color);
-  background: var(--surface-c);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: var(--surface-c);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: var(--surface-900);
-  background: var(--surface-d);
-}
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--surface-900);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  margin-right: var(--inline-spacing);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem-separator {
-  border-top: 1px solid var(--surface-c);
-  margin: 0.25rem 0;
-}
-.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
-  padding: 0 0 0 1rem;
-}
-.p-panelmenu .p-panelmenu-panel {
-  margin-bottom: 0;
-}
-.p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
-  border-radius: 0;
-}
-.p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
-  border-radius: 0;
-}
-.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
-  border-top: 0 none;
-}
-.p-panelmenu
-  .p-panelmenu-panel:not(:first-child)
-  .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover
-  .p-panelmenu-header-content,
-.p-panelmenu
-  .p-panelmenu-panel:not(:first-child)
-  .p-panelmenu-header:not(.p-disabled).p-highlight:hover
-  .p-panelmenu-header-content {
-  border-top: 0 none;
-}
-.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-}
-.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
-  border-bottom-right-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-
-.p-steps .p-steps-item .p-menuitem-link {
-  background: transparent;
-  transition: none;
-  border-radius: var(--border-radius);
-  background: var(--surface-a);
-}
-.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  color: var(--text-color);
-  border: 1px solid var(--surface-c);
-  background: var(--surface-a);
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
-  font-size: 1.143rem;
-  z-index: 1;
-  border-radius: 50%;
-}
-.p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  margin-top: var(--inline-spacing);
-  color: var(--text-color-secondary);
-}
-.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: var(--gray-200);
-  color: var(--indigo-800);
-}
-.p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 600;
-  color: var(--text-color);
-}
-.p-steps .p-steps-item:before {
-  content: ' ';
-  border-top: 1px solid var(--surface-c);
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -1rem;
-}
-
-.p-tabmenu .p-tabmenu-nav {
-  background: var(--surface-a);
-  border: 1px solid var(--surface-d);
-  border-width: 0 0 2px 0;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
-  margin-right: 0;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  border: solid var(--surface-d);
-  border-width: 0 0 2px 0;
-  border-color: transparent transparent var(--surface-d) transparent;
-  background: var(--surface-a);
-  color: var(--text-color-secondary);
-  padding: 1.25rem;
-  font-weight: 700;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
-  transition: none;
-  margin: 0 0 -2px 0;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  margin-right: var(--inline-spacing);
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px var(--indigo-500);
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background: var(--surface-a);
-  border-color: var(--text-color-secondary);
-  color: var(--text-color-secondary);
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background: var(--surface-a);
-  border-color: var(--primary-color);
-  color: var(--primary-color);
-}
-
-.p-tieredmenu {
-  padding: 0.25rem 0;
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 1px solid var(--surface-d);
-  border-radius: var(--border-radius);
-  width: 12.5rem;
-}
-.p-tieredmenu.p-tieredmenu-overlay {
-  background: var(--surface-a);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-.p-tieredmenu .p-tieredmenu-root-list {
-  outline: 0 none;
-}
-.p-tieredmenu .p-submenu-list {
-  padding: 0.25rem 0;
-  background: var(--surface-a);
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-.p-tieredmenu .p-menuitem > .p-menuitem-content {
-  color: var(--text-color);
-  transition: none;
-  border-radius: 0;
-}
-.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: var(--inline-spacing-larger) 1rem;
-  user-select: none;
-}
-.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: var(--text-color-secondary);
-  margin-right: var(--inline-spacing);
-}
-.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
-  color: var(--text-color);
-  background: var(--surface-c);
-}
-.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: var(--text-color);
-}
-.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: var(--surface-c);
-}
-.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: var(--surface-900);
-  background: var(--surface-d);
-}
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--surface-900);
-}
-.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: var(--surface-900);
-  background: var(--surface-c);
-}
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: var(--surface-900);
-}
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: var(--text-color-secondary);
-}
-.p-tieredmenu .p-menuitem-separator {
-  border-top: 1px solid var(--surface-c);
-  margin: 0.25rem 0;
-}
-.p-tieredmenu .p-submenu-icon {
-  font-size: 0.875rem;
-}
-
-.p-inline-message {
-  padding: var(--inline-spacing-larger) var(--inline-spacing-larger);
-  margin: 0;
-  border-radius: var(--border-radius);
-}
-.p-inline-message.p-inline-message-info {
-  background: var(--surface-d);
-  border: none;
-  border-width: 0px;
-  color: var(--blue-600);
-}
-.p-inline-message.p-inline-message-info .p-inline-message-icon {
-  color: var(--blue-600);
-}
-.p-inline-message.p-inline-message-success {
-  background: var(--surface-d);
-  border: none;
-  border-width: 0px;
-  color: var(--green-600);
-}
-.p-inline-message.p-inline-message-success .p-inline-message-icon {
-  color: var(--green-600);
-}
-.p-inline-message.p-inline-message-warn {
-  background: var(--yellow-50);
-  border: none;
-  border-width: 0px;
-  color: var(--bright-orange);
-}
-.p-inline-message.p-inline-message-warn .p-inline-message-icon {
-  color: var(--bright-orange);
-}
-.p-inline-message.p-inline-message-error {
-  background: var(--yellow-50);
-  border: none;
-  border-width: 0px;
-  color: var(--bright-red);
-}
-.p-inline-message.p-inline-message-error .p-inline-message-icon {
-  color: var(--bright-red);
-}
-.p-inline-message .p-inline-message-icon {
-  font-size: 1rem;
-  margin-right: var(--inline-spacing);
-}
-.p-inline-message .p-inline-message-text {
-  font-size: 1rem;
-}
-.p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
-  margin-right: 0;
-}
-
-.p-message {
-  margin: 1rem 0;
-  border-radius: var(--border-radius);
-}
-.p-message .p-message-wrapper {
-  padding: 1.25rem 1.75rem;
-}
-.p-message .p-message-close {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: transparent;
-  transition: none;
-}
-.p-message .p-message-close:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-.p-message .p-message-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-message.p-message-info {
-  background: var(--surface-d);
-  border: none;
-  border-width: 0 0 0 6px;
-  color: var(--blue-600);
-}
-.p-message.p-message-info .p-message-icon {
-  color: var(--blue-600);
-}
-.p-message.p-message-info .p-message-close {
-  color: var(--blue-600);
-}
-.p-message.p-message-success {
-  background: var(--surface-d);
-  border: none;
-  border-width: 0 0 0 6px;
-  color: var(--green-600);
-}
-.p-message.p-message-success .p-message-icon {
-  color: var(--green-600);
-}
-.p-message.p-message-success .p-message-close {
-  color: var(--green-600);
-}
-.p-message.p-message-warn {
-  background: var(--yellow-50);
-  border: none;
-  border-width: 0 0 0 6px;
-  color: var(--bright-orange);
-}
-.p-message.p-message-warn .p-message-icon {
-  color: var(--bright-orange);
-}
-.p-message.p-message-warn .p-message-close {
-  color: var(--bright-orange);
-}
-.p-message.p-message-error {
-  background: var(--yellow-50);
-  border: none;
-  border-width: 0 0 0 6px;
-  color: var(--bright-red);
-}
-.p-message.p-message-error .p-message-icon {
-  color: var(--bright-red);
-}
-.p-message.p-message-error .p-message-close {
-  color: var(--bright-red);
-}
-.p-message .p-message-text {
-  font-size: 1rem;
-  font-weight: 500;
-}
-.p-message .p-message-icon {
-  font-size: 1.5rem;
-  margin-right: var(--inline-spacing);
-}
-
-.p-toast {
-  opacity: 0.9;
-}
-.p-toast .p-toast-message {
-  margin: 0 0 1rem 0;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  border-radius: var(--border-radius);
-}
-.p-toast .p-toast-message .p-toast-message-content {
-  padding: 1rem;
-  border-width: 0 0 0 6px;
-}
-.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
-  margin: 0 0 0 1rem;
-}
-.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
-  font-size: 2rem;
-}
-.p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
-  font-weight: 700;
-}
-.p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
-  margin: var(--inline-spacing) 0 0 0;
-}
-.p-toast .p-toast-message .p-toast-icon-close {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: transparent;
-  transition: none;
-}
-.p-toast .p-toast-message .p-toast-icon-close:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-.p-toast .p-toast-message .p-toast-icon-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-.p-toast .p-toast-message.p-toast-message-info {
-  background: var(--surface-d);
-  border: none;
-  border-width: 0 0 0 6px;
-  color: var(--blue-600);
-}
-.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
-  color: var(--blue-600);
-}
-.p-toast .p-toast-message.p-toast-message-success {
-  background: var(--surface-d);
-  border: none;
-  border-width: 0 0 0 6px;
-  color: var(--green-600);
-}
-.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
-  color: var(--green-600);
-}
-.p-toast .p-toast-message.p-toast-message-warn {
-  background: var(--yellow-50);
-  border: none;
-  border-width: 0 0 0 6px;
-  color: var(--bright-orange);
-}
-.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
-  color: var(--bright-orange);
-}
-.p-toast .p-toast-message.p-toast-message-error {
-  background: var(--yellow-50);
-  border: none;
-  border-width: 0 0 0 6px;
-  color: var(--bright-red);
-}
-.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
-  color: var(--bright-red);
-}
-
-.p-galleria .p-galleria-close {
-  margin: var(--inline-spacing);
-  background: transparent;
-  color: var(--surface-b);
-  width: 4rem;
-  height: 4rem;
-  transition: none;
-  border-radius: 50%;
-}
-.p-galleria .p-galleria-close .p-galleria-close-icon {
-  font-size: 2rem;
-}
-.p-galleria .p-galleria-close:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--surface-b);
-}
-.p-galleria .p-galleria-item-nav {
-  background: transparent;
-  color: var(--surface-b);
-  width: 4rem;
-  height: 4rem;
-  transition: none;
-  border-radius: var(--border-radius);
-  margin: 0 var(--inline-spacing);
-}
-.p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon,
-.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
-  font-size: 2rem;
-}
-.p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--surface-b);
-}
-.p-galleria .p-galleria-caption {
-  background: rgba(0, 0, 0, 0.5);
-  color: var(--surface-b);
-  padding: 1rem;
-}
-.p-galleria .p-galleria-indicators {
-  padding: 1rem;
-}
-
-.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator,
-.p-galleria.p-galleria-indicators-top .p-galleria-indicator {
-  margin-right: var(--inline-spacing);
-}
-.p-galleria.p-galleria-indicators-left .p-galleria-indicator,
-.p-galleria.p-galleria-indicators-right .p-galleria-indicator {
-  margin-bottom: var(--inline-spacing);
-}
-.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.p-galleria .p-galleria-thumbnail-container {
-  background: rgba(0, 0, 0, 0.9);
-  padding: 1rem 0.25rem;
-}
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  margin: var(--inline-spacing);
-  background-color: transparent;
-  color: var(--surface-b);
-  width: 2rem;
-  height: 2rem;
-  transition: none;
-  border-radius: 50%;
-}
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover,
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--surface-b);
-}
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-
-.p-galleria-mask {
-  --maskbg: rgba(0, 0, 0, 0.9);
-}
-
-.p-image-mask {
-  --maskbg: rgba(0, 0, 0, 0.9);
-}
-
-.p-image-preview-indicator {
-  background-color: transparent;
-  color: var(--surface-c);
-  transition: none;
-}
-
-.p-image-preview-container:hover > .p-image-preview-indicator {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.p-image-toolbar {
-  padding: 1rem;
-}
-
-.p-image-action.p-link {
-  color: var(--surface-c);
-  background-color: transparent;
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  transition: none;
-  margin-right: var(--inline-spacing);
-}
-.p-image-action.p-link:last-child {
-  margin-right: 0;
-}
-.p-image-action.p-link:hover {
-  color: var(--surface-c);
-  background-color: rgba(255, 255, 255, 0.1);
-}
-.p-image-action.p-link i {
-  font-size: 1.5rem;
-}
-
-.p-avatar {
-  background-color: var(--surface-d);
-  border-radius: var(--border-radius);
-}
-.p-avatar.p-avatar-lg {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.5rem;
-}
-.p-avatar.p-avatar-lg .p-avatar-icon {
-  font-size: 1.5rem;
-}
-.p-avatar.p-avatar-xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: 2rem;
-}
-.p-avatar.p-avatar-xl .p-avatar-icon {
-  font-size: 2rem;
-}
-
-.p-avatar-group .p-avatar {
-  border: 2px solid var(--surface-a);
-}
-
-.p-badge {
-  background: var(--primary-color);
-  color: var(--surface-a);
-  font-size: var(--inline-spacing-larger);
-  font-weight: 700;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
-}
-.p-badge.p-badge-secondary {
-  background-color: var(--bluegray-500);
-  color: var(--surface-a);
-}
-.p-badge.p-badge-success {
-  background-color: var(--bright-green);
-  color: var(--surface-a);
-}
-.p-badge.p-badge-info {
-  background-color: var(--blue-500);
-  color: var(--surface-a);
-}
-.p-badge.p-badge-warning {
-  background-color: var(--bright-yellow);
-  color: var(--surface-a);
-}
-.p-badge.p-badge-danger {
-  background-color: var(--red-500);
-  color: var(--surface-a);
-}
-.p-badge.p-badge-lg {
-  font-size: 1.125rem;
-  min-width: 2.25rem;
-  height: 2.25rem;
-  line-height: 2.25rem;
-}
-.p-badge.p-badge-xl {
-  font-size: 1.5rem;
-  min-width: 3rem;
-  height: 3rem;
-  line-height: 3rem;
-}
-
-.p-inplace .p-inplace-display {
-  padding: var(--inline-spacing-larger) var(--inline-spacing-larger);
-  border-radius: var(--border-radius);
-  transition: none;
-}
-.p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background: var(--surface-c);
-  color: var(--surface-900);
-}
-.p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px var(--indigo-500);
-}
-
-.p-progressbar {
-  border: 0 none;
-  height: 1.5rem;
-  background: var(--surface-d);
-  border-radius: var(--border-radius);
-}
-.p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: var(--primary-color);
-}
-.p-progressbar .p-progressbar-label {
-  color: var(--surface-a);
-  line-height: 1.5rem;
-}
-
-.p-scrolltop {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  transition: none;
-}
-.p-scrolltop.p-link {
-  background: rgba(0, 0, 0, 0.7);
-}
-.p-scrolltop.p-link:hover {
-  background: rgba(0, 0, 0, 0.8);
-}
-.p-scrolltop .p-scrolltop-icon {
-  font-size: 1.5rem;
-  color: var(--surface-b);
-}
-
-.p-skeleton {
-  background-color: var(--surface-c);
-  border-radius: var(--border-radius);
-}
-.p-skeleton:after {
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-}
-
-.p-tag {
-  background: var(--primary-color);
-  color: var(--surface-a);
-  font-size: var(--inline-spacing-larger);
-  font-weight: 700;
-  padding: 0.25rem 0.4rem;
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-.p-tag.p-tag-success {
-  background-color: var(--bright-green);
-  color: var(--surface-a);
-}
-.p-tag.p-tag-info {
-  background-color: var(--blue-500);
-  color: var(--surface-a);
-}
-.p-tag.p-tag-warning {
-  background-color: var(--bright-yellow);
-  color: var(--surface-a);
-}
-.p-tag.p-tag-danger {
-  background-color: var(--red-500);
-  color: var(--surface-a);
-}
-.p-tag .p-tag-icon {
-  margin-right: 0.25rem;
-  font-size: var(--inline-spacing-larger);
-}
-
-.p-terminal {
-  background: var(--surface-a);
-  color: var(--text-color);
-  border: 1px solid var(--surface-d);
-  padding: 1.25rem;
-}
-.p-terminal .p-terminal-input {
-  font-size: 1rem;
-}
-.p-tag:not(.p-tag-rounded) {
-  border-radius: var(--border-radius);
-}
-
-.rounded {
-  border-radius: 0.35rem;
+  color: white;
+  margin-left: 3px !important;
 }
diff --git a/src/assets/styles/theme.css b/src/assets/styles/theme.css
deleted file mode 100644
index e560e2c5d..000000000
--- a/src/assets/styles/theme.css
+++ /dev/null
@@ -1,5215 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src:
-    url(''),
-    local('./fonts/Inter-Regular.woff2') format('woff2'),
-    url('./fonts/Inter-Regular.woff') format('woff');
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src:
-    url(''),
-    local('./fonts/Inter-Medium.woff2') format('woff2'),
-    url('./fonts/Inter-Medium.woff') format('woff');
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  src:
-    url(''),
-    local('./fonts/Inter-SemiBold.woff2') format('woff2'),
-    url('./fonts/Inter-SemiBold.woff') format('woff');
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  src:
-    url(''),
-    local('./fonts/Inter-Bold.woff2') format('woff2'),
-    url('./fonts/Inter-Bold.woff') format('woff');
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.p-component {
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
-  font-size: 1rem;
-  font-weight: normal;
-}
-
-.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-  transition-duration: 0.2s;
-}
-
-.p-disabled,
-.p-component:disabled {
-  opacity: 0.6;
-}
-
-.p-error {
-  color: #e24c4c;
-}
-
-.p-text-secondary {
-  color: #71717a;
-}
-
-.pi {
-  font-size: 1rem;
-}
-
-.p-link {
-  font-size: 1rem;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
-  border-radius: 0.375rem;
-}
-
-.p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-component-overlay-enter {
-  animation: p-component-overlay-enter-animation 150ms forwards;
-}
-
-.p-component-overlay-leave {
-  animation: p-component-overlay-leave-animation 150ms forwards;
-}
-
-@keyframes p-component-overlay-enter-animation {
-  from {
-    background-color: transparent;
-  }
-
-  to {
-    background-color: var(--maskbg);
-  }
-}
-
-@keyframes p-component-overlay-leave-animation {
-  from {
-    background-color: var(--maskbg);
-  }
-
-  to {
-    background-color: transparent;
-  }
-}
-
-:root {
-  --blue-50: #f5f9ff;
-  --blue-100: #d0e1fd;
-  --blue-200: #abc9fb;
-  --blue-300: #85b2f9;
-  --blue-400: #609af8;
-  --blue-500: #3b82f6;
-  --blue-600: #326fd1;
-  --blue-700: #295bac;
-  --blue-800: #204887;
-  --blue-900: #183462;
-  --green-50: #f4fcf7;
-  --green-100: #caf1d8;
-  --green-200: #a0e6ba;
-  --green-300: #76db9b;
-  --green-400: #4cd07d;
-  --green-500: #22c55e;
-  --green-600: #1da750;
-  --green-700: #188a42;
-  --green-800: #136c34;
-  --green-900: #0e4f26;
-  --yellow-50: #fefbf3;
-  --yellow-100: #faedc4;
-  --yellow-200: #f6de95;
-  --yellow-300: #f2d066;
-  --yellow-400: #eec137;
-  --yellow-500: #eab308;
-  --yellow-600: #c79807;
-  --yellow-700: #a47d06;
-  --yellow-800: #816204;
-  --yellow-900: #5e4803;
-  --cyan-50: #f3fbfd;
-  --cyan-100: #c3edf5;
-  --cyan-200: #94e0ed;
-  --cyan-300: #65d2e4;
-  --cyan-400: #35c4dc;
-  --cyan-500: #06b6d4;
-  --cyan-600: #059bb4;
-  --cyan-700: #047f94;
-  --cyan-800: #036475;
-  --cyan-900: #024955;
-  --pink-50: #fef6fa;
-  --pink-100: #fad3e7;
-  --pink-200: #f7b0d3;
-  --pink-300: #f38ec0;
-  --pink-400: #f06bac;
-  --pink-500: #ec4899;
-  --pink-600: #c93d82;
-  --pink-700: #a5326b;
-  --pink-800: #822854;
-  --pink-900: #5e1d3d;
-  --indigo-50: #f7f7fe;
-  --indigo-100: #dadafc;
-  --indigo-200: #bcbdf9;
-  --indigo-300: #9ea0f6;
-  --indigo-400: #8183f4;
-  --indigo-500: #6366f1;
-  --indigo-600: #5457cd;
-  --indigo-700: #4547a9;
-  --indigo-800: #363885;
-  --indigo-900: #282960;
-  --teal-50: #f3fbfb;
-  --teal-100: #c7eeea;
-  --teal-200: #9ae0d9;
-  --teal-300: #6dd3c8;
-  --teal-400: #41c5b7;
-  --teal-500: #14b8a6;
-  --teal-600: #119c8d;
-  --teal-700: #0e8174;
-  --teal-800: #0b655b;
-  --teal-900: #084a42;
-  --orange-50: #fff8f3;
-  --orange-100: #feddc7;
-  --orange-200: #fcc39b;
-  --orange-300: #fba86f;
-  --orange-400: #fa8e42;
-  --orange-500: #f97316;
-  --orange-600: #d46213;
-  --orange-700: #ae510f;
-  --orange-800: #893f0c;
-  --orange-900: #642e09;
-  --bluegray-50: #f7f8f9;
-  --bluegray-100: #dadee3;
-  --bluegray-200: #bcc3cd;
-  --bluegray-300: #9fa9b7;
-  --bluegray-400: #818ea1;
-  --bluegray-500: #64748b;
-  --bluegray-600: #556376;
-  --bluegray-700: #465161;
-  --bluegray-800: #37404c;
-  --bluegray-900: #282e38;
-  --purple-50: #fbf7ff;
-  --purple-100: #ead6fd;
-  --purple-200: #dab6fc;
-  --purple-300: #c996fa;
-  --purple-400: #b975f9;
-  --purple-500: #a855f7;
-  --purple-600: #8f48d2;
-  --purple-700: #763cad;
-  --purple-800: #5c2f88;
-  --purple-900: #432263;
-  --red-50: #fef6f6;
-  --red-100: #fbd2d2;
-  --red-200: #f8afaf;
-  --red-300: #f58b8b;
-  --red-400: #f26868;
-  --red-500: #ef4444;
-  --red-600: #cb3a3a;
-  --red-700: #a73030;
-  --red-800: #832525;
-  --red-900: #601b1b;
-  --primary-50: #f6f6fe;
-  --primary-100: #d5d3f9;
-  --primary-200: #b3aff4;
-  --primary-300: #928cef;
-  --primary-400: #7069ea;
-  --primary-500: #4f46e5;
-  --primary-600: #433cc3;
-  --primary-700: #3731a0;
-  --primary-800: #2b277e;
-  --primary-900: #201c5c;
-}
-
-.p-autocomplete .p-autocomplete-loader {
-  right: 0.75rem;
-}
-
-.p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
-  right: 3.75rem;
-}
-
-.p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container {
-  border-color: #d4d4d8;
-}
-
-.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-  border-color: #8c1515;
-}
-
-.p-autocomplete .p-autocomplete-multiple-container {
-  padding: 0.375rem 0.75rem;
-  gap: 0.5rem;
-}
-
-.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  padding: 0.375rem 0;
-}
-
-.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
-  font-size: 1rem;
-  color: #3f3f46;
-  padding: 0;
-  margin: 0;
-}
-
-.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
-  padding: 0.375rem 0.75rem;
-  background: #e5e7eb;
-  color: #3f3f46;
-  border-radius: 16px;
-}
-
-.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
-  margin-left: 0.5rem;
-}
-
-.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus {
-  background: #d4d4d8;
-  color: #3f3f46;
-}
-
-.p-dropdown {
-  background: #ffffff;
-  border: 1px solid #d4d4d8;
-  transition: none;
-  border-radius: 0.375rem;
-}
-
-.p-dropdown:not(.p-disabled):hover {
-  border-color: #d4d4d8;
-}
-
-.p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-  border-color: #8c1515;
-}
-
-.p-dropdown.p-dropdown-clearable .p-dropdown-label {
-  padding-right: 1.75rem;
-}
-
-.p-dropdown .p-dropdown-label {
-  background: transparent;
-  border: 0 none;
-}
-
-.p-dropdown .p-dropdown-label.p-placeholder {
-  color: #71717a;
-}
-
-.p-dropdown .p-dropdown-label:focus,
-.p-dropdown .p-dropdown-label:enabled:focus {
-  outline: 0 none;
-  box-shadow: none;
-}
-
-.p-dropdown .p-dropdown-trigger {
-  background: transparent;
-  color: #71717a;
-  width: 3rem;
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
-.p-dropdown .p-dropdown-clear-icon {
-  color: #71717a;
-  right: 3rem;
-}
-
-.p-dropdown.p-invalid.p-component {
-  border-color: #f0a9a7;
-}
-
-.p-dropdown-panel {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  border-radius: 0.375rem;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.p-dropdown-panel .p-dropdown-header {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 0 none;
-  color: #3f3f46;
-  background: #fafafa;
-  margin: 0;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
-  padding-right: 1.75rem;
-  margin-right: -1.75rem;
-}
-
-.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
-  right: 0.75rem;
-  color: #71717a;
-}
-
-.p-dropdown-panel .p-dropdown-items {
-  padding: 0.25rem 0;
-}
-
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  border: 0 none;
-  color: #3f3f46;
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
-  color: #312e81;
-  background: #eef2ff;
-}
-
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
-  background: #e0e7ff;
-}
-
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
-  color: #18181b;
-  background: #e5e7eb;
-}
-
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  color: #3f3f46;
-  background: #ffffff;
-  font-weight: 600;
-}
-
-.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-  padding: 0.75rem 1rem;
-  color: #3f3f46;
-  background: transparent;
-}
-
-.p-input-filled .p-dropdown {
-  background: #fafafa;
-}
-
-.p-input-filled .p-dropdown:not(.p-disabled):hover {
-  background-color: #fafafa;
-}
-
-.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
-  background-color: #ffffff;
-}
-
-.p-editor-container .p-editor-toolbar {
-  background: #fafafa;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid #e5e7eb;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
-  stroke: #71717a;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
-  fill: #71717a;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
-  border: 0 none;
-  color: #71717a;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
-  color: #3f3f46;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
-  stroke: #3f3f46;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
-  fill: #3f3f46;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  color: #3f3f46;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-  stroke: #3f3f46;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-  fill: #3f3f46;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  background: #ffffff;
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: 0.375rem;
-  padding: 0.25rem 0;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
-  color: #3f3f46;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
-  padding: 0.75rem 1rem;
-}
-
-.p-editor-container .p-editor-content {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-editor-container .p-editor-content.ql-snow {
-  border: 1px solid #e5e7eb;
-}
-
-.p-editor-container .p-editor-content .ql-editor {
-  background: #ffffff;
-  color: #3f3f46;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-editor-container .ql-snow.ql-toolbar button:hover,
-.p-editor-container .ql-snow.ql-toolbar button:focus {
-  color: #3f3f46;
-}
-
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
-  stroke: #3f3f46;
-}
-
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
-  fill: #3f3f46;
-}
-
-.p-editor-container .ql-snow.ql-toolbar button.ql-active,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
-  color: #8c1515;
-}
-
-.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
-  stroke: #8c1515;
-}
-
-.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
-  fill: #8c1515;
-}
-
-.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
-.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
-  color: #8c1515;
-}
-
-.p-inputgroup-addon {
-  background: #fafafa;
-  color: #71717a;
-  border-top: 1px solid #d4d4d8;
-  border-left: 1px solid #d4d4d8;
-  border-bottom: 1px solid #d4d4d8;
-  padding: 0.75rem 0.75rem;
-  min-width: 3rem;
-}
-
-.p-inputgroup-addon:last-child {
-  border-right: 1px solid #d4d4d8;
-}
-
-.p-inputgroup .p-float-label:first-child input {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-inputgroup .p-float-label:last-child input {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
-.p-inputswitch {
-  width: 3rem;
-  height: 1.75rem;
-}
-
-.p-inputswitch.p-invalid {
-  border-color: #f0a9a7;
-}
-
-.p-float-label > label {
-  left: 0.75rem;
-  color: #71717a;
-  transition-duration: 0.2s;
-}
-
-.p-float-label > .p-invalid + label {
-  color: #f0a9a7;
-}
-
-.p-input-icon-left > i:first-of-type {
-  left: 0.75rem;
-  color: #71717a;
-}
-
-.p-input-icon-left.p-float-label > label {
-  left: 2.5rem;
-}
-
-.p-input-icon-right > i:last-of-type {
-  right: 0.75rem;
-  color: #71717a;
-}
-
-::-webkit-input-placeholder {
-  color: #71717a;
-}
-
-:-moz-placeholder {
-  color: #71717a;
-}
-
-::-moz-placeholder {
-  color: #71717a;
-}
-
-:-ms-input-placeholder {
-  color: #71717a;
-}
-
-.p-listbox {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 1px solid #d4d4d8;
-  border-radius: 0.375rem;
-  transition: none;
-}
-
-.p-listbox .p-listbox-header {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 0 none;
-  color: #3f3f46;
-  background: #fafafa;
-  margin: 0;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-listbox .p-listbox-header .p-listbox-filter {
-  padding-right: 1.75rem;
-}
-
-.p-listbox .p-listbox-header .p-listbox-filter-icon {
-  right: 0.75rem;
-  color: #71717a;
-}
-
-.p-listbox .p-listbox-list {
-  padding: 0.25rem 0;
-  outline: 0 none;
-}
-
-.p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  border: 0 none;
-  color: #3f3f46;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #312e81;
-  background: #eef2ff;
-}
-
-.p-listbox .p-listbox-list .p-listbox-item-group {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  color: #3f3f46;
-  background: #ffffff;
-  font-weight: 600;
-}
-
-.p-listbox .p-listbox-list .p-listbox-empty-message {
-  padding: 0.75rem 1rem;
-  color: #3f3f46;
-  background: transparent;
-}
-
-.p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
-  background: #e0e7ff;
-}
-
-.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
-  color: #18181b;
-  background: #e5e7eb;
-}
-
-.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-listbox.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-  border-color: #8c1515;
-}
-
-.p-listbox.p-invalid {
-  border-color: #f0a9a7;
-}
-
-.p-multiselect {
-  background: #ffffff;
-  border: 1px solid #d4d4d8;
-  transition: none;
-  border-radius: 0.375rem;
-}
-
-.p-multiselect:not(.p-disabled):hover {
-  border-color: #d4d4d8;
-}
-
-.p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-  border-color: #8c1515;
-}
-
-.p-multiselect .p-multiselect-label {
-  padding: 0.75rem 0.75rem;
-  transition: none;
-}
-
-.p-multiselect .p-multiselect-label.p-placeholder {
-  color: #71717a;
-}
-
-.p-multiselect .p-multiselect-trigger {
-  background: transparent;
-  color: #71717a;
-  width: 3rem;
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
-.p-multiselect.p-invalid.p-component {
-  border-color: #f0a9a7;
-}
-
-.p-multiselect-panel {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  border-radius: 0.375rem;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.p-multiselect-panel .p-multiselect-header {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 0 none;
-  color: #3f3f46;
-  background: #fafafa;
-  margin: 0;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  right: 0.75rem;
-  color: #71717a;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  margin-left: 0.5rem;
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-multiselect-panel .p-multiselect-items {
-  padding: 0.25rem 0;
-}
-
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  border: 0 none;
-  color: #3f3f46;
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #312e81;
-  background: #eef2ff;
-}
-
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
-  background: #e0e7ff;
-}
-
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
-  color: #18181b;
-  background: #e5e7eb;
-}
-
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  color: #3f3f46;
-  background: #ffffff;
-  font-weight: 600;
-}
-
-.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
-  padding: 0.75rem 1rem;
-  color: #3f3f46;
-  background: transparent;
-}
-
-.p-input-filled .p-multiselect {
-  background: #fafafa;
-}
-
-.p-input-filled .p-multiselect:not(.p-disabled):hover {
-  background-color: #fafafa;
-}
-
-.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
-  background-color: #ffffff;
-}
-
-.p-password-panel {
-  padding: 1.25rem;
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: 0.375rem;
-}
-
-.p-password-panel .p-password-meter {
-  margin-bottom: 0.5rem;
-  background: #e5e7eb;
-}
-
-.p-password-panel .p-password-meter .p-password-strength.weak {
-  background: #ef4444;
-}
-
-.p-password-panel .p-password-meter .p-password-strength.medium {
-  background: #f59e0b;
-}
-
-.p-password-panel .p-password-meter .p-password-strength.strong {
-  background: #22c55e;
-}
-
-.p-speeddial-action {
-  width: 3rem;
-  height: 3rem;
-  background: #3f3f46;
-  color: #fff;
-}
-
-.p-speeddial-action:hover {
-  background: #27272a;
-  color: #fff;
-}
-
-.p-speeddial-direction-up .p-speeddial-item {
-  margin: 0.25rem 0;
-}
-
-.p-speeddial-direction-up .p-speeddial-item:first-child {
-  margin-bottom: 0.5rem;
-}
-
-.p-speeddial-direction-down .p-speeddial-item {
-  margin: 0.25rem 0;
-}
-
-.p-speeddial-direction-down .p-speeddial-item:first-child {
-  margin-top: 0.5rem;
-}
-
-.p-speeddial-direction-left .p-speeddial-item {
-  margin: 0 0.25rem;
-}
-
-.p-speeddial-direction-left .p-speeddial-item:first-child {
-  margin-right: 0.5rem;
-}
-
-.p-speeddial-direction-right .p-speeddial-item {
-  margin: 0 0.25rem;
-}
-
-.p-speeddial-direction-right .p-speeddial-item:first-child {
-  margin-left: 0.5rem;
-}
-
-.p-speeddial-circle .p-speeddial-item,
-.p-speeddial-semi-circle .p-speeddial-item,
-.p-speeddial-quarter-circle .p-speeddial-item {
-  margin: 0;
-}
-
-.p-speeddial-circle .p-speeddial-item:first-child,
-.p-speeddial-circle .p-speeddial-item:last-child,
-.p-speeddial-semi-circle .p-speeddial-item:first-child,
-.p-speeddial-semi-circle .p-speeddial-item:last-child,
-.p-speeddial-quarter-circle .p-speeddial-item:first-child,
-.p-speeddial-quarter-circle .p-speeddial-item:last-child {
-  margin: 0;
-}
-
-.p-speeddial-mask {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-.p-splitbutton {
-  border-radius: 0.375rem;
-}
-
-.p-carousel .p-carousel-content .p-carousel-prev,
-.p-carousel .p-carousel-content .p-carousel-next {
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-  margin: 0.5rem;
-}
-
-.p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
-.p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-carousel .p-carousel-content .p-carousel-prev:focus,
-.p-carousel .p-carousel-content .p-carousel-next:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-carousel .p-carousel-indicators {
-  padding: 1rem;
-}
-
-.p-carousel .p-carousel-indicators .p-carousel-indicator {
-  margin-right: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.p-carousel .p-carousel-indicators .p-carousel-indicator button {
-  background-color: #f4f4f5;
-  width: 2rem;
-  height: 0.5rem;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
-  background: #e5e7eb;
-}
-
-.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-datatable .p-paginator-bottom {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
-
-.p-datatable .p-datatable-header {
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #f4f4f5;
-  border-width: 1px 0 1px 0;
-  padding: 1.25rem 1.25rem;
-  font-weight: 600;
-}
-
-.p-datatable .p-datatable-footer {
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #f4f4f5;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 1.5rem;
-  font-weight: 600;
-}
-
-.p-datatable .p-datatable-thead > tr > th {
-  text-align: left;
-  padding: 0.75rem 1.5rem;
-  border: 1px solid #f4f4f5;
-  border-width: 0 0 1px 0;
-  font-weight: 500;
-  color: #6b7280;
-  background: #fafafa;
-  transition: none;
-}
-
-.p-datatable .p-datatable-tfoot > tr > td {
-  text-align: left;
-  padding: 1rem 1rem;
-  border: 1px solid #f4f4f5;
-  border-width: 0 0 1px 0;
-  font-weight: 600;
-  color: #3f3f46;
-  background: #fafafa;
-}
-
-.p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #71717a;
-  margin-left: 0.5rem;
-}
-
-.p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 1.143rem;
-  min-width: 1.143rem;
-  line-height: 1.143rem;
-  color: #312e81;
-  background: #eef2ff;
-  margin-left: 0.5rem;
-}
-
-.p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background: #f4f4f5;
-  color: #3f3f46;
-}
-
-.p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #71717a;
-}
-
-.p-datatable .p-sortable-column.p-highlight {
-  background: #fafafa;
-  color: #8c1515;
-}
-
-.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #8c1515;
-}
-
-.p-datatable .p-sortable-column.p-highlight:hover {
-  background: #f4f4f5;
-  color: #8c1515;
-}
-
-.p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
-  color: #8c1515;
-}
-
-.p-datatable .p-sortable-column:focus {
-  box-shadow: inset 0 0 0 0.15rem #6366f1;
-  outline: 0 none;
-}
-
-.p-datatable .p-datatable-tbody > tr {
-  background: #ffffff;
-  color: #3f3f46;
-  transition: none;
-}
-
-.p-datatable .p-datatable-tbody > tr > td {
-  border: 1px solid #f4f4f5;
-  border-width: 0 0 1px 0;
-  padding: 1rem 1.5rem;
-}
-
-.p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-
-.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus,
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
-  margin-right: 0.5rem;
-}
-
-.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
-  font-weight: 500;
-}
-
-.p-datatable .p-datatable-tbody > tr:focus {
-  outline: 0.15rem solid #6366f1;
-  outline-offset: -0.15rem;
-}
-
-.p-datatable .p-datatable-tbody > tr.p-highlight {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #eef2ff;
-}
-
-.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #eef2ff;
-}
-
-.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
-  background: #f4f4f5;
-  color: #3f3f46;
-}
-
-.p-datatable .p-column-resizer-helper {
-  background: #8c1515;
-}
-
-.p-datatable .p-datatable-scrollable-header,
-.p-datatable .p-datatable-scrollable-footer {
-  background: #fafafa;
-}
-
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot,
-.p-datatable.p-datatable-scrollable
-  > .p-datatable-wrapper
-  > .p-virtualscroller
-  > .p-datatable-table
-  > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable
-  > .p-datatable-wrapper
-  > .p-virtualscroller
-  > .p-datatable-table
-  > .p-datatable-tfoot {
-  background-color: #fafafa;
-}
-
-.p-datatable .p-datatable-loading-icon {
-  font-size: 2rem;
-}
-
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
-  background: #fcfcfc;
-}
-
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #312e81;
-}
-
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #312e81;
-}
-
-.p-datatable.p-datatable-sm .p-datatable-header {
-  padding: 0.625rem 0.625rem;
-}
-
-.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-  padding: 0.375rem 0.75rem;
-}
-
-.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-  padding: 0.5rem 0.75rem;
-}
-
-.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
-  padding: 0.375rem 0.75rem;
-}
-
-.p-datatable.p-datatable-sm .p-datatable-footer {
-  padding: 0.375rem 0.75rem;
-}
-
-.p-datatable.p-datatable-lg .p-datatable-header {
-  padding: 1.5625rem 1.5625rem;
-}
-
-.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
-  padding: 0.9375rem 1.875rem;
-}
-
-.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
-  padding: 1.25rem 1.875rem;
-}
-
-.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
-  padding: 0.9375rem 1.875rem;
-}
-
-.p-datatable.p-datatable-lg .p-datatable-footer {
-  padding: 0.9375rem 1.875rem;
-}
-
-.p-dataview .p-paginator-bottom {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
-
-.p-dataview .p-dataview-header {
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #f4f4f5;
-  border-width: 1px 0 1px 0;
-  padding: 1.25rem 1.25rem;
-  font-weight: 600;
-}
-
-.p-dataview .p-dataview-content {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  padding: 0;
-}
-
-.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div {
-  border: solid #f4f4f5;
-  border-width: 0 0 1px 0;
-}
-
-.p-dataview .p-dataview-footer {
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #f4f4f5;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 1.5rem;
-  font-weight: 600;
-  border-bottom-left-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
-.p-column-filter-row .p-column-filter-menu-button,
-.p-column-filter-row .p-column-filter-clear-button {
-  margin-left: 0.5rem;
-}
-
-.p-column-filter-menu-button {
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-
-.p-column-filter-menu-button:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-column-filter-menu-button.p-column-filter-menu-button-open,
-.p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.p-column-filter-menu-button.p-column-filter-menu-button-active,
-.p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-column-filter-menu-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-column-filter-clear-button {
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-
-.p-column-filter-clear-button:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-column-filter-clear-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-column-filter-overlay {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  border-radius: 0.375rem;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  min-width: 12.5rem;
-}
-
-.p-column-filter-overlay .p-column-filter-row-items {
-  padding: 0.25rem 0;
-}
-
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  border: 0 none;
-  color: #3f3f46;
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
-  color: #312e81;
-  background: #eef2ff;
-}
-
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem #6366f1;
-}
-
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-  border-top: 1px solid #f3f4f6;
-  margin: 0.25rem 0;
-}
-
-.p-column-filter-overlay-menu .p-column-filter-operator {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 0 none;
-  color: #3f3f46;
-  background: #fafafa;
-  margin: 0;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-column-filter-overlay-menu .p-column-filter-constraint {
-  padding: 1.25rem;
-  border-bottom: 1px solid #f3f4f6;
-}
-
-.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
-  margin-bottom: 0.5rem;
-}
-
-.p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
-  margin-top: 0.5rem;
-}
-
-.p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
-  border-bottom: 0 none;
-}
-
-.p-column-filter-overlay-menu .p-column-filter-add-rule {
-  padding: 0.75rem 1.25rem;
-}
-
-.p-column-filter-overlay-menu .p-column-filter-buttonbar {
-  padding: 1.25rem;
-}
-
-.fc.fc-unthemed .fc-view-container th {
-  background: #fafafa;
-  border: 1px solid #e5e7eb;
-  color: #3f3f46;
-}
-
-.fc.fc-unthemed .fc-view-container td.fc-widget-content {
-  border: 1px solid #e5e7eb;
-  color: #3f3f46;
-}
-
-.fc.fc-unthemed .fc-view-container td.fc-head-container {
-  border: 1px solid #e5e7eb;
-}
-
-.fc.fc-unthemed .fc-view-container .fc-view {
-  background: #ffffff;
-}
-
-.fc.fc-unthemed .fc-view-container .fc-row {
-  border-right: 1px solid #e5e7eb;
-}
-
-.fc.fc-unthemed .fc-view-container .fc-event {
-  background: #8c1515;
-  border: 1px solid #8c1515;
-  color: #ffffff;
-}
-
-.fc.fc-unthemed .fc-view-container .fc-divider {
-  background: #fafafa;
-  border: 1px solid #e5e7eb;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button {
-  color: #ffffff;
-  background: #8c1515;
-  border: 1px solid #8c1515;
-  font-size: 1rem;
-  transition: none;
-  border-radius: 0.375rem;
-  display: flex;
-  align-items: center;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover {
-  background: #4338ca;
-  color: #ffffff;
-  border-color: #4338ca;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active {
-  background: #4338ca;
-  color: #ffffff;
-  border-color: #4338ca;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: 'PrimeIcons' !important;
-  text-indent: 0;
-  font-size: 1rem;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: '\e900';
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: 'PrimeIcons' !important;
-  text-indent: 0;
-  font-size: 1rem;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: '\e901';
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button {
-  background: #ffffff;
-  border: 1px solid #d4d4d8;
-  color: #3f3f46;
-  transition: none;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover {
-  background: #f4f4f5;
-  border-color: #d4d4d8;
-  color: #3f3f46;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
-  background: #8c1515;
-  border-color: #8c1515;
-  color: #ffffff;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover {
-  background: #4338ca;
-  border-color: #4338ca;
-  color: #ffffff;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus,
-.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-  z-index: 1;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button {
-  border-radius: 0;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid {
-  border-color: #e5e7eb;
-}
-
-.fc.fc-theme-standard .fc-view-harness th {
-  background: #fafafa;
-  border-color: #e5e7eb;
-  color: #3f3f46;
-}
-
-.fc.fc-theme-standard .fc-view-harness td {
-  color: #3f3f46;
-  border-color: #e5e7eb;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-view {
-  background: #ffffff;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-popover {
-  background: none;
-  border: 0 none;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header {
-  border: 1px solid #e5e7eb;
-  padding: 1.25rem;
-  background: #fafafa;
-  color: #3f3f46;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close {
-  opacity: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  font-family: 'PrimeIcons' !important;
-  font-size: 1rem;
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:before {
-  content: '\e90b';
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header .fc-popover-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body {
-  padding: 1.25rem;
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  border-top: 0 none;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event {
-  color: #ffffff;
-  background: #8c1515;
-  border-color: #8c1515;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event .fc-event-main {
-  color: #ffffff;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event .fc-daygrid-event-dot {
-  background: #8c1515;
-  border-color: #8c1515;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.fc.fc-theme-standard .fc-view-harness .fc-cell-shaded {
-  background: #fafafa;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button {
-  color: #ffffff;
-  background: #8c1515;
-  border: 1px solid #8c1515;
-  font-size: 1rem;
-  transition: none;
-  border-radius: 0.375rem;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover {
-  background: #4338ca;
-  color: #ffffff;
-  border-color: #4338ca;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active {
-  background: #4338ca;
-  color: #ffffff;
-  border-color: #4338ca;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button:disabled {
-  opacity: 0.6;
-  color: #ffffff;
-  background: #8c1515;
-  border: 1px solid #8c1515;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: 'PrimeIcons' !important;
-  text-indent: 0;
-  font-size: 1rem;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: '\e900';
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: 'PrimeIcons' !important;
-  text-indent: 0;
-  font-size: 1rem;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: '\e901';
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button {
-  background: #ffffff;
-  border: 1px solid #d4d4d8;
-  color: #3f3f46;
-  transition: none;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover {
-  background: #f4f4f5;
-  border-color: #d4d4d8;
-  color: #3f3f46;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
-  background: #8c1515;
-  border-color: #8c1515;
-  color: #ffffff;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover {
-  background: #4338ca;
-  border-color: #4338ca;
-  color: #ffffff;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:not(:disabled):focus,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:not(:disabled):focus,
-.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:not(:disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-  z-index: 1;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button {
-  border-radius: 0;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child {
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 0.375rem;
-}
-
-.fc.fc-theme-standard .fc-highlight {
-  color: #312e81;
-  background: #eef2ff;
-}
-
-.p-orderlist .p-orderlist-controls {
-  padding: 1.25rem;
-}
-
-.p-orderlist .p-orderlist-header {
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #e5e7eb;
-  padding: 1.25rem;
-  font-weight: 700;
-  border-bottom: 0 none;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-orderlist .p-orderlist-list {
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  padding: 0.25rem 0;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.75rem 1rem;
-  margin: 0;
-  border: 0 none;
-  color: #3f3f46;
-  background: transparent;
-  transition:
-    transform 0.2s,
-    none;
-}
-
-.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem #6366f1;
-}
-
-.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  color: #312e81;
-  background: #eef2ff;
-}
-
-.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
-  background: #fcfcfc;
-}
-
-.p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
-  background: #f4f4f5;
-}
-
-.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #6f91ff;
-}
-
-.p-organizationchart .p-organizationchart-line-down {
-  background: #e5e7eb;
-}
-
-.p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #e5e7eb;
-  border-color: #e5e7eb;
-}
-
-.p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #e5e7eb;
-  border-color: #e5e7eb;
-}
-
-.p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  padding: 1.25rem;
-}
-
-.p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  background: inherit;
-  color: inherit;
-  border-radius: 50%;
-}
-
-.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-paginator {
-  background: #ffffff;
-  color: #71717a;
-  border: solid #f4f4f5;
-  border-width: 0;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.375rem;
-}
-
-.p-paginator .p-paginator-first,
-.p-paginator .p-paginator-prev,
-.p-paginator .p-paginator-next,
-.p-paginator .p-paginator-last {
-  background-color: transparent;
-  border: 1px solid #d4d4d8;
-  color: #71717a;
-  min-width: 3rem;
-  height: 3rem;
-  margin: 0 0 0 -1px;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-.p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background: #f4f4f5;
-  border-color: #d4d4d8;
-  color: #3f3f46;
-}
-
-.p-paginator .p-paginator-first {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.p-paginator .p-paginator-last {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.p-paginator .p-dropdown {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-  height: 3rem;
-}
-
-.p-paginator .p-dropdown .p-dropdown-label {
-  padding-right: 0;
-}
-
-.p-paginator .p-paginator-page-input {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-.p-paginator .p-paginator-current {
-  background-color: transparent;
-  border: 1px solid #d4d4d8;
-  color: #71717a;
-  min-width: 3rem;
-  height: 3rem;
-  margin: 0 0 0 -1px;
-  padding: 0 0.5rem;
-}
-
-.p-paginator .p-paginator-pages .p-paginator-page {
-  background-color: transparent;
-  border: 1px solid #d4d4d8;
-  color: #71717a;
-  min-width: 3rem;
-  height: 3rem;
-  margin: 0 0 0 -1px;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background: #eef2ff;
-  border-color: #eef2ff;
-  color: #312e81;
-}
-
-.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background: #f4f4f5;
-  border-color: #d4d4d8;
-  color: #3f3f46;
-}
-
-.p-picklist .p-picklist-buttons {
-  padding: 1.25rem;
-}
-
-.p-picklist .p-picklist-header {
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #e5e7eb;
-  padding: 1.25rem;
-  font-weight: 700;
-  border-bottom: 0 none;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-picklist .p-picklist-list {
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  padding: 0.25rem 0;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.75rem 1rem;
-  margin: 0;
-  border: 0 none;
-  color: #3f3f46;
-  background: transparent;
-  transition:
-    transform 0.2s,
-    none;
-}
-
-.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem #6366f1;
-}
-
-.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  color: #312e81;
-  background: #eef2ff;
-}
-
-.p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even) {
-  background: #fcfcfc;
-}
-
-.p-picklist.p-picklist-striped .p-picklist-list .p-picklist-item:nth-child(even):hover {
-  background: #f4f4f5;
-}
-
-.p-timeline .p-timeline-event-marker {
-  border: 2px solid #8c1515;
-  border-radius: 50%;
-  width: 1rem;
-  height: 1rem;
-  background-color: #ffffff;
-}
-
-.p-timeline .p-timeline-event-connector {
-  background-color: #e5e7eb;
-}
-
-.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
-.p-timeline.p-timeline-vertical .p-timeline-event-content {
-  padding: 0 1rem;
-}
-
-.p-timeline.p-timeline-vertical .p-timeline-event-connector {
-  width: 2px;
-}
-
-.p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
-.p-timeline.p-timeline-horizontal .p-timeline-event-content {
-  padding: 1rem 0;
-}
-
-.p-timeline.p-timeline-horizontal .p-timeline-event-connector {
-  height: 2px;
-}
-
-.p-tree {
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  padding: 1.25rem;
-  border-radius: 0.375rem;
-}
-
-.p-tree .p-tree-container .p-treenode {
-  padding: 0.143rem;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content {
-  border-radius: 0.375rem;
-  transition: none;
-  padding: 0;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  margin-right: 0.5rem;
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  margin-right: 0.5rem;
-  color: #71717a;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem #6366f1;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #312e81;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover,
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover {
-  color: #312e81;
-}
-
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.p-tree .p-tree-filter-container {
-  margin-bottom: 0.5rem;
-}
-
-.p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 1.75rem;
-}
-
-.p-tree .p-tree-filter-container .p-tree-filter-icon {
-  right: 0.75rem;
-  color: #71717a;
-}
-
-.p-tree .p-treenode-children {
-  padding: 0 0 0 1rem;
-}
-
-.p-tree .p-tree-loading-icon {
-  font-size: 2rem;
-}
-
-.p-treetable .p-paginator-bottom {
-  border-width: 0 0 1px 0;
-  border-radius: 0;
-}
-
-.p-treetable .p-treetable-header {
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #f4f4f5;
-  border-width: 1px 0 1px 0;
-  padding: 1.25rem 1.25rem;
-  font-weight: 600;
-}
-
-.p-treetable .p-treetable-footer {
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #f4f4f5;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 1.5rem;
-  font-weight: 600;
-}
-
-.p-treetable .p-treetable-thead > tr > th {
-  text-align: left;
-  padding: 0.75rem 1.5rem;
-  border: 1px solid #f4f4f5;
-  border-width: 0 0 1px 0;
-  font-weight: 500;
-  color: #6b7280;
-  background: #fafafa;
-  transition: none;
-}
-
-.p-treetable .p-treetable-tfoot > tr > td {
-  text-align: left;
-  padding: 1rem 1rem;
-  border: 1px solid #f4f4f5;
-  border-width: 0 0 1px 0;
-  font-weight: 600;
-  color: #3f3f46;
-  background: #fafafa;
-}
-
-.p-treetable .p-sortable-column {
-  outline-color: #6366f1;
-}
-
-.p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #71717a;
-  margin-left: 0.5rem;
-}
-
-.p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 1.143rem;
-  min-width: 1.143rem;
-  line-height: 1.143rem;
-  color: #312e81;
-  background: #eef2ff;
-  margin-left: 0.5rem;
-}
-
-.p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background: #f4f4f5;
-  color: #3f3f46;
-}
-
-.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #71717a;
-}
-
-.p-treetable .p-sortable-column.p-highlight {
-  background: #fafafa;
-  color: #8c1515;
-}
-
-.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #8c1515;
-}
-
-.p-treetable .p-treetable-tbody > tr {
-  background: #ffffff;
-  color: #3f3f46;
-  transition: none;
-}
-
-.p-treetable .p-treetable-tbody > tr > td {
-  text-align: left;
-  border: 1px solid #f4f4f5;
-  border-width: 0 0 1px 0;
-  padding: 1rem 1.5rem;
-}
-
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-  margin-right: 0.5rem;
-}
-
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-treetable .p-treetable-tbody > tr:focus {
-  outline: 0.15rem solid #6366f1;
-  outline-offset: -0.15rem;
-}
-
-.p-treetable .p-treetable-tbody > tr.p-highlight {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #312e81;
-}
-
-.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
-  color: #312e81;
-}
-
-.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
-  background: #f4f4f5;
-  color: #3f3f46;
-}
-
-.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
-  color: #3f3f46;
-}
-
-.p-treetable .p-column-resizer-helper {
-  background: #8c1515;
-}
-
-.p-treetable .p-treetable-scrollable-header,
-.p-treetable .p-treetable-scrollable-footer {
-  background: #fafafa;
-}
-
-.p-treetable .p-treetable-loading-icon {
-  font-size: 2rem;
-}
-
-.p-treetable.p-treetable-gridlines .p-datatable-header {
-  border-width: 1px 0 0 0;
-}
-.p-treetable.p-treetable-gridlines .p-treetable-footer {
-  border-width: 0 1px 1px 1px;
-}
-
-.p-treetable.p-treetable-gridlines .p-treetable-top {
-  border-width: 0 1px 0 1px;
-}
-
-.p-treetable.p-treetable-gridlines .p-treetable-bottom {
-  border-width: 0 1px 1px 1px;
-}
-
-.p-treetable.p-treetable-gridlines .p-treetable-thead > tr > th {
-  border-width: 1px;
-}
-
-.p-treetable.p-treetable-gridlines .p-treetable-tbody > tr > td {
-  border-width: 1px;
-}
-
-.p-treetable.p-treetable-gridlines .p-treetable-tfoot > tr > td {
-  border-width: 1px;
-}
-
-.p-treetable.p-treetable-sm .p-treetable-header {
-  padding: 1.09375rem 1.09375rem;
-}
-
-.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
-  padding: 0.375rem 0.75rem;
-}
-
-.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
-  padding: 0.5rem 0.75rem;
-}
-
-.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
-  padding: 0.375rem 0.75rem;
-}
-
-.p-treetable.p-treetable-sm .p-treetable-footer {
-  padding: 0.375rem 0.75rem;
-}
-
-.p-treetable.p-treetable-lg .p-treetable-header {
-  padding: 1.5625rem 1.5625rem;
-}
-
-.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
-  padding: 0.9375rem 1.875rem;
-}
-
-.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
-  padding: 1.25rem 1.875rem;
-}
-
-.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
-  padding: 0.9375rem 1.875rem;
-}
-
-.p-treetable.p-treetable-lg .p-treetable-footer {
-  padding: 0.9375rem 1.875rem;
-}
-
-.p-accordion .p-accordion-header .p-accordion-header-link {
-  padding: 1.25rem;
-  border: 1px solid #e5e7eb;
-  color: #3f3f46;
-  background: #fafafa;
-  font-weight: 700;
-  border-radius: 0.375rem;
-  transition: none;
-}
-
-.p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon {
-  margin-right: 0.5rem;
-}
-
-.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #6366f1;
-}
-
-.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
-  background: #f4f4f5;
-  border-color: #e5e7eb;
-  color: #3f3f46;
-}
-
-.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
-  background: #fafafa;
-  border-color: #e5e7eb;
-  color: #3f3f46;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
-  border-color: #e5e7eb;
-  background: #f4f4f5;
-  color: #3f3f46;
-}
-
-.p-accordion .p-accordion-content {
-  padding: 0.5rem;
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  border-top: 0;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-accordion .p-accordion-tab {
-  margin-bottom: 0;
-}
-
-.p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link {
-  border-radius: 0;
-}
-
-.p-accordion .p-accordion-tab .p-accordion-content {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header .p-accordion-header-link {
-  border-top: 0 none;
-}
-
-.p-accordion
-  .p-accordion-tab:not(:first-child)
-  .p-accordion-header:not(.p-highlight):not(.p-disabled):hover
-  .p-accordion-header-link,
-.p-accordion
-  .p-accordion-tab:not(:first-child)
-  .p-accordion-header:not(.p-disabled).p-highlight:hover
-  .p-accordion-header-link {
-  border-top: 0 none;
-}
-
-.p-accordion .p-accordion-tab:first-child .p-accordion-header .p-accordion-header-link {
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-accordion .p-accordion-tab:last-child .p-accordion-content {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-card {
-  background: #ffffff;
-  color: #3f3f46;
-  box-shadow:
-    0 1px 3px 0 rgba(0, 0, 0, 0.1),
-    0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  border-radius: 0.375rem;
-}
-
-.p-card .p-card-body {
-  padding: 1.25rem;
-}
-
-.p-card .p-card-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 0.5rem;
-}
-
-.p-card .p-card-subtitle {
-  font-weight: 400;
-  margin-bottom: 0.5rem;
-  color: #71717a;
-}
-
-.p-card .p-card-content {
-  padding: 1.25rem 0;
-}
-
-.p-card .p-card-footer {
-  padding: 1.25rem 0 0 0;
-}
-
-.p-fieldset {
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  border-radius: 0.375rem;
-}
-
-.p-fieldset .p-fieldset-legend {
-  padding: 1.25rem;
-  border: 1px solid #e5e7eb;
-  color: #3f3f46;
-  background: #fafafa;
-  font-weight: 700;
-  border-radius: 0.375rem;
-}
-
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
-  padding: 0;
-  transition: none;
-}
-
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
-  padding: 1.25rem;
-  color: #3f3f46;
-  border-radius: 0.375rem;
-  transition: none;
-}
-
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
-  margin-right: 0.5rem;
-}
-
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  color: #18181b;
-}
-
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
-  background: #f4f4f5;
-  border-color: #e5e7eb;
-  color: #18181b;
-}
-
-.p-fieldset .p-fieldset-content {
-  padding: 1.25rem;
-}
-
-.p-divider .p-divider-content {
-  background-color: #ffffff;
-}
-
-.p-divider.p-divider-horizontal {
-  margin: 1rem 0;
-  padding: 0 1rem;
-}
-
-.p-divider.p-divider-horizontal:before {
-  border-top: 1px #e5e7eb;
-}
-
-.p-divider.p-divider-horizontal .p-divider-content {
-  padding: 0 0.5rem;
-}
-
-.p-divider.p-divider-vertical {
-  margin: 0 1rem;
-  padding: 1rem 0;
-}
-
-.p-divider.p-divider-vertical:before {
-  border-left: 1px #e5e7eb;
-}
-
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
-.p-panel .p-panel-header {
-  border: 1px solid #e5e7eb;
-  padding: 1.25rem;
-  background: #fafafa;
-  color: #3f3f46;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-panel .p-panel-header .p-panel-title {
-  font-weight: 700;
-}
-
-.p-panel .p-panel-header .p-panel-header-icon {
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-
-.p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-panel .p-panel-header .p-panel-header-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-panel.p-panel-toggleable .p-panel-header {
-  padding: 0.75rem 1.25rem;
-}
-
-.p-panel .p-panel-content {
-  padding: 1.25rem;
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-  border-top: 0 none;
-}
-
-.p-panel .p-panel-footer {
-  padding: 0.75rem 1.25rem;
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  border-top: 0 none;
-}
-
-.p-scrollpanel .p-scrollpanel-bar {
-  background: #fafafa;
-  border: 0 none;
-  transition: none;
-}
-
-.p-scrollpanel .p-scrollpanel-bar:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-splitter {
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  border-radius: 0.375rem;
-  color: #3f3f46;
-}
-
-.p-splitter .p-splitter-gutter {
-  transition: none;
-  background: #fafafa;
-}
-
-.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-  background: #e5e7eb;
-  transition: none;
-}
-
-.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-splitter .p-splitter-gutter-resizing {
-  background: #e5e7eb;
-}
-
-.p-tabview .p-tabview-nav {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-width: 0 0 2px 0;
-}
-
-.p-tabview .p-tabview-nav li {
-  margin-right: 0;
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-nav-link {
-  border: solid #e5e7eb;
-  border-width: 0 0 2px 0;
-  border-color: transparent transparent #e5e7eb transparent;
-  background: #ffffff;
-  color: #71717a;
-  padding: 1.25rem;
-  font-weight: 700;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-  transition: none;
-  margin: 0 0 -2px 0;
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #6366f1;
-}
-
-.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
-  background: #ffffff;
-  border-color: #71717a;
-  color: #71717a;
-}
-
-.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
-  background: #ffffff;
-  border-color: #8c1515;
-  color: #8c1515;
-}
-
-.p-tabview .p-tabview-nav-btn.p-link {
-  background: #ffffff;
-  color: #8c1515;
-  width: 3rem;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  border-radius: 0;
-}
-
-.p-tabview .p-tabview-nav-btn.p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #6366f1;
-}
-
-.p-tabview .p-tabview-panels {
-  background: #ffffff;
-  padding: 1.25rem;
-  border: 0 none;
-  color: #3f3f46;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-toolbar {
-  background: #fafafa;
-  border: 1px solid #e5e7eb;
-  padding: 1.25rem;
-  border-radius: 0.375rem;
-}
-
-.p-toolbar .p-toolbar-separator {
-  margin: 0 0.5rem;
-}
-
-.p-confirm-popup {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  border-radius: 0.375rem;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-.p-confirm-popup .p-confirm-popup-content {
-  padding: 1.25rem;
-}
-
-.p-confirm-popup .p-confirm-popup-footer {
-  text-align: right;
-  padding: 0 1rem 1rem 1rem;
-}
-
-.p-confirm-popup .p-confirm-popup-footer button {
-  margin: 0 0.5rem 0 0;
-  width: auto;
-}
-
-.p-confirm-popup .p-confirm-popup-footer button:last-child {
-  margin: 0;
-}
-
-.p-confirm-popup:after {
-  border: solid transparent;
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #ffffff;
-}
-
-.p-confirm-popup:before {
-  border: solid transparent;
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #ffffff;
-}
-
-.p-confirm-popup.p-confirm-popup-flipped:after {
-  border-top-color: #ffffff;
-}
-
-.p-confirm-popup.p-confirm-popup-flipped:before {
-  border-top-color: #ffffff;
-}
-
-.p-confirm-popup .p-confirm-popup-icon {
-  font-size: 1.5rem;
-}
-
-.p-confirm-popup .p-confirm-popup-message {
-  margin-left: 1rem;
-}
-
-.p-dialog {
-  border-radius: 0.375rem;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  border: 0 none;
-}
-
-.p-dialog .p-dialog-header {
-  border-bottom: 0 none;
-  background: #ffffff;
-  color: #3f3f46;
-  padding: 1.5rem;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-dialog .p-dialog-header .p-dialog-title {
-  font-weight: 600;
-  font-size: 1.5rem;
-}
-
-.p-dialog .p-dialog-header .p-dialog-header-icon {
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-  margin-right: 0.5rem;
-}
-
-.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-dialog .p-dialog-header .p-dialog-header-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
-  margin-right: 0;
-}
-
-.p-dialog .p-dialog-content {
-  background: #ffffff;
-  color: #3f3f46;
-  padding: 0 1.5rem 1.5rem 1.5rem;
-}
-
-.p-dialog .p-dialog-content:last-of-type {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-dialog .p-dialog-footer {
-  border-top: 0 none;
-  background: #ffffff;
-  color: #3f3f46;
-  padding: 0 1.5rem 1.5rem 1.5rem;
-  text-align: right;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-dialog .p-dialog-footer button {
-  margin: 0 0.5rem 0 0;
-  width: auto;
-}
-
-.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
-  font-size: 2rem;
-}
-
-.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
-  margin-left: 1rem;
-}
-
-.p-overlaypanel {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  border-radius: 0.375rem;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-.p-overlaypanel .p-overlaypanel-content {
-  padding: 1.25rem;
-}
-
-.p-overlaypanel .p-overlaypanel-close {
-  background: #8c1515;
-  color: #ffffff;
-  width: 2rem;
-  height: 2rem;
-  transition: none;
-  border-radius: 50%;
-  position: absolute;
-  top: -1rem;
-  right: -1rem;
-}
-
-.p-overlaypanel .p-overlaypanel-close:enabled:hover {
-  background: #4338ca;
-  color: #ffffff;
-}
-
-.p-overlaypanel:after {
-  border: solid transparent;
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #ffffff;
-}
-
-.p-overlaypanel:before {
-  border: solid transparent;
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #f2f2f2;
-}
-
-.p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: #ffffff;
-}
-
-.p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: #ffffff;
-}
-
-.p-sidebar {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-}
-
-.p-sidebar .p-sidebar-header {
-  padding: 1.25rem;
-}
-
-.p-sidebar .p-sidebar-header .p-sidebar-close,
-.p-sidebar .p-sidebar-header .p-sidebar-icon {
-  width: 2rem;
-  height: 2rem;
-  color: #71717a;
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: none;
-}
-
-.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
-.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
-  color: #18181b;
-  border-color: transparent;
-  background: #f4f4f5;
-}
-
-.p-sidebar .p-sidebar-header .p-sidebar-close:focus,
-.p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-sidebar .p-sidebar-header + .p-sidebar-content {
-  padding-top: 0;
-}
-
-.p-sidebar .p-sidebar-content {
-  padding: 1.25rem;
-}
-
-.p-tooltip .p-tooltip-text {
-  background: #3f3f46;
-  color: #ffffff;
-  padding: 0.75rem 0.75rem;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: 0.375rem;
-}
-
-.p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: #3f3f46;
-}
-
-.p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: #3f3f46;
-}
-
-.p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: #3f3f46;
-}
-
-.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: #3f3f46;
-}
-
-.p-fileupload .p-fileupload-buttonbar {
-  background: #fafafa;
-  padding: 1.25rem;
-  border: 1px solid #e5e7eb;
-  color: #3f3f46;
-  border-bottom: 0 none;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-  gap: 0.5rem;
-}
-
-.p-fileupload .p-fileupload-content {
-  background: #ffffff;
-  padding: 2rem 1rem;
-  border: 1px solid #e5e7eb;
-  color: #3f3f46;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-fileupload .p-fileupload-file {
-  padding: 1rem;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.375rem;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.p-fileupload .p-fileupload-file:last-child {
-  margin-bottom: 0;
-}
-
-.p-fileupload .p-fileupload-file-name {
-  margin-bottom: 0.5rem;
-}
-
-.p-fileupload .p-fileupload-file-size {
-  margin-right: 0.5rem;
-}
-
-.p-fileupload .p-progressbar {
-  height: 0.25rem;
-}
-
-.p-fileupload .p-fileupload-row > div {
-  padding: 1rem 1.5rem;
-}
-
-.p-fileupload.p-fileupload-advanced .p-message {
-  margin-top: 0;
-}
-
-.p-fileupload-choose:not(.p-disabled):hover {
-  background: #4338ca;
-  color: #ffffff;
-  border-color: #4338ca;
-}
-
-.p-fileupload-choose:not(.p-disabled):active {
-  background: #4338ca;
-  color: #ffffff;
-  border-color: #4338ca;
-}
-
-.p-breadcrumb {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.375rem;
-  padding: 1rem;
-}
-
-.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
-  transition: none;
-  border-radius: 0.375rem;
-}
-
-.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
-  color: #71717a;
-}
-
-.p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
-  margin: 0 0.5rem 0 0.5rem;
-  color: #3f3f46;
-}
-
-.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
-  color: #71717a;
-}
-
-.p-contextmenu {
-  padding: 0.25rem 0;
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: 0.375rem;
-  width: 12.5rem;
-}
-
-.p-contextmenu .p-contextmenu-root-list {
-  outline: 0 none;
-}
-
-.p-contextmenu .p-submenu-list {
-  padding: 0.25rem 0;
-  background: #ffffff;
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  border-radius: 0.375rem;
-}
-
-.p-contextmenu .p-menuitem > .p-menuitem-content {
-  color: #3f3f46;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: 0.75rem 1rem;
-  user-select: none;
-}
-
-.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: #71717a;
-  margin-right: 0.5rem;
-}
-
-.p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
-  color: #3f3f46;
-  background: #f4f4f5;
-}
-
-.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: #f4f4f5;
-}
-
-.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: #18181b;
-  background: #e5e7eb;
-}
-
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #18181b;
-}
-
-.p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-contextmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-contextmenu .p-menuitem-separator {
-  border-top: 1px solid #f3f4f6;
-  margin: 0.25rem 0;
-}
-
-.p-contextmenu .p-submenu-icon {
-  font-size: 0.875rem;
-}
-
-.p-dock .p-dock-list-container {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  padding: 0.5rem 0.5rem;
-  border-radius: 0.5rem;
-}
-
-.p-dock .p-dock-list-container .p-dock-list {
-  outline: 0 none;
-}
-
-.p-dock .p-dock-item {
-  padding: 0.5rem;
-  border-radius: 0.375rem;
-}
-
-.p-dock .p-dock-item.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem #6366f1;
-}
-
-.p-dock .p-dock-link {
-  width: 4rem;
-  height: 4rem;
-}
-
-.p-dock.p-dock-top .p-dock-item-second-prev,
-.p-dock.p-dock-top .p-dock-item-second-next,
-.p-dock.p-dock-bottom .p-dock-item-second-prev,
-.p-dock.p-dock-bottom .p-dock-item-second-next {
-  margin: 0 0.9rem;
-}
-
-.p-dock.p-dock-top .p-dock-item-prev,
-.p-dock.p-dock-top .p-dock-item-next,
-.p-dock.p-dock-bottom .p-dock-item-prev,
-.p-dock.p-dock-bottom .p-dock-item-next {
-  margin: 0 1.3rem;
-}
-
-.p-dock.p-dock-top .p-dock-item-current,
-.p-dock.p-dock-bottom .p-dock-item-current {
-  margin: 0 1.5rem;
-}
-
-.p-dock.p-dock-left .p-dock-item-second-prev,
-.p-dock.p-dock-left .p-dock-item-second-next,
-.p-dock.p-dock-right .p-dock-item-second-prev,
-.p-dock.p-dock-right .p-dock-item-second-next {
-  margin: 0.9rem 0;
-}
-
-.p-dock.p-dock-left .p-dock-item-prev,
-.p-dock.p-dock-left .p-dock-item-next,
-.p-dock.p-dock-right .p-dock-item-prev,
-.p-dock.p-dock-right .p-dock-item-next {
-  margin: 1.3rem 0;
-}
-
-.p-dock.p-dock-left .p-dock-item-current,
-.p-dock.p-dock-right .p-dock-item-current {
-  margin: 1.5rem 0;
-}
-
-@media screen and (max-width: 960px) {
-  .p-dock.p-dock-top .p-dock-list-container,
-  .p-dock.p-dock-bottom .p-dock-list-container {
-    overflow-x: auto;
-    width: 100%;
-  }
-
-  .p-dock.p-dock-top .p-dock-list-container .p-dock-list,
-  .p-dock.p-dock-bottom .p-dock-list-container .p-dock-list {
-    margin: 0 auto;
-  }
-
-  .p-dock.p-dock-left .p-dock-list-container,
-  .p-dock.p-dock-right .p-dock-list-container {
-    overflow-y: auto;
-    height: 100%;
-  }
-
-  .p-dock.p-dock-left .p-dock-list-container .p-dock-list,
-  .p-dock.p-dock-right .p-dock-list-container .p-dock-list {
-    margin: auto 0;
-  }
-
-  .p-dock .p-dock-list .p-dock-item {
-    transform: none;
-    margin: 0;
-  }
-}
-
-.p-megamenu {
-  padding: 1rem;
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.375rem;
-}
-
-.p-megamenu .p-megamenu-root-list {
-  outline: 0 none;
-}
-
-.p-megamenu .p-menuitem > .p-menuitem-content {
-  color: #3f3f46;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: 0.75rem 1rem;
-  user-select: none;
-}
-
-.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: #71717a;
-  margin-right: 0.5rem;
-}
-
-.p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
-  color: #3f3f46;
-  background: #f4f4f5;
-}
-
-.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: #f4f4f5;
-}
-
-.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: #18181b;
-  background: #e5e7eb;
-}
-
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #18181b;
-}
-
-.p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-megamenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-megamenu .p-megamenu-panel {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.p-megamenu .p-submenu-header {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  color: #3f3f46;
-  background: #ffffff;
-  font-weight: 600;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-megamenu .p-submenu-list {
-  padding: 0.25rem 0;
-  width: 12.5rem;
-}
-
-.p-megamenu .p-submenu-list .p-menuitem-separator {
-  border-top: 1px solid #f3f4f6;
-  margin: 0.25rem 0;
-}
-
-.p-megamenu.p-megamenu-vertical {
-  width: 12.5rem;
-  padding: 0.25rem 0;
-}
-
-.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
-  color: #3f3f46;
-  transition: none;
-  border-radius: 0.375rem;
-}
-
-.p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: 0.75rem 1rem;
-  user-select: none;
-}
-
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon {
-  color: #71717a;
-  margin-right: 0.5rem;
-}
-
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #71717a;
-  margin-left: 0.5rem;
-}
-
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-megamenu.p-megamenu-horizontal
-  .p-megamenu-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-menu {
-  padding: 0.25rem 0;
-  background: #ffffff;
-  color: #3f3f46;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.375rem;
-  width: 12.5rem;
-}
-
-.p-menu .p-menuitem > .p-menuitem-content {
-  color: #3f3f46;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: 0.75rem 1rem;
-  user-select: none;
-}
-
-.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: #71717a;
-  margin-right: 0.5rem;
-}
-
-.p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-menu .p-menuitem.p-highlight > .p-menuitem-content {
-  color: #3f3f46;
-  background: #f4f4f5;
-}
-
-.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: #f4f4f5;
-}
-
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: #18181b;
-  background: #e5e7eb;
-}
-
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #18181b;
-}
-
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-menu.p-menu-overlay {
-  background: #ffffff;
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  color: #3f3f46;
-  background: #ffffff;
-  font-weight: 600;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-
-.p-menu .p-menuitem-separator {
-  border-top: 1px solid #f3f4f6;
-  margin: 0.25rem 0;
-}
-
-.p-menubar {
-  padding: 1rem;
-  background: #fafafa;
-  color: #3f3f46;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.375rem;
-}
-
-.p-menubar .p-menubar-root-list {
-  outline: 0 none;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
-  color: #3f3f46;
-  transition: none;
-  border-radius: 0.375rem;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: 0.75rem 1rem;
-  user-select: none;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: #71717a;
-  margin-right: 0.5rem;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-  margin-left: 0.5rem;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-menubar
-  .p-menubar-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-menubar
-  .p-menubar-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-menubar
-  .p-menubar-root-list
-  > .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-menubar .p-menuitem > .p-menuitem-content {
-  color: #3f3f46;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: 0.75rem 1rem;
-  user-select: none;
-}
-
-.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: #71717a;
-  margin-right: 0.5rem;
-}
-
-.p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
-  color: #3f3f46;
-  background: #f4f4f5;
-}
-
-.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: #f4f4f5;
-}
-
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: #18181b;
-  background: #e5e7eb;
-}
-
-.p-menubar
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-menubar
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-menubar
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #18181b;
-}
-
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-menubar
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
-.p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-menubar .p-submenu-list {
-  padding: 0.25rem 0;
-  background: #ffffff;
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  width: 12.5rem;
-}
-
-.p-menubar .p-submenu-list .p-menuitem-separator {
-  border-top: 1px solid #f3f4f6;
-  margin: 0.25rem 0;
-}
-
-.p-menubar .p-submenu-list .p-submenu-icon {
-  font-size: 0.875rem;
-}
-
-@media screen and (max-width: 960px) {
-  .p-menubar {
-    position: relative;
-  }
-
-  .p-menubar .p-menubar-button {
-    display: flex;
-    width: 2rem;
-    height: 2rem;
-    color: #71717a;
-    border-radius: 50%;
-    transition: none;
-  }
-
-  .p-menubar .p-menubar-button:hover {
-    color: #71717a;
-    background: #f4f4f5;
-  }
-
-  .p-menubar .p-menubar-button:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: 0 0 0 1px #6366f1;
-  }
-
-  .p-menubar .p-menubar-root-list {
-    position: absolute;
-    display: none;
-    padding: 0.25rem 0;
-    background: #ffffff;
-    border: 0 none;
-    box-shadow:
-      0 0 #0000,
-      0 0 #0000,
-      0 10px 15px -3px rgba(0, 0, 0, 0.1),
-      0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    width: 100%;
-  }
-
-  .p-menubar .p-menubar-root-list .p-menuitem-separator {
-    border-top: 1px solid #f3f4f6;
-    margin: 0.25rem 0;
-  }
-
-  .p-menubar .p-menubar-root-list .p-submenu-icon {
-    font-size: 0.875rem;
-  }
-
-  .p-menubar .p-menubar-root-list .p-menuitem {
-    width: 100%;
-    position: static;
-  }
-
-  .p-menubar .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-    margin-left: auto;
-    transition: transform 0.2s;
-  }
-
-  .p-menubar
-    .p-menubar-root-list
-    .p-menuitem.p-menuitem-active
-    > .p-menuitem-content
-    > .p-menuitem-link
-    > .p-submenu-icon {
-    transform: rotate(-180deg);
-  }
-
-  .p-menubar .p-menubar-root-list .p-submenu-list {
-    width: 100%;
-    position: static;
-    box-shadow: none;
-    border: 0 none;
-  }
-
-  .p-menubar .p-menubar-root-list .p-submenu-list .p-submenu-icon {
-    transition: transform 0.2s;
-    transform: rotate(90deg);
-  }
-
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem-active
-    > .p-menuitem-content
-    > .p-menuitem-link
-    > .p-submenu-icon {
-    transform: rotate(-90deg);
-  }
-
-  .p-menubar .p-menubar-root-list .p-menuitem {
-    width: 100%;
-    position: static;
-  }
-
-  .p-menubar .p-menubar-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
-    padding-left: 2.25rem;
-  }
-
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-menuitem-content
-    .p-menuitem-link {
-    padding-left: 3.75rem;
-  }
-
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-menuitem-content
-    .p-menuitem-link {
-    padding-left: 5.25rem;
-  }
-
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-menuitem-content
-    .p-menuitem-link {
-    padding-left: 6.75rem;
-  }
-
-  .p-menubar
-    .p-menubar-root-list
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-submenu-list
-    .p-menuitem
-    .p-menuitem-content
-    .p-menuitem-link {
-    padding-left: 8.25rem;
-  }
-
-  .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
-    display: flex;
-    flex-direction: column;
-    top: 100%;
-    left: 0;
-    z-index: 1;
-  }
-}
-
-.p-panelmenu .p-panelmenu-header {
-  outline: 0 none;
-}
-
-.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
-  border: 1px solid #e5e7eb;
-  color: #3f3f46;
-  background: #fafafa;
-  border-radius: 0.375rem;
-  transition: none;
-}
-
-.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action {
-  padding: 1.25rem;
-  font-weight: 700;
-}
-
-.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-submenu-icon {
-  margin-right: 0.5rem;
-}
-
-.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-action .p-menuitem-icon {
-  margin-right: 0.5rem;
-}
-
-.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus .p-panelmenu-header-content {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #6366f1;
-}
-
-.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
-  background: #f4f4f5;
-  border-color: #e5e7eb;
-  color: #3f3f46;
-}
-
-.p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
-  background: #fafafa;
-  border-color: #e5e7eb;
-  color: #3f3f46;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  margin-bottom: 0;
-}
-
-.p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
-  border-color: #e5e7eb;
-  background: #f4f4f5;
-  color: #3f3f46;
-}
-
-.p-panelmenu .p-panelmenu-content {
-  padding: 0.25rem 0;
-  border: 1px solid #e5e7eb;
-  background: #ffffff;
-  color: #3f3f46;
-  border-top: 0;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
-  outline: 0 none;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
-  color: #3f3f46;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: 0.75rem 1rem;
-  user-select: none;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: #71717a;
-  margin-right: 0.5rem;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
-  color: #3f3f46;
-  background: #f4f4f5;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: #f4f4f5;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: #18181b;
-  background: #e5e7eb;
-}
-
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #18181b;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-panelmenu
-  .p-panelmenu-content
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  margin-right: 0.5rem;
-}
-
-.p-panelmenu .p-panelmenu-content .p-menuitem-separator {
-  border-top: 1px solid #f3f4f6;
-  margin: 0.25rem 0;
-}
-
-.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
-  padding: 0 0 0 1rem;
-}
-
-.p-panelmenu .p-panelmenu-panel {
-  margin-bottom: 0;
-}
-
-.p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
-  border-radius: 0;
-}
-
-.p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
-  border-radius: 0;
-}
-
-.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
-  border-top: 0 none;
-}
-
-.p-panelmenu
-  .p-panelmenu-panel:not(:first-child)
-  .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover
-  .p-panelmenu-header-content,
-.p-panelmenu
-  .p-panelmenu-panel:not(:first-child)
-  .p-panelmenu-header:not(.p-disabled).p-highlight:hover
-  .p-panelmenu-header-content {
-  border-top: 0 none;
-}
-
-.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-}
-
-.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
-.p-steps .p-steps-item .p-menuitem-link {
-  background: transparent;
-  transition: none;
-  border-radius: 0.375rem;
-  background: #ffffff;
-}
-
-.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  color: #3f3f46;
-  border: 1px solid #f4f4f5;
-  background: #ffffff;
-  min-width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
-  font-size: 1.143rem;
-  z-index: 1;
-  border-radius: 50%;
-}
-
-.p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  margin-top: 0.5rem;
-  color: #71717a;
-}
-
-.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 600;
-  color: #3f3f46;
-}
-
-.p-steps .p-steps-item:before {
-  content: ' ';
-  border-top: 1px solid #f3f4f6;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -1rem;
-}
-
-.p-tabmenu .p-tabmenu-nav {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-width: 0 0 2px 0;
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
-  margin-right: 0;
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  border: solid #e5e7eb;
-  border-width: 0 0 2px 0;
-  border-color: transparent transparent #e5e7eb transparent;
-  background: #ffffff;
-  color: #71717a;
-  padding: 1.25rem;
-  font-weight: 700;
-  border-top-right-radius: 0.375rem;
-  border-top-left-radius: 0.375rem;
-  transition: none;
-  margin: 0 0 -2px 0;
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  margin-right: 0.5rem;
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 1px #6366f1;
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background: #ffffff;
-  border-color: #71717a;
-  color: #71717a;
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background: #ffffff;
-  border-color: #8c1515;
-  color: #8c1515;
-}
-
-.p-tieredmenu {
-  padding: 0.25rem 0;
-  background: #ffffff;
-  color: #3f3f46;
-  border: 1px solid #e5e7eb;
-  border-radius: 0.375rem;
-  width: 12.5rem;
-}
-
-.p-tieredmenu.p-tieredmenu-overlay {
-  background: #ffffff;
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.p-tieredmenu .p-tieredmenu-root-list {
-  outline: 0 none;
-}
-
-.p-tieredmenu .p-submenu-list {
-  padding: 0.25rem 0;
-  background: #ffffff;
-  border: 0 none;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-}
-
-.p-tieredmenu .p-menuitem > .p-menuitem-content {
-  color: #3f3f46;
-  transition: none;
-  border-radius: 0;
-}
-
-.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
-  padding: 0.75rem 1rem;
-  user-select: none;
-}
-
-.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
-  color: #71717a;
-  margin-right: 0.5rem;
-}
-
-.p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
-  color: #3f3f46;
-  background: #f4f4f5;
-}
-
-.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
-  color: #3f3f46;
-}
-
-.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
-.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
-  background: #f4f4f5;
-}
-
-.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
-  color: #18181b;
-  background: #e5e7eb;
-}
-
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
-  > .p-menuitem-content
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #18181b;
-}
-
-.p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
-  color: #18181b;
-  background: #f4f4f5;
-}
-
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-text {
-  color: #18181b;
-}
-
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-menuitem-icon,
-.p-tieredmenu
-  .p-menuitem:not(.p-highlight):not(.p-disabled)
-  > .p-menuitem-content:hover
-  .p-menuitem-link
-  .p-submenu-icon {
-  color: #71717a;
-}
-
-.p-tieredmenu .p-menuitem-separator {
-  border-top: 1px solid #f3f4f6;
-  margin: 0.25rem 0;
-}
-
-.p-tieredmenu .p-submenu-icon {
-  font-size: 0.875rem;
-}
-
-.p-inline-message {
-  padding: 0.75rem 0.75rem;
-  margin: 0;
-  border-radius: 0.375rem;
-}
-
-.p-inline-message.p-inline-message-info {
-  background: #eff6ff;
-  border: none;
-  border-width: 0px;
-  color: #2563eb;
-}
-
-.p-inline-message.p-inline-message-info .p-inline-message-icon {
-  color: #2563eb;
-}
-
-.p-inline-message.p-inline-message-success {
-  background: #ecfdf5;
-  border: none;
-  border-width: 0px;
-  color: #059669;
-}
-
-.p-inline-message.p-inline-message-success .p-inline-message-icon {
-  color: #059669;
-}
-
-.p-inline-message.p-inline-message-warn {
-  background: #fef3c7;
-  border: none;
-  border-width: 0px;
-  color: #d97706;
-}
-
-.p-inline-message.p-inline-message-warn .p-inline-message-icon {
-  color: #d97706;
-}
-
-.p-inline-message.p-inline-message-error {
-  background: #fef3c7;
-  border: none;
-  border-width: 0px;
-  color: #dc2626;
-}
-
-.p-inline-message.p-inline-message-error .p-inline-message-icon {
-  color: #dc2626;
-}
-
-.p-inline-message .p-inline-message-icon {
-  font-size: 1rem;
-  margin-right: 0.5rem;
-}
-
-.p-inline-message .p-inline-message-text {
-  font-size: 1rem;
-}
-
-.p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
-  margin-right: 0;
-}
-
-.p-message {
-  margin: 1rem 0;
-  border-radius: 0.375rem;
-}
-
-.p-message .p-message-wrapper {
-  padding: 1.25rem 1.75rem;
-}
-
-.p-message .p-message-close {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: transparent;
-  transition: none;
-}
-
-.p-message .p-message-close:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.p-message .p-message-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-message.p-message-info {
-  background: #eff6ff;
-  border: none;
-  border-width: 0 0 0 6px;
-  color: #2563eb;
-}
-
-.p-message.p-message-info .p-message-icon {
-  color: #2563eb;
-}
-
-.p-message.p-message-info .p-message-close {
-  color: #2563eb;
-}
-
-.p-message.p-message-success {
-  background: #ecfdf5;
-  border: none;
-  border-width: 0 0 0 6px;
-  color: #059669;
-}
-
-.p-message.p-message-success .p-message-icon {
-  color: #059669;
-}
-
-.p-message.p-message-success .p-message-close {
-  color: #059669;
-}
-
-.p-message.p-message-warn {
-  background: #fef3c7;
-  border: none;
-  border-width: 0 0 0 6px;
-  color: #d97706;
-}
-
-.p-message.p-message-warn .p-message-icon {
-  color: #d97706;
-}
-
-.p-message.p-message-warn .p-message-close {
-  color: #d97706;
-}
-
-.p-message.p-message-error {
-  background: #fef3c7;
-  border: none;
-  border-width: 0 0 0 6px;
-  color: #dc2626;
-}
-
-.p-message.p-message-error .p-message-icon {
-  color: #dc2626;
-}
-
-.p-message.p-message-error .p-message-close {
-  color: #dc2626;
-}
-
-.p-message .p-message-text {
-  font-size: 1rem;
-  font-weight: 500;
-}
-
-.p-message .p-message-icon {
-  font-size: 1.5rem;
-  margin-right: 0.5rem;
-}
-
-.p-toast {
-  opacity: 0.9;
-}
-
-.p-toast .p-toast-message {
-  margin: 0 0 1rem 0;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  border-radius: 0.375rem;
-}
-
-.p-toast .p-toast-message .p-toast-message-content {
-  padding: 1rem;
-  border-width: 0 0 0 6px;
-}
-
-.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
-  margin: 0 0 0 1rem;
-}
-
-.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
-  font-size: 2rem;
-}
-
-.p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
-  font-weight: 700;
-}
-
-.p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
-  margin: 0.5rem 0 0 0;
-}
-
-.p-toast .p-toast-message .p-toast-icon-close {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: transparent;
-  transition: none;
-}
-
-.p-toast .p-toast-message .p-toast-icon-close:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.p-toast .p-toast-message .p-toast-icon-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-toast .p-toast-message.p-toast-message-info {
-  background: #eff6ff;
-  border: none;
-  border-width: 0 0 0 6px;
-  color: #2563eb;
-}
-
-.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
-  color: #2563eb;
-}
-
-.p-toast .p-toast-message.p-toast-message-success {
-  background: #ecfdf5;
-  border: none;
-  border-width: 0 0 0 6px;
-  color: #059669;
-}
-
-.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
-  color: #059669;
-}
-
-.p-toast .p-toast-message.p-toast-message-warn {
-  background: #fef3c7;
-  border: none;
-  border-width: 0 0 0 6px;
-  color: #d97706;
-}
-
-.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
-  color: #d97706;
-}
-
-.p-toast .p-toast-message.p-toast-message-error {
-  background: #fef3c7;
-  border: none;
-  border-width: 0 0 0 6px;
-  color: #dc2626;
-}
-
-.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
-.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
-  color: #dc2626;
-}
-
-.p-galleria .p-galleria-close {
-  margin: 0.5rem;
-  background: transparent;
-  color: #fafafa;
-  width: 4rem;
-  height: 4rem;
-  transition: none;
-  border-radius: 50%;
-}
-
-.p-galleria .p-galleria-close .p-galleria-close-icon {
-  font-size: 2rem;
-}
-
-.p-galleria .p-galleria-close:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fafafa;
-}
-
-.p-galleria .p-galleria-item-nav {
-  background: transparent;
-  color: #fafafa;
-  width: 4rem;
-  height: 4rem;
-  transition: none;
-  border-radius: 0.375rem;
-  margin: 0 0.5rem;
-}
-
-.p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon,
-.p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
-  font-size: 2rem;
-}
-
-.p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fafafa;
-}
-
-.p-galleria .p-galleria-caption {
-  background: rgba(0, 0, 0, 0.5);
-  color: #fafafa;
-  padding: 1rem;
-}
-
-.p-galleria .p-galleria-indicators {
-  padding: 1rem;
-}
-
-.p-galleria .p-galleria-indicators .p-galleria-indicator button {
-  background-color: #f4f4f5;
-  width: 1rem;
-  height: 1rem;
-  transition: none;
-  border-radius: 50%;
-}
-
-.p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
-  background: #e5e7eb;
-}
-
-.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator,
-.p-galleria.p-galleria-indicators-top .p-galleria-indicator {
-  margin-right: 0.5rem;
-}
-
-.p-galleria.p-galleria-indicators-left .p-galleria-indicator,
-.p-galleria.p-galleria-indicators-right .p-galleria-indicator {
-  margin-bottom: 0.5rem;
-}
-
-.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button {
-  background: rgba(255, 255, 255, 0.4);
-}
-
-.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover {
-  background: rgba(255, 255, 255, 0.6);
-}
-
-.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background: #eef2ff;
-  color: #312e81;
-}
-
-.p-galleria .p-galleria-thumbnail-container {
-  background: rgba(0, 0, 0, 0.9);
-  padding: 1rem 0.25rem;
-}
-
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  margin: 0.5rem;
-  background-color: transparent;
-  color: #fafafa;
-  width: 2rem;
-  height: 2rem;
-  transition: none;
-  border-radius: 50%;
-}
-
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover,
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fafafa;
-}
-
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-galleria-mask {
-  --maskbg: rgba(0, 0, 0, 0.9);
-}
-
-.p-image-mask {
-  --maskbg: rgba(0, 0, 0, 0.9);
-}
-
-.p-image-preview-indicator {
-  background-color: transparent;
-  color: #f8f9fa;
-  transition: none;
-}
-
-.p-image-preview-container:hover > .p-image-preview-indicator {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.p-image-toolbar {
-  padding: 1rem;
-}
-
-.p-image-action.p-link {
-  color: #f8f9fa;
-  background-color: transparent;
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  transition: none;
-  margin-right: 0.5rem;
-}
-
-.p-image-action.p-link:last-child {
-  margin-right: 0;
-}
-
-.p-image-action.p-link:hover {
-  color: #f8f9fa;
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.p-image-action.p-link i {
-  font-size: 1.5rem;
-}
-
-.p-avatar {
-  background-color: #e5e7eb;
-  border-radius: 0.375rem;
-}
-
-.p-avatar.p-avatar-lg {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.5rem;
-}
-
-.p-avatar.p-avatar-lg .p-avatar-icon {
-  font-size: 1.5rem;
-}
-
-.p-avatar.p-avatar-xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: 2rem;
-}
-
-.p-avatar.p-avatar-xl .p-avatar-icon {
-  font-size: 2rem;
-}
-
-.p-avatar-group .p-avatar {
-  border: 2px solid #ffffff;
-}
-
-.p-badge {
-  background: #8c1515;
-  color: #ffffff;
-  font-size: 0.75rem;
-  font-weight: 700;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
-}
-
-.p-badge.p-badge-secondary {
-  background-color: #64748b;
-  color: #ffffff;
-}
-
-.p-badge.p-badge-success {
-  background-color: #22c55e;
-  color: #ffffff;
-}
-
-.p-badge.p-badge-info {
-  background-color: #3b82f6;
-  color: #ffffff;
-}
-
-.p-badge.p-badge-warning {
-  background-color: #f59e0b;
-  color: #ffffff;
-}
-
-.p-badge.p-badge-danger {
-  background-color: #ef4444;
-  color: #ffffff;
-}
-
-.p-badge.p-badge-lg {
-  font-size: 1.125rem;
-  min-width: 2.25rem;
-  height: 2.25rem;
-  line-height: 2.25rem;
-}
-
-.p-badge.p-badge-xl {
-  font-size: 1.5rem;
-  min-width: 3rem;
-  height: 3rem;
-  line-height: 3rem;
-}
-
-.p-inplace .p-inplace-display {
-  padding: 0.75rem 0.75rem;
-  border-radius: 0.375rem;
-  transition: none;
-}
-
-.p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #6366f1;
-}
-
-.p-progressbar {
-  border: 0 none;
-  height: 1.5rem;
-  background: #e5e7eb;
-  border-radius: 0.375rem;
-}
-
-.p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #8c1515;
-}
-
-.p-progressbar .p-progressbar-label {
-  color: #ffffff;
-  line-height: 1.5rem;
-}
-
-.p-scrolltop {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  box-shadow:
-    0 0 #0000,
-    0 0 #0000,
-    0 10px 15px -3px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  transition: none;
-}
-
-.p-scrolltop.p-link {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-.p-scrolltop.p-link:hover {
-  background: rgba(0, 0, 0, 0.8);
-}
-
-.p-scrolltop .p-scrolltop-icon {
-  font-size: 1.5rem;
-  color: #fafafa;
-}
-
-.p-skeleton {
-  background-color: #f4f4f5;
-  border-radius: 0.375rem;
-}
-
-.p-skeleton:after {
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
-}
-
-.p-tag {
-  background: #8c1515;
-  color: #ffffff;
-  font-size: 0.75rem;
-  font-weight: 700;
-  padding: 0.25rem 0.4rem;
-  border-radius: 0.375rem;
-}
-
-.p-tag.p-tag-success {
-  background-color: #22c55e;
-  color: #ffffff;
-}
-
-.p-tag.p-tag-info {
-  background-color: #3b82f6;
-  color: #ffffff;
-}
-
-.p-tag.p-tag-warning {
-  background-color: #f59e0b;
-  color: #ffffff;
-}
-
-.p-tag.p-tag-danger {
-  background-color: #ef4444;
-  color: #ffffff;
-}
-
-.p-tag .p-tag-icon {
-  margin-right: 0.25rem;
-  font-size: 0.75rem;
-}
-
-.p-terminal {
-  background: #ffffff;
-  color: #3f3f46;
-  border: 1px solid #e5e7eb;
-  padding: 1.25rem;
-}
-
-.p-terminal .p-terminal-input {
-  font-size: 1rem;
-  font-family:
-    Inter,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
-}
-
-/* Customizations to the designer theme should be defined here */
-
-.p-highlight {
-  font-weight: 600;
-}
-
-.p-paginator .p-paginator-pages .p-paginator-page {
-  margin-left: -1px;
-}
-
-.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  border-color: #8c1515;
-  margin-right: 1px;
-}
-
-.p-paginator .p-paginator-current {
-  border: 0 none;
-}
-
-.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-  background-color: #8c1515;
-}
-
-.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background-color: #8c1515;
-}
-
-.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #8c1515;
-}
-
-.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #8c1515;
-}
diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index 4f15de341..6c496319a 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -7,35 +7,7 @@
 // Defaults
 @import 'components/defaults';
 
-// Components
-
-@import 'components/dataview';
-@import 'components/datatable';
-@import 'components/datepicker';
-@import 'components/dropdown';
-
-@import 'components/editor';
-
-@import 'components/input-group';
-@import 'components/input-switch';
-
-@import 'components/listbox';
-
-@import 'components/multiselect';
-
-@import 'components/passwordpanel';
-
-@import 'components/selectbutton';
-@import 'components/splitbutton';
-@import 'components/speeddial';
-
-@import 'components/tabview';
-@import 'components/togglebutton';
-
-// Custom components
-@import 'components/tabview-games';
 @import 'components/navbar';
-@import 'components/sidebar';
 
 // Routes
 @import 'routes/signin';
diff --git a/src/components/CardAdministration.vue b/src/components/CardAdministration.vue
index 62b2faae3..b0e71cbfb 100644
--- a/src/components/CardAdministration.vue
+++ b/src/components/CardAdministration.vue
@@ -586,10 +586,10 @@ onMounted(() => {
   display: flex;
   flex-direction: row;
   gap: 2rem;
-  padding: 1rem;
+  padding: 0.5rem;
 
   .card-admin-chart {
-    width: 12ch;
+    width: 11ch;
   }
 
   .card-admin-body {
diff --git a/src/components/ConsentModal.vue b/src/components/ConsentModal.vue
index b637e4ad1..53c4ef14d 100644
--- a/src/components/ConsentModal.vue
+++ b/src/components/ConsentModal.vue
@@ -1,6 +1,6 @@
 <template>
   <PvToast />
-  <PvConfirmDialog group="templating" class="confirm" :close-on-escape="false">
+  <PvConfirmDialog group="templating" :close-on-escape="false">
     <template #message>
       <div class="scrolling-box">
         <!-- eslint-disable-next-line vue/no-v-html -->
@@ -87,6 +87,10 @@ onMounted(() => {
   display: none !important;
 }
 
+button.p-button.p-component.p-confirmdialog-reject-button {
+  display: none !important;
+}
+
 .confirm .p-dialog-header-close {
   display: none !important;
 }
diff --git a/src/components/ConsentPicker.vue b/src/components/ConsentPicker.vue
index 3f2e23d0e..91466db20 100644
--- a/src/components/ConsentPicker.vue
+++ b/src/components/ConsentPicker.vue
@@ -91,7 +91,7 @@
                 :class="['cursor-pointer', { 'pointer-events-none': !disableIfNotDefault }]"
                 @change="checkBoxStatus"
               />
-              <i class="pi pi-phone" style="font-size: 1rem; width: 8%"></i>
+              <i class="pi pi-microphone" style="font-size: 1rem; width: 8%"></i>
               <label
                 :class="['mr-3 p-0 flex cursor-pointer', { 'pointer-events-none': !disableIfNotDefault }]"
                 style="width: 80%"
@@ -201,7 +201,7 @@
               </div>
               <div class="flex align-items-center justify-content-center">
                 <PvButton
-                  class="border-circle w-6rem h-6rem m-2 surface-hover text-primary border-none font-bold flex align-items-center justify-content-center hover:text-100 hover:bg-primary"
+                  class="border-circle w-6rem h-6rem m-2 surface-hover text-primary border-none font-bold flex align-items-center justify-content-center hover:text-white hover:bg-primary"
                   style="height: 6rem; width: 6rem"
                   label="Show Consent"
                   @click="seeConsent(result.consent[0])"
@@ -229,7 +229,7 @@
               </div>
               <div class="flex align-items-center justify-content-center">
                 <PvButton
-                  class="border-circle w-6rem h-6rem m-2 surface-hover text-primary border-none font-bold flex align-items-center justify-content-center hover:text-100 hover:bg-primary"
+                  class="border-circle w-6rem h-6rem m-2 surface-hover text-primary border-none font-bold flex align-items-center justify-content-center hover:text-white hover:bg-primary"
                   label="Show Assent"
                   @click="seeConsent(result.assent[0])"
                 />
diff --git a/src/components/CreateOrgs.vue b/src/components/CreateOrgs.vue
index ccfc54a35..f96764531 100644
--- a/src/components/CreateOrgs.vue
+++ b/src/components/CreateOrgs.vue
@@ -123,15 +123,15 @@
           </div>
           <div class="grid mt-3">
             <div class="col-12">Search for a {{ orgType.singular }} address:</div>
-            <div class="col-12 md:col-6 lg:col-6 xl:col-6 p-inputgroup">
+            <div class="w-9">
               <span class="p-inputgroup-addon">
-                <i class="pi pi-map"></i>
+                <i class="pi pi-map mr-3 ml-5 text-primary"></i>
               </span>
               <GMapAutocomplete
                 :options="{
                   fields: ['address_components', 'formatted_address', 'place_id', 'url'],
                 }"
-                class="p-inputtext p-component w-full"
+                class="p-inputtext p-component w-8"
                 data-cy="input-address"
                 @place_changed="setAddress"
               >
@@ -161,7 +161,7 @@
                 :options="allTags"
                 :suggestions="tagSuggestions"
                 name="tags"
-                class="w-full"
+                class="w-full card"
                 data-cy="input-autocomplete"
                 @complete="searchTags"
               />
@@ -569,23 +569,6 @@ button.p-button.p-component.p-button-icon-only.p-autocomplete-dropdown {
   }
 }
 
-.p-autocomplete-token {
-  display: inline-flex;
-  align-items: center;
-  flex: 0 0 auto;
-  background: var(--primary-color);
-  padding: 0.25rem;
-  border-radius: 0.35rem;
-  color: white;
-  margin: 0.05rem;
-}
-
-.p-autocomplete-token-icon,
-g {
-  margin-left: 0.5rem;
-  color: white;
-}
-
 #required-asterisk {
   color: #ff0000;
 }
diff --git a/src/components/ListOrgs.vue b/src/components/ListOrgs.vue
index c566f2e28..48841b623 100644
--- a/src/components/ListOrgs.vue
+++ b/src/components/ListOrgs.vue
@@ -368,3 +368,11 @@ watch([selectedDistrict, selectedSchool], () => {
   tableKey.value += 1;
 });
 </script>
+<style>
+.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+  padding-top: 0.3rem !important;
+  padding-bottom: 0.3rem !important;
+}
+</style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index f651daf56..200284e41 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -22,7 +22,7 @@
             </template>
             <template #end>
               <div class="flex gap-2 align-items-center justify-content-center mr-3">
-                <div v-if="isWideScreen" class="nav-user-wrapper flex align-items-center gap-2 bg-gray-100">
+                <div v-if="isWideScreen" class="nav-user-wrapper flex align-items-center gap-2 p-2 bg-gray-100">
                   <div class="text-lg font-bold text-gray-600">
                     {{ userDisplayName }}
                   </div>
@@ -30,7 +30,7 @@
                     <PvButton
                       text
                       data-cy="button-sign-out"
-                      class="no-underline h-2 p-1 m-0 text-primary border-none border-round h-2rem text-sm hover:bg-red-900 hover:text-white"
+                      class="no-underline p-2 m-0 text-primary border-none border-round h-2rem text-sm hover:bg-red-900 hover:text-white"
                       >{{ $t('navBar.signOut') }}
                     </PvButton>
                   </router-link>
@@ -44,12 +44,13 @@
                     >
                   </router-link>
                 </div>
-                <div class="nav-user-wrapper bg-gray-100">
+                <div class="nav-user-wrapper bg-gray-100 p-0" v-tooltip="'Click to see your Information'">
                   <router-link :to="{ name: 'ProfileInfo' }"
                     ><button
-                      class="no-underline p-1 m-0 text-primary border-none border-round cursor-pointer h-2rem w-2rem text-sm hover:bg-red-900 hover:text-white"
+                      class="no-underline text-primary border-none border-round cursor-pointer m-0 text-sm hover:bg-red-900 hover:text-white"
+                      style="padding: 0.9rem"
                     >
-                      <i class="pi pi-cog"></i></button
+                      <i class="pi pi-cog m-0 p-0"></i></button
                   ></router-link>
                 </div>
                 <div class="my-2">
diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index 31bfd5295..53860ea4b 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -65,7 +65,7 @@
     </div>
     <div class="flex flex-column">
       <span style="height: 10px">
-        <div class="relative flex justify-content-end mt-0 mr-2 z-1" style="top: 25px; width: 20%; left: 80%">
+        <div class="relative flex justify-content-end mt-0 mr-2 z-1" style="top: 25px; width: 20%; left: 79%">
           <slot />
         </div>
       </span>
@@ -162,7 +162,7 @@
                     v-tooltip.right="colData.tooltip"
                     severity="secondary"
                     text
-                    class="border-none border-round bg-white text-primary p-2 hover:surface-200"
+                    class="border-none border-round bg-white pl-2 text-primary p-2 hover:surface-200"
                     :label="colData.routeParams.buttonLabel"
                     :aria-label="col.routeTooltip"
                     :icon="col.routeIcon"
@@ -236,11 +236,11 @@
                   option-group-children="items"
                   :options="taskFilterOptions"
                   data-cy="score-filter-dropdown"
-                  style="margin-bottom: 0.5rem"
+                  style="margin-bottom: 0.5rem; width: 17vh; height: 4vh"
                 >
                   <template #option="{ option }">
-                    <div class="flex align-items-center">
-                      <div v-if="supportLevelColors[option]" class="flex gap-2">
+                    <div class="flex align-items-center p-0">
+                      <div v-if="supportLevelColors[option]" class="flex gap-2 p-0">
                         <div class="small-circle tooltip" :style="`background-color: ${supportLevelColors[option]};`" />
                         <span class="tooltiptext">{{ option }}</span>
                       </div>
@@ -313,7 +313,7 @@
                   type="button"
                   text
                   icon="pi pi-times"
-                  class="p-2 bg-primary text-white border-round border-none hover:bg-red-900"
+                  class="pl-5 pr-5 bg-primary text-white border-round border-none hover:bg-red-900"
                   severity="primary"
                   @click="filterCallback()"
                   >Clear</PvButton
@@ -324,7 +324,7 @@
               <PvButton
                 type="button"
                 icon="pi pi-times"
-                class="px-2 p-2 bg-primary text-white border-round border-none hover:bg-red-900"
+                class="pl-5 pr-5 bg-primary text-white border-round border-none hover:bg-red-900"
                 severity="primary"
                 @click="filterCallback()"
                 >Apply
@@ -473,7 +473,7 @@ const exportCSV = (exportSelected) => {
 };
 
 const compressedRows = ref(false);
-const padding = '1rem 1.5rem';
+const padding = '0rem 0.5rem 0rem 0.5rem';
 
 function increasePadding() {
   if (!countForVisualize.value) {
@@ -481,7 +481,7 @@ function increasePadding() {
     rowViewMode.value = 'Compact View';
   } else {
     rowViewMode.value = 'Expand View';
-    document.documentElement?.style.setProperty('--padding-value', '0 1.5rem 0 1.5rem');
+    document.documentElement?.style.setProperty('--padding-value', '0.5rem 1.5rem 0.5rem 1.5rem');
   }
   countForVisualize.value = !countForVisualize.value;
 }
@@ -651,7 +651,7 @@ g {
   text-align: left;
   border: 1px solid var(--surface-c);
   border-width: 0 0 1px 0;
-  padding: var(--padding-value, '1px 1.5rem 2px 1.5rem');
+  padding: var(--padding-value, '1px 1.5rem 2px 1.5rem') !important;
   margin-top: 5px;
   margin-bottom: 5px;
 }
@@ -681,15 +681,8 @@ button.p-column-filter-menu-button.p-link:hover {
   background: var(--surface-500);
 }
 
-.compressed .p-datatable .p-datatable-tbody > tr > td {
-  text-align: left;
-  border: 1px solid var(--surface-c);
-  border-width: 0 0 3px 0;
-  padding: 1px 1.5rem 2px 1.5rem;
-}
-
 .filter-content {
-  width: 12rem;
+  width: 1rem;
 }
 
 .filter-button-override .p-column-filter-menu-button:not(.p-column-filter-menu-button-active) {
@@ -726,4 +719,10 @@ svg.p-icon.p-button-icon:hover {
 .scrollable-container {
   scrollbar-color: var(--primary-color) white;
 }
+.filter-content {
+  width: 13rem !important;
+}
+.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  padding: 0rem 0.5rem 0rem 0.5rem;
+}
 </style>
diff --git a/src/components/auth/RegisterParent.vue b/src/components/auth/RegisterParent.vue
index 0010cbd58..a322d8055 100644
--- a/src/components/auth/RegisterParent.vue
+++ b/src/components/auth/RegisterParent.vue
@@ -8,6 +8,7 @@
             v-model="v$.firstName.$model"
             name="firstName"
             :class="{ 'p-invalid': v$.firstName.$invalid && submitted }"
+            style="width: 25vh"
             aria-describedby="first-name-error"
           />
           <span v-if="v$.firstName.$error && submitted">
@@ -25,6 +26,7 @@
             v-model="v$.lastName.$model"
             name="lastName"
             :class="{ 'p-invalid': v$.firstName.$invalid && submitted }"
+            style="width: 25vh"
             aria-describedby="first-name-error"
           />
           <span v-if="v$.lastName.$error && submitted">
@@ -47,6 +49,7 @@
             type="email"
             :class="{ 'p-invalid': v$.ParentEmail.$invalid && submitted }"
             aria-describedby="username-or-email-error"
+            style="width: 55vh"
           />
         </div>
         <span v-if="v$.ParentEmail.$error && submitted">
@@ -306,7 +309,7 @@ const isNextButtonDisabled = computed(() => {
   margin-bottom: 0.75rem;
 }
 .required {
-  color: var(--bright-red);
+  color: var(--primary-color);
 }
 label {
   width: 100%;
diff --git a/src/components/auth/RegisterStudent.vue b/src/components/auth/RegisterStudent.vue
index 1fcbfddb1..1847a4d66 100644
--- a/src/components/auth/RegisterStudent.vue
+++ b/src/components/auth/RegisterStudent.vue
@@ -61,13 +61,14 @@
         </section>
         <section class="form-section">
           <div class="p-input-icon-right">
-            <label for="studentUsername">Student Username <span class="required">*</span></label>
+            <label for="studentUsername">Student Username <span class="required mr-2">*</span></label>
             <PvInputText
               v-model="student.studentUsername"
               name="studentUsername"
               :class="{
                 'p-invalid': v$.students.$each.$response.$data[outerIndex].studentUsername.$invalid && submitted,
               }"
+              style="width: 50vh"
               aria-describedby="username-error"
             />
           </div>
@@ -139,6 +140,7 @@
                 view="date"
                 date-format="mm/dd/yy"
                 icon="pi pi-calendar text-white p-1"
+                class="w-full"
               />
             </div>
             <div v-else>
@@ -148,6 +150,7 @@
                 view="year"
                 date-format="yy"
                 icon="pi pi-calendar text-white p-1"
+                class="w-full"
               />
             </div>
             <small v-if="v$.students.$each.$response.$data[outerIndex].dob.$invalid && submitted" class="p-error">{{
@@ -164,11 +167,12 @@
               :options="gradeOptions"
               option-label="label"
               option-value="value"
+              style="width: 50vh"
               name="grade"
             />
           </div>
         </section>
-        <PvAccordion>
+        <PvAccordion expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
           <PvAccordionTab header="Optional Info">
             <!--First / Last Name-->
             <section class="form-section">
@@ -199,12 +203,13 @@
                     'p-invalid': v$.students.$each.$response.$data[outerIndex]?.lastName.$invalid,
                   }"
                   aria-describedby="first-name-error"
+                  style="width: 46vh"
                 />
               </div>
             </section>
-            <section class="form-section">
+            <section class="form-section flex flex-column">
               <!--English Language Level-->
-              <div class="mt-4 mb-5">
+              <div class="w-full">
                 <label for="ell">English as a Second Language</label>
                 <PvDropdown
                   v-model="student.ell"
@@ -212,10 +217,11 @@
                   option-label="label"
                   option-value="value"
                   name="ell"
+                  class="w-full"
                 />
               </div>
               <!--Sex-->
-              <div class="mt-4 mb-5">
+              <div class="w-full">
                 <label for="sex">Gender </label>
                 <PvDropdown
                   v-model="student.gender"
@@ -223,12 +229,13 @@
                   option-label="label"
                   option-value="value"
                   name="gender"
+                  class="w-full"
                 />
               </div>
             </section>
-            <section class="form-section">
+            <section class="form-section flex flex-column">
               <!-- Free-Reduced Lunch -->
-              <div class="mt-4 mb-5">
+              <div class="w-full">
                 <label for="stateId">Free-Reduced Lunch </label>
                 <PvDropdown
                   v-model="student.freeReducedLunch"
@@ -236,10 +243,11 @@
                   option-label="label"
                   option-value="value"
                   name="freeReducedLunch"
+                  class="w-full"
                 />
               </div>
               <!-- IEP Status -->
-              <div class="mt-4 mb-5">
+              <div class="w-full">
                 <label for="stateId">IEP Status</label>
                 <PvDropdown
                   v-model="student.IEPStatus"
@@ -247,12 +255,13 @@
                   option-label="label"
                   option-value="value"
                   name="IEPStatus"
+                  class="w-full"
                 />
               </div>
             </section>
-            <section class="form-section">
+            <section class="form-section flex flex-column">
               <!-- Race -->
-              <div class="mt-4 mb-5">
+              <div class="w-full">
                 <label for="race">Race </label>
                 <PvAutoComplete
                   v-model="student.race"
@@ -260,10 +269,11 @@
                   :suggestions="raceOptions"
                   name="race"
                   @complete="searchRaces"
+                  class="w-full"
                 />
               </div>
               <!-- Hispanic Ethinicity -->
-              <div class="mt-4 mb-5">
+              <div class="w-full">
                 <label for="hispanicEthnicity">Hispanic or Latino Ethnicity </label>
                 <PvDropdown
                   v-model="student.hispanicEthnicity"
@@ -271,12 +281,13 @@
                   option-label="label"
                   option-value="value"
                   name="hispanicEthinicity"
+                  class="w-full"
                 />
               </div>
             </section>
             <section class="form-section">
               <!-- Home Language -->
-              <div class="mt-4 mb-5">
+              <div class="w-full">
                 <label for="stateId">Home Language </label>
                 <PvAutoComplete
                   v-model="student.homeLanguage"
@@ -284,6 +295,7 @@
                   :suggestions="languageOptions"
                   name="homeLanguage"
                   @complete="searchLanguages"
+                  class="w-full"
                 />
               </div>
             </section>
@@ -702,7 +714,7 @@ const validateRoarUsername = async () => {
   color: white;
 }
 .required {
-  color: var(--bright-red);
+  color: var(--primary-color);
 }
 .login-title {
   font-size: 26px;
diff --git a/src/components/reports/IndividualScoreReportTask.vue b/src/components/reports/IndividualScoreReportTask.vue
index 0cc71041f..6022fff79 100644
--- a/src/components/reports/IndividualScoreReportTask.vue
+++ b/src/components/reports/IndividualScoreReportTask.vue
@@ -60,7 +60,12 @@
         {{ taskDisplayNames[task.taskId]?.extendedName }}. {{ extendedDescriptions[task.taskId] }}
       </div>
       <div v-if="!rawOnlyTasks.includes(task.taskId)">
-        <PvAccordion class="my-2 w-full" :active-index="expanded ? 0 : null">
+        <PvAccordion
+          class="my-2 w-full"
+          :active-index="expanded ? 0 : null"
+          expandIcon="pi pi-plus"
+          collapseIcon="pi pi-minus"
+        >
           <PvAccordionTab header="Score Breakdown">
             <div v-for="[key, rawScore, rangeMin, rangeMax] in task.scoresArray" :key="key">
               <div class="flex justify-content-between score-table">
diff --git a/src/components/reports/tasks/TaskReport.vue b/src/components/reports/tasks/TaskReport.vue
index 44d89fb22..8b6ccd517 100644
--- a/src/components/reports/tasks/TaskReport.vue
+++ b/src/components/reports/tasks/TaskReport.vue
@@ -1,15 +1,21 @@
 <template>
   <div :id="'tab-view-description-' + taskId" class="flex flex-col items-center justify-center mx-2">
-    <Accordion v-if="taskInfoById[taskId]" class="mb-5 w-full" :active-index="0">
-      <AccordionTab :header="('About ' + taskInfoById[taskId]?.subheader).toUpperCase()">
+    <PvAccordion
+      v-if="taskInfoById[taskId]"
+      class="mb-5 w-full"
+      :active-index="0"
+      expandIcon="pi pi-plus"
+      collapseIcon="pi pi-minus"
+    >
+      <PvAccordionTab :header="('About ' + taskInfoById[taskId]?.subheader).toUpperCase()">
         <div>
           <div style="text-transform: uppercase" class="text-2xl font-bold">{{ taskInfoById[taskId]?.subheader }}</div>
           <!-- The following HTML is from a hard-coded source (below) -->
           <!-- eslint-disable-next-line vue/no-v-html -->
           <p class="mt-1 text-md font-light" v-html="taskInfoById[taskId]?.desc"></p>
         </div>
-      </AccordionTab>
-    </Accordion>
+      </PvAccordionTab>
+    </PvAccordion>
   </div>
   <!-- <div class="grid grid-cols-2 w-full space-around items-center p-3"> -->
   <div v-if="tasksToDisplayGraphs.includes(taskId)" :id="'tab-view-chart-' + taskId" class="chart-toggle-wrapper">
diff --git a/src/pages/HomeParticipant.vue b/src/pages/HomeParticipant.vue
index aef977183..56b0410ef 100644
--- a/src/pages/HomeParticipant.vue
+++ b/src/pages/HomeParticipant.vue
@@ -6,9 +6,11 @@
         <span>{{ $t('homeParticipant.loadingAssignments') }}</span>
       </div>
       <div v-else>
-        <h2 v-if="adminInfo?.length == 1" class="p-float-label dropdown-container">
-          {{ adminInfo.at(0).publicName || adminInfo.at(0).name }}
-        </h2>
+        <PvFloatLabel>
+          <h2 v-if="adminInfo?.length == 1" class="dropdown-container">
+            {{ adminInfo.at(0).publicName || adminInfo.at(0).name }}
+          </h2>
+        </PvFloatLabel>
         <div class="flex flex-row-reverse align-items-end gap-2 justify-content-between">
           <div
             v-if="optionalAssessments.length !== 0"
@@ -25,29 +27,31 @@
           </div>
           <div
             v-if="adminInfo?.length > 0"
-            class="flex flex-row justify-center align-items-center p-float-label dropdown-container gap-4 w-full"
+            class="flex flex-row justify-center align-items-center dropdown-container gap-4 w-full"
           >
             <div class="assignment-select-container flex flex-row justify-content-between justify-content-start">
               <div class="flex flex-column align-content-start justify-content-start w-3">
-                <PvDropdown
-                  v-if="adminInfo.every((admin) => admin.publicName)"
-                  v-model="selectedAdmin"
-                  :options="adminInfo ?? []"
-                  option-label="publicName"
-                  input-id="dd-assignment"
-                  data-cy="dropdown-select-administration"
-                  @change="toggleShowOptionalAssessments"
-                />
-                <PvDropdown
-                  v-else
-                  v-model="selectedAdmin"
-                  :options="adminInfo ?? []"
-                  option-label="name"
-                  input-id="dd-assignment"
-                  data-cy="dropdown-select-administration"
-                  @change="toggleShowOptionalAssessments"
-                />
-                <label for="dd-assignment">{{ $t('homeParticipant.selectAssignment') }}</label>
+                <PvFloatLabel>
+                  <PvDropdown
+                    v-if="adminInfo.every((admin) => admin.publicName)"
+                    v-model="selectedAdmin"
+                    :options="adminInfo ?? []"
+                    option-label="publicName"
+                    input-id="dd-assignment"
+                    data-cy="dropdown-select-administration"
+                    @change="toggleShowOptionalAssessments"
+                  />
+                  <PvDropdown
+                    v-else
+                    v-model="selectedAdmin"
+                    :options="adminInfo ?? []"
+                    option-label="name"
+                    input-id="dd-assignment"
+                    data-cy="dropdown-select-administration"
+                    @change="toggleShowOptionalAssessments"
+                  />
+                  <label for="dd-assignment">{{ $t('homeParticipant.selectAssignment') }}</label>
+                </PvFloatLabel>
               </div>
             </div>
           </div>
diff --git a/src/pages/IndividualReport.vue b/src/pages/IndividualReport.vue
index 8e4b66bf5..8793afee8 100644
--- a/src/pages/IndividualReport.vue
+++ b/src/pages/IndividualReport.vue
@@ -81,7 +81,12 @@
       />
     </div>
     <div id="support-graphic" class="support-wrapper">
-      <PvAccordion class="my-2 w-full" :active-index="expanded ? 0 : null">
+      <PvAccordion
+        class="my-2 w-full"
+        :active-index="expanded ? 0 : null"
+        expandIcon="pi pi-plus"
+        collapseIcon="pi pi-minus"
+      >
         <PvAccordionTab header="Understanding the Scores">
           <div class="flex flex-column align-items-center text-lg">
             <img v-if="!(studentData?.studentData?.grade >= 6)" src="../assets/support-distribution.png" width="650" />
diff --git a/src/pages/ProgressReport.vue b/src/pages/ProgressReport.vue
index c6ca0f4f0..6d9c1ba7a 100644
--- a/src/pages/ProgressReport.vue
+++ b/src/pages/ProgressReport.vue
@@ -661,4 +661,10 @@ onMounted(async () => {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+  padding-top: 0.3rem !important;
+  padding-bottom: 0.3rem !important;
+}
 </style>
diff --git a/src/pages/ScoreReport.vue b/src/pages/ScoreReport.vue
index d772f04a9..b94fbb403 100644
--- a/src/pages/ScoreReport.vue
+++ b/src/pages/ScoreReport.vue
@@ -40,7 +40,7 @@
                 </div>
                 <div v-if="!isLoadingScores">
                   <PvButton
-                    class="flex flex-row p-2 text-sm bg-primary text-white border-none border-round h-2rem text-sm hover:bg-red-900"
+                    class="flex flex-row p-4 text-sm bg-primary text-white border-none border-round h-2rem text-sm hover:bg-red-900"
                     :icon="!exportLoading ? 'pi pi-download mr-2' : 'pi pi-spin pi-spinner mr-2'"
                     :disabled="exportLoading"
                     label="Export To Pdf"
@@ -1404,6 +1404,11 @@ onMounted(async () => {
   }
 }
 
+.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
 .confirm .p-confirm-dialog-reject {
   display: none !important;
 }
diff --git a/src/pages/SignIn.vue b/src/pages/SignIn.vue
index 33f42fc08..c36fa43fd 100644
--- a/src/pages/SignIn.vue
+++ b/src/pages/SignIn.vue
@@ -306,7 +306,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style scoped>
+<style>
 .loading-blur {
   position: fixed;
   top: 0;
@@ -317,4 +317,7 @@ onBeforeUnmount(() => {
   background-color: rgba(255, 255, 255, 0.7);
   padding-top: 21vh;
 }
+input.p-inputtext.p-component.p-password-input {
+  width: 50vh !important;
+}
 </style>

From 9126ddde226f83e7b1bb0444ef6702a8dc77b719 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Fri, 26 Jul 2024 15:29:18 -0700
Subject: [PATCH 07/28] run lint

---
 src/components/ListUsers.vue                         | 2 +-
 src/components/NavBar.vue                            | 2 +-
 src/components/auth/RegisterStudent.vue              | 6 +++---
 src/components/reports/IndividualScoreReportTask.vue | 4 ++--
 src/components/reports/tasks/TaskReport.vue          | 6 ++----
 src/pages/IndividualReport.vue                       | 4 ++--
 6 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/ListUsers.vue b/src/components/ListUsers.vue
index fc974e9ea..4001fea73 100644
--- a/src/components/ListUsers.vue
+++ b/src/components/ListUsers.vue
@@ -49,8 +49,8 @@
         <EditUsersForm
           v-if="!showPassword"
           :user-data="currentEditUser"
-          @update:user-data="localUserData = $event"
           :edit-mode="true"
+          @update:user-data="localUserData = $event"
         />
         <div v-if="showPassword">
           <div class="flex" style="gap: 1rem">
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 200284e41..8494c75fa 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -44,7 +44,7 @@
                     >
                   </router-link>
                 </div>
-                <div class="nav-user-wrapper bg-gray-100 p-0" v-tooltip="'Click to see your Information'">
+                <div v-tooltip="'Click to see your Information'" class="nav-user-wrapper bg-gray-100 p-0">
                   <router-link :to="{ name: 'ProfileInfo' }"
                     ><button
                       class="no-underline text-primary border-none border-round cursor-pointer m-0 text-sm hover:bg-red-900 hover:text-white"
diff --git a/src/components/auth/RegisterStudent.vue b/src/components/auth/RegisterStudent.vue
index 1847a4d66..0e8d05310 100644
--- a/src/components/auth/RegisterStudent.vue
+++ b/src/components/auth/RegisterStudent.vue
@@ -172,7 +172,7 @@
             />
           </div>
         </section>
-        <PvAccordion expandIcon="pi pi-plus" collapseIcon="pi pi-minus">
+        <PvAccordion expand-icon="pi pi-plus" collapse-icon="pi pi-minus">
           <PvAccordionTab header="Optional Info">
             <!--First / Last Name-->
             <section class="form-section">
@@ -268,8 +268,8 @@
                   multiple
                   :suggestions="raceOptions"
                   name="race"
-                  @complete="searchRaces"
                   class="w-full"
+                  @complete="searchRaces"
                 />
               </div>
               <!-- Hispanic Ethinicity -->
@@ -294,8 +294,8 @@
                   multiple
                   :suggestions="languageOptions"
                   name="homeLanguage"
-                  @complete="searchLanguages"
                   class="w-full"
+                  @complete="searchLanguages"
                 />
               </div>
             </section>
diff --git a/src/components/reports/IndividualScoreReportTask.vue b/src/components/reports/IndividualScoreReportTask.vue
index 6022fff79..9429d73ee 100644
--- a/src/components/reports/IndividualScoreReportTask.vue
+++ b/src/components/reports/IndividualScoreReportTask.vue
@@ -63,8 +63,8 @@
         <PvAccordion
           class="my-2 w-full"
           :active-index="expanded ? 0 : null"
-          expandIcon="pi pi-plus"
-          collapseIcon="pi pi-minus"
+          expand-icon="pi pi-plus"
+          collapse-icon="pi pi-minus"
         >
           <PvAccordionTab header="Score Breakdown">
             <div v-for="[key, rawScore, rangeMin, rangeMax] in task.scoresArray" :key="key">
diff --git a/src/components/reports/tasks/TaskReport.vue b/src/components/reports/tasks/TaskReport.vue
index 8b6ccd517..b4cad9f55 100644
--- a/src/components/reports/tasks/TaskReport.vue
+++ b/src/components/reports/tasks/TaskReport.vue
@@ -4,8 +4,8 @@
       v-if="taskInfoById[taskId]"
       class="mb-5 w-full"
       :active-index="0"
-      expandIcon="pi pi-plus"
-      collapseIcon="pi pi-minus"
+      expand-icon="pi pi-plus"
+      collapse-icon="pi pi-minus"
     >
       <PvAccordionTab :header="('About ' + taskInfoById[taskId]?.subheader).toUpperCase()">
         <div>
@@ -83,8 +83,6 @@
 <script setup>
 import DistributionChartFacet from '@/components/reports/DistributionChartFacet.vue';
 import DistributionChartSupport from '@/components/reports/DistributionChartSupport.vue';
-import Accordion from 'primevue/accordion';
-import AccordionTab from 'primevue/accordiontab';
 import { taskDisplayNames, tasksToDisplayGraphs, taskInfoById } from '@/helpers/reports.js';
 import SubscoreTable from '@/components/reports/SubscoreTable.vue';
 import { ref, computed } from 'vue';
diff --git a/src/pages/IndividualReport.vue b/src/pages/IndividualReport.vue
index 8793afee8..280956eb1 100644
--- a/src/pages/IndividualReport.vue
+++ b/src/pages/IndividualReport.vue
@@ -84,8 +84,8 @@
       <PvAccordion
         class="my-2 w-full"
         :active-index="expanded ? 0 : null"
-        expandIcon="pi pi-plus"
-        collapseIcon="pi pi-minus"
+        expand-icon="pi pi-plus"
+        collapse-icon="pi pi-minus"
       >
         <PvAccordionTab header="Understanding the Scores">
           <div class="flex flex-column align-items-center text-lg">

From d0ca93bd7316923ed1b44163e709cc3a3c1631ec Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Fri, 26 Jul 2024 16:50:27 -0700
Subject: [PATCH 08/28] fixing log in and home participant

---
 src/assets/styles/routes/signin.scss          |  1 -
 src/components/GameTabs.vue                   | 84 ++++++++++++-------
 src/components/ParticipantSidebar.vue         | 20 +++--
 src/components/RoarDataTable.vue              |  5 ++
 src/components/auth/SignIn.vue                |  2 +-
 src/main.js                                   |  2 +
 src/pages/SignIn.vue                          | 14 ++--
 .../en/en-componentTranslations.json          |  2 +-
 .../en/us/en-us-componentTranslations.json    |  2 +-
 9 files changed, 83 insertions(+), 49 deletions(-)

diff --git a/src/assets/styles/routes/signin.scss b/src/assets/styles/routes/signin.scss
index 72163f8d5..97ac2006f 100644
--- a/src/assets/styles/routes/signin.scss
+++ b/src/assets/styles/routes/signin.scss
@@ -93,7 +93,6 @@ body.page-signin {
   .signin-option-userpass {
     width: 100%;
     text-align: center;
-    margin-bottom: 2rem;
 
     .signin-option-title {
       margin-bottom: 1.5rem;
diff --git a/src/components/GameTabs.vue b/src/components/GameTabs.vue
index c1d3f74f9..22d898fa9 100644
--- a/src/components/GameTabs.vue
+++ b/src/components/GameTabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="games" class="game-tab-container">
+  <div id="games" class="game-tab-container w-full">
     <PvTabView v-model:activeIndex="displayGameIndex" :scrollable="true" class="flex flex-column">
       <PvTabPanel
         v-for="(game, index) in games"
@@ -9,6 +9,7 @@
           ((index > 0 && !games[index - 1].completedOn) ||
             (allGamesComplete && currentGameId !== game.taskId && !game.completedOn))
         "
+        class="p-0"
       >
         <template #header>
           <!--Complete Game-->
@@ -25,35 +26,50 @@
             getTaskName(game.taskId, game.taskData.name)
           }}</span>
         </template>
-        <div class="roar-tabview-game pointer flex">
-          <div class="roar-game-content" @click="routeExternalTask(game)">
-            <div class="roar-game-title">{{ getTaskName(game.taskId, game.taskData.name) }}</div>
+        <div class="roar-tabview-game pointer flex flex-row p-5 surface-100">
+          <div class="roar-game-content flex flex-column" style="width: 70%" @click="routeExternalTask(game)">
+            <div class="roar-game-title font-bold">{{ getTaskName(game.taskId, game.taskData.name) }}</div>
             <div class="roar-game-description">
               <p>{{ getTaskDescription(game.taskId, game.taskData.description) }}</p>
             </div>
-            <div class="roar-game-meta">
-              <PvTag
-                v-for="(items, metaIndex) in game.taskData.meta"
-                :key="metaIndex"
-                :value="metaIndex + ': ' + items"
-              />
-            </div>
-            <div class="roar-game-footer">
-              <i v-if="!allGamesComplete" class="pi"
-                ><svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <rect width="42" height="42" rx="21" fill="#A80532" />
-                  <path
-                    d="M26.1858 19.6739L17.4823 14.1736C16.7751 13.7269 15.6921 14.1604 15.6921 15.2652V26.2632C15.6921 27.2544 16.6985 27.8518 17.4823 27.3549L26.1858 21.8572C26.9622 21.3682 26.9647 20.1629 26.1858 19.6739Z"
-                    fill="white"
-                  />
-                </svg>
-              </i>
-              <span v-if="!allGamesComplete && !game.completedOn">{{ $t('gameTabs.clickToStart') }}</span>
-              <span v-else>{{ taskCompletedMessage }}</span>
-              <router-link
-                v-if="!allGamesComplete && !game.completedOn && !game.taskData?.taskURL && !game.taskData?.variantURL"
-                :to="{ path: getRoutePath(game.taskId) }"
-              ></router-link>
+            <div class="flex flex-column">
+              <div class="roar-game-meta">
+                <PvTag
+                  v-for="(items, metaIndex) in game.taskData.meta"
+                  :key="metaIndex"
+                  :value="metaIndex + ': ' + items"
+                />
+              </div>
+              <div class="roar-game-footer p-3 mr-5 hover:surface-200">
+                <div class="flex align-items-center justify-content-center">
+                  <i v-if="!allGamesComplete" class="pi"
+                    ><svg
+                      width="100"
+                      height="100"
+                      viewBox="0 0 42 42"
+                      fill="none"
+                      class="mr-3"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <rect width="42" height="42" rx="21" fill="#A80532" />
+                      <path
+                        d="M26.1858 19.6739L17.4823 14.1736C16.7751 13.7269 15.6921 14.1604 15.6921 15.2652V26.2632C15.6921 27.2544 16.6985 27.8518 17.4823 27.3549L26.1858 21.8572C26.9622 21.3682 26.9647 20.1629 26.1858 19.6739Z"
+                        fill="white"
+                      />
+                    </svg>
+                  </i>
+                </div>
+                <div class="flex align-items-center justify-content-center text-xl font-bold mt-2">
+                  <span v-if="!allGamesComplete && !game.completedOn">{{ $t('gameTabs.clickToStart') }}</span>
+                  <span v-else>{{ taskCompletedMessage }}</span>
+                  <router-link
+                    v-if="
+                      !allGamesComplete && !game.completedOn && !game.taskData?.taskURL && !game.taskData?.variantURL
+                    "
+                    :to="{ path: getRoutePath(game.taskId) }"
+                  ></router-link>
+                </div>
+              </div>
             </div>
           </div>
           <div class="roar-game-image">
@@ -63,12 +79,17 @@
                 :on-video-end="updateVideoCompleted"
                 :on-video-start="updateVideoStarted"
                 :task-id="game.taskId"
+                style="width: 40vh"
               />
             </div>
             <div v-else>
-              <img v-if="game.taskData.image" :src="game.taskData.image" />
+              <img v-if="game.taskData.image" :src="game.taskData.image" style="width: 40vh" />
               <!-- TODO: Get real backup image -->
-              <img v-else src="https://reading.stanford.edu/wp-content/uploads/2021/10/PA-1024x512.png" />
+              <img
+                v-else
+                src="https://reading.stanford.edu/wp-content/uploads/2021/10/PA-1024x512.png"
+                style="width: 40vh"
+              />
             </div>
           </div>
         </div>
@@ -240,7 +261,7 @@ const returnVideoOptions = (videoURL) => {
 };
 </script>
 
-<style scoped lang="scss">
+<style>
 .game-tab-container {
   max-width: 75vw;
 }
@@ -259,4 +280,7 @@ const returnVideoOptions = (videoURL) => {
     min-width: 250px;
   }
 }
+.p-tabview-panels {
+  padding: 0 !important;
+}
 </style>
diff --git a/src/components/ParticipantSidebar.vue b/src/components/ParticipantSidebar.vue
index 6b5469780..ad833ad19 100644
--- a/src/components/ParticipantSidebar.vue
+++ b/src/components/ParticipantSidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar-container">
+  <div class="sidebar-container flex flex-column">
     <div class="sidebar-progress">
       <PvChart type="doughnut" :data="chartData" :options="chartOptions" />
       <div>
@@ -7,14 +7,16 @@
         <p>{{ $t('participantSidebar.tasksCompleted') }}</p>
       </div>
     </div>
-    <ul v-if="!!studentInfo" class="sidebar-info">
-      <li class="sidebar-title">
-        <strong>{{ $t('participantSidebar.studentInfo') }}</strong>
-      </li>
-      <li>
-        {{ $t('participantSidebar.grade') }}: <span class="sidebar-info-item">{{ studentInfo.grade }}</span>
-      </li>
-    </ul>
+    <div class="flex flex-row">
+      <ul v-if="!!studentInfo" class="sidebar-info">
+        <li class="sidebar-title">
+          <strong>{{ $t('participantSidebar.studentInfo') }}</strong>
+        </li>
+        <li>
+          {{ $t('participantSidebar.grade') }}: <span class="sidebar-info-item">{{ studentInfo.grade }}</span>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 <script setup>
diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index 53860ea4b..9801624c3 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -615,6 +615,11 @@ const emit = defineEmits(['export-all', 'selection', 'reset-filters', 'export-se
   transition: none;
 }
 
+.p-datatable-column-header-content {
+  padding: 0 !important;
+  margin-left: -6px !important;
+}
+
 .p-checkbox-box.p-component.p-highlight {
   background-color: var(--primary-color);
   color: white;
diff --git a/src/components/auth/SignIn.vue b/src/components/auth/SignIn.vue
index 9b74c727a..a23e8a246 100644
--- a/src/components/auth/SignIn.vue
+++ b/src/components/auth/SignIn.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card">
     <form class="p-fluid" @submit.prevent="handleFormSubmit(!v$.$invalid)">
-      <div class="field mt-2">
+      <div class="field">
         <div class="p-input-icon-right">
           <PvInputText
             :id="$t('authSignIn.emailId')"
diff --git a/src/main.js b/src/main.js
index cdc4aeeb1..539c8493b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -69,6 +69,7 @@ import PvIconField from 'primevue/iconfield';
 import PvInputIcon from 'primevue/inputicon';
 import PvColumnGroup from 'primevue/columngroup';
 import PvRow from 'primevue/row';
+import PvCarousel from 'primevue/carousel';
 
 // PrimeVue directive imports
 import PvTooltip from 'primevue/tooltip';
@@ -216,6 +217,7 @@ app.component('PvRow', PvRow);
 app.component('RoarDataTable', RoarDataTable);
 app.component('LanguageSelector', LanguageSelector);
 app.component('PvFieldset', PvFieldset);
+app.component('PvCarousel', PvCarousel);
 
 app.directive('tooltip', PvTooltip);
 
diff --git a/src/pages/SignIn.vue b/src/pages/SignIn.vue
index c36fa43fd..61f73bc45 100644
--- a/src/pages/SignIn.vue
+++ b/src/pages/SignIn.vue
@@ -19,14 +19,16 @@
           </div>
           <SignIn :invalid="incorrect" @submit="authWithEmail" @update:email="email = $event" />
         </section>
-        <section class="flex flex-row align-content-center">
-          <h4 class="flex m-0 align-content-center justify-content-center mr-3 flex-wrap-reverse">
+        <section class="flex flex-column w-full">
+          <h4
+            class="flex mb-3 mt-1 align-content-center justify-content-center flex-wrap-reverse font-bold text-md text-500"
+          >
             {{ $t('pageSignIn.loginWith') }}
           </h4>
-          <div class="flex">
+          <div class="flex flex-row align-content-center justify-content-center w-full">
             <PvButton
               label="Sign in with Google"
-              class="flex surface-0 p-1 mr-1 border-black-alpha-10 w-full text-center text-black justify-content-center hover:border-primary hover:surface-ground"
+              class="flex surface-0 p-1 border-black-alpha-10 w-3 ml-2 mr-2 text-center text-black justify-content-center hover:border-primary hover:surface-ground"
               style="border-radius: 3rem; height: 3rem; color: black !important"
               @click="authWithGoogle"
             >
@@ -35,7 +37,7 @@
             </PvButton>
             <PvButton
               v-if="!isLevante"
-              class="flex surface-0 p-1 mr-1 border-black-alpha-10 w-full justify-content-center hover:border-primary hover:surface-ground"
+              class="flex surface-0 p-1 border-black-alpha-10 w-3 ml-2 mr-2 justify-content-center hover:border-primary hover:surface-ground"
               style="border-radius: 3rem; height: 3rem; color: black !important"
               @click="authWithClever"
             >
@@ -44,7 +46,7 @@
             </PvButton>
             <PvButton
               v-if="!isLevante"
-              class="flex surface-0 p-1 mr-1 border-black-alpha-10 w-full justify-content-center hover:border-primary hover:surface-ground"
+              class="flex surface-0 p-1 border-black-alpha-10 w-3 ml-2 mr-2 justify-content-center hover:border-primary hover:surface-ground"
               style="border-radius: 3rem; height: 3rem; color: black !important"
               @click="authWithClassLink"
             >
diff --git a/src/translations/en/en-componentTranslations.json b/src/translations/en/en-componentTranslations.json
index 411fda5c4..0658da23c 100644
--- a/src/translations/en/en-componentTranslations.json
+++ b/src/translations/en/en-componentTranslations.json
@@ -85,7 +85,7 @@
   "pageSignIn": {
     "havingTrouble": "Having trouble?",
     "login": "Log in to access your dashboard",
-    "loginWith": "Log in with",
+    "loginWith": "Or log in with: ",
     "welcome": "Welcome to ROAR!"
   },
   "tasks": {
diff --git a/src/translations/en/us/en-us-componentTranslations.json b/src/translations/en/us/en-us-componentTranslations.json
index 5dc2b9467..c843a5b26 100644
--- a/src/translations/en/us/en-us-componentTranslations.json
+++ b/src/translations/en/us/en-us-componentTranslations.json
@@ -85,7 +85,7 @@
   "pageSignIn": {
     "havingTrouble": "Having trouble?",
     "login": "Log in to access your dashboard",
-    "loginWith": "Log in with",
+    "loginWith": "Or log in with: ",
     "welcome": "Welcome to ROAR!"
   },
   "tasks": {

From ce47d343dc5e909702c5b4b66232a1a59e383a31 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Fri, 26 Jul 2024 17:01:57 -0700
Subject: [PATCH 09/28] tabview fix

---
 src/components/CreateAdministration.vue | 3 +++
 src/components/GameTabs.vue             | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/CreateAdministration.vue b/src/components/CreateAdministration.vue
index e428e43c4..c558be2e7 100644
--- a/src/components/CreateAdministration.vue
+++ b/src/components/CreateAdministration.vue
@@ -758,4 +758,7 @@ function findVariantWithParams(variants, params) {
     display: none;
   }
 }
+.p-tabview-panels {
+  padding-top: 2vh !important;
+}
 </style>
diff --git a/src/components/GameTabs.vue b/src/components/GameTabs.vue
index 22d898fa9..98d358562 100644
--- a/src/components/GameTabs.vue
+++ b/src/components/GameTabs.vue
@@ -26,7 +26,7 @@
             getTaskName(game.taskId, game.taskData.name)
           }}</span>
         </template>
-        <div class="roar-tabview-game pointer flex flex-row p-5 surface-100">
+        <div class="roar-tabview-game pointer flex flex-row p-5 surface-100" style="margin-top: -3vh">
           <div class="roar-game-content flex flex-column" style="width: 70%" @click="routeExternalTask(game)">
             <div class="roar-game-title font-bold">{{ getTaskName(game.taskId, game.taskData.name) }}</div>
             <div class="roar-game-description">

From 70b107842f956231f9f25206c1ee4e282200aaa8 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Fri, 26 Jul 2024 17:56:10 -0700
Subject: [PATCH 10/28] taking out negative margin

---
 src/components/GameTabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/GameTabs.vue b/src/components/GameTabs.vue
index 98d358562..22d898fa9 100644
--- a/src/components/GameTabs.vue
+++ b/src/components/GameTabs.vue
@@ -26,7 +26,7 @@
             getTaskName(game.taskId, game.taskData.name)
           }}</span>
         </template>
-        <div class="roar-tabview-game pointer flex flex-row p-5 surface-100" style="margin-top: -3vh">
+        <div class="roar-tabview-game pointer flex flex-row p-5 surface-100">
           <div class="roar-game-content flex flex-column" style="width: 70%" @click="routeExternalTask(game)">
             <div class="roar-game-title font-bold">{{ getTaskName(game.taskId, game.taskData.name) }}</div>
             <div class="roar-game-description">

From 790d0eb72dcc76ea3f833d6cc50bdf5265f9aba4 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Mon, 29 Jul 2024 11:43:43 -0700
Subject: [PATCH 11/28] fixing routing

---
 src/components/GameTabs.vue | 44 +++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/GameTabs.vue b/src/components/GameTabs.vue
index 22d898fa9..7dd69e1dd 100644
--- a/src/components/GameTabs.vue
+++ b/src/components/GameTabs.vue
@@ -41,33 +41,35 @@
                 />
               </div>
               <div class="roar-game-footer p-3 mr-5 hover:surface-200">
-                <div class="flex align-items-center justify-content-center">
-                  <i v-if="!allGamesComplete" class="pi"
-                    ><svg
-                      width="100"
-                      height="100"
-                      viewBox="0 0 42 42"
-                      fill="none"
-                      class="mr-3"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <rect width="42" height="42" rx="21" fill="#A80532" />
-                      <path
-                        d="M26.1858 19.6739L17.4823 14.1736C16.7751 13.7269 15.6921 14.1604 15.6921 15.2652V26.2632C15.6921 27.2544 16.6985 27.8518 17.4823 27.3549L26.1858 21.8572C26.9622 21.3682 26.9647 20.1629 26.1858 19.6739Z"
-                        fill="white"
-                      />
-                    </svg>
-                  </i>
-                </div>
                 <div class="flex align-items-center justify-content-center text-xl font-bold mt-2">
-                  <span v-if="!allGamesComplete && !game.completedOn">{{ $t('gameTabs.clickToStart') }}</span>
-                  <span v-else>{{ taskCompletedMessage }}</span>
                   <router-link
                     v-if="
                       !allGamesComplete && !game.completedOn && !game.taskData?.taskURL && !game.taskData?.variantURL
                     "
                     :to="{ path: getRoutePath(game.taskId) }"
-                  ></router-link>
+                    class="no-underline text-900"
+                  >
+                    <div class="flex align-items-center justify-content-center">
+                      <i v-if="!allGamesComplete" class="pi"
+                        ><svg
+                          width="100"
+                          height="100"
+                          viewBox="0 0 42 42"
+                          fill="none"
+                          class="mr-3"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <rect width="42" height="42" rx="21" fill="#A80532" />
+                          <path
+                            d="M26.1858 19.6739L17.4823 14.1736C16.7751 13.7269 15.6921 14.1604 15.6921 15.2652V26.2632C15.6921 27.2544 16.6985 27.8518 17.4823 27.3549L26.1858 21.8572C26.9622 21.3682 26.9647 20.1629 26.1858 19.6739Z"
+                            fill="white"
+                          />
+                        </svg>
+                      </i>
+                    </div>
+                    <span v-if="!allGamesComplete && !game.completedOn">{{ $t('gameTabs.clickToStart') }}</span>
+                    <span v-else>{{ taskCompletedMessage }} </span>
+                  </router-link>
                 </div>
               </div>
             </div>

From 36cede00056ffa71bf086d6618352d7918d0e985 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Mon, 29 Jul 2024 14:41:07 -0700
Subject: [PATCH 12/28] cypress tests on testScoreReportFiltering

---
 .../testScoreReportFiltering.cy.js            | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/partner-admin/default-tests/testScoreReportFiltering.cy.js b/cypress/e2e/partner-admin/default-tests/testScoreReportFiltering.cy.js
index 67eadd1dc..96be97f50 100644
--- a/cypress/e2e/partner-admin/default-tests/testScoreReportFiltering.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/testScoreReportFiltering.cy.js
@@ -33,15 +33,25 @@ function setFilterByGrade(grade) {
 }
 
 function setFilterByProgressCategory(header, category) {
-  cy.contains('div.p-column-header-content', header).find('button').click();
+  cy.contains(
+    'th.p-datatable-header-cell.p-datatable-sortable-column.p-datatable-resizable-column.p-datatable-reorderable-column',
+    header,
+  )
+    .find('button')
+    .click();
   cy.get('[data-cy="score-filter-dropdown"]', { timeout: timeout }).click();
-  cy.get('ul>li').find('.p-tag-value', { timeout: timeout }).contains(category).click();
+  cy.get('ul>li').find('span.p-tag-label', { timeout: timeout }).contains(category).click();
   cy.get('button').contains('Apply').click();
   cy.wait(0.05 * timeout);
 }
 
 function setFilterByScoreCategory(header, category) {
-  cy.contains('div.p-column-header-content', header).find('button').click();
+  cy.contains(
+    'th.p-datatable-header-cell.p-datatable-sortable-column.p-datatable-resizable-column.p-datatable-reorderable-column',
+    header,
+  )
+    .find('button')
+    .click();
   cy.get('[data-cy="score-filter-dropdown"]', { timeout: timeout }).click();
   cy.get('ul > li', { timeout: timeout }).contains(category).click();
   cy.get('button').contains('Apply').click();
@@ -134,7 +144,7 @@ describe('The partner admin can view score reports for a given administration an
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickScoreButton(roarTestAdministrationId);
     setFilterByScoreCategory('Written-Vocab', 'Optional');
-    cy.get('.p-datatable-emptymessage').contains('No results found');
-    cy.get('.p-datatable-emptymessage').contains('Reset Filters');
+    cy.get('.flex.flex-column.align-items-center.align-text-left.my-8').contains('No results found');
+    cy.get('.flex.flex-column.align-items-center.align-text-left.my-8').contains('Reset Filters');
   });
 });

From 2d646250679c7946bc5841e0c50b8e7e347d4cfa Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Mon, 29 Jul 2024 14:51:41 -0700
Subject: [PATCH 13/28] fixing cypress testProgressReportFiltering

---
 .../testProgressReportFiltering.spec.cy.js          | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js b/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
index 2d56f22fc..d5d8d76a4 100644
--- a/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
@@ -39,9 +39,14 @@ function setFilterByGrade(grade) {
 }
 
 function setFilterByProgressCategory(header, category) {
-  cy.contains('div.p-column-header-content', header).find('button').click();
+  cy.contains(
+    'th.p-datatable-header-cell.p-datatable-sortable-column.p-datatable-resizable-column.p-datatable-reorderable-column',
+    header,
+  )
+    .find('button')
+    .click();
   cy.get('[data-cy="progress-filter-dropdown"]', { timeout: timeout }).click();
-  cy.get('ul>li').find('.p-tag-value', { timeout: timeout }).contains(category).click();
+  cy.get('ul>li').find('span.p-tag-label', { timeout: timeout }).contains(category).click();
   // Click off the dropdown to prevent it from hiding other elements
   cy.get('button').contains('Apply').click();
   cy.wait(0.05 * timeout);
@@ -148,7 +153,7 @@ describe('The partner admin can view progress reports for a given administration
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickProgressButton(roarTestAdministrationId);
     setFilterByProgressCategory('Written-Vocab', 'started');
-    cy.get('.p-datatable-emptymessage').contains('No results found');
-    cy.get('.p-datatable-emptymessage').contains('Reset Filters');
+    cy.get('.flex.flex-column.align-items-center.align-text-left.my-8').contains('No results found');
+    cy.get('.flex.flex-column.align-items-center.align-text-left.my-8').contains('Reset Filters');
   });
 });

From 405e79656ea4f0ae21f1f4569ee4d6da3b53988e Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Mon, 29 Jul 2024 15:04:51 -0700
Subject: [PATCH 14/28] fixing participant test

---
 cypress/e2e/participant/default-tests/checkLegalDoc.cy.js | 2 +-
 cypress/e2e/participant/default-tests/playVideo.cy.js     | 2 +-
 cypress/support/commands.js                               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/cypress/e2e/participant/default-tests/checkLegalDoc.cy.js b/cypress/e2e/participant/default-tests/checkLegalDoc.cy.js
index 59eb9521a..2f9de3d6d 100644
--- a/cypress/e2e/participant/default-tests/checkLegalDoc.cy.js
+++ b/cypress/e2e/participant/default-tests/checkLegalDoc.cy.js
@@ -11,6 +11,6 @@ describe('Test to maintain that assent form shows in when signing in with an un-
     cy.visit('/');
     cy.wait(1000);
     cy.get('.p-dialog-title', { timeout: timeout }).contains('CONSENT FORM').should('be.visible');
-    cy.get('.p-confirm-dialog-accept').contains('Continue').should('be.visible');
+    cy.get('.p-dialog-footer').contains('Continue').should('be.visible');
   });
 });
diff --git a/cypress/e2e/participant/default-tests/playVideo.cy.js b/cypress/e2e/participant/default-tests/playVideo.cy.js
index abd1b5a24..8304b2006 100644
--- a/cypress/e2e/participant/default-tests/playVideo.cy.js
+++ b/cypress/e2e/participant/default-tests/playVideo.cy.js
@@ -4,7 +4,7 @@ describe('Playing Video', () => {
     cy.login(Cypress.env('participantUsername'), Cypress.env('participantPassword'));
     cy.visit('/', { timeout: 2 * timeout });
     cy.selectAdministration(Cypress.env('testRoarAppsAdministration'));
-    cy.get('.tabview-nav-link-label', { timeout: 2 * timeout })
+    cy.get('span.tabview-nav-link-label', { timeout: 2 * timeout })
       .contains('ROAR - Word')
       .click();
     cy.get('.vjs-big-play-button', { timeout: 2 * timeout }).click();
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index aa3658ab5..6bda01520 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -104,7 +104,7 @@ Cypress.Commands.add('selectAdministration', function selectAdministration(testA
     .invoke('text')
     .then((text) => {
       if (text.includes(testAdministration)) {
-        cy.get('.p-dropdown-item', { timeout: 2 * Cypress.env('timeout') })
+        cy.get('li#pv_id_5_12', { timeout: 2 * Cypress.env('timeout') })
           .contains(testAdministration)
           .click();
         cy.log('Selected administration:', testAdministration);

From ca33ef71f51cd325007713380751a5da0ae5d4a4 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Mon, 29 Jul 2024 15:34:57 -0700
Subject: [PATCH 15/28] fixing cypress tests

---
 .../default-tests/exportSelectedProgressReport.cy.js  |  2 +-
 .../default-tests/exportSelectedScoreReport.cy.js     |  2 +-
 .../default-tests/viewIndividualReport.cy.js          | 11 -----------
 .../default-tests/viewProgressReport.cy.js            |  7 +++++--
 .../default-tests/viewScoreReports.spec.cy.js         |  7 ++++---
 cypress/support/commands.js                           |  2 +-
 6 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/cypress/e2e/partner-admin/default-tests/exportSelectedProgressReport.cy.js b/cypress/e2e/partner-admin/default-tests/exportSelectedProgressReport.cy.js
index f4cab1d6e..1f391ab5f 100644
--- a/cypress/e2e/partner-admin/default-tests/exportSelectedProgressReport.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/exportSelectedProgressReport.cy.js
@@ -10,7 +10,7 @@ describe('The partner admin can select and export progress reports for a given a
     cy.get('button').contains('Progress').first().click();
 
     // make a selection
-    cy.get('.p-checkbox-box').first().click();
+    cy.get('input.p-checkbox-input').first().click();
 
     cy.get('button').contains('Export Selected').click();
     cy.readFile(`${Cypress.env('cypressDownloads')}/roar-progress-selected.csv`);
diff --git a/cypress/e2e/partner-admin/default-tests/exportSelectedScoreReport.cy.js b/cypress/e2e/partner-admin/default-tests/exportSelectedScoreReport.cy.js
index 51a97aeb9..b2962b10b 100644
--- a/cypress/e2e/partner-admin/default-tests/exportSelectedScoreReport.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/exportSelectedScoreReport.cy.js
@@ -10,7 +10,7 @@ describe('The partner admin can select and export progress reports for a given a
     cy.get('button').contains('Score').first().click();
 
     // make a selection
-    cy.get('.p-checkbox-box').first().click();
+    cy.get('input.p-checkbox-input').first().click();
 
     cy.get('button').contains('Export Selected').click();
     cy.readFile(
diff --git a/cypress/e2e/partner-admin/default-tests/viewIndividualReport.cy.js b/cypress/e2e/partner-admin/default-tests/viewIndividualReport.cy.js
index 7f76219b8..9307a388f 100644
--- a/cypress/e2e/partner-admin/default-tests/viewIndividualReport.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/viewIndividualReport.cy.js
@@ -22,16 +22,6 @@ function clickScoreButton() {
   );
 }
 
-function checkAssignmentColumns(assignments) {
-  cy.get('[data-cy="roar-data-table"] thead th').then(($header) => {
-    const tableHeaders = $header.map((index, elem) => Cypress.$(elem).text()).get();
-
-    assignments.forEach((assignment) => {
-      expect(tableHeaders).to.include(assignment);
-    });
-  });
-}
-
 function checkIndividualScoreReport() {
   cy.get('[data-cy="route-button"]', { timeout: 3 * timeout })
     .first()
@@ -50,7 +40,6 @@ describe('The partner admin can view individual score reports for a given admini
     cy.getAdministrationCard(testPartnerAdministrationName);
     clickScoreButton();
     cy.checkUserList(testUserList);
-    checkAssignmentColumns(testAssignments);
     checkIndividualScoreReport();
   });
 });
diff --git a/cypress/e2e/partner-admin/default-tests/viewProgressReport.cy.js b/cypress/e2e/partner-admin/default-tests/viewProgressReport.cy.js
index 7081a71a0..294471e32 100644
--- a/cypress/e2e/partner-admin/default-tests/viewProgressReport.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/viewProgressReport.cy.js
@@ -23,8 +23,9 @@ function clickProgressButton() {
 }
 
 function checkProgressTags(headers) {
-  cy.get('[data-cy="roar-data-table"] thead th').then(($header) => {
-    const tableHeaders = $header.map((index, elem) => Cypress.$(elem).text()).get();
+  cy.get('.p-datatable-column-header-content').then(($header) => {
+    const tableHeaders = Array.from($header).map((elem) => elem.innerText.trim());
+    cy.log('Table Headers:', tableHeaders);
 
     headers.forEach((header) => {
       const headerIndex = tableHeaders.indexOf(header);
@@ -38,6 +39,8 @@ function checkProgressTags(headers) {
               cy.wrap(headerCell).find('span.p-tag.p-component').should('exist');
             });
         });
+      } else {
+        cy.log(`Header "${header}" not found in table headers.`);
       }
     });
   });
diff --git a/cypress/e2e/partner-admin/default-tests/viewScoreReports.spec.cy.js b/cypress/e2e/partner-admin/default-tests/viewScoreReports.spec.cy.js
index 68f6ae7a6..90f2155d4 100644
--- a/cypress/e2e/partner-admin/default-tests/viewScoreReports.spec.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/viewScoreReports.spec.cy.js
@@ -23,11 +23,12 @@ function clickScoreButton() {
 }
 
 function checkAssignmentColumns() {
-  cy.get('[data-cy="roar-data-table"] thead th').then(($header) => {
-    const tableHeaders = $header.map((index, elem) => Cypress.$(elem).text()).get();
+  cy.get('.p-datatable-column-header-content').then(($header) => {
+    const tableHeaders = Array.from($header).map((header) => header.innerText);
+    cy.log('Table Headers:', tableHeaders);
 
     testAssignments.forEach((assignment) => {
-      expect(tableHeaders).to.include(assignment);
+      expect(tableHeaders).to.include(assignment, `Expected header to include ${assignment}`);
     });
   });
 }
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 6bda01520..8f4dd3676 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -171,7 +171,7 @@ Cypress.Commands.add(
 Cypress.Commands.add('checkUserList', (userList) => {
   cy.get('[data-cy="roar-data-table"] tbody tr', { timeout: Cypress.env('timeout') }).each((row) => {
     cy.wrap(row)
-      .find('td.p-frozen-column')
+      .find('td.p-datatable-frozen-column')
       .then((cell) => {
         // The following cleans the non-breaking space character and any whitespace from the cell text
         const cellText = cell

From 85ca326ba315a415364cf2eb33d9384dc517ced2 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Mon, 29 Jul 2024 15:50:32 -0700
Subject: [PATCH 16/28] fixing playVideo test

---
 cypress/support/commands.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 8f4dd3676..c137f1b03 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -104,7 +104,7 @@ Cypress.Commands.add('selectAdministration', function selectAdministration(testA
     .invoke('text')
     .then((text) => {
       if (text.includes(testAdministration)) {
-        cy.get('li#pv_id_5_12', { timeout: 2 * Cypress.env('timeout') })
+        cy.get('.p-select-list-container', { timeout: 2 * Cypress.env('timeout') })
           .contains(testAdministration)
           .click();
         cy.log('Selected administration:', testAdministration);

From 1fd3f022d58703127aeb4d63f10db872f19a1e15 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Mon, 29 Jul 2024 17:14:37 -0700
Subject: [PATCH 17/28] changing dropdown to select and tabview to tabs

---
 src/components/ConsentPicker.vue        |   4 +-
 src/components/CreateOrgs.vue           |   8 +-
 src/components/EditUsersForm.vue        |  10 +-
 src/components/EditVariantDialog.vue    |  16 +-
 src/components/GameTabs.vue             | 205 +++++++++++++-----------
 src/components/LanguageSelector.vue     |   4 +-
 src/components/ListOrgs.vue             |   4 +-
 src/components/OrgPicker.vue            |   4 +-
 src/components/RoarDataTable.vue        |  10 +-
 src/components/TaskPicker.vue           |   2 +-
 src/components/auth/RegisterStudent.vue |  12 +-
 src/components/auth/RegisterUser.vue    |  18 +--
 src/components/modals/EditUsers.vue     |   8 +-
 src/components/tasks/ManageTasks.vue    |  22 +--
 src/components/tasks/ManageVariants.vue |  26 +--
 src/main.js                             |  12 +-
 src/pages/HomeAdministrator.vue         |   2 +-
 src/pages/HomeParticipant.vue           |  11 +-
 src/pages/RegisterStudents.vue          |   2 +-
 src/pages/ScoreReport.vue               |   2 +-
 20 files changed, 194 insertions(+), 188 deletions(-)

diff --git a/src/components/ConsentPicker.vue b/src/components/ConsentPicker.vue
index 91466db20..a8eb1fb38 100644
--- a/src/components/ConsentPicker.vue
+++ b/src/components/ConsentPicker.vue
@@ -148,7 +148,7 @@
       </div>
       <div v-if="knowWhatIWant && !noConsent" class="flex flex-column pl-3" style="width: 50%">
         <h3>Select a Consent Form</h3>
-        <PvDropdown
+        <PvSelect
           v-model="selectedConsent"
           :options="listOfDocs.consent"
           option-label="fileName"
@@ -157,7 +157,7 @@
           @change="updateConsent"
         />
         <h3 class="pt-3">Select an Assent Form</h3>
-        <PvDropdown
+        <PvSelect
           v-model="selectedAssent"
           :options="listOfDocs.assent"
           option-label="fileName"
diff --git a/src/components/CreateOrgs.vue b/src/components/CreateOrgs.vue
index f96764531..ed9ba1747 100644
--- a/src/components/CreateOrgs.vue
+++ b/src/components/CreateOrgs.vue
@@ -16,7 +16,7 @@
         <div class="grid column-gap-3 mt-5 rounded">
           <div class="col-12 md:col-6 lg:col-3 xl:col-3">
             <PvFloatLabel>
-              <PvDropdown
+              <PvSelect
                 v-model="orgType"
                 input-id="org-type"
                 :options="isLevante ? levanteOrgTypes : orgTypes"
@@ -34,7 +34,7 @@
         <div v-if="parentOrgRequired" class="grid mt-4">
           <div class="col-12 md:col-6 lg:col-4">
             <PvFloatLabel>
-              <PvDropdown
+              <PvSelect
                 v-model="state.parentDistrict"
                 input-id="parent-district"
                 :options="districts"
@@ -52,7 +52,7 @@
 
           <div v-if="orgType.singular === 'class'" class="col-12 md:col-6 lg:col-4">
             <PvFloatLabel>
-              <PvDropdown
+              <PvSelect
                 v-model="state.parentSchool"
                 input-id="parent-school"
                 :options="schools"
@@ -88,7 +88,7 @@
 
           <div v-if="orgType?.singular === 'class'" class="col-12 md:col-6 lg:col-4 mt-3">
             <PvFloatLabel>
-              <PvDropdown
+              <PvSelect
                 v-model="state.grade"
                 input-id="grade"
                 :options="grades"
diff --git a/src/components/EditUsersForm.vue b/src/components/EditUsersForm.vue
index 9d1bd0d44..786bc8bda 100644
--- a/src/components/EditUsersForm.vue
+++ b/src/components/EditUsersForm.vue
@@ -66,7 +66,7 @@
       <div class="form-field">
         <label :class="{ 'font-light uppercase text-sm': !editMode }">English as a Second Language</label>
         <div v-if="!editMode" :class="{ 'text-xl': !editMode }">{{ userData?.studentData?.ell_status ?? false }}</div>
-        <PvDropdown
+        <PvSelect
           v-else
           v-model="localUserData.studentData.ell_status"
           option-label="label"
@@ -77,7 +77,7 @@
       <div class="form-field">
         <label :class="{ 'font-light uppercase text-sm': !editMode }">IEP Status</label>
         <div v-if="!editMode" :class="{ 'text-xl': !editMode }">{{ userData?.studentData?.iep_status ?? false }}</div>
-        <PvDropdown
+        <PvSelect
           v-else
           v-model="localUserData.studentData.iep_status"
           option-label="label"
@@ -88,7 +88,7 @@
       <div class="form-field">
         <label :class="{ 'font-light uppercase text-sm': !editMode }">Free-Reduced Lunch</label>
         <div v-if="!editMode" :class="{ 'text-xl': !editMode }">{{ userData?.studentData?.frl_status ?? false }}</div>
-        <PvDropdown
+        <PvSelect
           v-else
           v-model="localUserData.studentData.frl_status"
           option-label="label"
@@ -116,7 +116,7 @@
         <div v-if="!editMode" :class="{ 'text-xl': !editMode }">
           {{ userData?.studentData?.hispanic_ethnicity ?? false }}
         </div>
-        <PvDropdown
+        <PvSelect
           v-else
           v-model="localUserData.studentData.hispanic_ethnicity"
           option-label="label"
@@ -192,7 +192,7 @@
           >English as a Second Language <span v-if="editMode" class="optional">(optional)</span></label
         >
         <div v-if="!editMode" :class="{ 'text-xl': !editMode }">{{ userData?.studentData?.ell_status ?? false }}</div>
-        <PvDropdown
+        <PvSelect
           v-else
           v-model="localUserData.studentData.ell_status"
           option-label="label"
diff --git a/src/components/EditVariantDialog.vue b/src/components/EditVariantDialog.vue
index 10090b25a..21ca7ac70 100644
--- a/src/components/EditVariantDialog.vue
+++ b/src/components/EditVariantDialog.vue
@@ -67,7 +67,7 @@
         >
           <PvColumn field="field" header="Field" style="width: 20%; min-width: 8rem" body-style="text-align:center">
             <template #editor="{ data, field }">
-              <PvDropdown
+              <PvSelect
                 v-model="data[field]"
                 :options="fieldExamples"
                 option-label="label"
@@ -76,12 +76,12 @@
                 placeholder="Type or choose field"
                 data-cy="dropdown-assigned-field"
               >
-              </PvDropdown>
+              </PvSelect>
             </template>
           </PvColumn>
           <PvColumn field="op" header="Operator" style="width: 5%" body-style="text-align:center">
             <template #editor="{ data, field }">
-              <PvDropdown
+              <PvSelect
                 v-model="data[field]"
                 :options="operators"
                 option-label="label"
@@ -92,7 +92,7 @@
                 <template #option="slotProps">
                   <PvTag :value="slotProps.option.label" severity="warning" />
                 </template>
-              </PvDropdown>
+              </PvSelect>
             </template>
             <template #body="slotProps">
               <PvTag :value="slotProps.data.op" severity="warning" />
@@ -162,7 +162,7 @@
           >
             <PvColumn field="field" header="Field" style="width: 20%; min-width: 8rem" body-style="text-align:center">
               <template #editor="{ data, field }">
-                <PvDropdown
+                <PvSelect
                   v-model="data[field]"
                   :options="fieldExamples"
                   option-label="label"
@@ -171,12 +171,12 @@
                   placeholder="Type or choose field"
                   data-cy="dropdown-optional-field"
                 >
-                </PvDropdown>
+                </PvSelect>
               </template>
             </PvColumn>
             <PvColumn field="op" header="Operator" style="width: 5%" body-style="text-align:center">
               <template #editor="{ data, field }">
-                <PvDropdown
+                <PvSelect
                   v-model="data[field]"
                   :options="operators"
                   option-label="label"
@@ -187,7 +187,7 @@
                   <template #option="slotProps">
                     <PvTag :value="slotProps.option.label" severity="warning" />
                   </template>
-                </PvDropdown>
+                </PvSelect>
               </template>
               <template #body="slotProps">
                 <PvTag :value="slotProps.data.op" severity="warning" />
diff --git a/src/components/GameTabs.vue b/src/components/GameTabs.vue
index 7dd69e1dd..7765668b0 100644
--- a/src/components/GameTabs.vue
+++ b/src/components/GameTabs.vue
@@ -1,102 +1,120 @@
 <template>
-  <div id="games" class="game-tab-container w-full">
-    <PvTabView v-model:activeIndex="displayGameIndex" :scrollable="true" class="flex flex-column">
-      <PvTabPanel
-        v-for="(game, index) in games"
-        :key="game.taskId"
-        :disabled="
-          sequential &&
-          ((index > 0 && !games[index - 1].completedOn) ||
-            (allGamesComplete && currentGameId !== game.taskId && !game.completedOn))
-        "
-        class="p-0"
-      >
-        <template #header>
-          <!--Complete Game-->
-          <i v-if="game.completedOn" class="pi pi-check-circle mr-2" data-game-status="complete" />
-          <!--Current Game-->
-          <i
-            v-else-if="game.taskId == currentGameId || !sequential"
-            class="pi pi-circle mr-2"
-            data-game-status="current"
-          />
-          <!--Locked Game-->
-          <i v-else-if="sequential" class="pi pi-lock mr-2" data-game-status="incomplete" />
-          <span class="tabview-nav-link-label" :data-game-status="`${game.completedOn ? 'complete' : 'incomplete'}`">{{
-            getTaskName(game.taskId, game.taskData.name)
-          }}</span>
-        </template>
-        <div class="roar-tabview-game pointer flex flex-row p-5 surface-100">
-          <div class="roar-game-content flex flex-column" style="width: 70%" @click="routeExternalTask(game)">
-            <div class="roar-game-title font-bold">{{ getTaskName(game.taskId, game.taskData.name) }}</div>
-            <div class="roar-game-description">
-              <p>{{ getTaskDescription(game.taskId, game.taskData.description) }}</p>
-            </div>
-            <div class="flex flex-column">
-              <div class="roar-game-meta">
-                <PvTag
-                  v-for="(items, metaIndex) in game.taskData.meta"
-                  :key="metaIndex"
-                  :value="metaIndex + ': ' + items"
-                />
+  <div id="games">
+    <PvTabs v-model:activeIndex="displayGameIndex" scrollable value="0">
+      <PvTabList>
+        <PvTab
+          v-for="(game, index) in games"
+          :key="game.taskId"
+          :disabled="
+            sequential &&
+            ((index > 0 && !games[index - 1].completedOn) ||
+              (allGamesComplete && currentGameId !== game.taskId && !game.completedOn))
+          "
+          :value="String(index)"
+          class="p-1 ml-2 mr-2 text-base"
+          >{{ getTaskName(game.taskId, game.taskData.name) }}
+        </PvTab>
+      </PvTabList>
+      <PvTabPanels>
+        <PvTabPanel
+          v-for="(game, index) in games"
+          :key="game.taskId"
+          :disabled="
+            sequential &&
+            ((index > 0 && !games[index - 1].completedOn) ||
+              (allGamesComplete && currentGameId !== game.taskId && !game.completedOn))
+          "
+          :value="String(index)"
+        >
+          <template #header>
+            <!--Complete Game-->
+            <i v-if="game.completedOn" class="pi pi-check-circle mr-2" data-game-status="complete" />
+            <!--Current Game-->
+            <i
+              v-else-if="game.taskId == currentGameId || !sequential"
+              class="pi pi-circle mr-2"
+              data-game-status="current"
+            />
+            <!--Locked Game-->
+            <i v-else-if="sequential" class="pi pi-lock mr-2" data-game-status="incomplete" />
+            <span
+              class="tabview-nav-link-label"
+              :data-game-status="`${game.completedOn ? 'complete' : 'incomplete'}`"
+              >{{ getTaskName(game.taskId, game.taskData.name) }}</span
+            >
+          </template>
+          <div class="roar-tabview-game pointer flex flex-row p-5 surface-100 w-full">
+            <div class="roar-game-content flex flex-column" style="width: 70%" @click="routeExternalTask(game)">
+              <div class="roar-game-title font-bold">{{ getTaskName(game.taskId, game.taskData.name) }}</div>
+              <div class="roar-game-description mr-2">
+                <p>{{ getTaskDescription(game.taskId, game.taskData.description) }}</p>
               </div>
-              <div class="roar-game-footer p-3 mr-5 hover:surface-200">
-                <div class="flex align-items-center justify-content-center text-xl font-bold mt-2">
-                  <router-link
-                    v-if="
-                      !allGamesComplete && !game.completedOn && !game.taskData?.taskURL && !game.taskData?.variantURL
-                    "
-                    :to="{ path: getRoutePath(game.taskId) }"
-                    class="no-underline text-900"
-                  >
-                    <div class="flex align-items-center justify-content-center">
-                      <i v-if="!allGamesComplete" class="pi"
-                        ><svg
-                          width="100"
-                          height="100"
-                          viewBox="0 0 42 42"
-                          fill="none"
-                          class="mr-3"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <rect width="42" height="42" rx="21" fill="#A80532" />
-                          <path
-                            d="M26.1858 19.6739L17.4823 14.1736C16.7751 13.7269 15.6921 14.1604 15.6921 15.2652V26.2632C15.6921 27.2544 16.6985 27.8518 17.4823 27.3549L26.1858 21.8572C26.9622 21.3682 26.9647 20.1629 26.1858 19.6739Z"
-                            fill="white"
-                          />
-                        </svg>
-                      </i>
-                    </div>
-                    <span v-if="!allGamesComplete && !game.completedOn">{{ $t('gameTabs.clickToStart') }}</span>
-                    <span v-else>{{ taskCompletedMessage }} </span>
-                  </router-link>
+              <div class="flex flex-column">
+                <div class="roar-game-meta">
+                  <PvTag
+                    v-for="(items, metaIndex) in game.taskData.meta"
+                    :key="metaIndex"
+                    :value="metaIndex + ': ' + items"
+                  />
+                </div>
+                <div class="roar-game-footer p-3 mr-5 hover:surface-200">
+                  <div class="flex align-items-center justify-content-center text-xl font-bold mt-2">
+                    <router-link
+                      v-if="
+                        !allGamesComplete && !game.completedOn && !game.taskData?.taskURL && !game.taskData?.variantURL
+                      "
+                      :to="{ path: getRoutePath(game.taskId) }"
+                      class="no-underline text-900"
+                    >
+                      <div class="flex align-items-center justify-content-center">
+                        <i v-if="!allGamesComplete" class="pi"
+                          ><svg
+                            width="100"
+                            height="100"
+                            viewBox="0 0 42 42"
+                            fill="none"
+                            class="mr-3"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <rect width="42" height="42" rx="21" fill="#A80532" />
+                            <path
+                              d="M26.1858 19.6739L17.4823 14.1736C16.7751 13.7269 15.6921 14.1604 15.6921 15.2652V26.2632C15.6921 27.2544 16.6985 27.8518 17.4823 27.3549L26.1858 21.8572C26.9622 21.3682 26.9647 20.1629 26.1858 19.6739Z"
+                              fill="white"
+                            />
+                          </svg>
+                        </i>
+                      </div>
+                      <span v-if="!allGamesComplete && !game.completedOn">{{ $t('gameTabs.clickToStart') }}</span>
+                      <span v-else>{{ taskCompletedMessage }} </span>
+                    </router-link>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-          <div class="roar-game-image">
-            <div v-if="game.taskData?.tutorialVideo" class="video-player-wrapper">
-              <VideoPlayer
-                :options="returnVideoOptions(game.taskData?.tutorialVideo)"
-                :on-video-end="updateVideoCompleted"
-                :on-video-start="updateVideoStarted"
-                :task-id="game.taskId"
-                style="width: 40vh"
-              />
-            </div>
-            <div v-else>
-              <img v-if="game.taskData.image" :src="game.taskData.image" style="width: 40vh" />
-              <!-- TODO: Get real backup image -->
-              <img
-                v-else
-                src="https://reading.stanford.edu/wp-content/uploads/2021/10/PA-1024x512.png"
-                style="width: 40vh"
-              />
+            <div class="roar-game-image">
+              <div v-if="game.taskData?.tutorialVideo" class="video-player-wrapper">
+                <VideoPlayer
+                  :options="returnVideoOptions(game.taskData?.tutorialVideo)"
+                  :on-video-end="updateVideoCompleted"
+                  :on-video-start="updateVideoStarted"
+                  :task-id="game.taskId"
+                  style="width: 40vh"
+                />
+              </div>
+              <div v-else>
+                <img v-if="game.taskData.image" :src="game.taskData.image" style="width: 40vh" />
+                <!-- TODO: Get real backup image -->
+                <img
+                  v-else
+                  src="https://reading.stanford.edu/wp-content/uploads/2021/10/PA-1024x512.png"
+                  style="width: 40vh"
+                />
+              </div>
             </div>
           </div>
-        </div>
-      </PvTabPanel>
-    </PvTabView>
+        </PvTabPanel>
+      </PvTabPanels>
+    </PvTabs>
   </div>
 </template>
 <script setup>
@@ -282,7 +300,4 @@ const returnVideoOptions = (videoURL) => {
     min-width: 250px;
   }
 }
-.p-tabview-panels {
-  padding: 0 !important;
-}
 </style>
diff --git a/src/components/LanguageSelector.vue b/src/components/LanguageSelector.vue
index bf54009b7..84330117c 100644
--- a/src/components/LanguageSelector.vue
+++ b/src/components/LanguageSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex align-items-center gap-1">
-    <PvDropdown
+    <PvSelect
       v-model="$i18n.locale"
       class=""
       :options="languageDropdownOptions"
@@ -14,7 +14,7 @@
           {{ $t('authSignIn.selectLanguage') }}
         </small>
       </template>
-    </PvDropdown>
+    </PvSelect>
   </div>
 </template>
 
diff --git a/src/components/ListOrgs.vue b/src/components/ListOrgs.vue
index 48841b623..5b728201e 100644
--- a/src/components/ListOrgs.vue
+++ b/src/components/ListOrgs.vue
@@ -19,7 +19,7 @@
               class="col-12 md:col-6 lg:col-3 xl:col-3 mt-3"
             >
               <PvFloatLabel>
-                <PvDropdown
+                <PvSelect
                   v-model="selectedDistrict"
                   input-id="district"
                   :options="allDistricts"
@@ -35,7 +35,7 @@
             </div>
             <div v-if="orgType.id === 'classes'" class="col-12 md:col-6 lg:col-3 xl:col-3 mt-3">
               <PvFloatLabel>
-                <PvDropdown
+                <PvSelect
                   v-model="selectedSchool"
                   input-id="school"
                   :options="allSchools"
diff --git a/src/components/OrgPicker.vue b/src/components/OrgPicker.vue
index b065abe3c..2bdc16910 100644
--- a/src/components/OrgPicker.vue
+++ b/src/components/OrgPicker.vue
@@ -10,7 +10,7 @@
                 class="col-6 md:col-5 lg:col-5 xl:col-5 mt-3"
               >
                 <PvFloatLabel>
-                  <PvDropdown
+                  <PvSelect
                     id="district"
                     v-model="selectedDistrict"
                     input-id="district"
@@ -27,7 +27,7 @@
               </div>
               <div v-if="orgType.id === 'classes'" class="col-6 md:col-5 lg:col-5 xl:col-5 mt-3">
                 <PvFloatLabel>
-                  <PvDropdown
+                  <PvSelect
                     id="school"
                     v-model="selectedSchool"
                     input-id="school"
diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index 9801624c3..fa6a57c3d 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -226,10 +226,10 @@
                 placeholder="mm/dd/yyyy"
               />
               <div v-if="col.dataType === 'boolean'" class="flex flex-row gap-2">
-                <PvDropdown v-model="filterModel.value" :options="['True', 'False']" style="margin-bottom: 0.5rem" />
+                <PvSelect v-model="filterModel.value" :options="['True', 'False']" style="margin-bottom: 0.5rem" />
               </div>
               <div v-if="col.dataType === 'score'">
-                <PvDropdown
+                <PvSelect
                   v-model="filterModel.value"
                   option-label="label"
                   option-group-label="label"
@@ -274,10 +274,10 @@
                       <span class="tooltiptext">{{ value }}</span>
                     </div>
                   </template>
-                </PvDropdown>
+                </PvSelect>
               </div>
               <div v-if="col.dataType === 'progress'">
-                <PvDropdown
+                <PvSelect
                   v-model="filterModel.value"
                   :options="['Assigned', 'Started', 'Completed', 'Optional']"
                   style="margin-bottom: 0.5rem"
@@ -304,7 +304,7 @@
                       rounded
                     />
                   </template>
-                </PvDropdown>
+                </PvSelect>
               </div>
             </template>
             <template #filterclear="{ filterCallback }">
diff --git a/src/components/TaskPicker.vue b/src/components/TaskPicker.vue
index 480426f03..0b1436922 100644
--- a/src/components/TaskPicker.vue
+++ b/src/components/TaskPicker.vue
@@ -59,7 +59,7 @@
           </PvScrollPanel>
         </div>
         <div v-if="searchTerm.length < 3">
-          <PvDropdown
+          <PvSelect
             v-model="currentTask"
             :options="taskOptions"
             option-label="label"
diff --git a/src/components/auth/RegisterStudent.vue b/src/components/auth/RegisterStudent.vue
index 0e8d05310..6d1a1102c 100644
--- a/src/components/auth/RegisterStudent.vue
+++ b/src/components/auth/RegisterStudent.vue
@@ -162,7 +162,7 @@
           <!--Grade-->
           <div>
             <label for="grade">Grade <span class="required">*</span></label>
-            <PvDropdown
+            <PvSelect
               v-model="student.grade"
               :options="gradeOptions"
               option-label="label"
@@ -211,7 +211,7 @@
               <!--English Language Level-->
               <div class="w-full">
                 <label for="ell">English as a Second Language</label>
-                <PvDropdown
+                <PvSelect
                   v-model="student.ell"
                   :options="ellOptions"
                   option-label="label"
@@ -223,7 +223,7 @@
               <!--Sex-->
               <div class="w-full">
                 <label for="sex">Gender </label>
-                <PvDropdown
+                <PvSelect
                   v-model="student.gender"
                   :options="genderOptions"
                   option-label="label"
@@ -237,7 +237,7 @@
               <!-- Free-Reduced Lunch -->
               <div class="w-full">
                 <label for="stateId">Free-Reduced Lunch </label>
-                <PvDropdown
+                <PvSelect
                   v-model="student.freeReducedLunch"
                   :options="frlOptions"
                   option-label="label"
@@ -249,7 +249,7 @@
               <!-- IEP Status -->
               <div class="w-full">
                 <label for="stateId">IEP Status</label>
-                <PvDropdown
+                <PvSelect
                   v-model="student.IEPStatus"
                   :options="IEPOptions"
                   option-label="label"
@@ -275,7 +275,7 @@
               <!-- Hispanic Ethinicity -->
               <div class="w-full">
                 <label for="hispanicEthnicity">Hispanic or Latino Ethnicity </label>
-                <PvDropdown
+                <PvSelect
                   v-model="student.hispanicEthnicity"
                   :options="ethnicityOptions"
                   option-label="label"
diff --git a/src/components/auth/RegisterUser.vue b/src/components/auth/RegisterUser.vue
index 4ad5dc9d1..1fa3248f1 100644
--- a/src/components/auth/RegisterUser.vue
+++ b/src/components/auth/RegisterUser.vue
@@ -69,7 +69,7 @@
       <!--Grade-->
       <div class="mt-4 mb-5">
         <label for="grade">Grade <span class="required">*</span></label>
-        <PvDropdown
+        <PvSelect
           v-model="v$.grade.$model"
           :options="gradeOptions"
           option-label="label"
@@ -84,24 +84,12 @@
       <!--English Language Level-->
       <div class="mt-4 mb-5">
         <label for="ell">English Language Level</label>
-        <PvDropdown
-          v-model="v$.ell.$model"
-          :options="eLLOptions"
-          option-label="label"
-          option-value="value"
-          name="ell"
-        />
+        <PvSelect v-model="v$.ell.$model" :options="eLLOptions" option-label="label" option-value="value" name="ell" />
       </div>
       <!--Sex-->
       <div class="mt-4 mb-5">
         <label for="sex">Gender</label>
-        <PvDropdown
-          v-model="v$.sex.$model"
-          :options="sexOptions"
-          option-label="label"
-          option-value="value"
-          name="sex"
-        />
+        <PvSelect v-model="v$.sex.$model" :options="sexOptions" option-label="label" option-value="value" name="sex" />
       </div>
       <!--Password-->
       <div class="field mt-4 mb-5">
diff --git a/src/components/modals/EditUsers.vue b/src/components/modals/EditUsers.vue
index f5cc8910e..b50791edf 100644
--- a/src/components/modals/EditUsers.vue
+++ b/src/components/modals/EditUsers.vue
@@ -81,7 +81,7 @@
 
             <div class="form-field">
               <label>English as a Second Language</label>
-              <PvDropdown
+              <PvSelect
                 v-model="localUserData.studentData.ell_status"
                 option-label="label"
                 option-value="value"
@@ -90,7 +90,7 @@
             </div>
             <div class="form-field">
               <label>IEP Status</label>
-              <PvDropdown
+              <PvSelect
                 v-model="localUserData.studentData.iep_status"
                 option-label="label"
                 option-value="value"
@@ -99,7 +99,7 @@
             </div>
             <div class="form-field">
               <label>Free-Reduced Lunch</label>
-              <PvDropdown
+              <PvSelect
                 v-model="localUserData.studentData.frl_status"
                 option-label="label"
                 option-value="value"
@@ -119,7 +119,7 @@
             </div>
             <div class="form-field">
               <label>Hispanic or Latino Ethnicity</label>
-              <PvDropdown
+              <PvSelect
                 v-model="localUserData.studentData.hispanic_ethnicity"
                 option-label="label"
                 option-value="value"
diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index dca02f0e3..d8d62389a 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -135,7 +135,7 @@
             <div class="flex gap-2 justify-content-center align-content-center flex-grow-0 params-container mt-2">
               <PvInputText v-model="param.name" style="width: 30vh" placeholder="Name" />
 
-              <PvDropdown v-model="param.type" style="width: 20vh" :options="typeOptions" />
+              <PvSelect v-model="param.type" style="width: 20vh" :options="typeOptions" />
 
               <PvInputText
                 v-if="param.type === 'string'"
@@ -144,7 +144,7 @@
                 placeholder="Value"
               />
 
-              <PvDropdown
+              <PvSelect
                 v-else-if="param.type === 'boolean'"
                 v-model="param.value"
                 style="width: 30vh"
@@ -172,11 +172,11 @@
             <div class="flex gap-2 align-content-start flex-grow-0 params-container">
               <PvInputText v-model="param.name" placeholder="Name" />
 
-              <PvDropdown v-model="param.type" :options="typeOptions" />
+              <PvSelect v-model="param.type" :options="typeOptions" />
 
               <PvInputText v-if="param.type === 'string'" v-model="param.value" placeholder="Value" />
 
-              <PvDropdown v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
+              <PvSelect v-else-if="param.type === 'boolean'" v-model="param.value" :options="[true, false]" />
 
               <PvInputNumber v-else-if="param.type === 'number'" v-model="param.value" />
 
@@ -261,7 +261,7 @@
           <small class="text-gray-400 font-bold">Select an Existing Task </small>
           <span class="required">*</span></label
         >
-        <PvDropdown
+        <PvSelect
           v-model="selectedTask"
           :options="formattedTasks"
           style="width: 50vh"
@@ -298,7 +298,7 @@
                   v-model="updatedTaskData[key]"
                   class="flex-grow-1"
                 />
-                <PvDropdown
+                <PvSelect
                   v-else-if="typeof value === 'boolean'"
                   v-model="updatedTaskData[key]"
                   :options="booleanDropDownOptions"
@@ -321,7 +321,7 @@
         <div v-if="newFields.length > 0" class="w-full">
           <div v-for="(field, index) in newFields" :key="index" class="flex align-items-center column-gap-2 mb-1">
             <PvInputText v-model="field.name" placeholder="Field Name" />
-            <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+            <PvSelect v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
 
             <PvInputText
               v-if="field.type === 'string'"
@@ -335,7 +335,7 @@
               placeholder="Field Value"
               class="flex-grow-1"
             />
-            <PvDropdown
+            <PvSelect
               v-if="field.type === 'boolean'"
               v-model="field.value"
               placeholder="Field Value"
@@ -386,7 +386,7 @@
                 v-model="updatedTaskData.gameConfig[paramName]"
                 class="flex-grow-1"
               />
-              <PvDropdown
+              <PvSelect
                 v-else-if="typeof param === 'boolean'"
                 v-model="updatedTaskData.gameConfig[paramName]"
                 :options="booleanDropDownOptions"
@@ -410,7 +410,7 @@
               class="flex align-items-center column-gap-2 mb-1"
             >
               <PvInputText v-model="field.name" placeholder="Field Name" />
-              <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
+              <PvSelect v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />
               <PvInputText
                 v-if="field.type === 'string'"
                 v-model="field.value"
@@ -423,7 +423,7 @@
                 placeholder="Field Value"
                 class="flex-grow-1"
               />
-              <PvDropdown
+              <PvSelect
                 v-if="field.type === 'boolean'"
                 v-model="field.value"
                 placeholder="Field Value"
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index feb523f10..45a10895e 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -23,7 +23,7 @@
                   </label>
                 </div>
                 <div class="col">
-                  <PvDropdown
+                  <PvSelect
                     v-model="v$.selectedGame.$model"
                     :options="formattedTasks"
                     option-label="name"
@@ -33,7 +33,7 @@
                     :class="{ 'p-invalid': v$.variantName.$invalid && submitted }"
                     name="variant-fields"
                     @click="clearFieldParamArrays()"
-                  ></PvDropdown>
+                  ></PvSelect>
                 </div>
               </div>
               <span v-if="v$.selectedGame.$error && submitted">
@@ -125,7 +125,7 @@
                   placeholder="Set game parameter to desired value"
                   class="flex-grow-1"
                 />
-                <PvDropdown
+                <PvSelect
                   v-else-if="param.type === 'boolean'"
                   id="inputParamValue"
                   v-model="variantParams[param.name]"
@@ -158,7 +158,7 @@
             <div v-if="newParams.length > 0" class="w-full">
               <div v-for="(field, index) in newParams" :key="index" class="flex align-items-center column-gap-2 mb-1">
                 <PvInputText v-model="field.name" style="width: 30vh" placeholder="Field Name" />
-                <PvDropdown
+                <PvSelect
                   v-model="field.type"
                   :options="['string', 'number', 'boolean']"
                   placeholder="Field Type"
@@ -178,7 +178,7 @@
                   placeholder="Field Value"
                   style="width: 30vh"
                 />
-                <PvDropdown
+                <PvSelect
                   v-if="field.type === 'boolean'"
                   v-model="field.value"
                   placeholder="Field Value"
@@ -256,7 +256,7 @@
           <small class="text-gray-400 font-bold">Select an Existing Task </small>
           <span class="required">*</span></label
         >
-        <PvDropdown
+        <PvSelect
           v-model="selectedTask"
           :options="formattedTasks"
           option-label="name"
@@ -268,7 +268,7 @@
           <small class="text-gray-400 font-bold">Select an Existing Variant </small>
           <span class="required">*</span></label
         >
-        <PvDropdown
+        <PvSelect
           v-model="selectedVariant"
           :options="filteredVariants"
           :option-label="(data) => (data.variant.name ? data.variant.name : data.variant.id)"
@@ -304,7 +304,7 @@
                   v-model="updatedVariantData[key]"
                   class="flex-grow-1"
                 />
-                <PvDropdown
+                <PvSelect
                   v-else-if="typeof value === 'boolean'"
                   v-model="updatedVariantData[key]"
                   :options="booleanDropDownOptions"
@@ -330,7 +330,7 @@
               class="flex align-items-center justify-content-center column-gap-2 mb-1"
             >
               <PvInputText v-model="field.name" style="width: 30vh" placeholder="Field Name" />
-              <PvDropdown
+              <PvSelect
                 v-model="field.type"
                 style="width: 20vh"
                 :options="['string', 'number', 'boolean']"
@@ -349,7 +349,7 @@
                 placeholder="Field Value"
                 style="width: 30vh"
               />
-              <PvDropdown
+              <PvSelect
                 v-if="field.type === 'boolean'"
                 v-model="field.value"
                 placeholder="Field Value"
@@ -403,7 +403,7 @@
         <!--                  v-model="updatedVariantData.params[paramName]"-->
         <!--                  class="flex-grow-1"-->
         <!--                />-->
-        <!--                <PvDropdown-->
+        <!--                <PvSelect-->
         <!--                  v-else-if="typeof param === 'boolean'"-->
         <!--                  v-model="updatedVariantData.params[paramName]"-->
         <!--                  :options="booleanDropDownOptions"-->
@@ -417,7 +417,7 @@
         <!--            <div v-if="addedParams.length > 0">-->
         <!--              <div v-for="(field, index) in addedParams" :key="index" class="flex align-items-center column-gap-2 mb-1">-->
         <!--                <PvInputText v-model="field.name" placeholder="Field Name" />-->
-        <!--                <PvDropdown v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />-->
+        <!--                <PvSelect v-model="field.type" :options="['string', 'number', 'boolean']" placeholder="Field Type" />-->
         <!--                <PvInputText-->
         <!--                  v-if="field.type === 'string'"-->
         <!--                  v-model="field.value"-->
@@ -430,7 +430,7 @@
         <!--                  placeholder="Field Value"-->
         <!--                  class="flex-grow-1"-->
         <!--                />-->
-        <!--                <PvDropdown-->
+        <!--                <PvSelect-->
         <!--                  v-if="field.type === 'boolean'"-->
         <!--                  v-model="field.value"-->
         <!--                  placeholder="Field Value"-->
diff --git a/src/main.js b/src/main.js
index 539c8493b..c5084a542 100644
--- a/src/main.js
+++ b/src/main.js
@@ -30,7 +30,6 @@ import PvDataTable from 'primevue/datatable';
 import PvDataView from 'primevue/dataview';
 import PvDialog from 'primevue/dialog';
 import PvDivider from 'primevue/divider';
-import PvDropdown from 'primevue/dropdown';
 import PvFileUpload from 'primevue/fileupload';
 import PvImage from 'primevue/image';
 import PvInlineMessage from 'primevue/inlinemessage';
@@ -70,6 +69,11 @@ import PvInputIcon from 'primevue/inputicon';
 import PvColumnGroup from 'primevue/columngroup';
 import PvRow from 'primevue/row';
 import PvCarousel from 'primevue/carousel';
+import PvTabs from 'primevue/tabs';
+import PvTabList from 'primevue/tablist';
+import PvTab from 'primevue/tab';
+import PvTabPanels from 'primevue/tabpanels';
+import PvSelect from 'primevue/select';
 
 // PrimeVue directive imports
 import PvTooltip from 'primevue/tooltip';
@@ -174,7 +178,6 @@ app.component('PvDataTable', PvDataTable);
 app.component('PvDataView', PvDataView);
 app.component('PvDialog', PvDialog);
 app.component('PvDivider', PvDivider);
-app.component('PvDropdown', PvDropdown);
 app.component('PvFileUpload', PvFileUpload);
 app.component('PvImage', PvImage);
 app.component('PvInlineMessage', PvInlineMessage);
@@ -218,6 +221,11 @@ app.component('RoarDataTable', RoarDataTable);
 app.component('LanguageSelector', LanguageSelector);
 app.component('PvFieldset', PvFieldset);
 app.component('PvCarousel', PvCarousel);
+app.component('PvTabs', PvTabs);
+app.component('PvTabList', PvTabList);
+app.component('PvTab', PvTab);
+app.component('PvTabPanels', PvTabPanels);
+app.component('PvSelect', PvSelect);
 
 app.directive('tooltip', PvTooltip);
 
diff --git a/src/pages/HomeAdministrator.vue b/src/pages/HomeAdministrator.vue
index 0590df4df..7540e8270 100644
--- a/src/pages/HomeAdministrator.vue
+++ b/src/pages/HomeAdministrator.vue
@@ -36,7 +36,7 @@
               </div>
               <div class="flex flex-column gap-1">
                 <small for="dd-sort" class="text-gray-400">Sort by</small>
-                <PvDropdown
+                <PvSelect
                   v-model="sortKey"
                   input-id="dd-sort"
                   :options="sortOptions"
diff --git a/src/pages/HomeParticipant.vue b/src/pages/HomeParticipant.vue
index 56b0410ef..e3457aa71 100644
--- a/src/pages/HomeParticipant.vue
+++ b/src/pages/HomeParticipant.vue
@@ -32,7 +32,7 @@
             <div class="assignment-select-container flex flex-row justify-content-between justify-content-start">
               <div class="flex flex-column align-content-start justify-content-start w-3">
                 <PvFloatLabel>
-                  <PvDropdown
+                  <PvSelect
                     v-if="adminInfo.every((admin) => admin.publicName)"
                     v-model="selectedAdmin"
                     :options="adminInfo ?? []"
@@ -41,7 +41,7 @@
                     data-cy="dropdown-select-administration"
                     @change="toggleShowOptionalAssessments"
                   />
-                  <PvDropdown
+                  <PvSelect
                     v-else
                     v-model="selectedAdmin"
                     :options="adminInfo ?? []"
@@ -404,7 +404,7 @@ watch(
   { immediate: true },
 );
 </script>
-<style scoped>
+<style>
 .tabs-container {
   display: flex;
   flex-direction: row;
@@ -423,11 +423,6 @@ watch(
   opacity: 0;
 }
 
-.dropdown-container {
-  margin-top: 2rem;
-  margin-left: 2rem;
-}
-
 .assignment-select-container {
   min-width: 100%;
 }
diff --git a/src/pages/RegisterStudents.vue b/src/pages/RegisterStudents.vue
index c220bd312..deeb75dbc 100644
--- a/src/pages/RegisterStudents.vue
+++ b/src/pages/RegisterStudents.vue
@@ -79,7 +79,7 @@
           <PvColumn v-for="col of tableColumns" :key="col.field" :field="col.field">
             <template #header>
               <div class="col-header">
-                <PvDropdown
+                <PvSelect
                   v-model="dropdown_model[col.field]"
                   :options="dropdown_options"
                   option-label="label"
diff --git a/src/pages/ScoreReport.vue b/src/pages/ScoreReport.vue
index b94fbb403..bb730a36c 100644
--- a/src/pages/ScoreReport.vue
+++ b/src/pages/ScoreReport.vue
@@ -168,7 +168,7 @@
             </template>
             <span>
               <label for="view-columns" class="view-label">View</label>
-              <PvDropdown
+              <PvSelect
                 id="view-columns"
                 v-model="viewMode"
                 :options="viewOptions"

From e1a27f5a4f6356fe977fc1cd00808cbfb2265620 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Tue, 30 Jul 2024 13:09:32 -0700
Subject: [PATCH 18/28] fixing home participant css

---
 .../participant/default-tests/playVideo.cy.js |  2 +-
 src/components/GameTabs.vue                   |  2 +-
 src/pages/HomeParticipant.vue                 | 24 +++++++++----------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/cypress/e2e/participant/default-tests/playVideo.cy.js b/cypress/e2e/participant/default-tests/playVideo.cy.js
index 8304b2006..4fc4ad865 100644
--- a/cypress/e2e/participant/default-tests/playVideo.cy.js
+++ b/cypress/e2e/participant/default-tests/playVideo.cy.js
@@ -4,7 +4,7 @@ describe('Playing Video', () => {
     cy.login(Cypress.env('participantUsername'), Cypress.env('participantPassword'));
     cy.visit('/', { timeout: 2 * timeout });
     cy.selectAdministration(Cypress.env('testRoarAppsAdministration'));
-    cy.get('span.tabview-nav-link-label', { timeout: 2 * timeout })
+    cy.get('.p-tablist-tab-list', { timeout: 2 * timeout })
       .contains('ROAR - Word')
       .click();
     cy.get('.vjs-big-play-button', { timeout: 2 * timeout }).click();
diff --git a/src/components/GameTabs.vue b/src/components/GameTabs.vue
index 7765668b0..15f385000 100644
--- a/src/components/GameTabs.vue
+++ b/src/components/GameTabs.vue
@@ -15,7 +15,7 @@
           >{{ getTaskName(game.taskId, game.taskData.name) }}
         </PvTab>
       </PvTabList>
-      <PvTabPanels>
+      <PvTabPanels style="width: 120vh">
         <PvTabPanel
           v-for="(game, index) in games"
           :key="game.taskId"
diff --git a/src/pages/HomeParticipant.vue b/src/pages/HomeParticipant.vue
index e3457aa71..cf018afbb 100644
--- a/src/pages/HomeParticipant.vue
+++ b/src/pages/HomeParticipant.vue
@@ -1,11 +1,12 @@
 <template>
   <div>
     <div v-if="!noGamesAvailable || consentSpinner">
-      <div v-if="isFetching" class="loading-container">
+      <!-- <WE ARE USING V-SHOW INSTEAD OF V-IF BECAUSE OTHERWISE THE STYLE WILL BREAK> -->
+      <div v-show="isFetching" class="loading-container">
         <AppSpinner style="margin-bottom: 1rem" />
         <span>{{ $t('homeParticipant.loadingAssignments') }}</span>
       </div>
-      <div v-else>
+      <div v-show="!isFetching">
         <PvFloatLabel>
           <h2 v-if="adminInfo?.length == 1" class="dropdown-container">
             {{ adminInfo.at(0).publicName || adminInfo.at(0).name }}
@@ -31,7 +32,7 @@
           >
             <div class="assignment-select-container flex flex-row justify-content-between justify-content-start">
               <div class="flex flex-column align-content-start justify-content-start w-3">
-                <PvFloatLabel>
+                <PvFloatLabel class="mt-5 ml-5">
                   <PvSelect
                     v-if="adminInfo.every((admin) => admin.publicName)"
                     v-model="selectedAdmin"
@@ -58,15 +59,13 @@
         </div>
         <div class="tabs-container">
           <ParticipantSidebar :total-games="totalGames" :completed-games="completeGames" :student-info="studentInfo" />
-          <Transition name="fade" mode="out-in">
-            <GameTabs
-              v-if="showOptionalAssessments"
-              :games="optionalAssessments"
-              :sequential="isSequential"
-              :user-data="userData"
-            />
-            <GameTabs v-else :games="requiredAssessments" :sequential="isSequential" :user-data="userData" />
-          </Transition>
+          <GameTabs
+            v-if="showOptionalAssessments"
+            :games="optionalAssessments"
+            :sequential="isSequential"
+            :user-data="userData"
+          />
+          <GameTabs v-else :games="requiredAssessments" :sequential="isSequential" :user-data="userData" />
         </div>
       </div>
     </div>
@@ -109,6 +108,7 @@ import { getUserAssignments } from '../helpers/query/assignments';
 import ConsentModal from '../components/ConsentModal.vue';
 import GameTabs from '@/components/GameTabs.vue';
 import ParticipantSidebar from '@/components/ParticipantSidebar.vue';
+import AppSpinner from '../components/AppSpinner.vue';
 
 const showConsent = ref(false);
 const consentVersion = ref('');

From 26272c49106feeb13f32551095d6ef8fe5bb3cd2 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Tue, 30 Jul 2024 15:11:32 -0700
Subject: [PATCH 19/28] updating primevue components

---
 src/assets/styles/theme-tailwind.css    |   3 +-
 src/components/CardAdministration.vue   |  10 +-
 src/components/CreateAdministration.vue |   4 +-
 src/components/EditUsersForm.vue        |   4 +-
 src/components/EditVariantDialog.vue    |   2 +-
 src/components/ListOrgs.vue             | 111 +++++++++++----------
 src/components/OrgPicker.vue            | 125 +++++++++++++-----------
 src/components/RoarDataTable.vue        |   2 +-
 src/components/TaskPicker.vue           |   2 +-
 src/components/VariantCard.vue          |   8 +-
 src/components/auth/RegisterStudent.vue |   4 +-
 src/components/auth/RegisterUser.vue    |   4 +-
 src/components/modals/EditUsers.vue     |   2 +-
 src/main.js                             |  14 ++-
 src/pages/HomeParticipant.vue           |   2 +-
 src/pages/HomeSelector.vue              |  11 ++-
 src/pages/ManageTasksVariants.vue       |  23 +++--
 src/pages/RegisterStudents.vue          |   2 +-
 src/pages/SignIn.vue                    |   2 +-
 19 files changed, 179 insertions(+), 156 deletions(-)

diff --git a/src/assets/styles/theme-tailwind.css b/src/assets/styles/theme-tailwind.css
index 322a874c4..0222b8261 100644
--- a/src/assets/styles/theme-tailwind.css
+++ b/src/assets/styles/theme-tailwind.css
@@ -5,7 +5,8 @@ button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-round
 }
 button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-datatable-row-editor-save,
 button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-datatable-row-editor-cancel,
-button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-sm {
+button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-sm,
+button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-dialog-close-button {
   background: var(--primary-color) !important;
   color: white;
   margin-left: 3px !important;
diff --git a/src/components/CardAdministration.vue b/src/components/CardAdministration.vue
index b0e71cbfb..81bedd605 100644
--- a/src/components/CardAdministration.vue
+++ b/src/components/CardAdministration.vue
@@ -39,11 +39,11 @@
             v-tooltip.top="'Click to view params'"
             class="pi pi-info-circle cursor-pointer ml-1"
             style="font-size: 1rem"
-            @click="toggleParams($event, assessmentId)"
+            @click="toggle($event, assessmentId)"
           />
         </span>
         <div v-if="showParams">
-          <PvOverlayPanel v-for="assessmentId in assessmentIds" :key="assessmentId" :ref="paramPanelRefs[assessmentId]">
+          <PvPopover v-for="assessmentId in assessmentIds" :key="assessmentId" :ref="paramPanelRefs[assessmentId]">
             <div v-if="getAssessment(assessmentId).variantId">
               Variant ID: {{ getAssessment(assessmentId).variantId }}
             </div>
@@ -59,7 +59,7 @@
               <PvColumn field="key" header="Parameter" style="width: 50%"></PvColumn>
               <PvColumn field="value" header="Value" style="width: 50%"></PvColumn>
             </PvDataTable>
-          </PvOverlayPanel>
+          </PvPopover>
         </div>
       </div>
       <div v-if="isAssigned">
@@ -192,6 +192,8 @@ const speedDialItems = ref([
         target: event.originalEvent.currentTarget,
         message: 'Are you sure you want to delete this administration?',
         icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Yes',
+        rejectLabel: 'No',
         accept: async () => {
           await roarfirekit.value.deleteAdministration(props.id).then(() => {
             toast.add({
@@ -237,7 +239,7 @@ const toEntryObjects = (inputObj) => {
   return _toPairs(inputObj).map(([key, value]) => ({ key, value }));
 };
 
-const toggleParams = (event, id) => {
+const toggle = (event, id) => {
   paramPanelRefs[id].value[0].toggle(event);
 };
 
diff --git a/src/components/CreateAdministration.vue b/src/components/CreateAdministration.vue
index c558be2e7..e27b6463c 100644
--- a/src/components/CreateAdministration.vue
+++ b/src/components/CreateAdministration.vue
@@ -51,7 +51,7 @@
         <div class="formgrid grid">
           <div class="field col-12 md:col-6 mb-5">
             <PvFloatLabel>
-              <PvCalendar
+              <PvDatePicker
                 v-model="state.dateStarted"
                 class="w-full p-0"
                 :min-date="minStartDate"
@@ -71,7 +71,7 @@
           </div>
           <div class="field col-12 md:col-6">
             <PvFloatLabel>
-              <PvCalendar
+              <PvDatePicker
                 v-model="state.dateClosed"
                 class="w-full p-0"
                 :min-date="minEndDate"
diff --git a/src/components/EditUsersForm.vue b/src/components/EditUsersForm.vue
index 786bc8bda..69e083a37 100644
--- a/src/components/EditUsersForm.vue
+++ b/src/components/EditUsersForm.vue
@@ -23,7 +23,7 @@
           <span v-if="localUserType === 'student'" v-tooltip.top="'Required'" class="required">*</span></label
         >
         <div v-if="!editMode" :class="{ 'text-xl': !editMode }">{{ userDobString }}</div>
-        <PvCalendar
+        <PvDatePicker
           v-else
           v-model="localUserData.studentData.dob"
           :class="{ 'p-invalid': errorMessage.includes('Date of birth') }"
@@ -170,7 +170,7 @@
         <div v-if="!editMode" :class="{ 'text-xl': !editMode }">
           {{ userDobString }}
         </div>
-        <PvCalendar
+        <PvDatePicker
           v-else
           v-model="localUserData.studentData.dob"
           :class="{ 'p-invalid': errorMessage.includes('Date of birth') }"
diff --git a/src/components/EditVariantDialog.vue b/src/components/EditVariantDialog.vue
index 21ca7ac70..7bbd52928 100644
--- a/src/components/EditVariantDialog.vue
+++ b/src/components/EditVariantDialog.vue
@@ -212,7 +212,7 @@
           <div class="flex flex-row justify-content-between align-items-center">
             <div class="flex flex-row justify-content-end align-items-center gap-2 mr-2">
               <div class="uppercase text-md font-bold text-gray-600">Make Assessment Optional For All Students</div>
-              <PvInputSwitch
+              <PvToggleSwitch
                 v-model="optionalForAllFlag"
                 data-cy="switch-optional-for-everyone"
                 @update:model-value="handleOptionalForAllSwitch"
diff --git a/src/components/ListOrgs.vue b/src/components/ListOrgs.vue
index 5b728201e..356986175 100644
--- a/src/components/ListOrgs.vue
+++ b/src/components/ListOrgs.vue
@@ -11,59 +11,66 @@
         </div>
         <div class="text-md text-gray-500 ml-6">View organizations asssigned to your account.</div>
       </div>
-      <PvTabView v-if="claimsLoaded" v-model:activeIndex="activeIndex" lazy class="mb-7">
-        <PvTabPanel v-for="orgType in orgHeaders" :key="orgType" :header="orgType.header">
-          <div class="grid column-gap-3 mt-2">
-            <div
-              v-if="activeOrgType === 'schools' || activeOrgType === 'classes'"
-              class="col-12 md:col-6 lg:col-3 xl:col-3 mt-3"
-            >
-              <PvFloatLabel>
-                <PvSelect
-                  v-model="selectedDistrict"
-                  input-id="district"
-                  :options="allDistricts"
-                  option-label="name"
-                  option-value="id"
-                  :placeholder="districtPlaceholder"
-                  :loading="isLoadingDistricts"
-                  class="w-full"
-                  data-cy="dropdown-parent-district"
-                />
-                <label for="district">District</label>
-              </PvFloatLabel>
+      <PvTabs v-if="claimsLoaded" class="mb-7" value="districts">
+        <PvTabList>
+          <PvTab v-for="(orgType, index) in orgHeaders" :key="orgType" :value="String(index)" class="text-lg">
+            {{ orgType.header }}
+          </PvTab>
+        </PvTabList>
+        <PvTabPanels>
+          <PvTabPanel v-for="(orgType, index) in orgHeaders" :key="orgType" :value="String(index)">
+            <div class="grid column-gap-3 mt-2">
+              <div
+                v-if="activeOrgType === 'schools' || activeOrgType === 'classes'"
+                class="col-12 md:col-6 lg:col-3 xl:col-3 mt-3"
+              >
+                <PvFloatLabel>
+                  <PvSelect
+                    v-model="selectedDistrict"
+                    input-id="district"
+                    :options="allDistricts"
+                    option-label="name"
+                    option-value="id"
+                    :placeholder="districtPlaceholder"
+                    :loading="isLoadingDistricts"
+                    class="w-full"
+                    data-cy="dropdown-parent-district"
+                  />
+                  <label for="district">District</label>
+                </PvFloatLabel>
+              </div>
+              <div v-if="orgType.id === 'classes'" class="col-12 md:col-6 lg:col-3 xl:col-3 mt-3">
+                <PvFloatLabel>
+                  <PvSelect
+                    v-model="selectedSchool"
+                    input-id="school"
+                    :options="allSchools"
+                    option-label="name"
+                    option-value="id"
+                    :placeholder="schoolPlaceholder"
+                    :loading="isLoadingSchools"
+                    class="w-full"
+                    data-cy="dropdown-parent-school"
+                  />
+                  <label for="school">School</label>
+                </PvFloatLabel>
+              </div>
             </div>
-            <div v-if="orgType.id === 'classes'" class="col-12 md:col-6 lg:col-3 xl:col-3 mt-3">
-              <PvFloatLabel>
-                <PvSelect
-                  v-model="selectedSchool"
-                  input-id="school"
-                  :options="allSchools"
-                  option-label="name"
-                  option-value="id"
-                  :placeholder="schoolPlaceholder"
-                  :loading="isLoadingSchools"
-                  class="w-full"
-                  data-cy="dropdown-parent-school"
-                />
-                <label for="school">School</label>
-              </PvFloatLabel>
-            </div>
-          </div>
-          <RoarDataTable
-            v-if="tableData"
-            :key="tableKey"
-            :columns="tableColumns"
-            :data="tableData"
-            sortable
-            :loading="isLoading || isFetching"
-            :allow-filtering="false"
-            @export-all="exportAll"
-            @selected-org-id="showCode"
-          />
-          <AppSpinner v-else />
-        </PvTabPanel>
-      </PvTabView>
+            <RoarDataTable
+              v-if="tableData"
+              :key="tableKey"
+              :columns="tableColumns"
+              :data="tableData"
+              sortable
+              :loading="isLoading || isFetching"
+              :allow-filtering="false"
+              @export-all="exportAll"
+              @selected-org-id="showCode"
+            />
+            <AppSpinner v-else />
+          </PvTabPanel>
+        </PvTabPanels>
+      </PvTabs>
       <AppSpinner v-else />
     </section>
     <section class="flex mt-8 justify-content-end">
diff --git a/src/components/OrgPicker.vue b/src/components/OrgPicker.vue
index 2bdc16910..094d84881 100644
--- a/src/components/OrgPicker.vue
+++ b/src/components/OrgPicker.vue
@@ -2,67 +2,74 @@
   <div class="grid">
     <div class="col-12 md:col-6">
       <PvPanel class="m-0 p-0" header="Select organizations here">
-        <PvTabView v-if="claimsLoaded" v-model:activeIndex="activeIndex" class="m-0 p-0" lazy>
-          <PvTabPanel v-for="orgType in orgHeaders" :key="orgType" :header="orgType.header">
-            <div class="grid column-gap-3">
-              <div
-                v-if="activeOrgType === 'schools' || activeOrgType === 'classes'"
-                class="col-6 md:col-5 lg:col-5 xl:col-5 mt-3"
-              >
-                <PvFloatLabel>
-                  <PvSelect
-                    id="district"
-                    v-model="selectedDistrict"
-                    input-id="district"
-                    :options="allDistricts"
-                    option-label="name"
-                    option-value="id"
-                    :placeholder="districtPlaceholder"
-                    :loading="isLoadingDistricts"
-                    class="w-full"
-                    data-cy="dropdown-selected-district"
-                  />
-                  <label for="district">Select from district</label>
-                </PvFloatLabel>
+        <PvTabs v-if="claimsLoaded" value="districts">
+          <PvTabList>
+            <PvTab v-for="(orgType, index) in orgHeaders" :key="orgType" :value="String(index)">
+              {{ orgType.header }}
+            </PvTab>
+          </PvTabList>
+          <PvTabPanels>
+            <PvTabPanel v-for="(orgType, index) in orgHeaders" :key="orgType" :value="String(index)">
+              <div class="grid column-gap-3">
+                <div
+                  v-if="activeOrgType === 'schools' || activeOrgType === 'classes'"
+                  class="col-6 md:col-5 lg:col-5 xl:col-5 mt-3"
+                >
+                  <PvFloatLabel>
+                    <PvSelect
+                      id="district"
+                      v-model="selectedDistrict"
+                      input-id="district"
+                      :options="allDistricts"
+                      option-label="name"
+                      option-value="id"
+                      :placeholder="districtPlaceholder"
+                      :loading="isLoadingDistricts"
+                      class="w-full"
+                      data-cy="dropdown-selected-district"
+                    />
+                    <label for="district">Select from district</label>
+                  </PvFloatLabel>
+                </div>
+                <div v-if="orgType.id === 'classes'" class="col-6 md:col-5 lg:col-5 xl:col-5 mt-3">
+                  <PvFloatLabel>
+                    <PvSelect
+                      id="school"
+                      v-model="selectedSchool"
+                      input-id="school"
+                      :options="allSchools"
+                      option-label="name"
+                      option-value="id"
+                      :placeholder="schoolPlaceholder"
+                      :loading="isLoadingSchools"
+                      class="w-full"
+                      data-cy="dropdown-selected-school"
+                    />
+                    <label for="school">Select from school</label>
+                  </PvFloatLabel>
+                </div>
               </div>
-              <div v-if="orgType.id === 'classes'" class="col-6 md:col-5 lg:col-5 xl:col-5 mt-3">
-                <PvFloatLabel>
-                  <PvSelect
-                    id="school"
-                    v-model="selectedSchool"
-                    input-id="school"
-                    :options="allSchools"
-                    option-label="name"
-                    option-value="id"
-                    :placeholder="schoolPlaceholder"
-                    :loading="isLoadingSchools"
-                    class="w-full"
-                    data-cy="dropdown-selected-school"
-                  />
-                  <label for="school">Select from school</label>
-                </PvFloatLabel>
+              <div class="card flex justify-content-center">
+                <PvListbox
+                  v-model="selectedOrgs[activeOrgType]"
+                  :options="orgData"
+                  multiple
+                  :meta-key-selection="false"
+                  option-label="name"
+                  class="w-full"
+                  list-style="max-height:20rem"
+                >
+                  <template #option="slotProps">
+                    <div class="flex align-items-center">
+                      <PvCheckbox :binary="true" :model-value="isSelected(activeOrgType, slotProps.option.id)" />
+                      <div class="ml-2">{{ slotProps.option.name }}</div>
+                    </div>
+                  </template>
+                </PvListbox>
               </div>
-            </div>
-            <div class="card flex justify-content-center">
-              <PvListbox
-                v-model="selectedOrgs[activeOrgType]"
-                :options="orgData"
-                multiple
-                :meta-key-selection="false"
-                option-label="name"
-                class="w-full"
-                list-style="max-height:20rem"
-              >
-                <template #option="slotProps">
-                  <div class="flex align-items-center">
-                    <PvCheckbox :binary="true" :model-value="isSelected(activeOrgType, slotProps.option.id)" />
-                    <div class="ml-2">{{ slotProps.option.name }}</div>
-                  </div>
-                </template>
-              </PvListbox>
-            </div>
-          </PvTabPanel>
-        </PvTabView>
+            </PvTabPanel>
+          </PvTabPanels>
+        </PvTabs>
       </PvPanel>
     </div>
     <div class="col-12 md:col-6">
diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index fa6a57c3d..6b6cf423d 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -219,7 +219,7 @@
                 :show-toggle-all="false"
                 class="p-column-filter"
               />
-              <PvCalendar
+              <PvDatePicker
                 v-if="col.dataType === 'date' && !col.useMultiSelect"
                 v-model="filterModel.value"
                 date-format="mm/dd/yy"
diff --git a/src/components/TaskPicker.vue b/src/components/TaskPicker.vue
index 0b1436922..5bab9a582 100644
--- a/src/components/TaskPicker.vue
+++ b/src/components/TaskPicker.vue
@@ -3,7 +3,7 @@
     <template #icons>
       <div class="flex flex-row">
         <span>Show only named variants</span>
-        <PvInputSwitch v-model="namedOnly" class="ml-2" />
+        <PvToggleSwitch v-model="namedOnly" class="ml-2" />
         <!-- <button @click="tasksPaneOpen = !tasksPaneOpen">toggle pane</button> -->
       </div>
     </template>
diff --git a/src/components/VariantCard.vue b/src/components/VariantCard.vue
index 4aefef8bd..fc386a534 100644
--- a/src/components/VariantCard.vue
+++ b/src/components/VariantCard.vue
@@ -29,7 +29,7 @@
             <span class="font-bold">Variant id: </span>{{ variant.id }}
           </p>
         </div>
-        <PvOverlayPanel ref="op" append-to="body" style="width: 40vh">
+        <PvPopover ref="op" append-to="body" style="width: 40vh">
           <div class="flex justify-content-end mt-0 mb-2">
             <PvButton
               class="p-0 surface-hover border-none border-circle -rotate-45 hover:text-100 hover:bg-primary"
@@ -62,7 +62,7 @@
               </PvColumn>
             </PvDataTable>
           </div>
-        </PvOverlayPanel>
+        </PvPopover>
       </div>
     </div>
     <div class="mr-0 pl-0 flex flex-column">
@@ -117,7 +117,7 @@
           </p>
         </div>
       </div>
-      <PvOverlayPanel ref="op" append-to="body" class="border-1 surface-border" style="width: 40vh">
+      <PvPopover ref="op" class="border-1 surface-border" style="width: 40vh">
         <div class="flex justify-content-end mt-0 mb-2">
           <PvButton
             class="p-0 surface-hover border-none border-circle -rotate-45 hover:text-100 hover:bg-primary"
@@ -150,7 +150,7 @@
             </PvColumn>
           </PvDataTable>
         </div>
-      </PvOverlayPanel>
+      </PvPopover>
     </div>
     <div class="mr-0 pl-0 flex flex-column">
       <EditVariantDialog
diff --git a/src/components/auth/RegisterStudent.vue b/src/components/auth/RegisterStudent.vue
index 6d1a1102c..0012c5b3a 100644
--- a/src/components/auth/RegisterStudent.vue
+++ b/src/components/auth/RegisterStudent.vue
@@ -134,7 +134,7 @@
               </div>
             </div>
             <div v-if="!student.yearOnlyCheckRef">
-              <PvCalendar
+              <PvDatePicker
                 v-model="student.dob"
                 :max-date="maxDoB"
                 view="date"
@@ -144,7 +144,7 @@
               />
             </div>
             <div v-else>
-              <PvCalendar
+              <PvDatePicker
                 v-model="student.dob"
                 :max-date="maxDoB"
                 view="year"
diff --git a/src/components/auth/RegisterUser.vue b/src/components/auth/RegisterUser.vue
index 1fa3248f1..d9e51b5d1 100644
--- a/src/components/auth/RegisterUser.vue
+++ b/src/components/auth/RegisterUser.vue
@@ -43,7 +43,7 @@
           </div>
         </div>
         <div v-if="!yearOnlyCheck">
-          <PvCalendar
+          <PvDatePicker
             v-model="v$.dob.$model"
             view="date"
             date-format="mm/dd/yy"
@@ -53,7 +53,7 @@
           />
         </div>
         <div v-else>
-          <PvCalendar
+          <PvDatePicker
             v-model="v$.dob.$model"
             view="year"
             date-format="yy"
diff --git a/src/components/modals/EditUsers.vue b/src/components/modals/EditUsers.vue
index b50791edf..4a8af4903 100644
--- a/src/components/modals/EditUsers.vue
+++ b/src/components/modals/EditUsers.vue
@@ -36,7 +36,7 @@
                 >Date of Birth
                 <span v-if="localUserType === 'student'" v-tooltip.top="'Required'" class="required">*</span></label
               >
-              <PvCalendar
+              <PvDatePicker
                 v-model="localUserData.studentData.dob"
                 :class="{ 'p-invalid': errorMessage.includes('Date of birth') }"
               />
diff --git a/src/main.js b/src/main.js
index c5084a542..913201b32 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,7 +18,6 @@ import PvAutoComplete from 'primevue/autocomplete';
 import PvBadge from 'primevue/badge';
 import PvBlockUI from 'primevue/blockui';
 import PvButton from 'primevue/button';
-import PvCalendar from 'primevue/calendar';
 import PvCard from 'primevue/card';
 import PvChart from 'primevue/chart';
 import PvCheckbox from 'primevue/checkbox';
@@ -35,7 +34,6 @@ import PvImage from 'primevue/image';
 import PvInlineMessage from 'primevue/inlinemessage';
 import PvInputGroup from 'primevue/inputgroup';
 import PvInputNumber from 'primevue/inputnumber';
-import PvInputSwitch from 'primevue/inputswitch';
 import PvInputText from 'primevue/inputtext';
 import PvKnob from 'primevue/knob';
 import PvListbox from 'primevue/listbox';
@@ -58,7 +56,6 @@ import PvSplitter from 'primevue/splitter';
 import PvSplitterPanel from 'primevue/splitterpanel';
 import PvSteps from 'primevue/steps';
 import PvTabPanel from 'primevue/tabpanel';
-import PvTabView from 'primevue/tabview';
 import PvTag from 'primevue/tag';
 import PvToast from 'primevue/toast';
 import PvTreeTable from 'primevue/treetable';
@@ -74,6 +71,9 @@ import PvTabList from 'primevue/tablist';
 import PvTab from 'primevue/tab';
 import PvTabPanels from 'primevue/tabpanels';
 import PvSelect from 'primevue/select';
+import PvDatePicker from 'primevue/datepicker';
+import PvToggleSwitch from 'primevue/toggleswitch';
+import PvPopover from 'primevue/popover';
 
 // PrimeVue directive imports
 import PvTooltip from 'primevue/tooltip';
@@ -166,7 +166,6 @@ app.component('PvAutoComplete', PvAutoComplete);
 app.component('PvBadge', PvBadge);
 app.component('PvBlockUI', PvBlockUI);
 app.component('PvButton', PvButton);
-app.component('PvCalendar', PvCalendar);
 app.component('PvCard', PvCard);
 app.component('PvChart', PvChart);
 app.component('PvCheckbox', PvCheckbox);
@@ -183,7 +182,6 @@ app.component('PvImage', PvImage);
 app.component('PvInlineMessage', PvInlineMessage);
 app.component('PvInputGroup', PvInputGroup);
 app.component('PvInputNumber', PvInputNumber);
-app.component('PvInputSwitch', PvInputSwitch);
 app.component('PvInputText', PvInputText);
 app.component('PvKnob', PvKnob);
 app.component('PvListbox', PvListbox);
@@ -206,17 +204,14 @@ app.component('PvSplitter', PvSplitter);
 app.component('PvSplitterPanel', PvSplitterPanel);
 app.component('PvSteps', PvSteps);
 app.component('PvTabPanel', PvTabPanel);
-app.component('PvTabView', PvTabView);
 app.component('PvTag', PvTag);
 app.component('PvToast', PvToast);
 app.component('PvTreeTable', PvTreeTable);
 app.component('PvFloatLabel', PvFloatLabel);
 app.component('PvIconField', PvIconField);
 app.component('PvInputIcon', PvInputIcon);
-
 app.component('PvColumnGroup', PvColumnGroup);
 app.component('PvRow', PvRow);
-
 app.component('RoarDataTable', RoarDataTable);
 app.component('LanguageSelector', LanguageSelector);
 app.component('PvFieldset', PvFieldset);
@@ -226,6 +221,9 @@ app.component('PvTabList', PvTabList);
 app.component('PvTab', PvTab);
 app.component('PvTabPanels', PvTabPanels);
 app.component('PvSelect', PvSelect);
+app.component('PvDatePicker', PvDatePicker);
+app.component('PvToggleSwitch', PvToggleSwitch);
+app.component('PvPopover', PvPopover);
 
 app.directive('tooltip', PvTooltip);
 
diff --git a/src/pages/HomeParticipant.vue b/src/pages/HomeParticipant.vue
index cf018afbb..84b32b618 100644
--- a/src/pages/HomeParticipant.vue
+++ b/src/pages/HomeParticipant.vue
@@ -17,7 +17,7 @@
             v-if="optionalAssessments.length !== 0"
             class="switch-container flex flex-row align-items-center justify-content-end mr-6 gap-2"
           >
-            <PvInputSwitch
+            <PvToggleSwitch
               v-model="showOptionalAssessments"
               input-id="switch-optional"
               data-cy="switch-show-optional-assessments"
diff --git a/src/pages/HomeSelector.vue b/src/pages/HomeSelector.vue
index 0dd388991..89ff5905c 100644
--- a/src/pages/HomeSelector.vue
+++ b/src/pages/HomeSelector.vue
@@ -38,7 +38,10 @@ import { storeToRefs } from 'pinia';
 import { fetchDocById } from '@/helpers/query/utils';
 import { useI18n } from 'vue-i18n';
 
-let HomeParticipant, HomeAdministrator, ConsentModal;
+const HomeParticipant = ref(null);
+const HomeAdministrator = ref(null);
+const ConsentModal = ref(null);
+
 const isLevante = import.meta.env.MODE === 'LEVANTE';
 const authStore = useAuthStore();
 const { roarfirekit, uid, userQueryKeyIndex, authFromClever, authFromClassLink } = storeToRefs(authStore);
@@ -130,9 +133,9 @@ async function checkConsent() {
 }
 
 onMounted(async () => {
-  HomeParticipant = (await import('@/pages/HomeParticipant.vue')).default;
-  HomeAdministrator = (await import('@/pages/HomeAdministrator.vue')).default;
-  ConsentModal = (await import('@/components/ConsentModal.vue')).default;
+  HomeParticipant.value = (await import('@/pages/HomeParticipant.vue')).default;
+  HomeAdministrator.value = (await import('@/pages/HomeAdministrator.vue')).default;
+  ConsentModal.value = (await import('@/components/ConsentModal.vue')).default;
 
   if (requireRefresh.value) {
     requireRefresh.value = false;
diff --git a/src/pages/ManageTasksVariants.vue b/src/pages/ManageTasksVariants.vue
index d22c6968d..cee894dd3 100644
--- a/src/pages/ManageTasksVariants.vue
+++ b/src/pages/ManageTasksVariants.vue
@@ -9,15 +9,20 @@
         <div class="text-md text-gray-500 ml-6">Manage tasks and variants.</div>
       </div>
       <div class="register-container mx-auto md:flex-none">
-        <PvTabView>
-          <PvTabPanel header="Tasks">
-            <ManageTasks />
-          </PvTabPanel>
-
-          <PvTabPanel header="Variants">
-            <ManageVariants />
-          </PvTabPanel>
-        </PvTabView>
+        <PvTabs value="0">
+          <PvTabList>
+            <PvTab value="0" class="text-lg"> Tasks </PvTab>
+            <PvTab value="1" class="text-lg"> Variants </PvTab>
+          </PvTabList>
+          <PvTabPanels>
+            <PvTabPanel value="0">
+              <ManageTasks />
+            </PvTabPanel>
+            <PvTabPanel value="1">
+              <ManageVariants />
+            </PvTabPanel>
+          </PvTabPanels>
+        </PvTabs>
       </div>
     </section>
   </main>
diff --git a/src/pages/RegisterStudents.vue b/src/pages/RegisterStudents.vue
index deeb75dbc..68ed85fb4 100644
--- a/src/pages/RegisterStudents.vue
+++ b/src/pages/RegisterStudents.vue
@@ -6,7 +6,7 @@
           <i class="pi pi-users text-gray-400 rounded" style="font-size: 1.6rem" />
           <div class="admin-page-header">Add Participants</div>
         </div>
-        <div class="flex flex-column text-md text-gray-500 ml-6 gap-2">
+        <div class="flex flex-column text-md text-gray-500 ml-6 gap-2 mb-4">
           <div>Add participants by uploading a CSV.</div>
           <div>
             The following fields are required for registering a student:
diff --git a/src/pages/SignIn.vue b/src/pages/SignIn.vue
index 61f73bc45..3594c31d5 100644
--- a/src/pages/SignIn.vue
+++ b/src/pages/SignIn.vue
@@ -320,6 +320,6 @@ onBeforeUnmount(() => {
   padding-top: 21vh;
 }
 input.p-inputtext.p-component.p-password-input {
-  width: 50vh !important;
+  width: 51vh !important;
 }
 </style>

From ba16cbb483ada400aaa782e5aa779ad17183b927 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Wed, 31 Jul 2024 10:24:22 -0700
Subject: [PATCH 20/28] fixing ListOrgs

---
 .../default-tests/listOrgs.spec.cy.js         |  2 +-
 src/components/ListOrgs.vue                   | 41 +++++++++----------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/cypress/e2e/partner-admin/default-tests/listOrgs.spec.cy.js b/cypress/e2e/partner-admin/default-tests/listOrgs.spec.cy.js
index c7d45569e..08e68d5c4 100644
--- a/cypress/e2e/partner-admin/default-tests/listOrgs.spec.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/listOrgs.spec.cy.js
@@ -9,7 +9,7 @@ const orgs = [
 const listOrgsUrl = '/list-orgs';
 
 function checkOrgExists(org) {
-  cy.get('ul > li', { timeout: timeout }).contains(org.tabName, { timeout: timeout }).click();
+  cy.get('.p-tablist-tab-list', { timeout: timeout }).contains(org.tabName, { timeout: timeout }).click();
   cy.log('Tab ' + org.tabName + ' found.');
 
   cy.get('div', { timeout: timeout }).should('contain.text', org.orgName, {
diff --git a/src/components/ListOrgs.vue b/src/components/ListOrgs.vue
index 356986175..7db1370ce 100644
--- a/src/components/ListOrgs.vue
+++ b/src/components/ListOrgs.vue
@@ -9,16 +9,16 @@
             <div class="admin-page-header">List Organizations</div>
           </div>
         </div>
-        <div class="text-md text-gray-500 ml-6">View organizations asssigned to your account.</div>
+        <div class="text-md text-gray-500 ml-6">View organizations assigned to your account.</div>
       </div>
-      <PvTabs v-if="claimsLoaded" class="mb-7" value="districts">
+      <PvTabs v-if="claimsLoaded" v-model:value="activeOrgType" class="mb-7">
         <PvTabList>
-          <PvTab v-for="(orgType, index) in orgHeaders" :key="orgType" :value="String(index)" class="text-lg">
+          <PvTab v-for="orgType in orgHeaders" :key="orgType.id" :value="orgType.id" class="text-lg">
             {{ orgType.header }}
           </PvTab>
         </PvTabList>
         <PvTabPanels>
-          <PvTabPanel v-for="(orgType, index) in orgHeaders" :key="orgType" :value="String(index)">
+          <PvTabPanel v-for="orgType in orgHeaders" :key="orgType.id" :value="orgType.id">
             <div class="grid column-gap-3 mt-2">
               <div
                 v-if="activeOrgType === 'schools' || activeOrgType === 'classes'"
@@ -56,17 +56,18 @@
                 </PvFloatLabel>
               </div>
             </div>
-            <RoarDataTable
-              v-if="tableData"
-              :key="tableKey"
-              :columns="tableColumns"
-              :data="tableData"
-              sortable
-              :loading="isLoading || isFetching"
-              :allow-filtering="false"
-              @export-all="exportAll"
-              @selected-org-id="showCode"
-            />
+            <div v-if="tableData.length > 0">
+              <RoarDataTable
+                :key="tableKey"
+                :columns="tableColumns"
+                :data="tableData"
+                sortable
+                :loading="isLoading || isFetching"
+                :allow-filtering="false"
+                @export-all="exportAll"
+                @selected-org-id="showCode"
+              />
+            </div>
             <AppSpinner v-else />
           </PvTabPanel>
         </PvTabPanels>
@@ -119,6 +120,7 @@
     </section>
   </main>
 </template>
+
 <script setup>
 import { orgFetcher, orgFetchAll, orgPageFetcher } from '@/helpers/query/orgs';
 import { orderByDefault, exportCsv, fetchDocById } from '@/helpers/query/utils';
@@ -197,10 +199,7 @@ const orgHeaders = computed(() => {
   return result;
 });
 
-const activeIndex = ref(0);
-const activeOrgType = computed(() => {
-  return Object.keys(orgHeaders.value)[activeIndex.value];
-});
+const activeOrgType = ref('districts');
 
 const claimsLoaded = computed(() => !isLoadingClaims.value);
 
@@ -317,7 +316,6 @@ const tableColumns = computed(() => {
       sort: false,
     },
   );
-
   return columns;
 });
 
@@ -371,10 +369,11 @@ watch(allSchools, (newValue) => {
 });
 
 const tableKey = ref(0);
-watch([selectedDistrict, selectedSchool], () => {
+watch([selectedDistrict, selectedSchool, activeOrgType], () => {
   tableKey.value += 1;
 });
 </script>
+
 <style>
 .p-datatable-gridlines .p-datatable-tbody > tr > td {
   padding-left: 0.5rem !important;

From e95d70a800d00f76196add6471556eb467b8416a Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Tue, 13 Aug 2024 14:56:33 -0700
Subject: [PATCH 21/28] changes for dark mode

---
 package-lock.json                    |  2 +-
 src/assets/styles/theme-tailwind.css |  3 +++
 src/components/NavBar.vue            |  2 +-
 src/main.js                          | 18 ++++++++++++++++++
 src/pages/AdminProfile.vue           |  2 ++
 src/pages/ProgressReport.vue         |  2 ++
 src/pages/ScoreReport.vue            |  4 +++-
 src/pages/SignIn.vue                 |  5 ++++-
 8 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 34e191e1d..f4d841037 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,9 +20,9 @@
         "@bdelab/roav-crowding": "1.1.12",
         "@bdelab/roav-mep": "^1.1.17",
         "@bdelab/roav-ran": "^1.0.21",
+        "@levante-framework/core-tasks": "^1.0.0-beta.18",
         "@primevue/core": "^4.0.1",
         "@primevue/themes": "^4.0.1",
-        "@levante-framework/core-tasks": "^1.0.0-beta.18",
         "@sentry/browser": "^8.0.0",
         "@sentry/integrations": "^7.114.0",
         "@sentry/vite-plugin": "^2.16.1",
diff --git a/src/assets/styles/theme-tailwind.css b/src/assets/styles/theme-tailwind.css
index 0222b8261..eea427a3c 100644
--- a/src/assets/styles/theme-tailwind.css
+++ b/src/assets/styles/theme-tailwind.css
@@ -11,3 +11,6 @@ button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-round
   color: white;
   margin-left: 3px !important;
 }
+main.container.main {
+  background-color: white;
+}
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 8494c75fa..659128962 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -47,7 +47,7 @@
                 <div v-tooltip="'Click to see your Information'" class="nav-user-wrapper bg-gray-100 p-0">
                   <router-link :to="{ name: 'ProfileInfo' }"
                     ><button
-                      class="no-underline text-primary border-none border-round cursor-pointer m-0 text-sm hover:bg-red-900 hover:text-white"
+                      class="no-underline text-primary bg-white border-none border-round cursor-pointer m-0 text-sm hover:bg-red-900 hover:text-white"
                       style="padding: 0.9rem"
                     >
                       <i class="pi pi-cog m-0 p-0"></i></button
diff --git a/src/main.js b/src/main.js
index cde5b1539..4a6161d6c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -135,6 +135,24 @@ const MyPreset = definePreset(Aura, {
       900: '{red.900}',
       950: '{red.950}',
     },
+    colorScheme: {
+      dark: {
+        surface: {
+          0: 'black',
+          50: '{surface.200}',
+          100: '{surface.300}',
+          200: '{red.200}',
+          300: '{red.300}',
+          400: '{red.400}',
+          500: '{red.500}',
+          600: '{surface.200}',
+          700: '{gray.200}',
+          800: 'white',
+          900: 'white',
+          950: 'white',
+        },
+      },
+    },
   },
 });
 
diff --git a/src/pages/AdminProfile.vue b/src/pages/AdminProfile.vue
index 80273f097..d2e087e93 100644
--- a/src/pages/AdminProfile.vue
+++ b/src/pages/AdminProfile.vue
@@ -137,6 +137,8 @@ const isAdmin = computed(() => {
   overflow: scroll;
   padding: 1rem;
   scroll-behavior: smooth;
+  background: white;
+  color: var(--gray-600);
 }
 .sidebar-container-collapsed {
   display: flex;
diff --git a/src/pages/ProgressReport.vue b/src/pages/ProgressReport.vue
index 3ec483e19..7f903aefc 100644
--- a/src/pages/ProgressReport.vue
+++ b/src/pages/ProgressReport.vue
@@ -601,6 +601,7 @@ onMounted(async () => {
   font-size: 2.5rem;
   font-weight: bold;
   margin-top: 0;
+  color: black;
 }
 
 .no-scores-container {
@@ -621,6 +622,7 @@ onMounted(async () => {
 .administration-name {
   font-size: 1.8rem;
   font-weight: light;
+  color: black;
 }
 
 .report-subheader {
diff --git a/src/pages/ScoreReport.vue b/src/pages/ScoreReport.vue
index 4995e8a45..89a36e6e1 100644
--- a/src/pages/ScoreReport.vue
+++ b/src/pages/ScoreReport.vue
@@ -1352,11 +1352,13 @@ onMounted(async () => {
   font-size: clamp(1.5rem, 2rem, 2.5rem);
   font-weight: bold;
   margin-top: 0;
+  color: black;
 }
 
 .administration-name {
   font-size: clamp(1.1rem, 1.3rem, 1.7rem);
-  font-weight: light;
+  margin-bottom: 0.5rem;
+  color: black;
 }
 
 .report-subheader {
diff --git a/src/pages/SignIn.vue b/src/pages/SignIn.vue
index 3594c31d5..ba3d8c22d 100644
--- a/src/pages/SignIn.vue
+++ b/src/pages/SignIn.vue
@@ -320,6 +320,9 @@ onBeforeUnmount(() => {
   padding-top: 21vh;
 }
 input.p-inputtext.p-component.p-password-input {
-  width: 51vh !important;
+  width: 100% !important;
+}
+div#password {
+  width: 100% !important;
 }
 </style>

From 642e37ed02775d537e953f09c2731833f5b9fbe7 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Tue, 13 Aug 2024 16:04:40 -0700
Subject: [PATCH 22/28] dark mode modifications

---
 src/components/CreateAdministration.vue |  8 ++---
 src/components/CreateAdministrator.vue  |  2 +-
 src/components/CreateOrgs.vue           |  6 ++--
 src/components/auth/RegisterParent.vue  | 16 +++++-----
 src/components/auth/RegisterStudent.vue | 40 ++++++++++++++-----------
 src/main.js                             |  4 +--
 src/pages/HomeParticipant.vue           |  8 ++---
 src/pages/ProgressReport.vue            |  6 ++--
 src/pages/RegisterFamilyUsers.vue       |  4 +--
 src/pages/RegisterStudents.vue          |  2 +-
 src/pages/ScoreReport.vue               | 24 +++++++--------
 11 files changed, 63 insertions(+), 57 deletions(-)

diff --git a/src/components/CreateAdministration.vue b/src/components/CreateAdministration.vue
index e27b6463c..952474c43 100644
--- a/src/components/CreateAdministration.vue
+++ b/src/components/CreateAdministration.vue
@@ -122,17 +122,17 @@
         <div class="flex flex-column justify-content-center mt-5">
           <div class="flex flex-column mt-2 align-items-center justify-content-center">
             <div class="flex">
-              <label style="font-weight: bold" class="mb-2 mx-2">Sequential?</label>
+              <label style="font-weight: bold" class="mb-2 mx-2 text-gray-600">Sequential?</label>
               <span class="flex gap-2">
                 <PvRadioButton v-model="state.sequential" input-id="Yes" :value="true" />
-                <label for="Yes">Yes</label>
+                <label for="Yes" class="text-gray-600">Yes</label>
                 <PvRadioButton
                   v-model="state.sequential"
                   data-cy="radio-button-not-sequential"
                   input-id="No"
                   :value="false"
                 />
-                <label for="No">No</label>
+                <label for="No" class="text-gray-600">No</label>
               </span>
               <small v-if="v$.sequential.$invalid && submitted" class="p-error mt-2"
                 >Please specify sequential behavior.</small
@@ -140,7 +140,7 @@
             </div>
             <div class="mt-2 mb-2">
               <PvCheckbox v-model="isTestData" :binary="true" data-cy="checkbutton-test-data" input-id="isTestData" />
-              <label for="isTestData" class="ml-2">Mark As <b>Test Administration</b></label>
+              <label for="isTestData" class="ml-2 text-gray-600">Mark As <b>Test Administration</b></label>
             </div>
           </div>
           <div class="divider mx-2 my-3" />
diff --git a/src/components/CreateAdministrator.vue b/src/components/CreateAdministrator.vue
index 8adbd507a..13b3aa4be 100644
--- a/src/components/CreateAdministrator.vue
+++ b/src/components/CreateAdministrator.vue
@@ -57,7 +57,7 @@
           <div class="flex flex-row align-items-center justify-content-center gap-2 flex-order-0 my-3">
             <div class="flex flex-row align-items-center">
               <PvCheckbox v-model="isTestData" input-id="chbx-externalTask" :binary="true" />
-              <label class="ml-1 mr-3" for="chbx-externalTask">Mark as <b>Test Administrator</b></label>
+              <label class="ml-1 mr-3 text-gray-600" for="chbx-externalTask">Mark as <b>Test Administrator</b></label>
             </div>
           </div>
 
diff --git a/src/components/CreateOrgs.vue b/src/components/CreateOrgs.vue
index ed9ba1747..703d937f1 100644
--- a/src/components/CreateOrgs.vue
+++ b/src/components/CreateOrgs.vue
@@ -104,7 +104,7 @@
           </div>
         </div>
 
-        <div class="mt-5 mb-0 pb-0">Optional fields:</div>
+        <div class="mt-5 mb-0 pb-0 text-gray-600">Optional fields:</div>
 
         <div v-if="['district', 'school', 'group'].includes(orgType?.singular)">
           <div class="grid column-gap-3">
@@ -172,11 +172,11 @@
         <div class="flex flex-row align-items-center justify-content-stagap-2 flex-order-0 my-3">
           <div class="flex flex-row align-items-center">
             <PvCheckbox v-model="isDemoData" input-id="chbx-demodata" :binary="true" />
-            <label class="ml-1 mr-3" for="chbx-demodata">Mark as <b>Demo Organization</b></label>
+            <label class="ml-1 mr-3 text-gray-600" for="chbx-demodata">Mark as <b>Demo Organization</b></label>
           </div>
           <div class="flex flex-row align-items-center">
             <PvCheckbox v-model="isTestData" input-id="chbx-testdata" :binary="true" />
-            <label class="ml-1 mr-3" for="chbx-testdata">Mark as <b>Test Organization</b></label>
+            <label class="ml-1 mr-3 text-gray-600" for="chbx-testdata">Mark as <b>Test Organization</b></label>
           </div>
         </div>
 
diff --git a/src/components/auth/RegisterParent.vue b/src/components/auth/RegisterParent.vue
index a322d8055..4d80c28ae 100644
--- a/src/components/auth/RegisterParent.vue
+++ b/src/components/auth/RegisterParent.vue
@@ -3,12 +3,12 @@
     <form class="p-fluid" @submit.prevent="handleFormSubmit(!v$.$invalid)">
       <section class="form-section flex lg:flex-row">
         <div>
-          <label for="firstName">First Name <span class="required p-1">*</span></label>
+          <label for="firstName" class="text-gray-600">First Name <span class="required p-1">*</span></label>
           <PvInputText
             v-model="v$.firstName.$model"
             name="firstName"
             :class="{ 'p-invalid': v$.firstName.$invalid && submitted }"
-            style="width: 25vh"
+            style="width: 25vh; background: white"
             aria-describedby="first-name-error"
           />
           <span v-if="v$.firstName.$error && submitted">
@@ -21,7 +21,7 @@
           </small>
         </div>
         <div>
-          <label for="lastName">Last Name <span class="required p-1">*</span></label>
+          <label for="lastName" class="text-gray-600">Last Name <span class="required p-1">*</span></label>
           <PvInputText
             v-model="v$.lastName.$model"
             name="lastName"
@@ -42,7 +42,7 @@
       <!--Username / Email-->
       <section class="form-section flex lg:flex-row">
         <div class="p-input-icon-right">
-          <label for="ParentEmail">Email <span class="required p-1">*</span></label>
+          <label for="ParentEmail" class="text-gray-600">Email <span class="required p-1">*</span></label>
           <PvInputText
             v-model="v$.ParentEmail.$model"
             name="ParentEmail"
@@ -63,7 +63,7 @@
       <section class="form-section flex lg:flex-row">
         <div>
           <div>
-            <label for="password">Password <span class="required p-1">*</span></label>
+            <label for="password" class="text-gray-600">Password <span class="required p-1">*</span></label>
             <PvPassword
               v-model="v$.password.$model"
               name="password"
@@ -86,7 +86,9 @@
         <!--Confirm Password-->
         <div>
           <div>
-            <label for="confirmPassword">Confirm Password <span class="required p-1">*</span></label>
+            <label for="confirmPassword" class="text-gray-600"
+              >Confirm Password <span class="required p-1">*</span></label
+            >
             <PvPassword
               :id="`confirmPassword-${isRegistering ? 'register' : 'login'}`"
               v-model="v$.confirmPassword.$model"
@@ -121,7 +123,7 @@
               :class="[{ 'p-invalid': v$.accept.$invalid && submitted }]"
               @change="getConsent"
             />
-            <label for="accept" :class="{ 'p-error': v$.accept.$invalid && submitted }"
+            <label for="accept" :class="{ 'p-error': v$.accept.$invalid && submitted }" style="color: var(--gray-600)"
               >I agree to the terms and conditions<span class="required">*</span></label
             >
           </div>
diff --git a/src/components/auth/RegisterStudent.vue b/src/components/auth/RegisterStudent.vue
index 0012c5b3a..b6638288b 100644
--- a/src/components/auth/RegisterStudent.vue
+++ b/src/components/auth/RegisterStudent.vue
@@ -5,7 +5,7 @@
         <section v-if="!student.orgName" class="form-section">
           <div class="p-input-icon-right">
             <div class="flex justify-content-between">
-              <label for="activationCode">Activation code <span class="required">*</span></label>
+              <label for="activationCode" class="text-gray-600">Activation code <span class="required">*</span></label>
               <div class="flex align-items-center">
                 <PvCheckbox
                   v-model="student.noActivationCode"
@@ -13,7 +13,7 @@
                   name="noActivationCode"
                   @change="updateActivationCode"
                 />
-                <label for="noActivationCode" class="ml-2">I don't have code</label>
+                <label for="noActivationCode" class="ml-2 text-gray-600">I don't have code</label>
               </div>
             </div>
             <PvInputGroup v-if="!student.noActivationCode">
@@ -61,7 +61,9 @@
         </section>
         <section class="form-section">
           <div class="p-input-icon-right">
-            <label for="studentUsername">Student Username <span class="required mr-2">*</span></label>
+            <label for="studentUsername" class="text-gray-600"
+              >Student Username <span class="required mr-2">*</span></label
+            >
             <PvInputText
               v-model="student.studentUsername"
               name="studentUsername"
@@ -83,7 +85,7 @@
         <section class="form-section flex lg:flex-row">
           <div>
             <div>
-              <label for="password">Password <span class="required">*</span></label>
+              <label for="password" class="text-gray-600">Password <span class="required">*</span></label>
               <PvPassword
                 v-model="student.password"
                 name="password"
@@ -108,7 +110,9 @@
           <!-- Confirm Password -->
           <div>
             <div>
-              <label for="confirmPassword">Confirm Password <span class="required">*</span></label>
+              <label for="confirmPassword" class="text-gray-600"
+                >Confirm Password <span class="required">*</span></label
+              >
               <PvPassword
                 :id="`confirmPassword-${isRegistering ? 'register' : 'login'}`"
                 v-model="student.confirmPassword"
@@ -127,10 +131,10 @@
           <div>
             <!-- Age / DOB -->
             <div class="flex justify-content-between">
-              <label>Date of Birth <span class="required">*</span></label>
+              <label class="text-gray-600">Date of Birth <span class="required">*</span></label>
               <div class="flex align-items-center">
                 <PvCheckbox v-model="student.yearOnlyCheckRef" :binary="true" name="yearOnly" />
-                <label for="yearOnly" class="ml-2">Use Year Only</label>
+                <label for="yearOnly" class="ml-2 text-gray-600">Use Year Only</label>
               </div>
             </div>
             <div v-if="!student.yearOnlyCheckRef">
@@ -161,7 +165,7 @@
         <section class="form-section">
           <!--Grade-->
           <div>
-            <label for="grade">Grade <span class="required">*</span></label>
+            <label for="grade" class="text-gray-600">Grade <span class="required">*</span></label>
             <PvSelect
               v-model="student.grade"
               :options="gradeOptions"
@@ -177,7 +181,7 @@
             <!--First / Last Name-->
             <section class="form-section">
               <div>
-                <label for="firstName">First Name </label>
+                <label for="firstName" class="text-gray-600">First Name </label>
                 <PvInputText
                   v-model="student.firstName"
                   name="firstName"
@@ -189,13 +193,13 @@
               </div>
               <!-- Middle Name -->
               <div>
-                <label for="middleName">Middle Name </label>
+                <label for="middleName" class="text-gray-600">Middle Name </label>
                 <PvInputText v-model="student.middleName" name="middleName" />
               </div>
             </section>
             <section class="form-section">
               <div>
-                <label for="lastName">Last Name </label>
+                <label for="lastName" class="text-gray-600">Last Name </label>
                 <PvInputText
                   v-model="student.lastName"
                   name="lastName"
@@ -210,7 +214,7 @@
             <section class="form-section flex flex-column">
               <!--English Language Level-->
               <div class="w-full">
-                <label for="ell">English as a Second Language</label>
+                <label for="ell" class="text-gray-600">English as a Second Language</label>
                 <PvSelect
                   v-model="student.ell"
                   :options="ellOptions"
@@ -222,7 +226,7 @@
               </div>
               <!--Sex-->
               <div class="w-full">
-                <label for="sex">Gender </label>
+                <label for="sex" class="text-gray-600">Gender </label>
                 <PvSelect
                   v-model="student.gender"
                   :options="genderOptions"
@@ -236,7 +240,7 @@
             <section class="form-section flex flex-column">
               <!-- Free-Reduced Lunch -->
               <div class="w-full">
-                <label for="stateId">Free-Reduced Lunch </label>
+                <label for="stateId" class="text-gray-600">Free-Reduced Lunch </label>
                 <PvSelect
                   v-model="student.freeReducedLunch"
                   :options="frlOptions"
@@ -248,7 +252,7 @@
               </div>
               <!-- IEP Status -->
               <div class="w-full">
-                <label for="stateId">IEP Status</label>
+                <label for="stateId" class="text-gray-600">IEP Status</label>
                 <PvSelect
                   v-model="student.IEPStatus"
                   :options="IEPOptions"
@@ -262,7 +266,7 @@
             <section class="form-section flex flex-column">
               <!-- Race -->
               <div class="w-full">
-                <label for="race">Race </label>
+                <label for="race" class="text-gray-600">Race </label>
                 <PvAutoComplete
                   v-model="student.race"
                   multiple
@@ -274,7 +278,7 @@
               </div>
               <!-- Hispanic Ethinicity -->
               <div class="w-full">
-                <label for="hispanicEthnicity">Hispanic or Latino Ethnicity </label>
+                <label for="hispanicEthnicity" class="text-gray-600">Hispanic or Latino Ethnicity </label>
                 <PvSelect
                   v-model="student.hispanicEthnicity"
                   :options="ethnicityOptions"
@@ -288,7 +292,7 @@
             <section class="form-section">
               <!-- Home Language -->
               <div class="w-full">
-                <label for="stateId">Home Language </label>
+                <label for="stateId" class="text-gray-600">Home Language </label>
                 <PvAutoComplete
                   v-model="student.homeLanguage"
                   multiple
diff --git a/src/main.js b/src/main.js
index d26833bb8..a21d2830e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -143,8 +143,8 @@ const MyPreset = definePreset(Aura, {
           0: 'black',
           50: '{surface.200}',
           100: '{surface.300}',
-          200: '{red.200}',
-          300: '{red.300}',
+          200: '{red.800}',
+          300: '{red.800}',
           400: '{red.400}',
           500: '{red.500}',
           600: '{surface.200}',
diff --git a/src/pages/HomeParticipant.vue b/src/pages/HomeParticipant.vue
index 1330a3614..c515f67df 100644
--- a/src/pages/HomeParticipant.vue
+++ b/src/pages/HomeParticipant.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div v-if="!noGamesAvailable || consentSpinner">
+    <div v-if="!noGamesAvailable || consentSpinner" class="bg-white-alpha-90">
       <!-- <WE ARE USING V-SHOW INSTEAD OF V-IF BECAUSE OTHERWISE THE STYLE WILL BREAK> -->
       <div v-show="isFetching" class="loading-container">
         <AppSpinner style="margin-bottom: 1rem" />
@@ -69,10 +69,10 @@
         </div>
       </div>
     </div>
-    <div v-else>
+    <div v-else class="bg-white-alpha-90">
       <div class="col-full text-center">
-        <h1>{{ $t('homeParticipant.noAssignments') }}</h1>
-        <p class="text-center">{{ $t('homeParticipant.contactAdministrator') }}</p>
+        <h1 class="text-gray-600">{{ $t('homeParticipant.noAssignments') }}</h1>
+        <p class="text-center text-gray-600">{{ $t('homeParticipant.contactAdministrator') }}</p>
         <router-link :to="{ name: 'SignOut' }">
           <PvButton
             :label="$t('navBar.signOut')"
diff --git a/src/pages/ProgressReport.vue b/src/pages/ProgressReport.vue
index 7f903aefc..eb38a97f7 100644
--- a/src/pages/ProgressReport.vue
+++ b/src/pages/ProgressReport.vue
@@ -85,19 +85,19 @@
               <div class="legend-entry">
                 <div class="circle" style="background-color: var(--bright-green)" />
                 <div>
-                  <div>Completed</div>
+                  <div class="text-gray-600">Completed</div>
                 </div>
               </div>
               <div class="legend-entry">
                 <div class="circle" style="background-color: var(--yellow-100)" />
                 <div>
-                  <div>Started</div>
+                  <div class="text-gray-600">Started</div>
                 </div>
               </div>
               <div class="legend-entry">
                 <div class="circle" style="background-color: var(--surface-d)" />
                 <div>
-                  <div>Assigned</div>
+                  <div class="text-gray-600">Assigned</div>
                 </div>
               </div>
             </div>
diff --git a/src/pages/RegisterFamilyUsers.vue b/src/pages/RegisterFamilyUsers.vue
index 84dcf3920..b3fc5bea9 100644
--- a/src/pages/RegisterFamilyUsers.vue
+++ b/src/pages/RegisterFamilyUsers.vue
@@ -9,11 +9,11 @@
       <div>
         <div v-if="activeIndex === 0" class="register-title">
           <h1 align="center">Register for ROAR</h1>
-          <p align="center">Enter your information to create an account.</p>
+          <p align="center" class="text-gray-600">Enter your information to create an account.</p>
         </div>
         <div v-else class="register-title">
           <h1 align="center">Register your child</h1>
-          <p align="center">Enter your child's information to create their ROAR account.</p>
+          <p align="center" class="text-gray-600">Enter your child's information to create their ROAR account.</p>
         </div>
         <div v-if="spinner === false">
           <KeepAlive>
diff --git a/src/pages/RegisterStudents.vue b/src/pages/RegisterStudents.vue
index 68ed85fb4..57d4b7c7c 100644
--- a/src/pages/RegisterStudents.vue
+++ b/src/pages/RegisterStudents.vue
@@ -95,7 +95,7 @@
         <div class="submit-container">
           <div class="m-2">
             <PvCheckbox v-model="isAllTestData" :binary="true" input-id="isTestData" />
-            <label for="isTestData" class="ml-2">All users are test accounts</label>
+            <label for="isTestData" class="ml-2 text-gray-600">All users are test accounts</label>
           </div>
           <PvButton
             label="Start Registration"
diff --git a/src/pages/ScoreReport.vue b/src/pages/ScoreReport.vue
index 89a36e6e1..06400c82c 100644
--- a/src/pages/ScoreReport.vue
+++ b/src/pages/ScoreReport.vue
@@ -68,10 +68,10 @@
                         :administration-id="props.administrationId"
                       />
                       <div className="task-description mt-3">
-                        <span class="font-bold">
+                        <span class="font-bold text-gray-600">
                           {{ descriptionsByTaskId[taskId]?.header ? descriptionsByTaskId[taskId].header : '' }}
                         </span>
-                        <span class="font-light">
+                        <span class="font-light text-gray-600">
                           {{
                             descriptionsByTaskId[taskId]?.description ? descriptionsByTaskId[taskId].description : ''
                           }}
@@ -89,19 +89,19 @@
                   <div class="legend-entry">
                     <div class="circle" :style="`background-color: ${supportLevelColors.below};`" />
                     <div>
-                      <div>Needs Extra Support</div>
+                      <div class="text-gray-600">Needs Extra Support</div>
                     </div>
                   </div>
                   <div class="legend-entry">
                     <div class="circle" :style="`background-color: ${supportLevelColors.some};`" />
                     <div>
-                      <div>Developing Skill</div>
+                      <div class="text-gray-600">Developing Skill</div>
                     </div>
                   </div>
                   <div class="legend-entry">
                     <div class="circle" :style="`background-color: ${supportLevelColors.above};`" />
                     <div>
-                      <div>Achieved Skill</div>
+                      <div class="text-gray-600">Achieved Skill</div>
                     </div>
                   </div>
                 </div>
@@ -183,25 +183,25 @@
           <div class="legend-entry">
             <div class="circle tooltip" :style="`background-color: ${supportLevelColors.below};`" />
             <div>
-              <div>Needs Extra Support</div>
+              <div class="text-gray-600">Needs Extra Support</div>
             </div>
           </div>
           <div class="legend-entry">
             <div class="circle tooltip" :style="`background-color: ${supportLevelColors.some};`" />
             <div>
-              <div>Developing Skill</div>
+              <div class="text-gray-600">Developing Skill</div>
             </div>
           </div>
           <div class="legend-entry">
             <div class="circle tooltip" :style="`background-color: ${supportLevelColors.above};`" />
             <div>
-              <div>Achieved Skill</div>
+              <div class="text-gray-600">Achieved Skill</div>
             </div>
           </div>
           <div class="legend-entry">
             <div class="circle tooltip" :style="`background-color: ${supportLevelColors.Assessed}`" />
             <div>
-              <div>Assessed</div>
+              <div class="text-gray-600">Assessed</div>
             </div>
           </div>
         </div>
@@ -220,7 +220,7 @@
           <PvTabPanel
             v-for="taskId of sortedTaskIds"
             :key="taskId"
-            :header="tasksDictionary.value[taskId]?.publicName ?? taskId"
+            :header="tasksDictionary[taskId]?.publicName ?? taskId"
           >
             <div :id="'tab-view-' + taskId">
               <TaskReport
@@ -238,7 +238,7 @@
             </div>
           </PvTabPanel>
         </PvTabView>
-        <div id="score-report-closing" class="bg-gray-200 px-4 py-2 mt-4">
+        <div id="score-report-closing" class="bg-gray-200 px-4 py-2 mt-4 text-gray-600">
           <h2 class="extra-info-title">HOW ROAR SCORES INFORM PLANNING TO PROVIDE SUPPORT</h2>
           <p>
             Each foundational reading skill is a building block of the subsequent skill. Phonological awareness supports
@@ -265,7 +265,7 @@
           <!-- Reintroduce when we have somewhere for this link to go. -->
           <!-- <a href="google.com">Click here</a> for more guidance on steps you can take in planning to support your students. -->
         </div>
-        <div class="bg-gray-200 px-4 py-2 mb-7">
+        <div class="bg-gray-200 px-4 py-2 mb-7 text-gray-600">
           <h2 class="extra-info-title">NEXT STEPS</h2>
           <!-- Reintroduce when we have somewhere for this link to go. -->
           <!-- <p>This score report has provided a snapshot of your school's reading performance at the time of administration. By providing classifications for students based on national norms for scoring, you are able to see which students can benefit from varying levels of support. To read more about what to do to support your students, <a href="google.com">read here.</a></p> -->

From 251e4f5c9f932e5f5f9d0a6ffe0a6de8e13300c1 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Wed, 14 Aug 2024 09:04:13 -0700
Subject: [PATCH 23/28] finishing darkmode primitive color changes

---
 src/components/ParticipantSidebar.vue | 8 ++++----
 src/pages/HomeAdministrator.vue       | 3 +++
 src/pages/HomeParticipant.vue         | 7 +++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/ParticipantSidebar.vue b/src/components/ParticipantSidebar.vue
index ad833ad19..33e88b912 100644
--- a/src/components/ParticipantSidebar.vue
+++ b/src/components/ParticipantSidebar.vue
@@ -3,16 +3,16 @@
     <div class="sidebar-progress">
       <PvChart type="doughnut" :data="chartData" :options="chartOptions" />
       <div>
-        <p class="sidebar-progress-totals">{{ completedGames }}/{{ totalGames }}</p>
-        <p>{{ $t('participantSidebar.tasksCompleted') }}</p>
+        <p class="sidebar-progress-totals text-gray-600">{{ completedGames }}/{{ totalGames }}</p>
+        <p class="text-gray-600">{{ $t('participantSidebar.tasksCompleted') }}</p>
       </div>
     </div>
     <div class="flex flex-row">
       <ul v-if="!!studentInfo" class="sidebar-info">
-        <li class="sidebar-title">
+        <li class="sidebar-title text-gray-600">
           <strong>{{ $t('participantSidebar.studentInfo') }}</strong>
         </li>
-        <li>
+        <li class="text-gray-600">
           {{ $t('participantSidebar.grade') }}: <span class="sidebar-info-item">{{ studentInfo.grade }}</span>
         </li>
       </ul>
diff --git a/src/pages/HomeAdministrator.vue b/src/pages/HomeAdministrator.vue
index 5db454b5e..448742277 100644
--- a/src/pages/HomeAdministrator.vue
+++ b/src/pages/HomeAdministrator.vue
@@ -381,4 +381,7 @@ button.p-button.p-component.p-button-icon-only.p-autocomplete-dropdown {
   width: 100%;
   text-align: center;
 }
+body {
+  background: white;
+}
 </style>
diff --git a/src/pages/HomeParticipant.vue b/src/pages/HomeParticipant.vue
index c515f67df..7354349db 100644
--- a/src/pages/HomeParticipant.vue
+++ b/src/pages/HomeParticipant.vue
@@ -8,11 +8,11 @@
       </div>
       <div v-show="!isFetching">
         <PvFloatLabel>
-          <h2 v-if="adminInfo?.length == 1" class="dropdown-container">
+          <h2 v-if="adminInfo?.length == 1" class="dropdown-container text-gray-600 ml-5">
             {{ adminInfo.at(0).publicName || adminInfo.at(0).name }}
           </h2>
         </PvFloatLabel>
-        <div class="flex flex-row-reverse align-items-end gap-2 justify-content-between">
+        <div class="flex flex-row-reverse align-items-end gap-2 justify-content-between text-gray-600">
           <div
             v-if="optionalAssessments.length !== 0"
             class="switch-container flex flex-row align-items-center justify-content-end mr-6 gap-2"
@@ -447,4 +447,7 @@ watch(
   width: 100%;
   text-align: center;
 }
+body {
+  background: white;
+}
 </style>

From aaa6d3022a90129c2c381773699fe10240ef76e8 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Wed, 14 Aug 2024 09:56:31 -0700
Subject: [PATCH 24/28] Fixing cypress tests

---
 .../default-tests/testProgressReportFiltering.spec.cy.js        | 2 +-
 .../partner-admin/default-tests/testScoreReportFiltering.cy.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js b/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
index 3a58142f1..c656b44e8 100644
--- a/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/testProgressReportFiltering.spec.cy.js
@@ -152,7 +152,7 @@ describe('The partner admin can view progress reports for a given administration
     checkUrl();
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickProgressButton(roarTestAdministrationId);
-    setFilterByProgressCategory('Written-Vocab', 'started');
+    setFilterByProgressCategory('ROAR - Written Vocab', 'started');
     cy.get('.flex.flex-column.align-items-center.align-text-left.my-8').contains('No results found');
     cy.get('.flex.flex-column.align-items-center.align-text-left.my-8').contains('Reset Filters');
   });
diff --git a/cypress/e2e/partner-admin/default-tests/testScoreReportFiltering.cy.js b/cypress/e2e/partner-admin/default-tests/testScoreReportFiltering.cy.js
index aa11fa502..227fb1263 100644
--- a/cypress/e2e/partner-admin/default-tests/testScoreReportFiltering.cy.js
+++ b/cypress/e2e/partner-admin/default-tests/testScoreReportFiltering.cy.js
@@ -143,7 +143,7 @@ describe('The partner admin can view score reports for a given administration an
     checkUrl();
     cy.getAdministrationCard(roarTestAdministrationName, 'descending');
     clickScoreButton(roarTestAdministrationId);
-    setFilterByScoreCategory('Written-Vocab', 'Optional');
+    setFilterByScoreCategory('ROAR - Written Vocab', 'Optional');
     cy.get('.flex.flex-column.align-items-center.align-text-left.my-8').contains('No results found');
     cy.get('.flex.flex-column.align-items-center.align-text-left.my-8').contains('Reset Filters');
   });

From 7a4a697e0e4c908c6ae6b8945671e222ef58b343 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Thu, 15 Aug 2024 10:34:32 -0700
Subject: [PATCH 25/28] firebase functions

---
 roar-firebase-functions | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/roar-firebase-functions b/roar-firebase-functions
index d3eb5bd8d..3186f408d 160000
--- a/roar-firebase-functions
+++ b/roar-firebase-functions
@@ -1 +1 @@
-Subproject commit d3eb5bd8d868100df22c03973a49618fc818b859
+Subproject commit 3186f408dbba54d2558b9f4df2b4adbc5cf987fb

From a413705c6ab8dfef84d9ef2ac545150fea19aa94 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Thu, 15 Aug 2024 10:43:52 -0700
Subject: [PATCH 26/28] enforcing light mode

---
 src/assets/styles/theme-tailwind.css |  3 ---
 src/main.js                          | 21 +++------------------
 src/pages/HomeAdministrator.vue      |  3 ---
 src/pages/HomeParticipant.vue        |  3 ---
 4 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/src/assets/styles/theme-tailwind.css b/src/assets/styles/theme-tailwind.css
index eea427a3c..0222b8261 100644
--- a/src/assets/styles/theme-tailwind.css
+++ b/src/assets/styles/theme-tailwind.css
@@ -11,6 +11,3 @@ button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-round
   color: white;
   margin-left: 3px !important;
 }
-main.container.main {
-  background-color: white;
-}
diff --git a/src/main.js b/src/main.js
index a21d2830e..71c74de95 100644
--- a/src/main.js
+++ b/src/main.js
@@ -137,30 +137,15 @@ const MyPreset = definePreset(Aura, {
       900: '{red.900}',
       950: '{red.950}',
     },
-    colorScheme: {
-      dark: {
-        surface: {
-          0: 'black',
-          50: '{surface.200}',
-          100: '{surface.300}',
-          200: '{red.800}',
-          300: '{red.800}',
-          400: '{red.400}',
-          500: '{red.500}',
-          600: '{surface.200}',
-          700: '{gray.200}',
-          800: 'white',
-          900: 'white',
-          950: 'white',
-        },
-      },
-    },
   },
 });
 
 app.use(PrimeVue, {
   theme: {
     preset: MyPreset,
+    options: {
+      darkModeSelector: 'dark-mode',
+    },
   },
   ripple: true,
 });
diff --git a/src/pages/HomeAdministrator.vue b/src/pages/HomeAdministrator.vue
index 448742277..5db454b5e 100644
--- a/src/pages/HomeAdministrator.vue
+++ b/src/pages/HomeAdministrator.vue
@@ -381,7 +381,4 @@ button.p-button.p-component.p-button-icon-only.p-autocomplete-dropdown {
   width: 100%;
   text-align: center;
 }
-body {
-  background: white;
-}
 </style>
diff --git a/src/pages/HomeParticipant.vue b/src/pages/HomeParticipant.vue
index 7354349db..1ceca067b 100644
--- a/src/pages/HomeParticipant.vue
+++ b/src/pages/HomeParticipant.vue
@@ -447,7 +447,4 @@ watch(
   width: 100%;
   text-align: center;
 }
-body {
-  background: white;
-}
 </style>

From 9aa3d69b85273680102e637439576889937b6cbe Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Fri, 16 Aug 2024 10:40:18 -0700
Subject: [PATCH 27/28] solving responsive issues

---
 src/components/NavBar.vue               | 23 +++++++++++++++++++++--
 src/components/auth/RegisterParent.vue  | 10 +++++-----
 src/components/auth/RegisterStudent.vue | 12 ++++++------
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 659128962..ca5ccc1c1 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -15,15 +15,16 @@
             <template #menubuttonicon>
               <PvButton
                 icon="pi pi-bars mr-2"
-                class="bg-primary text-white p-2 mr-2 border-none border-round hover:bg-red-900"
+                class="bg-primary text-white flex border-none border-round w-full hover:bg-red-900"
                 label="Menu"
+                style="min-width: 10vh; margin-left: 3vh"
                 @click="toggleMenu"
               />
             </template>
             <template #end>
               <div class="flex gap-2 align-items-center justify-content-center mr-3">
                 <div v-if="isWideScreen" class="nav-user-wrapper flex align-items-center gap-2 p-2 bg-gray-100">
-                  <div class="text-lg font-bold text-gray-600">
+                  <div class="text-lg font-bold text-gray-600 display-name">
                     {{ userDisplayName }}
                   </div>
                   <router-link :to="{ name: 'SignOut' }" class="signout-button">
@@ -256,4 +257,22 @@ nav {
   border-radius: 0.3rem;
   padding: 0.5rem 0.8rem;
 }
+
+@media only screen and (max-width: 800px) {
+  .display-name {
+    max-width: 10vh;
+  }
+}
+
+@media only screen and (max-width: 820px) {
+  .display-name {
+    max-width: 13vh;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  .display-name {
+    max-width: 20vh;
+  }
+}
 </style>
diff --git a/src/components/auth/RegisterParent.vue b/src/components/auth/RegisterParent.vue
index 4d80c28ae..f5b019828 100644
--- a/src/components/auth/RegisterParent.vue
+++ b/src/components/auth/RegisterParent.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="card">
     <form class="p-fluid" @submit.prevent="handleFormSubmit(!v$.$invalid)">
-      <section class="form-section flex lg:flex-row">
+      <section class="form-section flex lg:flex-row" style="width: 100%">
         <div>
           <label for="firstName" class="text-gray-600">First Name <span class="required p-1">*</span></label>
           <PvInputText
             v-model="v$.firstName.$model"
             name="firstName"
             :class="{ 'p-invalid': v$.firstName.$invalid && submitted }"
-            style="width: 25vh; background: white"
+            style="width: 100%; background: white"
             aria-describedby="first-name-error"
           />
           <span v-if="v$.firstName.$error && submitted">
@@ -26,7 +26,7 @@
             v-model="v$.lastName.$model"
             name="lastName"
             :class="{ 'p-invalid': v$.firstName.$invalid && submitted }"
-            style="width: 25vh"
+            style="width: 100%"
             aria-describedby="first-name-error"
           />
           <span v-if="v$.lastName.$error && submitted">
@@ -40,7 +40,7 @@
         </div>
       </section>
       <!--Username / Email-->
-      <section class="form-section flex lg:flex-row">
+      <section class="form-section flex lg:flex-row" style="width: 100%">
         <div class="p-input-icon-right">
           <label for="ParentEmail" class="text-gray-600">Email <span class="required p-1">*</span></label>
           <PvInputText
@@ -49,7 +49,7 @@
             type="email"
             :class="{ 'p-invalid': v$.ParentEmail.$invalid && submitted }"
             aria-describedby="username-or-email-error"
-            style="width: 55vh"
+            style="width: 100%"
           />
         </div>
         <span v-if="v$.ParentEmail.$error && submitted">
diff --git a/src/components/auth/RegisterStudent.vue b/src/components/auth/RegisterStudent.vue
index b6638288b..cae2d5b98 100644
--- a/src/components/auth/RegisterStudent.vue
+++ b/src/components/auth/RegisterStudent.vue
@@ -59,7 +59,7 @@
             />
           </div>
         </section>
-        <section class="form-section">
+        <section class="form-section" style="width: 100%">
           <div class="p-input-icon-right">
             <label for="studentUsername" class="text-gray-600"
               >Student Username <span class="required mr-2">*</span></label
@@ -70,7 +70,7 @@
               :class="{
                 'p-invalid': v$.students.$each.$response.$data[outerIndex].studentUsername.$invalid && submitted,
               }"
-              style="width: 50vh"
+              style="width: 100%"
               aria-describedby="username-error"
             />
           </div>
@@ -162,7 +162,7 @@
             }}</small>
           </div>
         </section>
-        <section class="form-section">
+        <section class="form-section" style="width: 100%">
           <!--Grade-->
           <div>
             <label for="grade" class="text-gray-600">Grade <span class="required">*</span></label>
@@ -171,7 +171,7 @@
               :options="gradeOptions"
               option-label="label"
               option-value="value"
-              style="width: 50vh"
+              style="width: 100%"
               name="grade"
             />
           </div>
@@ -197,7 +197,7 @@
                 <PvInputText v-model="student.middleName" name="middleName" />
               </div>
             </section>
-            <section class="form-section">
+            <section class="form-section" style="width: 100%">
               <div>
                 <label for="lastName" class="text-gray-600">Last Name </label>
                 <PvInputText
@@ -207,7 +207,7 @@
                     'p-invalid': v$.students.$each.$response.$data[outerIndex]?.lastName.$invalid,
                   }"
                   aria-describedby="first-name-error"
-                  style="width: 46vh"
+                  style="width: 100%"
                 />
               </div>
             </section>

From 59679bac3001096e078e30e4c47574923424f078 Mon Sep 17 00:00:00 2001
From: emily-ejag <emily.artegar@gmail.com>
Date: Fri, 16 Aug 2024 12:29:14 -0700
Subject: [PATCH 28/28] fixing tabs on score report

---
 src/pages/ScoreReport.vue | 47 +++++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/pages/ScoreReport.vue b/src/pages/ScoreReport.vue
index 06400c82c..67c995d41 100644
--- a/src/pages/ScoreReport.vue
+++ b/src/pages/ScoreReport.vue
@@ -216,28 +216,31 @@
           <AppSpinner style="margin: 1rem 0rem" />
           <div class="uppercase text-sm font-light text-gray-600">Loading Task Reports</div>
         </div>
-        <PvTabView :active-index="activeTabIndex">
-          <PvTabPanel
-            v-for="taskId of sortedTaskIds"
-            :key="taskId"
-            :header="tasksDictionary[taskId]?.publicName ?? taskId"
-          >
-            <div :id="'tab-view-' + taskId">
-              <TaskReport
-                v-if="taskId"
-                :computed-table-data="computeAssignmentAndRunData.assignmentTableData"
-                :task-id="taskId"
-                :initialized="initialized"
-                :administration-id="administrationId"
-                :runs="computeAssignmentAndRunData.runsByTaskId[taskId]"
-                :org-type="orgType"
-                :org-id="orgId"
-                :org-info="orgInfo"
-                :administration-info="administrationInfo"
-              />
-            </div>
-          </PvTabPanel>
-        </PvTabView>
+        <PvTabs :value="sortedTaskIds[0]">
+          <PvTabList>
+            <PvTab v-for="taskId of sortedTaskIds" :key="taskId" :value="taskId">
+              {{ tasksDictionary[taskId]?.publicName ?? taskId }}
+            </PvTab>
+          </PvTabList>
+          <PvTabPanels>
+            <PvTabPanel v-for="taskId of sortedTaskIds" :key="taskId" :value="taskId">
+              <div :id="'tab-view-' + taskId">
+                <TaskReport
+                  v-if="taskId"
+                  :computed-table-data="computeAssignmentAndRunData.assignmentTableData"
+                  :task-id="taskId"
+                  :initialized="initialized"
+                  :administration-id="administrationId"
+                  :runs="computeAssignmentAndRunData.runsByTaskId[taskId]"
+                  :org-type="orgType"
+                  :org-id="orgId"
+                  :org-info="orgInfo"
+                  :administration-info="administrationInfo"
+                />
+              </div>
+            </PvTabPanel>
+          </PvTabPanels>
+        </PvTabs>
         <div id="score-report-closing" class="bg-gray-200 px-4 py-2 mt-4 text-gray-600">
           <h2 class="extra-info-title">HOW ROAR SCORES INFORM PLANNING TO PROVIDE SUPPORT</h2>
           <p>