From 24a448aab9e22d34c7ca17c4cfdcb0296f20b2c1 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 29 Dec 2025 11:30:40 -0800
Subject: [PATCH 01/40] Replace deprecated PrimeVue InputSwitch component with
 ToggleSwitch

---
 src/components/CollectionCreator.vue       |  6 +++---
 src/components/screens/ScoreSetCreator.vue | 24 +++++++++++-----------
 src/components/screens/ScoreSetEditor.vue  |  6 +++---
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/CollectionCreator.vue b/src/components/CollectionCreator.vue
index a0af59c8..c8c1c5a9 100644
--- a/src/components/CollectionCreator.vue
+++ b/src/components/CollectionCreator.vue
@@ -13,7 +13,7 @@
 
     <div class="flex flex-column gap-2">
       <label :for="scopedId('public-input')">Public</label>
-      <InputSwitch
+      <ToggleSwitch
         v-model="collectionPublic"
         :aria-labelledby="scopedId('public-help')"
         :input-id="scopedId('public-input')"
@@ -92,7 +92,7 @@ import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Dropdown from 'primevue/dropdown'
-import InputSwitch from 'primevue/inputswitch'
+import ToggleSwitch from 'primevue/toggleswitch'
 import InputText from 'primevue/inputtext'
 import SelectButton from 'primevue/selectbutton'
 import Textarea from 'primevue/textarea'
@@ -104,7 +104,7 @@ import EmailPrompt from '@/components/common/EmailPrompt.vue'
 
 export default {
   name: 'CollectionCreator',
-  components: {Button, Column, DataTable, Dropdown, EmailPrompt, InputSwitch, InputText, SelectButton, Textarea},
+  components: {Button, Column, DataTable, Dropdown, EmailPrompt, ToggleSwitch, InputText, SelectButton, Textarea},
   emits: ['createdCollection', 'canceled'],
 
   setup: useScopedId,
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 6e60bdff..feb5e6c3 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -56,7 +56,7 @@
                       </label>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <InputSwitch
+                      <ToggleSwitch
                         v-model="isSupersedingScoreSet"
                         :aria-labelledby="scopedId('input-superseding-score-set-label')"
                       />
@@ -82,7 +82,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <InputSwitch
+                      <ToggleSwitch
                         v-model="isMetaAnalysis"
                         :aria-labelledby="scopedId('input-is-meta-analysis-label')"
                       />
@@ -395,7 +395,7 @@
                       set?
                     </div>
                     <div class="mavedb-wizard-content">
-                      <InputSwitch
+                      <ToggleSwitch
                         v-model="hasCustomUsagePolicy"
                         :aria-labelledby="scopedId('input-has-custom-usage-policy')"
                       />
@@ -644,7 +644,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content">
-                    <InputSwitch
+                    <ToggleSwitch
                       v-model="isTargetSequence"
                       :aria-labelledby="scopedId('input-scoreSetIsSequenceBasedLabel')"
                     />
@@ -670,7 +670,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content">
-                    <InputSwitch v-model="isBaseEditor" :aria-labelledby="scopedId('input-isBaseEditorData')" />
+                    <ToggleSwitch v-model="isBaseEditor" :aria-labelledby="scopedId('input-isBaseEditorData')" />
                     <div class="mavedb-switch-value">
                       {{
                         isBaseEditor
@@ -692,7 +692,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content">
-                    <InputSwitch
+                    <ToggleSwitch
                       v-model="isMultiTarget"
                       :aria-labelledby="scopedId('input-scoreSetHasMultipleTargetsLabel')"
                     />
@@ -867,7 +867,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <InputSwitch
+                      <ToggleSwitch
                         v-model="createdTargetGenes[targetIdx].linkedAccessions[dbName]"
                         :aria-labelledby="scopedId(`input-targetGeneExternalDatabase${dbName}Label`)"
                       />
@@ -1061,7 +1061,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <InputSwitch
+                      <ToggleSwitch
                         v-model="createdTargetGenes[targetIdx].isRelativeToChromosome"
                         :aria-labelledby="scopedId('input-targetDescribesChromosomeLabel')"
                         @change="refreshAccessionOptions(targetIdx)"
@@ -1216,7 +1216,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content">
-                    <InputSwitch
+                    <ToggleSwitch
                       v-model="investigatorIsProvidingScoreCalibrations"
                       :aria-labelledby="scopedId('input-investigatorIsProvidingScoreCalibrations')"
                     />
@@ -1440,7 +1440,7 @@ import Chips from 'primevue/chips'
 import Dropdown from 'primevue/dropdown'
 import FileUpload from 'primevue/fileupload'
 import InputNumber from 'primevue/inputnumber'
-import InputSwitch from 'primevue/inputswitch'
+import ToggleSwitch from 'primevue/toggleswitch'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Multiselect from 'primevue/multiselect'
@@ -1518,7 +1518,7 @@ export default {
     EmailPrompt,
     FileUpload,
     InputNumber,
-    InputSwitch,
+    ToggleSwitch,
     InputText,
     Message,
     Multiselect,
@@ -2920,7 +2920,7 @@ export default {
 }
 
 /* Switches */
-.p-inputswitch {
+.p-ToggleSwitch {
   margin: 10px 0;
   vertical-align: middle;
 }
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index 53a601c7..bed172e9 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -762,7 +762,7 @@
 
                   <div class="field-column">
                     <div class="field" style="margin-top: 1em">
-                      <InputSwitch v-model="isBaseEditor" :aria-labelledby="scopedId('input-isBaseEditorData')" />
+                      <ToggleSwitch v-model="isBaseEditor" :aria-labelledby="scopedId('input-isBaseEditorData')" />
                       <span style="margin-left: 1em">{{
                         isBaseEditor
                           ? 'This score set represents base editor data.'
@@ -959,7 +959,7 @@ import Dropdown from 'primevue/dropdown'
 import FileUpload from 'primevue/fileupload'
 import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
-import InputSwitch from 'primevue/inputswitch'
+import ToggleSwitch from 'primevue/toggleswitch'
 import Message from 'primevue/message'
 import Multiselect from 'primevue/multiselect'
 import ProgressSpinner from 'primevue/progressspinner'
@@ -1025,7 +1025,7 @@ export default {
     FileUpload,
     InputNumber,
     InputText,
-    InputSwitch,
+    ToggleSwitch,
     Message,
     Multiselect,
     ProgressSpinner,

From a37bd6bd9e0dffbb6661843b5f0da79564ebac8b Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 29 Dec 2025 11:49:30 -0800
Subject: [PATCH 02/40] Remove unused components

---
 .../common/FilterClauseDescription.vue        |  207 ---
 src/components/common/FilterClauseEditor.vue  |  376 -----
 src/components/common/FilterDescription.vue   |  217 ---
 src/components/common/FilterView.vue          |  195 ---
 src/components/common/ItemsTable.vue          |  549 -------
 src/components/common/ItemsView.vue           |  612 --------
 src/components/common/PropertySheet.vue       | 1377 -----------------
 .../common/PropertySheetGroupOrProperty.vue   |  823 ----------
 .../common/PropertySheetListItem.vue          |  430 -----
 src/components/screens/UsersView.vue          |   23 -
 src/router/index.ts                           |    6 -
 11 files changed, 4815 deletions(-)
 delete mode 100644 src/components/common/FilterClauseDescription.vue
 delete mode 100644 src/components/common/FilterClauseEditor.vue
 delete mode 100644 src/components/common/FilterDescription.vue
 delete mode 100644 src/components/common/FilterView.vue
 delete mode 100644 src/components/common/ItemsTable.vue
 delete mode 100644 src/components/common/ItemsView.vue
 delete mode 100644 src/components/common/PropertySheet.vue
 delete mode 100644 src/components/common/PropertySheetGroupOrProperty.vue
 delete mode 100644 src/components/common/PropertySheetListItem.vue
 delete mode 100644 src/components/screens/UsersView.vue

diff --git a/src/components/common/FilterClauseDescription.vue b/src/components/common/FilterClauseDescription.vue
deleted file mode 100644
index b5d507b2..00000000
--- a/src/components/common/FilterClauseDescription.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<template>
-  <div class="sfs-filter-clause-description">
-    {{text}}
-  </div>
-</template>
-
-<script>
-
-import _ from 'lodash'
-import moment from 'moment'
-
-export default {
-  name: 'FilterClauseDescription',
-
-  props: {
-    clause: {
-      type: Object,
-      default: () => null
-    },
-    entityType: {
-      type: Object,
-      required: true
-    },
-    filterProperties: {
-      type: Array,
-      required: true
-    }
-  },
-
-  computed: {
-    text: function() {
-      return this.clauseText(this.clause) || ''
-    }
-  },
-
-  methods: {
-    filterPropertyTitle: function(filterProperty) {
-      if (filterProperty == null) {
-        return null
-      }
-      if (filterProperty.path) {
-        return filterProperty.title || _.capitalize(_.lowerCase(_.last(filterProperty.path.split('.'))))
-      }
-      if (filterProperty.text) {
-        return filterProperty.title || 'Any text'
-      }
-      return filterProperty.title
-    },
-
-    filterPropertyDataType: function(filterProperty) {
-      if (filterProperty == null) {
-        return null
-      }
-      if (filterProperty.dataType) {
-        return filterProperty.dataType
-      } else if (filterProperty.path) {
-        const property = this.findPropertyInSchema(filterProperty.path.split('.'), this.entityType.schema)
-        if (!property) {
-          return null
-        }
-        return {
-          type: property.type,
-          format: property.format
-        }
-      } else if (filterProperty.text) {
-        return {type: 'string'}
-      } else {
-        return null
-      }
-    },
-
-    expressionDataType: function(expression) {
-      if (expression.path) {
-        const filterProperty = this.filterProperties.find((fp) => fp.path == this.clause.l.path)
-        return filterProperty ? this.filterPropertyDataType(filterProperty) : null
-      } if (expression.text) {
-        return {type: 'string'}
-      } else if (expression.expression) {
-        const canonicalizedExpression = expression.expression // TODO
-        const filterProperty = this.filterProperties.find((fp) => _.isEqual(fp.expression, canonicalizedExpression))
-        if (filterProperty) {
-          return this.filterPropertyDataType(filterProperty)
-        }
-        return this.expressionDataType(expression.expression)
-      }
-    },
-
-    expressionText: function(expression, dataType = null) {
-      if (expression.path) {
-        const filterProperty = this.filterProperties.find((fp) => fp.path == this.clause.l.path)
-        return filterProperty ? this.filterPropertyTitle(filterProperty) : null
-      } else if (expression.text) {
-        const filterProperty = this.filterProperties.find((fp) => fp.text == this.clause.l.text)
-        return filterProperty ? this.filterPropertyTitle(filterProperty) : 'Any text'
-      } else if (expression.expression) {
-        return this.expressionText(expression.expression)
-      } else if (expression.range) {
-        return this.rangeText(expression.range)
-      } else if (expression.constant != null) {
-        const type = _.get(dataType, 'type', 'string')
-        const format = _.get(dataType, 'format', null)
-        switch (type) {
-          case 'string':
-            switch (format) {
-              case 'date':
-                return new moment(expression.constant).format('YYYY-MM-DD')
-              case 'date-time':
-                // TODO We currently assume that the granularity is really 'day'
-                return new moment(expression.constant).format('YYYY-MM-DD')
-              default:
-                return expression.constant.toString()
-            }
-          case 'boolean':
-            if (_.isArray(expression.constant) && _.xor(expression.constant, [false, null]).length == 0) {
-              return 'No'
-            } else {
-              return expression.constant ? 'Yes' : 'No'
-            }
-        }
-      } else {
-        const canonicalizedExpression = expression // TODO
-        const filterProperty = this.filterProperties.find((fp) => _.isEqual(fp.expression, canonicalizedExpression))
-        if (filterProperty) {
-          return this.filterPropertyTitle(filterProperty)
-        }
-        return null
-      }
-    },
-
-    rangeText: function(range) {
-      if (!range || !_.isArray(range) || range.length != 2) {
-        return null
-      }
-      const min = this.expressionText(range[0])
-      const max = this.expressionText(range[1])
-      if (min && max) {
-        return `${min} to ${max}`
-      } else if (min) {
-        return `>= ${min}`
-      } else if (max) {
-        return `<= ${min}`
-      } else {
-        return null
-      }
-    },
-
-    clauseText: function(clause) {
-      if (!clause.l || !clause.r) {
-        return null
-      }
-      // Infer the data type from whichever side has a filter property.
-      const dataType = this.expressionDataType(clause.l) || this.expressionDataType(clause.r)
-      const leftText = this.expressionText(clause.l, dataType)
-      const rightText = this.expressionText(clause.r, dataType)
-      if (!leftText || !rightText) {
-        return null
-      }
-      switch (clause.operator) {
-        case 'contains':
-          return `${leftText} contains ${rightText}`
-        default:
-          return `${leftText}: ${rightText}`
-      }
-    },
-
-    findPropertyInSchema(path, schema) {
-      switch (schema.type) {
-      case 'object':
-        {
-          const subschema = _.get(schema, ['properties', path[0]], null)
-          if ((path.length == 1) || (subschema == null)) {
-            return subschema
-          } else {
-            return this.findPropertyInSchema(_.slice(path, 1), subschema)
-          }
-        }
-      default:
-        // TODO Warn that we're trying to find a property in a non-object schema.
-        return null
-      }
-    }
-  }
-}
-
-</script>
-
-<style scoped>
-
-.sfs-filter-clause-description {
-  display: inline-flex;
-  height: 32.5px;
-  padding: 0 4px;
-  max-width: 250px;
-  min-width: 100px;
-  margin: 0 5px;
-  background: #2196f3;
-  cursor: pointer;
-  font-size: 12px;
-  color: #fff;
-  border-radius: 5px;
-  align-items: center;
-  justify-content: center;
-  vertical-align: bottom;
-  overflow: hidden;
-}
-
-</style>
diff --git a/src/components/common/FilterClauseEditor.vue b/src/components/common/FilterClauseEditor.vue
deleted file mode 100644
index b956aea9..00000000
--- a/src/components/common/FilterClauseEditor.vue
+++ /dev/null
@@ -1,376 +0,0 @@
-<template>
-  <div class="sfs-filter-clause">
-    <div class="sfs-filter-clause-element">
-      <Dropdown v-model="filterProperty" class="sfs-filter-property" :options="filterPropertyOptions" optionLabel="title" optionValue="value" placeholder="Property to filter" />
-    </div>
-    <div class="sfs-filter-clause-element sfs-filter-clause-value" v-if="dataType && dataType.type == 'string' && (dataType.format == 'date' || dataType.format == 'date-time')">
-      <Calendar ref="calendar" v-model="value" class="sfs-filter-calendar" inputClass="p-inputtext-sm" selectionMode="range" @date-select="selectedDate" />
-    </div>
-    <div class="sfs-filter-clause-element sfs-filter-clause-value" v-if="dataType && dataType.type == 'string' && dataType.format != 'date' && dataType.format != 'date-time'">
-      <InputText ref="valueText" type="text" v-model="value" class="p-inputtext-sm" />
-    </div>
-    <div class="sfs-filter-clause-element sfs-filter-clause-value" v-if="dataType && dataType.type == 'boolean'">
-      <Dropdown ref="valueBooleanDropdown" class="sfs-filter-value-dropdown" v-model="value" :options="[{title: 'Yes', value: true}, {title: 'No', value: [false, null]}]" optionLabel="title" optionValue="value" />
-    </div>
-  </div>
-</template>
-
-<script>
-
-import _ from 'lodash'
-import moment from 'moment'
-import Calendar from 'primevue/calendar'
-import Dropdown from 'primevue/dropdown'
-import InputText from 'primevue/inputtext'
-
-// - The clause must be a simple clause, i.e. one with left (l) and right (r) sides and no logical operators (and, or, not).
-// - The left side may be
-//   - A property, identified by path;
-//   - A bare expression (such as a function call or coalesce expression) whose canonical form matches the expression
-//     property of some element of filterProperties;
-//   - Or a wrapped expression whose canonical form matches the expression property of some element of filterProperties.
-// - The right side may be
-//   - A constant
-//   - Or a range consisting of constants.
-
-export default {
-  name: 'FilterClauseEditor',
-
-  components: {Calendar, Dropdown, InputText},
-  emits: ['update:clause'],
-
-  props: {
-    clause: {
-      type: Object,
-      default: () => null
-    },
-    entityType: {
-      type: Object,
-      required: true
-    },
-    filterProperties: {
-      type: Array,
-      required: true
-    }
-  },
-
-  data: function() {
-    return {
-      filterProperty: null,
-      value: null,
-      valuesByType: {}
-    }
-  },
-
-  computed: {
-    filterPropertyOptions: function() {
-      return this.filterProperties.map((filterProperty) => {
-        if (filterProperty.path) {
-          const property = this.findPropertyInSchema(filterProperty.path.split('.'), this.entityType.schema)
-          if (!property) {
-            return null
-          }
-          return {
-            title: filterProperty.title || _.capitalize(_.lowerCase(_.last(filterProperty.path.split('.')))),
-            value: filterProperty
-          }
-        } else if (filterProperty.text) {
-          return {
-            title: filterProperty.title || 'Any text',
-            value: filterProperty
-          }
-        } else if (filterProperty.expression) {
-          if (!filterProperty.title) {
-            return null
-          }
-          return {
-            title: filterProperty.title,
-            value: filterProperty
-          }
-        } else {
-          return null
-        }
-      }).filter((option) => option != null)
-    },
-
-    // /////////////////////////////////////////////////////////////////////////////////////////////////
-    // Properties calculated from user input
-    // /////////////////////////////////////////////////////////////////////////////////////////////////
-
-    dataType: function() {
-      if (this.filterProperty == null) {
-        return null
-      }
-      if (this.filterProperty.dataType) {
-        return this.filterProperty.dataType
-      } else if (this.filterProperty.path) {
-        const property = this.findPropertyInSchema(this.filterProperty.path.split('.'), this.entityType.schema)
-        if (!property) {
-          return null
-        }
-        return {
-          type: property.type,
-          format: property.format
-        }
-      } else if (this.filterProperty.text) {
-        return {type: 'string'}
-      } else {
-        return null
-      }
-    },
-
-    dataTypeStr: function() {
-      if (this.dataType == null) {
-        return null
-      }
-      return [this.dataType.type, this.dataType.format].filter((x) => x != null).join(':')
-    },
-
-    // TODO Base this on user's selection of operator
-    rangeValueExpected: function() {
-      const type = _.get(this.dataType, 'type')
-      const format = _.get(this.dataType, 'format')
-      switch (type) {
-        case 'string':
-          switch (format) {
-            case 'date':
-            case 'date-time':
-              return true
-            default:
-              return false
-          }
-        default:
-        return false
-      }
-    },
-
-    rightSide: function() {
-      const value = this.valuesByType[this.dataTypeStr]
-      if (this.dataType.type == 'string' && this.dataType.format == 'date') {
-        if (!value || value.length != 2 || !value[0] || !value[1]) {
-          return null
-        }
-        return {range: [
-          {constant: new moment(value[0]).format('YYYY-MM-DD')},
-          {constant: new moment(value[1]).format('YYYY-MM-DD')}
-        ]}
-      } else if (this.dataType.type == 'string' && this.dataType.format == 'date-time') {
-        if (!value || value.length != 2 || !value[0] || !value[1]) {
-          return null
-        }
-        return {range: [
-          {constant: new moment(value[0]).toISOString()},
-          {constant: new moment(value[1]).add(1, 'days').subtract(1, 'milliseconds').toISOString()}
-        ]}
-      } else if (this.dataType.type == 'string') {
-        if (!value || value.length == 0) {
-          return null
-        }
-        return {constant: value}
-      } else if (this.dataType.type == 'boolean') {
-        if (value == null) {
-          return null
-        }
-        return {constant: value}
-      }
-      return null
-    },
-
-    currentClause: function() {
-      if (this.filterProperty == null) { //} || this.dataType == null) {
-        return null
-      }
-      const leftSide = this.filterProperty.path ? {path: this.filterProperty.path}
-          : this.filterProperty.text ? {text: this.filterProperty.text}
-          : this.filterProperty.expression
-      if (leftSide == null) {
-        return null
-      }
-      const rightSide = this.rightSide
-      if (rightSide == null) {
-        return {l: leftSide} // Return an incomplete clause.
-      }
-      if (this.dataType.type == 'string' && ['date', 'date-time'].includes(this.dataType.format)) {
-        return {l: leftSide, r: rightSide, operator: 'between'}
-      } else if (this.dataType.type == 'string') {
-        return {l: leftSide, r: rightSide, operator: 'contains'}
-      } else {
-        // TODO This is a kluge to decide whether the operator should be IN or =. We shouldn't really depend on
-        // rightSide.constant.
-        const operator = (rightSide.constant && _.isArray(rightSide.constant)) ? 'in' : '='
-        return {l: leftSide, r: rightSide, operator}
-      }
-      // return null
-    },
-
-    completeCurrentClause: function() {
-      if (this.currentClause && this.currentClause.l && this.currentClause.r && this.currentClause.operator) {
-        return this.currentClause
-      }
-      return this.clause
-    },
-
-    // /////////////////////////////////////////////////////////////////////////////////////////////////
-    // Properties calculated from the clause prop
-    // /////////////////////////////////////////////////////////////////////////////////////////////////
-
-    filterPropertyFromClause: function() {
-      let leftSide = _.get(this.clause, 'l', null)
-      if (!leftSide) {
-        return null
-      }
-      if (leftSide.path) {
-        return this.filterProperties.find((fp) => fp.path == leftSide.path)
-      } else if (leftSide.text) {
-        return this.filterProperties.find((fp) => fp.text == leftSide.text)
-      } else {
-        while (leftSide.expression) {
-          leftSide = leftSide.expression
-        }
-        return this.filterProperties.find((fp) => _.isEqual(fp.expression, leftSide))
-      }
-    },
-
-    valueFromClause: function() {
-      const rightSide = _.get(this.clause, 'r', null)
-      if (!rightSide) {
-        return null
-      }
-      if (rightSide.constant != null) {
-        return this.valueFromClauseValue(rightSide.constant, this.dataType, false)
-      } else if (rightSide.range) {
-        if (_.isArray(rightSide.range) && rightSide.range.length == 2 && rightSide.range[0].constant && rightSide.range[1].constant) {
-          return [
-            this.valueFromClauseValue(rightSide.range[0].constant, this.dataType, true),
-            this.valueFromClauseValue(rightSide.range[1].constant, this.dataType, true)
-          ]
-        }
-      }
-      return null
-    }
-  },
-
-  watch: {
-    filterProperty: {
-      handler: function() {
-        // console.log('Filter property changed:', this.filterProperty)
-        if (this.dataTypeStr && (this.value != this.valuesByType[this.dataTypeStr])) {
-          this.value = this.valuesByType[this.dataTypeStr]
-          // console.log(`Fetched cached value of type ${this.dataTypeStr}`, this.value)
-        }
-      }
-    },
-    value: {
-      handler: function(newValue) {
-        if (this.dataTypeStr) {
-          // console.log(`Caching value of type ${this.dataTypeStr}:`, newValue)
-          this.valuesByType[this.dataTypeStr] = newValue
-        }
-      }
-    },
-    completeCurrentClause: {
-      handler: function(newValue, oldValue) {
-        if (!_.isEqual(newValue, oldValue)) {
-          // console.log('Emitting new clause:', _.cloneDeep(newValue))
-          this.$emit('update:clause', newValue)
-        }
-      }
-    },
-    clause: {
-      handler: function() {
-        // console.log('Clause prop was set:', this.clause)
-        this.filterProperty = this.filterPropertyFromClause
-        this.dataType // Force recalculation before we get the right-side value.
-        this.value = this.valueFromClause
-      },
-      immediate: true
-    }
-  },
-
-  methods: {
-    valueFromClauseValue(valueFromClause, dataType, isFromRange) {
-      if (valueFromClause == null) {
-        return valueFromClause
-      }
-
-      const type = _.get(dataType, 'type', null)
-      const format = _.get(dataType, 'format', null)
-
-      switch (type) {
-        case 'string':
-          switch (format) {
-            case 'date-time':
-              if (isFromRange) {
-                return new moment(valueFromClause).startOf('day').toDate() //.format('YYYY-MM-DD')
-              //} else if (indexInRange != null) {
-              //  return new moment(valueFromClause).toDate() //.format('YYYY-MM-DD')
-              }
-              return valueFromClause
-            case 'date':
-              return new moment(valueFromClause).toDate()
-            default:
-              return valueFromClause
-          }
-        default:
-          return valueFromClause
-      }
-    },
-
-    selectedDate: function() {
-      if (this.value && this.value.length == 2 && this.value[0] && this.value[1]) {
-        this.$refs.calendar.overlayVisible = false
-      }
-    },
-
-    findPropertyInSchema(path, schema) {
-      switch (schema.type) {
-      case 'object':
-        {
-          const subschema = _.get(schema, ['properties', path[0]], null)
-          if ((path.length == 1) || (subschema == null)) {
-            return subschema
-          } else {
-            return this.findPropertyInSchema(_.slice(path, 1), subschema)
-          }
-        }
-      default:
-        // TODO Warn that we're trying to find a property in a non-object schema.
-        return null
-      }
-    }
-  }
-}
-
-</script>
-
-<style scoped>
-
-.sfs-filter-clause {
-  display: inline-block;
-  white-space: nowrap;
-}
-
-.sfs-filter-clause-element {
-  display: inline-block;
-  margin: 0 5px;
-}
-
-</style>
-
-<style>
-
-.sfs-filter-value-dropdown > span,
-.sfs-filter-property > span {
-  height: 30.5px;
-  padding-top: 0;
-  padding-bottom: 0;
-  font-size: 0.875rem;
-  line-height: 30.5px;
-}
-
-.sfs-filter-clause-value > input.p-inputtext.p-inputtext-sm,
-.sfs-filter-calendar > input.p-inputtext.p-inputtext-sm {
-  height: 32.5px;
-}
-
-</style>
diff --git a/src/components/common/FilterDescription.vue b/src/components/common/FilterDescription.vue
deleted file mode 100644
index 2cd4ec8a..00000000
--- a/src/components/common/FilterDescription.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<template>
-  <div class="sfs-filter-clause-description">
-    {{text}}
-  </div>
-</template>
-
-<script>
-
-import _ from 'lodash'
-import moment from 'moment'
-
-export default {
-  name: 'FilterClauseDescription',
-
-  props: {
-    filter: {
-      type: Object,
-      default: () => null
-    },
-    entityType: {
-      type: Object,
-      required: true
-    },
-    filterProperties: {
-      type: Array,
-      required: true
-    }
-  },
-
-  computed: {
-    clauses: function() {
-      return this.filter.and || [this.filter] || [null]
-    },
-    text: function() {
-      const clauses = this.clauses.filter((c) => c != null)
-      if (clauses.length == 0) {
-        return ''
-      } else if (clauses.length == 1) {
-        return this.clauseText(clauses[0]) || ''
-      } else {
-        return (this.clauseText(clauses[0]) || '') + ` + ${clauses.length - 1} more`
-      }
-    }
-  },
-
-  methods: {
-    filterPropertyTitle: function(filterProperty) {
-      if (filterProperty == null) {
-        return null
-      }
-      if (filterProperty.path) {
-        return filterProperty.title || _.capitalize(_.lowerCase(_.last(filterProperty.path.split('.'))))
-      }
-      if (filterProperty.text) {
-        return filterProperty.title || 'Any text'
-      }
-      return filterProperty.title
-    },
-
-    filterPropertyDataType: function(filterProperty) {
-      if (filterProperty == null) {
-        return null
-      }
-      if (filterProperty.dataType) {
-        return filterProperty.dataType
-      } else if (filterProperty.path) {
-        const property = this.findPropertyInSchema(filterProperty.path.split('.'), this.entityType.schema)
-        if (!property) {
-          return null
-        }
-        return {
-          type: property.type,
-          format: property.format
-        }
-      } else if (filterProperty.text) {
-        return {type: 'string'}
-      } else {
-        return null
-      }
-    },
-
-    expressionDataType: function(expression) {
-      if (expression.path) {
-        const filterProperty = this.filterProperties.find((fp) => fp.path == expression.path)
-        return filterProperty ? this.filterPropertyDataType(filterProperty) : null
-      } if (expression.text) {
-        return {type: 'string'}
-      } else if (expression.expression) {
-        const canonicalizedExpression = expression.expression // TODO
-        const filterProperty = this.filterProperties.find((fp) => _.isEqual(fp.expression, canonicalizedExpression))
-        if (filterProperty) {
-          return this.filterPropertyDataType(filterProperty)
-        }
-        return this.expressionDataType(expression.expression)
-      }
-    },
-
-    expressionText: function(expression, dataType = null) {
-      if (expression.path) {
-        const filterProperty = this.filterProperties.find((fp) => fp.path == expression.path)
-        return filterProperty ? this.filterPropertyTitle(filterProperty) : null
-      } else if (expression.text) {
-        const filterProperty = this.filterProperties.find((fp) => fp.text == expression.text)
-        return filterProperty ? this.filterPropertyTitle(filterProperty) : 'Any text'
-      } else if (expression.expression) {
-        return this.expressionText(expression.expression)
-      } else if (expression.range) {
-        return this.rangeText(expression.range)
-      } else if (expression.constant != null) {
-        const type = _.get(dataType, 'type', 'string')
-        const format = _.get(dataType, 'format', null)
-        switch (type) {
-          case 'string':
-            switch (format) {
-              case 'date':
-                return new moment(expression.constant).format('YYYY-MM-DD')
-              case 'date-time':
-                // TODO We currently assume that the granularity is really 'day'
-                return new moment(expression.constant).format('YYYY-MM-DD')
-              default:
-                return expression.constant.toString()
-            }
-          case 'boolean':
-            if (_.isArray(expression.constant) && _.xor(expression.constant, [false, null]).length == 0) {
-              return 'No'
-            } else {
-              return expression.constant ? 'Yes' : 'No'
-            }
-        }
-      } else {
-        const canonicalizedExpression = expression // TODO
-        const filterProperty = this.filterProperties.find((fp) => _.isEqual(fp.expression, canonicalizedExpression))
-        if (filterProperty) {
-          return this.filterPropertyTitle(filterProperty)
-        }
-        return null
-      }
-    },
-
-    rangeText: function(range) {
-      if (!range || !_.isArray(range) || range.length != 2) {
-        return null
-      }
-      const min = this.expressionText(range[0])
-      const max = this.expressionText(range[1])
-      if (min && max) {
-        return `${min} to ${max}`
-      } else if (min) {
-        return `>= ${min}`
-      } else if (max) {
-        return `<= ${min}`
-      } else {
-        return null
-      }
-    },
-
-    clauseText: function(clause) {
-      if (!clause.l || !clause.r) {
-        return null
-      }
-      // Infer the data type from whichever side has a filter property.
-      const dataType = this.expressionDataType(clause.l) || this.expressionDataType(clause.r)
-      const leftText = this.expressionText(clause.l, dataType)
-      const rightText = this.expressionText(clause.r, dataType)
-      if (!leftText || !rightText) {
-        return null
-      }
-      switch (clause.operator) {
-        case 'contains':
-          return `${leftText} contains ${rightText}`
-        default:
-          return `${leftText}: ${rightText}`
-      }
-    },
-
-    findPropertyInSchema(path, schema) {
-      switch (schema.type) {
-      case 'object':
-        {
-          const subschema = _.get(schema, ['properties', path[0]], null)
-          if ((path.length == 1) || (subschema == null)) {
-            return subschema
-          } else {
-            return this.findPropertyInSchema(_.slice(path, 1), subschema)
-          }
-        }
-      default:
-        // TODO Warn that we're trying to find a property in a non-object schema.
-        return null
-      }
-    }
-  }
-}
-
-</script>
-
-<style scoped>
-
-.sfs-filter-clause-description {
-  display: inline-flex;
-  height: 32.5px;
-  padding: 0 4px;
-  max-width: 250px;
-  min-width: 100px;
-  margin: 0 5px;
-  background: #2196f3;
-  cursor: pointer;
-  font-size: 12px;
-  color: #fff;
-  border-radius: 5px;
-  align-items: center;
-  justify-content: center;
-  vertical-align: bottom;
-  overflow: hidden;
-}
-
-</style>
diff --git a/src/components/common/FilterView.vue b/src/components/common/FilterView.vue
deleted file mode 100644
index 196c9d48..00000000
--- a/src/components/common/FilterView.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <div class="sfs-filter-view">
-    <Button v-if="!filter" class="p-button-info p-button-sm" label="Filter" @click="toggleOverlay" />
-    <FilterDescription v-if="filter" :filter="filter" :entityType="entityType" :filterProperties="filterProperties" @click="toggleOverlay" />
-    <OverlayPanel ref="overlay">
-      <div v-for="(clause, i) in clauses" :key="i">
-        <Button icon="pi pi-plus" class="p-button-rounded p-button-outlined p-button-sm lims-add-remove-filter-button" @click="addClause(i + 1)" />
-        <Button v-if="clauses.length > 1" icon="pi pi-minus" class="p-button-rounded p-button-outlined lims-add-remove-filter-button" @click="removeClause(i)" />
-        <FilterClauseEditor v-model:clause="clauses[i]" :entityType="entityType" :filterProperties="filterProperties" />
-      </div>
-      <br />
-      <br />
-      <Button :disabled="!editedFilterIsValid" class="p-button-default p-button-sm" @click="applyFilter()">Apply filter</Button>
-      &nbsp;
-      <Button :disabled="!dirty" class="p-button-danger p-button-sm" @click="cancelChanges()">Cancel</Button>
-      <br />
-      <div v-if="quickFilters.length > 0">
-        <br />
-        Quick filters <i class="pi pi-question-circle" v-tooltip="'Hold Shift, Ctrl, Alt, or Command to add to existing filter'"></i><br />
-        <span v-for="(quickFilter, i) of quickFilters" :key="i">
-          <Button class="p-button-info p-button-sm" @click="applyQuickFilter($event, i)">{{quickFilter.title}}</Button>
-          &nbsp;
-        </span>
-      </div>
-    </OverlayPanel>
-  </div>
-</template>
-
-<script>
-
-import _ from 'lodash'
-import Button from 'primevue/button'
-import OverlayPanel from 'primevue/overlaypanel'
-import Tooltip from 'primevue/tooltip'
-
-import FilterDescription from '@/components/common/FilterDescription'
-import FilterClauseEditor from '@/components/common/FilterClauseEditor'
-
-// TODO Allow filters with more than one clause.
-
-export default {
-  name: 'FilterView',
-
-  components: {Button, FilterDescription, FilterClauseEditor, OverlayPanel},
-  emits: ['update:filter'],
-
-  directives: {
-    tooltip: Tooltip
-  },
-
-  props: {
-    filter: {
-      type: Object,
-      default: () => null
-    },
-    entityType: {
-      type: Object,
-      required: true
-    },
-    filterProperties: {
-      type: Array,
-      required: true
-    },
-    quickFilters: {
-      type: Array,
-      default: () => []
-    },
-    filterRequired: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data: () => ({
-    clauses: [null],
-    editedFilter: null
-  }),
-
-  computed: {
-    dirty: function() {
-      return !_.isEqual(this.filter, this.editedFilter)
-    },
-    editedFilterIsValid: function() {
-      // TODO Write a general filter validator. Here we assume there is just one clause, with an operator.
-      const clauses = this.editedFilter.and || [this.editedFilter]
-      return clauses.every((clause) => clause && clause.l && clause.r && clause.operator)
-      // return (this.editedFilter && this.editedFilter.l && this.editedFilter.r && this.editedFilter.operator)
-    }
-  },
-
-  watch: {
-    filter: {
-      handler: function(newValue) {
-        console.log('filter changed')
-        this.editedFilter = newValue
-      },
-      immediate: true
-    },
-    editedFilter: {
-      handler: function(newValue, oldValue) {
-        console.log('editedFilter changed')
-        console.log(newValue)
-        if (!_.isEqual(newValue, oldValue)) {
-          this.clauses = newValue.and || [newValue]
-          console.log(this.clauses)
-        }
-      },
-      immediate: true
-    },
-    clauses: {
-      handler: function(newValue, oldValue) {
-        console.log('clauses changed')
-        // console.log('Clause changed:', newValue)
-        console.log(newValue)
-        console.log(oldValue)
-        if (newValue[0] != null) {
-          const editedFilter = newValue.length > 1 ? {and: newValue} : newValue[0] || null
-          if (!_.isEqual(editedFilter, this.editedFilter)) {
-            this.editedFilter = editedFilter
-          }
-          console.log(this.editedFilter)
-        }
-        /*
-        if (!_.isEqual(newValue, oldValue) && newValue != null) {
-          this.editedFilter = newValue
-        }
-        */
-      },
-      deep: true
-    }
-  },
-
-  methods: {
-    addClause: function(insertionIndex) {
-      this.clauses.splice(insertionIndex, 0, null)
-    },
-
-    removeClause: function(index) {
-      this.clauses.splice(index, 1)
-    },
-
-    applyFilter: function() {
-      console.log(this.editedFilterIsValid)
-      console.log(this.editedFilter)
-      if (this.editedFilterIsValid) {
-        this.setFilter(this.editedFilter)
-      }
-    },
-
-    applyQuickFilter: function(event, quickFilterIndex) {
-      const quickFilter = this.quickFilters[quickFilterIndex]
-      let newFilter = null
-      if (event.altKey || event.metaKey || event.shiftKey) {
-        newFilter = this.filter.and ? {and: [...this.filter.and, quickFilter.filter]} : {and: [this.filter, quickFilter.filter]}
-      } else {
-        newFilter = quickFilter.filter
-      }
-      this.setFilter(newFilter)
-    },
-
-    cancelChanges: function() {
-      this.editedFilter = this.filter
-    },
-
-    setFilter: function(filter) {
-      this.$emit('update:filter', filter)
-    },
-
-    toggleOverlay: function(event) {
-      this.$refs.overlay.toggle(event)
-    }
-  }
-}
-
-</script>
-
-<style scoped>
-
-.p-button.p-button-icon-only.p-button-rounded.lims-add-remove-filter-button {
-  height: 1.5rem;
-  width: 1.5rem;
-  margin: 2px;
-  vertical-align: middle;
-}
-
-.sfs-filter-view {
-  display: inline-block;
-  vertical-align: bottom;
-}
-
-.sfs-filter-view:deep(.sfs-filter-clause-description) {
-  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-}
-
-</style>
diff --git a/src/components/common/ItemsTable.vue b/src/components/common/ItemsTable.vue
deleted file mode 100644
index d4a6c86d..00000000
--- a/src/components/common/ItemsTable.vue
+++ /dev/null
@@ -1,549 +0,0 @@
-<template>
-
-<div :class="{'sfs-items-table': true, 'sfs-nowrap': nowrap}">
-  <FlexDataTable
-      v-if="columns.length > 0"
-      ref="dataTable"
-      rowIdPath="_id"
-      :data="items"
-      :options="assembledTableOptions"
-      :rowClasses="rowClasses"
-      :sortable="sortable"
-      :scrollX="true"
-      :scrollY="true"
-      :selectedRowIds="selectedItemIds"
-      :showRowNumbers="showRowNumbers"
-      @did-click-row="onDidClickRow"
-      @did-double-click-row="onDidDoubleClickRow"
-  />
-</div>
-
-</template>
-
-<script>
-
-import 'datatables.net-dt'
-import _ from 'lodash'
-import $ from 'jquery'
-import {JSONPath as jsonPath} from 'jsonpath-plus'
-import pluralize from 'pluralize'
-import {v4 as uuidv4} from 'uuid'
-//import modules from '@/modules'
-import FlexDataTable from '@/components/common/FlexDataTable'
-import useItems from '@/composition/items'
-// import {tableViewsForEntityType} from '@/lib/modules'
-
-const isMac = () => navigator.userAgent.indexOf('Mac OS X') != -1
-
-function tableViewsForEntityType(entityType) {
-  return entityType.views.table
-}
-
-const modules = {}
-
-export default {
-  name: 'ItemsTable',
-
-  components: {FlexDataTable},
-
-  setup: (props) => {
-    const fixedFilterQuery = (entityType) => {
-      if (!entityType) {
-        return null
-      }
-      const tableView = _.get(tableViewsForEntityType(entityType), props.viewName, null)
-      return _.get(tableView, 'fixedFilterQuery', null)
-    }
-    const filterQuery = fixedFilterQuery
-
-    const referencePathsToExpand = (entityType) => {
-      if (!entityType) {
-        console.log('here')
-        return null
-      }
-      console.log(props.viewName)
-      const tableView = _.get(tableViewsForEntityType(entityType), props.viewName, null)
-      return _.get(tableView, 'referencePathsToExpand', [])
-    }
-
-    const {
-      items,
-      invalidItems,
-      selectedItems,
-      stateNamespace: itemsStateNamespace,
-      resetItems,
-      addItem,
-      deselectItems,
-      ensureItemsloaded,
-      selectItems
-    } = useItems({
-      entityType: props.entityType,
-      stateNamespace: props.stateNamespace,
-      options: {
-        restCollectionUrl: props.restCollectionUrl,
-        filter: {query: filterQuery},
-        referencePathsToExpand
-      }
-    })
-    return {
-      items,
-      invalidItems,
-      selectedItems,
-      itemsStateNamespace,
-      resetItems,
-      addItem,
-      deselectItems,
-      ensureItemsloaded,
-      selectItems
-    }
-  },
-
-  props: {
-    isDraftBatch: {
-      type: Boolean,
-      default: false
-    },
-    showRowNumbers: {
-      type: Boolean,
-      default: false
-    },
-    stateNamespace: {
-      type: String,
-      default: ''
-    },
-    entityType: {
-      type: Object,
-    },
-    noun: {
-      type: String,
-      default: 'item'
-    },
-    nowrap: {
-      type: Boolean,
-      default: true
-    },
-    sortable: {
-      type: Boolean,
-      default: true
-    },
-    tableOptions: {
-      type: Object,
-      default: () => ({})
-    },
-    autoAdvance: {
-      type: Boolean,
-      default: false
-    },
-    allowMultipleSelection: {
-      type: Boolean,
-      default: true
-    },
-    restCollectionUrl: {
-      type: String,
-      required: false,
-      default: null
-    },
-    viewName: {
-      type: String,
-      required: true,
-      default: 'default'
-    }
-  },
-
-  computed: {
-    columns: function() {
-      return ((this.view ? this.view.columns : null) || []).map(column => this.prepareColumn(column))
-    },
-    defaultSortOrder: function() {
-      return (_.get(this, 'view.sorting.default') || []).map(sortItem => [sortItem.columnIndex, sortItem.order])
-    },
-    view: function() {
-      const viewName = this.viewName || 'default'
-      return this.entityType ? _.get(tableViewsForEntityType(this.entityType), viewName, null) : null
-    },
-    assembledTableOptions: function() {
-      let self = this
-      return _.mergeWith(
-        {},
-        self.defaultTableOptions,
-        {order: self.defaultSortOrder},
-        self.tableOptions,
-        {
-          columns: self.columns.map(col => {
-            let colClone = _.clone(col)
-            if (colClone.titleHtml != null) {
-              colClone.title = undefined
-            }
-            return colClone
-          })
-        },
-        (value, srcValue) => {
-          if (_.isArray(value) && (srcValue !== undefined)) {
-            return srcValue
-          }
-          return undefined
-        }
-      )
-    },
-    rowClasses: function() {
-      return _.mapValues(
-        _.keyBy(this.invalidItems, '_id'),
-        () => 'sfs-invalid'
-      )
-    },
-    selectedItemIds: function() {
-      return this.selectedItems.map(x => x._id)
-    }
-  },
-
-  watch: {
-    entityType: {
-      handler: function(newValue, oldValue) {
-        console.log(newValue)
-        if (newValue != oldValue) {
-          this.resetItems({entityType: this.entityType, stateNamespace: this.stateNamespace})
-        }
-      },
-      immediate: true
-    },
-    stateNamespace: {
-      handler: function(newValue, oldValue) {
-        console.log(newValue)
-        if (newValue != oldValue) {
-          this.resetItems({entityType: this.entityType, stateNamespace: this.stateNamespace})
-        }
-      }
-    },
-    items: {
-      handler: function() {
-        console.log(this.items)
-      },
-      immediate: true
-    }
-  },
-
-  data: function() {
-    let self = this
-    return {
-      defaultTableOptions: {
-        buttons: [
-          'copy',
-          'csv',
-          'excel',
-          'print',
-          {
-            text: 'New ' + self.noun,
-            action: () => self.addItem()
-          }
-        ],
-        colReorder: false,
-        select: {
-          style: 'api'
-        }
-      },
-      lastSelectedRowIndex: null
-    }
-  },
-
-  created: function() {
-    let self = this
-    self.onDidPressKey = function() {
-      let command = isMac() ? event.metaKey : event.ctrlKey
-      if ((command) && (event.key == 'a')) {
-        if (!$(event.target).is('input') && !$(event.target).is('textarea')) {
-          self.selectAllIfAllowed()
-          window.getSelection().removeAllRanges()
-          event.preventDefault() // Prevent selecting all text
-        }
-      }
-    }
-    $(document).on('keydown', self.onDidPressKey);
-  },
-
-  beforeUnmount: function() {
-    let self = this
-    $(document).off('keydown', self.onDidPressKey);
-  },
-
-  methods: {
-
-    findProperty(path) {
-      const property = this.findPropertyInSchema(path.split('.'), this.entityType.schema)
-      if (property == null) {
-        console.log(`WARNING: In ItemsTable, unknown property (path="${path}")`)
-      }
-      return property
-    },
-
-    findPropertyInSchema(path, schema) {
-      switch (schema.type) {
-      case 'object':
-        {
-          const subschema = _.get(schema, ['properties', path[0]], null)
-          if ((path.length == 1) || (subschema == null)) {
-            return subschema
-          } else {
-            return this.findPropertyInSchema(_.slice(path, 1), subschema)
-          }
-        }
-      default:
-        // TODO Warn that we're trying to find a property in a non-object schema.
-        return null
-      }
-    },
-
-    prepareColumn: function(viewColumn) {
-      const self = this
-      // TODO Can we get the schema definition for a property specified by JSONPath instead of simple path?
-      const schemaProperty = viewColumn.path ? this.findProperty(viewColumn.path) : null
-
-      let render = viewColumn.render ? eval(viewColumn.render) : (this.formatterForProperty(viewColumn, schemaProperty) || undefined)
-
-      let addLink = null
-      if (viewColumn.link) {
-        switch (viewColumn.link.type) {
-          case 'item-detail':
-            if (viewColumn.link.entityTypeName && viewColumn.link.idPath) {
-              addLink = (cellContent, item) => {
-                const itemId = _.get(item, viewColumn.link.idPath)
-                if (cellContent && itemId) {
-                  const url = self.$router.resolve({path: `/${pluralize(viewColumn.link.entityTypeName)}/${itemId}`}).href
-                  if (url) {
-                    // TODO Do we need to escape the URL?
-                    return `<a href="${url}">${cellContent}</a>`
-                  }
-                }
-                return cellContent
-              }
-            }
-            break
-          default:
-            break
-        }
-      }
-      if (addLink) {
-        const innerRender = render || ((data) => data)
-        render = (data, type, row, meta) => {
-          if (type == 'display') {
-            return addLink(innerRender(data, type, row, meta), row)
-          }
-          return innerRender(data, type, row, meta)
-        }
-      }
-      return {
-        name: viewColumn.name || `column-${uuidv4()}`,
-        className: viewColumn.className,
-        title: viewColumn.title || ((viewColumn.path != null) ? _.capitalize(_.lowerCase(_.last(viewColumn.path.split('.')))) : undefined),
-        titleHtml: viewColumn.titleHtml,
-        render: render,
-        data: viewColumn.getData ?
-            eval(viewColumn.getData) // TODO Move dynamic data getters to the front end so that we can eliminate evals (even in UI).
-            : viewColumn.path ?
-                ((row) => _.get(row, viewColumn.path, null))
-                : viewColumn.paths ?
-                    ((row) => {
-                      const path = viewColumn.paths.find((p) => !_.isNil(_.get(row, p)))
-                      return path ? _.get(row, path) : null
-                    })
-                    : viewColumn.jsonPath ?
-                        ((row) => jsonPath(viewColumn.jsonPath, row))
-                        : viewColumn.jsonPaths ?
-                            ((row) => {
-                              const path = viewColumn.jsonPaths.find((jp) => jsonPath(jp, row) != null)
-                              return path ? jsonPath(path, row) : null
-                            })
-                            : undefined,
-        orderData: viewColumn.orderData,
-        visible: _.isObject(viewColumn.visible) ? (this.isDraftBatch ? !!viewColumn.visible.draft : !!viewColumn.visible.default) : viewColumn.visible
-      }
-    },
-
-    formatterForProperty: function(viewColumn, schemaProperty) {
-      let format = this.formatForProperty(viewColumn, schemaProperty)
-      if (format) {
-        return _.get(_.get(modules, format), 'format', null)
-      }
-      return null
-    },
-
-    formatForProperty: function(viewColumn, schemaProperty) {
-      if (viewColumn.format) {
-        return viewColumn.format
-      }
-      if (schemaProperty) {
-        switch (schemaProperty.type) {
-        case 'string':
-          switch (schemaProperty.format) {
-          case 'date':
-            return 'default.formats.date'
-          case 'date-time':
-            return 'default.formats.dateTime'
-          case 'time':
-            return 'default.formats.time'
-          default:
-            break
-          }
-          break
-        default:
-          break
-        }
-      }
-      return null
-    },
-
-    selectAllIfAllowed: function() {
-      const self = this
-      if (self.items.length < 101) {
-        const itemIds = self.items.map(x => x._id)
-        self.selectItems({itemIds})
-      }
-    },
-
-    onDidClickRow: function(event) {
-      let self = this
-      const { rangeSelectionRowIds, data, mouseEvent: { shiftKey, ctrlKey, metaKey } = {} } = event
-      let multiSelect = this.allowMultipleSelection && (isMac() ? metaKey : ctrlKey)
-      let rangeSelect = this.allowMultipleSelection && shiftKey
-      let itemId = _.get(data, this.entityType.primaryKey) // TODO What about PK functions?
-      if (itemId != null) {
-        if (rangeSelect && (rangeSelectionRowIds != null)) {
-          self.selectItems({itemIds: rangeSelectionRowIds, addToSelection: true})
-          window.getSelection().removeAllRanges()
-        } else if ((multiSelect || (self.selectedItemIds.length == 1)) && self.selectedItemIds.includes(itemId)) {
-          self.lastSelectedRowIndex = null
-          self.deselectItems({itemIds: [itemId]})
-        } else {
-          self.lastSelectedRowIndex = null
-          self.selectItems({itemIds: [itemId], addToSelection: multiSelect})
-        }
-      }
-    },
-
-    onDidDoubleClickRow: function(event) {
-      let self = this
-      const { rangeSelectionRowIds, data, mouseEvent: { shiftKey, ctrlKey, metaKey } = {} } = event
-      let multiSelect = this.allowMultipleSelection && (isMac() ? metaKey : ctrlKey)
-      let rangeSelect = this.allowMultipleSelection && shiftKey
-      let itemId = _.get(data, "_id");
-      if (itemId != null) {
-        if (rangeSelect && (rangeSelectionRowIds != null)) {
-          self.selectItems({itemIds: rangeSelectionRowIds, addToSelection: true, edit: true})
-          window.getSelection().removeAllRanges()
-        } else if ((multiSelect || (self.selectedItemIds.length == 1)) && self.selectedItemIds.includes(itemId)) {
-          self.lastSelectedRowIndex = null
-          self.deselectItems({itemIds: [itemId]})
-        } else {
-          self.lastSelectedRowIndex = null
-          self.selectItems({itemIds: [itemId], addToSelection: multiSelect, edit: true})
-        }
-      }
-    },
-
-    relativeRowRecordIds: function(recordId, startOffset, count = 1, step = 1) {
-      return this.$refs.dataTable?.relativeRowRecordIds(recordId, startOffset, count, step) || []
-    }
-  }
-}
-
-</script>
-
-<style scoped>
-
-.sfs-items-table {
-  display: block;
-  /*font-size: 12px;*/
-}
-
-/* Table */
-
-.sfs-items-table:deep(.dataTables_scrollBody table) {
-  margin-bottom: 10px;
-}
-
-/* Table controls */
-
-.sfs-items-table:deep(.dt-buttons),
-.sfs-items-table:deep(.dataTables_filter) {
-  font-size: 12px;
-}
-
-/* Cells */
-
-.sfs-items-table:deep(th) {
-  background: #e8e8e8;
-  font-weight: 400;
-  color: #131313;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #d0dfea #bcbcbc #d0dfea #e8e8e8;
-  transition: background-color .2s,border-color .2s,box-shadow .2s;
-  padding: 1px 1px;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-.sfs-items-table.sfs-nowrap:deep(th) {
-  max-width: 300px;
-}
-
-.sfs-items-table:deep(table.dataTable tbody td) {
-  padding: 5px 4px;
-}
-
-.sfs-items-table:deep(table.dataTable tbody td a) {
-  text-decoration: none;
-}
-
-.sfs-items-table:deep(td),
-.sfs-items-table:deep(.align-left) {
-  text-align: left;
-}
-
-.sfs-items-table:deep(.align-center) {
-  text-align: center;
-}
-
-.sfs-items-table:deep(.align-right) {
-  text-align: right;
-}
-
-.sfs-items-table.sfs-nowrap:deep(table.dataTable tbody td) {
-  max-width: 300px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/*
-.sfs-items-table:deep(td.status-positive {
-  background-color: #b3ffb3; /*#14b314;* /
-}
-
-.sfs-items-table:deep(td.status-positive-control-passed {
-  color: rgb(51, 51, 255);
-}
-*/
-
-.sfs-items-table:deep(.samplify-data-table table.dataTable.stripe tbody tr.sfs-invalid),
-.sfs-items-table:deep(.samplify-data-table table.dataTable.stripe tbody tr.sfs-invalid.odd),
-.sfs-items-table:deep(.samplify-data-table table.dataTable.display tbody tr.sfs-invalid.odd) {
-  background: #fdd;
-}
-
-.sfs-items-table:deep(.samplify-data-table table.dataTable.stripe tbody tr.sfs-invalid.even),
-.sfs-items-table:deep(.samplify-data-table table.dataTable.display tbody tr.sfs-invalid.even) {
-  background: #fcc;
-}
-
-.sfs-items-table:deep(.samplify-data-table table.dataTable.stripe tbody tr.sfs-invalid:hover),
-.sfs-items-table:deep(.samplify-data-table table.dataTable.display tbody tr.sfs-invalid:hover) {
-  background: #abd6ff;
-}
-
-.sfs-items-table:deep(.samplify-data-table table.dataTable.stripe tbody tr.sfs-invalid.selected),
-.sfs-items-table:deep(.samplify-data-table table.dataTable.display tbody tr.sfs-invalid.selected) {
-  background: #faa;
-}
-
-
-</style>
diff --git a/src/components/common/ItemsView.vue b/src/components/common/ItemsView.vue
deleted file mode 100644
index b9510f04..00000000
--- a/src/components/common/ItemsView.vue
+++ /dev/null
@@ -1,612 +0,0 @@
-<template>
-  <div v-if="entityType != null" class="sfs-table-and-property-sheet">
-    <div class="sfs-page-header-and-table">
-      <div class="sfs-page-header">
-        <div class="sfs-page-header-info">
-          <div class="sfs-title">{{ title || titleCase(pluralize(entityType.commonTitle)) }}</div>
-        </div>
-        <div class="sfs-page-header-controls">
-          <SelectButton
-            v-if="availableEntityTypes != null"
-            v-model="currentEntityTypeName"
-            class="sfs-detail-editor-view-choice"
-            :option-label="pluralizeEntityTypeCommonTitle"
-            option-value="name"
-            :options="availableEntityTypes"
-          />
-          <FilterView
-            v-if="entityType && filterProperties"
-            v-model:filter="filter"
-            :entity-type="entityType"
-            :filter-properties="filterProperties"
-            :quick-filters="resolvedQuickFilters"
-          />
-          <SelectButton
-            v-if="allowDetailEditorViewChoice && (detailEditorViews || []).length > 1"
-            v-model="userChosenEditorViewName"
-            class="sfs-detail-editor-view-choice"
-            option-label="title"
-            option-value="name"
-            :options="detailEditorViews"
-          />
-          <Button
-            v-if="canCreate"
-            v-tooltip.top="keyboardShortcutText('cmd', 'M')"
-            class="p-button-primary"
-            :label="`Add ${indefiniteArticle(titleCase(entityType.commonTitle))}`"
-            @click="addItem()"
-          />
-        </div>
-      </div>
-      <ItemsTable
-        v-if="entityType != null"
-        ref="itemsTable"
-        class="sfs-table"
-        :entity-type="entityType"
-        :sortable="true"
-        :state-namespace="stateNamespace"
-        :table-options="tableOptions"
-        :view-name="editedState.tableViewName"
-      />
-    </div>
-    <div
-      v-if="
-        canShowDetailViews &&
-        detailComponent != null &&
-        currentEntityTypeName &&
-        detailItems.length == 1 &&
-        detailItems[0]._id
-      "
-      class="sfs-detail-view-pane"
-      :style="detailViewStyle"
-    >
-      <component :is="detailComponent" :entity-type-name="currentEntityTypeName" :item-id="detailItems[0]._id" />
-    </div>
-    <PropertySheet
-      v-if="canShowDetailViews && detailComponent == null && entityType && detailItems.length > 0"
-      :auto-advance="autoAdvanceDetailEditor"
-      class="sfs-property-sheet"
-      :editing="editingDetailItems"
-      :entity-type="entityType"
-      :items="detailItems"
-      :state-namespace="stateNamespace"
-      :view-names="currentDetailEditorViewNames"
-    />
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-import $ from 'jquery'
-import indefinite from 'indefinite'
-import moment from 'moment'
-import pluralize from 'pluralize'
-import Button from 'primevue/button'
-import Dialog from 'primevue/dialog'
-import InputNumber from 'primevue/inputnumber'
-import SelectButton from 'primevue/selectbutton'
-import {ref} from 'vue'
-
-import ItemsTable from '@/components/common/ItemsTable'
-import PropertySheet from '@/components/common/PropertySheet'
-import useEntityTypes from '@/composition/entity-types'
-import useItems from '@/composition/items'
-import useKeyboardShortcuts from '@/composition/keyboard-shortcuts'
-import FilterView from '@/components/common/FilterView'
-import {removeEmptyPropertiesAndElements} from '@/lib/objects'
-import {encodeState} from '@/lib/persistent-state'
-
-const isMac = () => navigator.userAgent.indexOf('Mac OS X') != -1
-
-function detailViewsForEntityType(entityType) {
-  return entityType?.views?.detail || {}
-}
-
-function tableViewsForEntityType() {
-  return {}
-}
-
-export default {
-  name: 'ItemsView',
-
-  components: {Button, Dialog, FilterView, InputNumber, PropertySheet, ItemsTable, SelectButton},
-
-  props: {
-    allowAutoAdvancingDetailEditor: {
-      type: Boolean,
-      default: true
-    },
-    canCreate: {
-      type: Boolean,
-      default: true
-    },
-    canDelete: {
-      type: Boolean,
-      default: true
-    },
-    canShowDetailViews: {
-      type: Boolean,
-      default: true
-    },
-    canUpdate: {
-      type: Boolean,
-      default: true
-    },
-    defaultFilter: {
-      type: Object,
-      default: () => undefined
-    },
-    entityTypeName: {
-      type: String,
-      required: false,
-      default: null
-    },
-    entityTypeNames: {
-      type: Array,
-      required: false,
-      default: null
-    },
-    defaultDetailEditorViewNames: {
-      type: Array,
-      default: () => ['default-edit', 'default']
-    },
-    detailEditorViews: {
-      type: Array, // Array of objects with name and title properties
-      default: () => []
-    },
-    displayOnlyDetailViewNames: {
-      type: Array,
-      default: () => ['default-view', 'default']
-    },
-    state: {
-      type: Object,
-      default: () => ({})
-    },
-    quickFilters: {
-      type: Array,
-      default: () => null
-    },
-    restCollectionUrl: {
-      type: String,
-      required: false,
-      default: null
-    },
-    tableViewName: {
-      type: String,
-      default: null
-    },
-    title: {
-      type: String,
-      default: null
-    }
-  },
-
-  setup: (props) => {
-    const currentEntityTypeName = ref(props.entityTypeName || (props.entityTypeNames ? props.entityTypeNames[0] : null))
-
-    const filter = ref(null)
-
-    const fixedFilterQuery = (entityType) => {
-      if (!entityType) {
-        return null
-      }
-      const tableView = _.get(tableViewsForEntityType(entityType), props.tableViewName || 'default', null)
-      return _.get(tableView, 'fixedFilterQuery', null)
-    }
-
-    const referencePathsToExpand = (entityType) => {
-      if (!entityType) {
-        return null
-      }
-      const tableView = _.get(tableViewsForEntityType(entityType), props.tableViewName || 'default', null)
-      return _.get(tableView, 'referencePathsToExpand', [])
-    }
-
-    const filterQuery = (entityType) => {
-      if (!entityType) {
-        return null
-      }
-      const fixedQuery = fixedFilterQuery(entityType)
-      const userQuery = _.isFunction(filter.value) ? filter.value(entityType) : filter.value
-      const queries = [fixedQuery, userQuery].filter((q) => q != null)
-      if (queries.length == 0) {
-        return null
-      }
-      if (queries.length == 1) {
-        return queries[0]
-      }
-      return {and: queries}
-    }
-
-    const itemsStoreOptions = _.merge(
-      {
-        loading: {
-          firstPageSize: 500
-        },
-        filter: {query: filterQuery},
-        referencePathsToExpand,
-        /* order: [
-        [{path: 'history.creation.timestamp'}, 'desc'],
-        [{path: 'history.creation.orderInBatch'}, 'desc']
-      ] */
-        restCollectionUrl: props.restCollectionUrl
-      },
-      props.itemsStoreOptions
-    )
-
-    return {
-      currentEntityTypeName,
-      filter,
-      filterQuery,
-      ...useEntityTypes(),
-      ...useItems({
-        itemTypeName: currentEntityTypeName.value || (props.entityTypeNames ? props.entityTypeNames[0] : null),
-        // itemType:
-        options: itemsStoreOptions
-        /* options: {
-          restCollectionUrl: props.restCollectionUrl,
-          filter: {query: filterQuery}
-        } */
-      }),
-      ...useKeyboardShortcuts()
-    }
-  },
-
-  data: function (props) {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const self = this
-    return {
-      editedState: _.cloneDeep(props.state),
-      tableOptions: {
-        buttons: [
-          // TODO Make configurable
-          'copy',
-          'csv',
-          'excel',
-          'print'
-        ]
-        //order: [[1, 'asc']] // TODO Configure in view
-      },
-      userChosenEditorViewName: function () {
-        let viewName = null
-        if (self.detailEditorViews.length > 0) {
-          const defaultViewNames = self.editingDetailItems
-            ? self.defaultDetailEditorViewNames
-            : self.displayOnlyDetailViewNames
-          viewName = _.first(
-            _.intersection(
-              defaultViewNames,
-              self.detailEditorViews.map((viewOption) => viewOption.name)
-            )
-          )
-          if (viewName == null) {
-            viewName = self.detailEditorViews[0].name
-          }
-        }
-        return viewName
-      }
-    }
-  },
-
-  computed: {
-    tableView: function () {
-      return this.entityType
-        ? _.get(tableViewsForEntityType(this.entityType), this.editedState?.tableViewName || 'default', null)
-        : null
-    },
-    filterProperties: function () {
-      return this.tableView ? this.tableView.filterProperties : null
-    },
-    resolvedQuickFilters: function () {
-      return this.quickFilters || (this.tableView ? this.tableView.quickFilters : null) || []
-    },
-    detailViews: function () {
-      return !this.canShowDetailViews ? {} : this.entityType ? detailViewsForEntityType(this.entityType) : {}
-    },
-    detailView: function () {
-      if (!this.canShowDetailViews) {
-        return null
-      }
-      for (const viewName of this.currentDetailEditorViewNames) {
-        if (_.has(this.detailViews, viewName)) {
-          return this.detailViews[viewName]
-        }
-      }
-      return null
-    },
-    detailViewStyle: function () {
-      return this.detailView
-        ? {
-            ...(this.detailView.preferredWidth
-              ? {
-                  flex: `0 0.1 ${this.detailView.preferredWidth}px`
-                }
-              : null)
-          }
-        : null
-    },
-    detailComponent: function () {
-      return this.detailView ? this.detailView.component : null
-    },
-    availableEntityTypes: function () {
-      if (this.entityTypeNames && this.entityTypeNames.length > 1 && this.entityTypes) {
-        return this.entityTypeNames.map((name) => this.getEntityType(name))
-      }
-      return null
-    },
-    allowDetailEditorViewChoice: function () {
-      return false
-    },
-    autoAdvanceDetailEditor: function () {
-      return this.allowAutoAdvancingDetailEditor
-    },
-    currentDetailEditorViewNames: function () {
-      return this.allowDetailEditorViewChoice
-        ? [this.userChosenEditorViewName]
-        : this.editingDetailItems
-          ? this.defaultDetailEditorViewNames
-          : this.displayOnlyDetailViewNames
-    }
-  },
-
-  watch: {
-    currentEntityTypeName: {
-      handler: function (newValue, oldValue) {
-        if (newValue != oldValue) {
-          this.resetItems({entityTypeName: newValue})
-        }
-      }
-    },
-    entityType: {
-      handler: function () {
-        console.log(this.entityType)
-        if (this.ensureItemsStore()) {
-          this.registerTableAsListNavigator()
-          this.performInitialLoad()
-        }
-      },
-      immediate: true
-    },
-    filter: {
-      immediate: true,
-      handler: function () {
-        const filterQuery = this.filterQuery(this.entityType)
-        this.setQuery(filterQuery)
-      }
-    },
-    state: {
-      handler: function () {
-        if (!_.isEqual(this.state, this.editedState)) {
-          this.editedState = this.state
-          console.log(this.editedState)
-        }
-      },
-      immediate: true
-    },
-    editedState: {
-      handler: function () {
-        if (!_.isEqual(this.state, this.editedState)) {
-          console.log('setting state ', this.editedState)
-          const query = removeEmptyPropertiesAndElements({
-            ...this.$route.query,
-            s: encodeState(this.editedState)
-          })
-          // this.$router.replace({query: {s: JSON.stringify(this.editedState)}})
-          this.$router.replace({query})
-        }
-      },
-      deep: true
-    },
-    stateNamespace: {
-      handler: function () {
-        if (this.ensureItemsStore()) {
-          this.registerTableAsListNavigator()
-          this.performInitialLoad()
-        }
-      },
-      immediate: true
-    },
-    tableView: {
-      handler: function (newValue, oldValue) {
-        if (newValue != oldValue) {
-          const buttons = ['copy', 'csv', 'excel', 'print']
-          if (!newValue) {
-            this.filter = null
-          } else {
-            if (newValue.columnGroups) {
-              buttons.push(
-                ...[
-                  ...(newValue?.columnGroups || []).map((columnGroup) => ({
-                    extend: 'columnToggle',
-                    text: columnGroup.title || 'Columns',
-                    columns: (columnGroup.columns || [])
-                      .filter((column) => column.name)
-                      .map((column) => `${column.name}:name`)
-                  }))
-                ]
-              )
-            }
-            this.filter = this.defaultFilter === undefined ? newValue.defaultFilterQuery : this.defaultFilter
-          }
-          this.tableOptions = _.assign({}, this.tableOptions, {buttons})
-        }
-      },
-      immediate: true
-    },
-    tableViewName: {
-      handler: function () {
-        this.updateState()
-      },
-      immediate: true
-    },
-    itemsStoreReady: {
-      handler: function (newValue, oldValue) {
-        if (newValue && !oldValue) {
-          this.registerTableAsListNavigator()
-          this.performInitialLoad()
-        }
-      }
-    }
-  },
-
-  created: function () {
-    this.onDidPressKey = function () {
-      const command = isMac() ? event.metaKey : event.ctrlKey
-      switch (event.key) {
-        case 'm':
-          if (command) {
-            event.preventDefault()
-            event.stopPropagation()
-            self.addItem()
-          }
-          break
-        default:
-          break
-      }
-    }
-    $(document).on('keydown', self.onDidPressKey)
-    this.performInitialLoad()
-  },
-
-  beforeUnmount: function () {
-    $(document).off('keydown', this.onDidPressKey)
-
-    // TODO Does this actually get called before stateNamespace has changed?
-    //this.deregisterListNavigator({name: 'Items', listNavigator: this.$refs.itemsTable})
-  },
-
-  methods: {
-    updateState: function () {
-      this.editedState = {
-        tableViewName: this.state.tableViewName || this.tableViewName
-      }
-    },
-
-    registerTableAsListNavigator: function () {
-      if (this.$refs.itemsTable) {
-        this.registerListNavigator({name: 'Items', listNavigator: this.$refs.itemsTable})
-      }
-    },
-
-    performInitialLoad: async function () {
-      const promises = [this.loadItems()]
-      await Promise.all(promises)
-    },
-
-    formatRelativeDateTime: function (dateTime) {
-      return moment(dateTime).fromNow()
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // String formatting functions for use in templates
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    pluralizeEntityTypeCommonTitle: function (entityType) {
-      return _.startCase(pluralize(entityType.commonTitle))
-    },
-
-    indefiniteArticle: function (...args) {
-      return indefinite(...args)
-    },
-
-    pluralize: function (...args) {
-      return pluralize(...args)
-    },
-
-    titleCase: function (s) {
-      return _.startCase(_.lowerCase(s))
-    }
-  }
-}
-</script>
-
-<style scoped>
-/* Table and property sheet */
-
-.sfs-table-and-property-sheet {
-  display: flex;
-  flex-direction: row;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.sfs-page-header-and-table {
-  flex: 1 2 auto;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  height: 100%;
-}
-
-.sfs-page-header {
-  flex: 0 0 auto;
-  position: relative;
-  width: 100%;
-  padding: 5px 10px;
-}
-
-.sfs-page-header-info {
-  float: left;
-}
-
-.sfs-page-header .sfs-title {
-  font-size: 19px;
-  text-align: left;
-}
-
-.sfs-page-header .sfs-title:first-child:last-child {
-  line-height: 37px;
-}
-
-.sfs-page-header-controls {
-  float: right;
-}
-
-.sfs-page-header-controls button {
-  margin: 0 5px;
-}
-
-.sfs-page-header-controls button:first-child {
-  margin: 0 5px 0 0;
-}
-
-.sfs-page-header-controls button:last-child {
-  margin: 0 0 0 5px;
-}
-
-.sfs-page-header-and-table > .sfs-table {
-  flex: 1 1 auto;
-  position: relative;
-  width: 100%;
-}
-
-.sfs-table-and-property-sheet > .sfs-property-sheet {
-  flex: 0 0 584px;
-  position: relative;
-  height: 100%;
-  overflow: auto;
-}
-
-.sfs-table-and-property-sheet > .sfs-detail-view-pane {
-  flex: 0 0 584px;
-  position: relative;
-  height: 100%;
-  overflow: auto;
-}
-
-/* Controls */
-
-.sfs-detail-editor-view-choice {
-  display: inline;
-  margin: 0 5px;
-}
-
-/* Match .p-button-sm (almost). */
-.sfs-detail-editor-view-choice:deep(.p-button) {
-  font-size: 0.875rem;
-  padding: 0.499625rem 0.65625rem;
-}
-</style>
diff --git a/src/components/common/PropertySheet.vue b/src/components/common/PropertySheet.vue
deleted file mode 100644
index 9cb74e8b..00000000
--- a/src/components/common/PropertySheet.vue
+++ /dev/null
@@ -1,1377 +0,0 @@
-<template>
-
-  <div class="sfs-property-sheet">
-    <div v-if="viewModel != null" class="clearfix sfs-property-sheet-header">
-      <div class="sfs-title">{{(editing ? ((editingMode == 'New') ? 'New ' : 'Edit ') : '') + titleCase((editingMode == 'EditMultiple') ? pluralize(entityType.commonTitle, items.length, true) : entityType.commonTitle)}}<span v-if="(entityType.name == 'sfs-specimen') && (items.length == 1) && getPrimaryKeyValue(items[0]) && !draftBatchId"> <router-link :to="`/sfs-specimens/${getPrimaryKeyValue(items[0])}`"><Button class="sfs-nav-button p-button-link p-button-sm" label="Details" /></router-link></span></div>
-      <div class="sfs-spacer"></div>
-      <div class="sfs-property-sheet-controls">
-        <Button v-for="(action, i) in viewActions" :key="i" :label="action.title" :style="{visibility: items.length == 1 ? 'visible' : 'hidden'}" @click="onDidClickActionButton(i)" />
-        <Button v-if="navigationButtonsVisible" :style="{visibility: (previousItemId != null) ? 'visible' : 'hidden'}" class="p-button-info p-button-rounded" icon="pi pi-caret-up" @click="onDidClickNavigateButton(-1)" />
-        <Button v-if="navigationButtonsVisible" :style="{visibility: (nextItemId != null) ? 'visible' : 'hidden'}" class="p-button-info p-button-rounded" icon="pi pi-caret-down" @click="onDidClickNavigateButton(1)" />
-        <Button v-if="allowsDeletion && (editingMode != 'New') && editing" class="p-button-danger" label="Delete" @click="onDidClickDeleteButton" />
-        <Button v-if="!editing" class="p-button-warning" label="Edit" @click="onDidClickEditButton" />
-        <Button class="p-button-warning" :label="(editing && ((editingMode == 'New') || dirty)) ? 'Cancel' : 'Close'" v-tooltip.top="keyboardShortcutText('esc')" @click="onDidClickCloseButton" />
-        <Button v-if="editing" class="p-button-primary" :disabled="!dirty || (valid && hasValidationWarnings)" label="Save" v-tooltip.top="keyboardShortcutText('cmd', 'S')" @click="onDidClickSaveButton" />
-      </div>
-    </div>
-    <div v-if="editing && valid && hasValidationWarnings" class="sfs-property-sheet-validation-warning-controls">
-      <div class="sfs-message p-warning">There are validation warnings.</div>
-      <Button class="p-button-primary" label="Save Anyway" v-tooltip.top="keyboardShortcutText('cmd', 'S')" @click="onDidClickSaveAnywayButton" />
-    </div>
-    <div v-if="editing && hasGlobalValidationErrors" class="sfs-property-sheet-global-validation-errors">
-      <div v-if="kitRegistrationNameMismatchError != null" class="sfs-property-sheet-kit-registration-name-mismatch-error">
-        <div class="sfs-error-message">{{ kitRegistrationNameMismatchError.message }}</div>
-        <div v-if="kitRegistrationNameMismatchError.persistentRedcapEventId != null">
-          <div class="sfs-error-details">Legal name from enrollment: {{ get(kitRegistrationNameMismatchError, 'names.enrollmentLegalName.first') }} {{ get(kitRegistrationNameMismatchError, 'names.enrollmentLegalName.last') }}</div>
-          <div class="sfs-error-details">Name from kit registration: {{ get(kitRegistrationNameMismatchError, 'names.kitRegistration.first') }} {{ get(kitRegistrationNameMismatchError, 'names.kitRegistration.last') }}</div>
-          <div v-if="kitRegistrationNameMismatchError.redcapEventUrl"><a :href="kitRegistrationNameMismatchError.redcapEventUrl" target="_blank">See details on REDCap</a></div>
-          <Button class="p-button-warning" label="Mark as Untestable" @click="onDidClickMarkUntestableButton(kitRegistrationNameMismatchError.persistentRedcapEventId)" />
-          &nbsp;
-          <Button class="p-button-primary" label="Override Name Mismatch" @click="onDidClickOverrideNameMismatchButton(kitRegistrationNameMismatchError.persistentRedcapEventId)" />
-        </div>
-      </div>
-      <div v-else class="lims-global-errors">
-        <div class="p-warning">
-          <i class="pi pi-exclamation-triangle" />
-          {{formErrors['*'].message}}
-        </div>
-      </div>
-    </div>
-    <div v-if="viewModel != null" class="clearfix sfs-property-sheet-form p-input-filled">
-      <PropertySheetGroupOrProperty v-for="field in visibleFields" :key="field.path" :allItems="allItems" :editing="editing" :entitySchema="entityType.schema" :field="field" :items="items" :multiEditSummary="multiEditSummary" :ref="(el) => setInputRef(el, field)" :viewModel="viewModel" :saving="saving" @did-blur-with-tab="onDidBlurFieldWithTab($event)" @update:propertyValue="onDidUpdatePropertyValue" />
-    </div>
-    <div v-if="editing && valid && hasValidationWarnings && bottomControlsVisible" class="sfs-property-sheet-validation-warning-controls">
-      <div class="sfs-message p-warning">There are validation warnings.</div>
-      <Button class="p-button-primary" label="Save Anyway" v-tooltip.top="keyboardShortcutText('cmd', 'S')" @click="onDidClickSaveAnywayButton" />
-    </div>
-    <div v-if="(viewModel != null) && bottomControlsVisible" class="clearfix sfs-property-sheet-header">
-      <div class="sfs-spacer"></div>
-      <div class="sfs-property-sheet-controls">
-        <Button v-for="(action, i) in viewActions" :key="i" :label="action.title" :style="{visibility: items.length == 1 ? 'visible' : 'hidden'}" @click="onDidClickActionButton(i)" />
-        <Button v-if="navigationButtonsVisible" :style="{visibility: (previousItemId != null) ? 'visible' : 'hidden'}" class="p-button-info p-button-rounded" icon="pi pi-caret-up" @click="onDidClickNavigateButton(-1)" />
-        <Button v-if="navigationButtonsVisible" :style="{visibility: (nextItemId != null) ? 'visible' : 'hidden'}" class="p-button-info p-button-rounded" icon="pi pi-caret-down" @click="onDidClickNavigateButton(1)" />
-        <Button v-if="allowsDeletion && (editingMode != 'New') && editing" class="p-button-danger" label="Delete" @click="onDidClickDeleteButton" />
-        <Button v-if="!editing" class="p-button-warning" label="Edit" @click="onDidClickEditButton" />
-        <Button class="p-button-warning" :label="(editing && ((editingMode == 'New') || dirty)) ? 'Cancel' : 'Close'" v-tooltip.top="keyboardShortcutText('esc')" @click="onDidClickCloseButton" />
-        <Button v-if="editing" class="p-button-primary" :disabled="!dirty || (valid && hasValidationWarnings)" label="Save" v-tooltip.top="keyboardShortcutText('cmd', 'S')" @click="onDidClickSaveButton" />
-      </div>
-    </div>
-  </div>
-
-</template>
-
-<script>
-
-import _ from 'lodash'
-import $ from 'jquery'
-import 'datatables.net-dt'
-import pluralize from 'pluralize'
-import Button from 'primevue/button'
-import {v4 as uuidv4} from 'uuid'
-import {useForm} from 'vee-validate'
-import {computed} from 'vue'
-import {mapActions, mapState, useStore} from 'vuex'
-import * as yup from 'yup'
-
-import moment from 'moment'
-
-import PropertySheetGroupOrProperty from '@/components/common/PropertySheetGroupOrProperty'
-import {findPropertyInSchema, findRelatedItemDefinitionsInSchema, schemaPropertyIsRequired} from '@/lib/schemas'
-// import {uiCodeForEntityType} from '@/lib/modules'
-// import {callCustomItemRestMethod, fetchItemByUniqueProperty} from '@/services/items'
-// import Items from '@/utilities/items'
-import useEntityTypes from '@/composition/entity-types'
-import useKeyboardShortcuts from '@/composition/keyboard-shortcuts'
-
-const isMac = () => navigator.userAgent.indexOf('Mac OS X') != -1
-
-function viewModelPathToValidatorPath(path) {
-  return path.replace(/\./g, ':')
-}
-
-function callCustomItemRestMethod() {
-  return null
-}
-
-function fetchItemByUniqueProperty() {
-  return null
-}
-
-function uiCodeForEntityType() {
-  let entityTypeCustomizations = {}
-  /*
-  for (const moduleName in modules) {
-    const module = modules[moduleName]
-    const customization = _.get(module, `entity-types.${entityTypeName}`)
-    if (customization) {
-      _.merge(entityTypeCustomizations, customization)
-    }
-  }
-  */
-  return entityTypeCustomizations
-}
-
-export default {
-  name: 'PropertySheet',
-
-  components: { Button, PropertySheetGroupOrProperty },
-  emits: ['propertySheet:willClose', 'propertySheet:didDeleteItem', 'propertySheet:didSaveItem'],
-
-  setup: (props) => {
-    const store = useStore()
-
-    const primaryKey = computed(() => props.entityType.primaryKey || '_id')
-    const getPrimaryKeyValue = computed(() => (item) => item == null ? null : item[primaryKey.value])
-
-    const batchSaveAttempted = computed(() => {
-      return _.get(store.state, props.stateNamespace).batchSaveAttempted
-    })
-
-    const fieldBelongsToRelatedItem = (path) => {
-      return findRelatedItemDefinitions(path).length > 0
-    }
-
-    const findRelatedItemDefinitions = (path) => {
-      return findRelatedItemDefinitionsInSchema(props.entityType.schema, path)
-    }
-
-    const flattenLeafFields = (fields) => {
-      return fields.map(field => (field.group || field.relatedItem) ? flattenLeafFields(field.contents) : [field]).flat()
-    }
-
-    const editingMode = computed(() => {
-      if (props.items.length == 1) {
-        if (getPrimaryKeyValue.value(props.items[0]) != null) {
-          return 'EditSingle'
-        } else {
-          return 'New'
-        }
-      } else if (props.items.length > 1) {
-        // In this case we assume contractually that every item has an ID.
-        return 'EditMultiple'
-      } else {
-        return 'None'
-      }
-    })
-
-    const view = computed(() => {
-      if (props.entityType) {
-        for (const viewName of (props.viewNames || [`default-${props.editing ? 'edit' : 'view'}`, 'default'])) {
-          const view = _.get(props.entityType, ['views', 'detail', viewName])
-          if (view) {
-            return view
-          }
-        }
-      }
-      return null
-    })
-
-    function generateFieldNames(field) {
-      field.name = uuidv4()
-      for (const subfield of field.contents || []) {
-        generateFieldNames(subfield)
-      }
-    }
-
-    // fields used to be a calculated property, but we need it to be accessible in setup().
-    const fields = computed(() => {
-      return (view.value ? view.value.fields.map(field => {
-        generateFieldNames(field)
-        //field.name = uuidv4()
-        return field
-      }) : null) || []
-    })
-
-    const leafFields = computed(() => {
-      return flattenLeafFields(fields.value)
-    })
-
-    const visibleLeafFields = computed(() => {
-      let visibleLeafFields = leafFields.value
-      if (props.editingMode == 'EditMultiple') {
-        visibleLeafFields = visibleLeafFields.filter(field => !field.unique && !field.list)
-      }
-      return visibleLeafFields
-    })
-
-    const findProperty = (path) => {
-      const property = findPropertyInSchema(props.entityType.schema, path)
-      if (property == null) {
-        console.log(`WARNING: In PropertySheet, unknown property (path="${path}")`)
-      }
-      return property
-    }
-
-    // Create a reactive validation schema.
-    const validationSchema = computed(() => {
-      const validations = {}
-      for (let field of visibleLeafFields.value) {
-        if (!field.path) {
-          continue
-        }
-        const schemaProperty = findProperty(field.path) || {}
-        let fieldSchema = null
-        switch (schemaProperty.type) {
-          case 'integer':
-            fieldSchema = yup.number().nullable().integer('Must be an integer')
-            break
-          case 'number':
-            fieldSchema = yup.number('Must be numeric').nullable()
-            break
-          case 'string':
-            switch (schemaProperty.format) {
-              case 'date':
-                fieldSchema = yup.date('Invalid date').nullable()
-                break
-              default:
-                fieldSchema = yup.string('Must be text').nullable()
-                break
-            }
-            break
-          default:
-            fieldSchema = yup.mixed().nullable()
-            break
-        }
-        if (schemaPropertyIsRequired(props.entityType.schema, field.path) && (!props.draftBatchId || batchSaveAttempted.value) && (props.items.length == 1)) {
-          fieldSchema = fieldSchema.required('Required')
-        }
-        // TODO Restore this when autoAdvance=true, but prevent excessive validations
-        if (!props.autoAdvance && schemaProperty.unique && (props.items.length == 1) && !fieldBelongsToRelatedItem(field.path)) {
-          //validations[field.path].unique = helpers.withMessage('Already used', (v) => Items.validateUniqueness(field.path, v, this.items[0]._id, this.entityType, this.draftBatchId))
-        }
-
-        validations[viewModelPathToValidatorPath(field.path)] = fieldSchema
-      }
-
-      return validations
-    })
-
-    // Create a Vee-Validate form context using the validation schema.
-
-    const form = useForm({
-      validationSchema: validationSchema.value
-    })
-
-    return {
-      editingMode,
-      view,
-      fields,
-      leafFields,
-      visibleLeafFields,
-
-      batchSaveAttempted,
-      fieldBelongsToRelatedItem,
-      findProperty,
-      findRelatedItemDefinitions,
-      // flattenLeafFields,
-
-      form,
-      formErrors: form.errors,
-      resetForm: form.resetForm,
-      formMeta: form.meta,
-      setFieldValue: form.setFieldValue,
-      // formValues: form.values,
-
-      ..._.pick(useEntityTypes(), ['entityTypes']),
-      ...useKeyboardShortcuts(),
-
-      primaryKey,
-      getPrimaryKeyValue
-    }
-  },
-
-  props: {
-    draftCommitValidationErrors: {
-      type: Array,
-      required: false,
-      default: () => []
-    },
-    allowsDeletion: {
-      type: Boolean,
-      default: true
-    },
-    autoAdvance: {
-      type: Boolean,
-      default: false
-    },
-    editing: {
-      type: Boolean,
-      default: true
-    },
-    entityType: {
-      type: Object,
-      required: true
-    },
-    /*entityTypes: {
-      type: Array,
-      required: true
-    },*/
-    items: {
-      type: Array,
-      default: null
-    },
-    noun: {
-      type: String,
-      default: 'Item'
-    },
-    showBlanksWhenNotEditing: {
-      type: Boolean,
-      default: false
-    },
-    stateNamespace: {
-      type: String,
-      default: ''
-    },
-    draftBatchId: {
-      type: String,
-      default: null
-    },
-    viewNames: {
-      type: Array,
-      default: null
-    }
-  },
-
-  data: function() {
-    return {
-      viewModel: {},
-      generalErrors: [],
-      inputRefs: {},
-      relatedItemIds: {},
-      serverValidationPending: false,
-      saving: false
-    }
-  },
-
-  computed: {
-
-    viewActions: function() {
-      return this.view.actions || []
-    },
-
-    navigationButtonsVisible: function() {
-      return this.listNavigators != null && this.listNavigators.Items != null && this.items.length == 1 && this.getPrimaryKeyValue(this.items[0]) != null
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // Editing state
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    hasValidationErrors: function() {
-      return _.values(this.formErrors).some((error) => _.isString(error) || (_.isObject(error) && (error.severity == 'error')))
-    },
-
-    hasValidationWarnings: function() {
-      return _.values(this.formErrors).some((error) => _.isObject(error) && (error.severity == 'warn'))
-    },
-
-    hasGlobalValidationErrors: function() {
-      return this.formErrors['*'] != null
-    },
-
-    kitRegistrationNameMismatchError: function() {
-      const globalError = this.formErrors['*']
-      if (globalError && _.isObject(globalError) && globalError.errorName == 'sfs-redcap-kit-registration-name-mismatch') {
-        return globalError
-      }
-      return null
-    },
-
-    dirty: function() {
-      return this.formMeta.dirty
-      //return this.v$.$anyDirty
-    },
-
-    valid: function() {
-      return this.formMeta.valid || (!this.formMeta.pending && !this.hasValidationErrors && this.hasValidationWarnings)
-      //return !this.v$.$invalid
-    },
-
-    validationPending: function() {
-      return this.formMeta.pending || this.serverValidationPending
-    },
-
-    entityTypeCustomizations: function() {
-      return this.entityType ? uiCodeForEntityType(this.entityType.name) : {}
-    },
-    visibleFields: function() {
-      return this.filterVisibleFields(this.fields)
-    },
-    editableLeafFields: function() {
-      return this.visibleLeafFields.filter(field => !field.readonly)
-    },
-    tabbableLeafFields: function() {
-      return this.editableLeafFields.filter(field => field.inputType != 'custom')
-    },
-    multiEditSummary: function() {
-      return this.itemsToMultiEditSummary(this.items)
-    },
-    nextItemId: function() {
-      if ((this.listNavigators != null) && (this.listNavigators.Items != null) && (this.items.length == 1) && (this.getPrimaryKeyValue(this.items[0]) != null)) {
-        const listItemIds = this.listNavigators.Items.relativeRowRecordIds(this.getPrimaryKeyValue(this.items[0]), 1, 1)
-        if (listItemIds.length > 0) {
-          return listItemIds[0]
-        }
-      }
-      return null
-    },
-    previousItemId: function() {
-      if ((this.listNavigators != null) && (this.listNavigators.Items != null) && (this.items.length == 1) && (this.getPrimaryKeyValue(this.items[0]) != null)) {
-        const listItemIds = this.listNavigators.Items.relativeRowRecordIds(this.getPrimaryKeyValue(this.items[0]), -1, 1)
-        if (listItemIds.length > 0) {
-          return listItemIds[0]
-        }
-      }
-      return null
-    },
-    bottomControlsVisible: function() {
-      return this.visibleLeafFields.length > 10
-    },
-    ...mapState({
-      allItems(state) {
-        return _.get(state, this.stateNamespace).items
-      },
-      listNavigators(state) {
-        return _.get(state, this.stateNamespace).listNavigators
-      }
-      /*batchSaveAttempted(state) {
-        return _.get(state, this.stateNamespace).batchSaveAttempted
-      }*/
-    })
-  },
-
-  watch: {
-    formErrors: {
-      immediate: true,
-      handler: function() {
-        // This could lead to infinite recursion, but the method we call here checks to see that the new errors differ
-        // from the old before applying them. This is still not an ideal approach, but without it, the property sheet
-        // won't show draft commit errors when it is first opened.
-        this.applyDraftCommitValidationErrors()
-      }
-    },
-    draftCommitValidationErrors: {
-      immediate: true,
-      handler: function() {
-        this.applyDraftCommitValidationErrors()
-      }
-    },
-    items: {
-      immediate: true,
-      handler: function(newValue, oldValue) {
-        if (!_.isEqual(newValue, oldValue)) {
-          this.extractRelatedItemIdsFromItems(newValue)
-          this.viewModel = this.itemsToViewModel(newValue)
-          this.resetForm({
-            values: this.viewModelToValidatorValues(this.viewModel)
-          })
-          this.applyDraftCommitValidationErrors()
-        }
-      },
-      deep: true
-    },
-    dirty: {
-      immediate: true,
-      handler: function() {
-        this.updateEditorRegistration()
-      }
-    },
-    visibleLeafFields: {
-      handler: function(newValue, oldValue) {
-        if (!_.isEqual(newValue, oldValue)) {
-          const self = this
-          // TODO It's coming from here
-          self.viewModel = self.itemsToViewModel(self.items) //, self.viewModel) to preserve changes hidden by the new view
-          self.$nextTick(() => {
-            self.resetForm({
-              values: self.viewModelToValidatorValues(self.viewModel)
-            })
-            this.applyDraftCommitValidationErrors()
-          })
-        }
-      }
-    }
-  },
-
-  created: function() {
-    let self = this
-    self.onDidPressKey = function() {
-      let command = isMac() ? event.metaKey : event.ctrlKey
-      switch (event.key) {
-      case 'Esc': // Edge-specific
-      case 'Escape':
-        if (!$(event.target).is('.p-dropdown.p-inputwrapper-focus input') && !$(event.target).is('.p-calendar input')) {
-          event.preventDefault()
-          event.stopPropagation()
-          self.hideDetail()
-        }
-        break
-      case 'Up':
-      case 'ArrowUp':
-        if (!$(event.target).is('.p-dropdown input')) {
-          event.preventDefault()
-          event.stopPropagation()
-          self.navigate(-1)
-        }
-        break
-      case 'Down':
-      case 'ArrowDown':
-        if (!$(event.target).is('.p-dropdown input')) {
-          event.preventDefault()
-          event.stopPropagation()
-          self.navigate(1)
-        }
-        break
-      case 's':
-        if (command) {
-          event.preventDefault()
-          event.stopPropagation()
-          if (self.valid && self.hasValidationWarnings) {
-            self.onDidClickSaveAnywayButton()
-          } else {
-            self.onDidClickSaveButton()
-          }
-        }
-        break
-      default:
-        break
-      }
-    }
-    $(document).on('keydown', self.onDidPressKey)
-  },
-
-  beforeUpdate() {
-    this.inputRefs = {}
-  },
-
-  updated() {
-  },
-
-  beforeUnmount: function() {
-    this.deregisterEditor(this)
-    $(document).off('keydown', this.onDidPressKey)
-  },
-
-  mounted: function() {
-    this.setDefaultFocus()
-  },
-
-  methods: {
-    onDidClickActionButton: async function(actionIndex) {
-      const action = this.viewActions[actionIndex]
-      if (action && action.restAction && this.items.length == 1 && this.getPrimaryKeyValue(this.items[0])) {
-        await callCustomItemRestMethod(this.entityType, this.getPrimaryKeyValue(this.items[0]), action.restAction.name, {method: action.restAction.method || 'get'})
-        this.$emit('propertySheet:didSaveItem') // Not exactly accurate. We *may* have done something to change the item and want to trigger a refresh.
-      }
-    },
-
-    applyDraftCommitValidationErrors: function() {
-      if (this.batchSaveAttempted) {
-        const errorsByFieldPath = _.mapValues(
-          _.groupBy(this.draftCommitValidationErrors, 'path'),
-          (errors) => _.first(_.sortBy(errors, 'severity')) // Relies on the fact that 'error' < 'warn'
-        )
-        const newErrors = _.mapKeys(errorsByFieldPath, (value, key) => viewModelPathToValidatorPath(key))
-        if (!_.isEqual(newErrors, this.formErrors)) {
-          this.form.setErrors(newErrors)
-        }
-      }
-    },
-
-    get: function(...args) {
-      return _.get(...args)
-    },
-
-    resetToOriginalItems: function() {
-      this.viewModel = this.itemsToViewModel(this.items)
-      this.generalErrors = []
-      this.resetForm({
-        values: this.viewModelToValidatorValues(this.viewModel)
-      })
-    },
-
-    // Vee-Validate supports dotted paths but gives them special handling that causes problems for us. So we replace
-    // dots with colons.
-    viewModelToValidatorValues: function(viewModel) {
-      return _.mapKeys(viewModel, (value, key) => viewModelPathToValidatorPath(key))
-    },
-
-    updateEditorRegistration: function(dirty = null) {
-      if (dirty == null) {
-        dirty = this.dirty
-      }
-      if (dirty) {
-        this.registerEditor(this)
-      } else {
-        this.deregisterEditor(this)
-      }
-    },
-
-    setInputRef(element, field) {
-      if (element) {
-        this.inputRefs[field.name] = element
-      }
-    },
-
-    onDidBlurFieldWithTab: async function({event, field}) {
-      if (this.autoAdvance && (this.visibleFields.length > 0)) {
-        let navigationOffset = 0
-        if (event.shiftKey && (field.name == _.first(this.tabbableLeafFields).name)) {
-          navigationOffset = -1
-        } else if (!event.shiftKey && (field.name == _.last(this.tabbableLeafFields).name)) {
-          navigationOffset = 1
-        }
-        if (navigationOffset != 0) {
-          let navigate = true
-          event.preventDefault()
-          event.stopPropagation()
-          //await this.v$.$validate()
-          if (this.valid) {
-            if (this.dirty) {
-              // OLD: TODO This is okay for now because it only occurs when editing a draft batch.
-              // (Otherwise autoAdvance = false.) But we should perform validation here otherwise.
-              navigate = await this.saveWithValidation()
-            }
-            if (navigate) {
-              this.updateEditorRegistration(false)
-              this.setDefaultFocus()
-              this.navigate(navigationOffset)
-            }
-          }
-        }
-      }
-    },
-
-    relativePathToField(field, ancestorField) {
-      if (ancestorField == field) {
-        return [field]
-      }
-      for (const subfield of ancestorField.contents || []) {
-        const subpath = this.relativePathToField(field, subfield)
-        if (subpath) {
-          return [ancestorField, ...subpath]
-        }
-      }
-      return null
-    },
-
-    pathToField(field) {
-      for (const ancestorField of this.fields) {
-        const path = this.relativePathToField(field, ancestorField)
-        if (path) {
-          return path
-        }
-      }
-      return null
-    },
-
-    setDefaultFocus: function() {
-      let field = _.minBy(this.tabbableLeafFields.filter((f) => f.focusPriority != null), 'focusPriority')
-          || _.first(this.tabbableLeafFields)
-      if (field) {
-        if (this.inputRefs[field.name]) {
-          this.inputRefs[field.name].focus()
-        } else {
-          const path = this.pathToField(field)
-          if (path && path.length > 0 && this.inputRefs[path[0].name]) {
-            this.inputRefs[path[0].name].focus(path.slice(1))
-          }
-        }
-      }
-    },
-
-    navigate: function(offset) {
-      if ((this.listNavigators != null) && (this.listNavigators.Items != null) && (this.items.length == 1) && (this.getPrimaryKeyValue(this.items[0]) != null)) {
-        const listItemIds = this.listNavigators.Items.relativeRowRecordIds(this.getPrimaryKeyValue(this.items[0]), offset, 1)
-        if (listItemIds.length > 0) {
-          this.selectItems({itemIds: listItemIds})
-        }
-      }
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // View model
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    filterVisibleFields: function(fields) {
-      const self = this
-      return fields.map(field => {
-        if (field.group || field.relatedItem) {
-          const filteredSubfields = self.filterVisibleFields(field.contents)
-          if (filteredSubfields.length > 0) {
-            let filteredField = _.clone(field);
-            filteredField.contents = filteredSubfields
-            return filteredField
-          } else {
-            return null
-          }
-        } else if (field.path) {
-          const schemaProperty = self.findProperty(field.path) || {}
-          const cannotShowField = ((self.editingMode == 'EditMultiple') && ((schemaProperty.unique && !self.fieldBelongsToRelatedItem(field.path)) || field.list))
-
-          // Same as itemsToMultiEditSummary()
-          const values = _.uniq(self.items.map(x => _.get(x, field.path, null)))
-          const numValues = (values.length == 1) ? ((values[0] == null) ? 0 : 1) : values.length
-
-          return (cannotShowField || (!self.editing && !self.showBlanksWhenNotEditing && (numValues == 0))) ? null : field
-        } else {
-          return field
-        }
-      })
-          .filter(Boolean)
-    },
-
-    itemsToMultiEditSummary: function(items) {
-      let self = this
-      var summary = {}
-      for (let field of self.visibleLeafFields) {
-        // When counting values, treat undefined and null as identical.
-        const values = _.uniq(items.map(x => _.get(x, field.path, null)))
-        const numValues = (values.length == 1) ? ((values[0] == null) ? 0 : 1) : values.length
-        summary[field.path] = {numValues}
-      }
-      return summary
-    },
-
-    itemsToViewModel: function(items, viewModelToPersist) {
-      const self = this
-      const viewModel = viewModelToPersist ? _.clone(viewModelToPersist) : {}
-      for (const field of self.visibleLeafFields) {
-        let numValues = self.multiEditSummary[field.path].numValues
-        let value = null
-        if (numValues == 1) {
-          value = _.get(items[0], field.path, null)
-          if (field.type == 'date') {
-            value = (value == null) ? null : moment(value).format('YYYY-MM-DD')
-          }
-        }
-        viewModel[field.path] = value
-      }
-      return viewModel
-    },
-
-    applyNewRelatedItemIds(relatedItemIds, savedItem, itemBeforeSaving, targetItems) {
-      const newRelatedItemPaths = _.sortBy(Object.keys(relatedItemIds))
-          .filter(path => relatedItemIds[path] === null)
-          .filter(path =>
-            !_.isEmpty(_.get(itemBeforeSaving, path))
-                && (_.get(itemBeforeSaving, path + `.${this.primaryKey}`) == null)
-                && (_.get(savedItem, path + `.${this.primaryKey}`) != null)
-          )
-      for (let relatedItemPath of newRelatedItemPaths) {
-        const newId = _.get(savedItem, relatedItemPath + `.${this.primaryKey}`)
-        for (let item of targetItems) {
-          _.set(item, relatedItemPath + `.${this.primaryKey}`, newId)
-        }
-      }
-    },
-
-    relatedItemsToCreateOnSave: function(itemToSave) {
-      let self = this
-      const newRelatedItemPaths = _.sortBy(Object.keys(self.relatedItemIds))
-        .filter(path => self.relatedItemIds[path] === null)
-        .filter(Boolean)
-        .filter(path => !_.isEmpty(_.get(itemToSave, path))
-      )
-      return newRelatedItemPaths.map(path => {
-        const property = self.findProperty(path)
-        const entityTypeName = property?.entityType
-        const entityType = self.entityTypes.find(x => x.name == entityTypeName)
-        return entityTypeName ? {
-          path,
-          property,
-          entityTypeName,
-          entityType: entityType,
-          value: _.get(itemToSave, path, null)
-        } : null
-      })
-        .filter(Boolean)
-    },
-
-    itemFromViewModel: function(originalItem, viewModel) {
-      var item = _.cloneDeep(originalItem)
-      for (let key in viewModel) {
-        _.set(item, key, viewModel[key] == null ? null : viewModel[key])
-      }
-
-      this.applyRelatedItemIdChanges(item)
-
-      if (this.items.length == 1) {
-        item[this.primaryKey] = this.getPrimaryKeyValue(this.items[0])
-      }
-      return item
-    },
-
-    applyRelatedItemIdChanges: function(item) {
-      // Traverse the related item paths depth-first, so that IDs higher in the hierarchy will take precedence.
-      for (let relatedItemPath of _.reverse(_.sortBy(Object.keys(this.relatedItemIds)))) {
-        if (this.relatedItemIds[relatedItemPath]) {
-          // Remove all properties of the related item except _id.
-          // TODO In the future, do we want to support in-place editing of related items?
-          _.set(item, relatedItemPath, {
-            [this.primaryKey]: this.relatedItemIds[relatedItemPath] || undefined
-          })
-        } else {
-          _.set(item, `${relatedItemPath}.${this.primaryKey}`, undefined)
-        }
-      }
-    },
-
-    editedItemsFromViewModel: function(originalItems, viewModel) {
-      let editedItems = originalItems.map(item => _.cloneDeep(item))
-      for (let item of editedItems) {
-        for (let key in viewModel) {
-          if (viewModel[key]) { // TODO How to distinguish null from "no change"
-            _.set(item, key, viewModel[key])
-          }
-        }
-        this.applyRelatedItemIdChanges(item)
-      }
-      return editedItems
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // Persistence
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    delete: async function() {
-      let self = this
-      let itemIds = self.items.map((i) => this.getPrimaryKeyValue(i)).filter(Boolean)
-      for (const itemId of itemIds) {
-        await self.beginDeletingItem({itemId})
-        // TODO why does this get interrupted?
-        self.$emit('propertySheet:didDeleteItem')
-      }
-    },
-
-    saveWithWarnings: async function() {
-      let self = this
-      let relatedItemsToCreateOnSave = []
-      switch (self.editingMode) {
-        case 'New':
-        case 'EditSingle':
-          {
-            const editedItem = self.itemFromViewModel(self.items[0], self.viewModel)
-            relatedItemsToCreateOnSave = self.relatedItemsToCreateOnSave(editedItem)
-          }
-          break
-        case 'EditMultiple':
-          {
-            const editedItems = self.editedItemsFromViewModel(self.items, self.viewModel)
-            relatedItemsToCreateOnSave = self.relatedItemsToCreateOnSave(editedItems[0])
-          }
-          break
-        default:
-          break
-      }
-      if (relatedItemsToCreateOnSave.length > 0) {
-        this.saving = true
-        self.$confirm.require({
-          message: 'By saving, the following related records will be created: '
-              + relatedItemsToCreateOnSave.map(relatedItemToCreate => `${relatedItemToCreate.entityType.commonTitle}`).join(', '),
-          header: 'Creating related records',
-          icon: 'pi pi-exclamation-triangle',
-          accept: async () => {
-            await self.save()
-            this.saving = false
-          },
-          reject: () => {
-            this.saving = false
-          }
-        })
-      } else {
-        await this.save()
-      }
-    },
-
-    save: async function() {
-      let self = this
-      let saved = true
-      switch (self.editingMode) {
-        case 'New':
-        case 'EditSingle':
-          {
-            const editedItem = self.itemFromViewModel(self.items[0], self.viewModel)
-            self.recordAutoCompleteEntries(editedItem)
-            this.saving = true
-            await self.saveItem({item: editedItem})
-            self.viewModel = self.itemsToViewModel([editedItem])
-            self.generalErrors = []
-            //self.resetForm()
-            this.resetForm({
-              values: this.viewModelToValidatorValues(this.viewModel)
-            })
-            this.saving = false
-            self.$emit('propertySheet:didSaveItem')
-          }
-          break
-        case 'EditMultiple':
-          {
-            const editedItems = self.editedItemsFromViewModel(self.items, self.viewModel)
-            //let relatedItemIds = self.relatedItemIds
-            for (const editedItem of editedItems) {
-              self.recordAutoCompleteEntries(editedItem)
-            }
-            this.saving = true
-            await self.saveItems({items: editedItems})
-            self.viewModel = self.itemsToViewModel(editedItems)
-            self.generalErrors = []
-            //self.resetForm()
-            this.resetForm({
-              values: this.viewModelToValidatorValues(this.viewModel)
-            })
-            this.saving = false
-            self.$emit('propertySheet:didSaveItem')
-          }
-          break
-        default:
-          saved = false
-          break
-      }
-      if (saved && !self.draftBatchId) {
-        self.setEditingDetailItems(false)
-      }
-    },
-
-    recordAutoCompleteEntries: function() {
-    },
-
-    /*
-    recordAutoCompleteEntries: function(item) {
-      let self = this
-      for (let field of self.leafFields) {
-        if (field.autocomplete) {
-          Items.recordAutoCompleteEntry(field.path, _.get(item, field.path))
-        }
-      }
-    },
-    */
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // String formatting functions for use in templates
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    pluralize: function(...args) {
-      return pluralize(...args)
-    },
-
-    titleCase: function(s) {
-      return _.startCase(_.lowerCase(s))
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // Event handlers
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    onDidClickMarkUntestableButton: function(persistentRedcapEventId) {
-      const self = this
-      self.$confirm.require({
-        message: 'Do you really want to mark this specimen as untestable because of a name mismatch?',
-        header: 'Untestable Specimen',
-        icon: 'pi pi-exclamation-triangle',
-        accept: async () => {
-          const entityType = this.entityTypes.find(et => et.name == 'sfs-persistent-redcap-identifier-mapping')
-          await callCustomItemRestMethod(entityType, persistentRedcapEventId, 'mark-name-mismatch-untestable', {method: 'post'})
-          self.resetToOriginalItems()
-        }
-      })
-    },
-
-    onDidClickOverrideNameMismatchButton: function(persistentRedcapEventId) {
-      const self = this
-      self.$confirm.require({
-        message: 'Do you really want to override the name mismatch and allow this specimen to be tested?',
-        header: 'Override Name Mismatch',
-        icon: 'pi pi-exclamation-triangle',
-        accept: async () => {
-          const entityType = this.entityTypes.find(et => et.name == 'sfs-persistent-redcap-identifier-mapping')
-          await callCustomItemRestMethod(entityType, persistentRedcapEventId, 'override-name-mismatch', {method: 'post'})
-          await self.performServerValidation()
-        }
-      })
-    },
-
-    onDidClickCloseButton: function() {
-      this.hideDetail()
-    },
-
-    onDidClickDeleteButton: function() {
-      let self = this
-      if ((self.items.length > 0) && !self.items.some(x => this.getPrimaryKeyValue(x) == null)) {
-      //if ((self.items.length == 1) && (self.items[0]._id != null)) {
-        const messageNounPhrase = (self.items.length == 1) ? ('this ' + self.noun) : ('these ' + pluralize(self.noun, self.items.length, true))
-        const headerText = [
-          'Delete',
-          (self.items.length == 1) ? self.noun : pluralize(self.noun, self.items.length, true),
-          (self.items.length == 1) ? _.get(self.items[0], 'ids.collectionId', null) : null
-        ].filter(Boolean).join(' ')
-        self.$confirm.require({
-          // TODO Change word sample
-          message: 'Are you sure you want to delete ' + messageNounPhrase + '?'
-            + ((self.items.length == 1) ? ' It can be deleted because it has not been synced to ID3C.' : ''),
-          header: headerText,
-          icon: 'pi pi-exclamation-triangle',
-          accept: () => {
-            self.delete()
-          }
-        })
-      } // TODO allow multiple deletion?
-    },
-
-    onDidClickEditButton: function() {
-      this.setEditingDetailItems(true)
-    },
-
-    onDidClickNavigateButton: function(offset) {
-      this.navigate(offset)
-    },
-
-    onDidClickSaveButton: async function() {
-      await this.saveWithValidation({ignoreValidationWarnings: !!this.draftBatchId && (this.items.count > 0)})
-    },
-
-    onDidClickSaveAnywayButton: async function() {
-      await this.saveWithValidation({ignoreValidationWarnings: true})
-    },
-
-    performServerValidation: async function() {
-      this.form.setErrors({})
-      this.serverValidationPending = false
-    },
-
-    /*
-    performServerValidation: async function() {
-      switch (this.editingMode) {
-        case 'New':
-        case 'EditSingle':
-          {
-            const editedItem = this.itemFromViewModel(this.items[0], this.viewModel)
-            this.serverValidationPending = true
-            const errors = await Items.validateOnServer(editedItem, this.entityType, this.draftBatchId)
-            this.generalErrors = errors.filter((error) => !error.path)
-            const errorsByFieldPath = _.mapValues(
-              _.groupBy(errors, 'path'),
-              (errors) => _.first(_.sortBy(errors, 'severity')) // Relies on the fact that 'error' < 'warn'
-            )
-            this.form.setErrors(_.mapKeys(errorsByFieldPath, (value, key) => viewModelPathToValidatorPath(key)))
-            this.serverValidationPending = false
-          }
-          break
-        case 'EditMultiple':
-          {
-            const editedItems = this.editedItemsFromViewModel(this.items, this.viewModel)
-            let allErrorsByFieldPath = {}
-            this.serverValidationPending = true
-            for (const item of editedItems) {
-              const errors = await Items.validateOnServer(item, this.entityType, this.draftBatchId)
-              const errorsByFieldPath = _.groupBy(errors, 'path')
-              _.merge(allErrorsByFieldPath, errorsByFieldPath)
-            }
-            allErrorsByFieldPath = _.mapValues(
-              allErrorsByFieldPath,
-              (errors) => _.first(_.sortBy(errors, 'severity')) // Relies on the fact that 'error' < 'warn'
-            )
-            this.form.setErrors(_.mapKeys(allErrorsByFieldPath, (value, key) => viewModelPathToValidatorPath(key)))
-            this.serverValidationPending = false
-          }
-          break
-        default:
-          break
-      }
-    },
-    */
-
-    saveWithValidation: async function({ignoreValidationWarnings = false} = {}) {
-      if (this.saving) {
-        return false
-      }
-      this.setBatchSaveAttempted(false)
-      if (this.editing && this.dirty) {
-        this.saving = true
-        await this.performServerValidation()
-        if (this.valid && (ignoreValidationWarnings || !this.hasValidationWarnings)) {
-          await this.saveWithWarnings()
-          // TODO What about when saveWithWarnings needs to prompt the user? saveWithWarnings needs to be made async so that we can get its return value.
-          // TODO Make sure that saving succeeded before returning true.
-          return true
-        }
-        this.saving = false
-      }
-      return false
-    },
-
-    extractRelatedItemIdsFromItems: function(items) {
-      let self = this
-      self.relatedItemIds = {}
-      const leafPaths = _.uniqBy(_.flatten(items.map(item => self.flattenLeafPaths(item))))
-      const idLeafPaths = leafPaths.filter(path => path.endsWith(`.${this.primaryKey}`))
-      const relatedItemPaths = idLeafPaths.map(path => path.slice(0, -`.${this.primaryKey}`.length))
-          .filter(path => (self.findProperty(path) || {}).entityType != null)
-      for (let relatedItemPath of relatedItemPaths) {
-        let id = null
-        for (let item of items) {
-          const idFromItem = _.get(item, relatedItemPath + `.${this.primaryKey}`, null)
-          if (idFromItem) {
-            if (id === null) {
-              id = idFromItem
-            } else if ((id !== undefined) && (id != idFromItem)) {
-              // Do not set or clear this on save (unless the user has edited the related item).
-              id = undefined
-            }
-          }
-        }
-        self.relatedItemIds[relatedItemPath] = id
-      }
-    },
-
-    flattenLeafPaths: function(item) {
-      return _.flatten(
-        Object.keys(item).map(key => {
-          const value = item[key]
-          if (_.isObject(value)) {
-            return this.flattenLeafPaths(value).map(path => `${key}.${path}`)
-          } else {
-            return [key]
-          }
-        })
-      )
-    },
-
-    onDidUpdatePropertyValue: async function(event) {
-      const {dataPath, newValue} = event
-      let oldValue = this.viewModel[dataPath]
-      this.viewModel[dataPath] = newValue
-
-      const oldViewModel = _.cloneDeep(this.viewModel)
-
-      const relatedItemDefinitions = this.findRelatedItemDefinitions(dataPath)
-      const parentRelatedItemDefinition = _.last(relatedItemDefinitions)
-      if (parentRelatedItemDefinition) {
-        const property = this.findProperty(dataPath)
-        // TODO We check _.isEmpty to prevent setting the ID in that case, but what should we really do?
-        if (property.unique && dataPath.startsWith(`${parentRelatedItemDefinition.path}.`) && !_.isEmpty(newValue)) {
-          let pathInRelatedItem = dataPath.slice(`${parentRelatedItemDefinition.path}.`.length)
-          // TODO!!! Include draft batch in what we fetch
-          const relatedItem = await this.fetchRelatedItemByUniquePropertyValue(parentRelatedItemDefinition, pathInRelatedItem, newValue)
-          if (!relatedItem) {
-            this.relatedItemIds[parentRelatedItemDefinition.path] = null
-            // TODO Warn about creating a new item
-            // TODO In the future, we may want to show non-unique related item properties once the item is chosen (or when a new item is to be created)
-          } else {
-            this.relatedItemIds[parentRelatedItemDefinition.path] = this.getPrimaryKeyValue(relatedItem)
-            this.populateRelatedItemFields(parentRelatedItemDefinition, relatedItem)
-            // TODO In the future, we may want to show non-unique related item properties once the item is chosen (or when a new item is to be created)
-          }
-        } else {
-          // TODO Moderate update of non-unique related item properties?
-        }
-      }
-
-      let didEditPropertyHandler = _.get(this.entityTypeCustomizations, ['editorCallbacks', 'didEditProperty', dataPath])
-      if (didEditPropertyHandler != null) {
-        await didEditPropertyHandler(this.entityType, this.viewModel, oldValue, this.items)
-      }
-
-      for (const path of _.keys(this.viewModel)) {
-        if (!_.isEqual(this.viewModel[path], oldViewModel[path])) {
-          this.setFieldValue(path, this.viewModel[path])
-        }
-      }
-    },
-
-    fetchRelatedItemByUniquePropertyValue: async function(relatedItemDefinition, path, value) {
-      const relatedItemEntityType = this.entityTypes.find(et => et.name == relatedItemDefinition.schema.entityType)
-      if (relatedItemEntityType) {
-        return await fetchItemByUniqueProperty(relatedItemEntityType, path, value)
-            || (this.draftBatchId && await fetchItemByUniqueProperty(relatedItemEntityType, path, value, {draftBatchId: this.draftBatchId}))
-      }
-      return null
-    },
-
-    populateRelatedItemFields: function(relatedItemDefinition, relatedItem) {
-      const relatedItemPathPrefix = relatedItemDefinition.path + '.'
-      for (let field of this.visibleLeafFields) {
-        if (field.path.startsWith(relatedItemPathPrefix)) {
-          const relativePath = field.path.slice(relatedItemPathPrefix.length)
-          const value = _.get(relatedItem, relativePath, null)
-          this.v$.viewModel[field.path].$model = value
-        }
-      }
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // Vuex actions
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    ...mapActions({
-      beginDeletingItem(dispatch, payload) {
-        return dispatch(this.stateNamespace + '/beginDeletingItem', payload)
-      },
-      saveItem(dispatch, payload) {
-        return dispatch(this.stateNamespace + '/saveItem', payload)
-      },
-      saveItems(dispatch, payload) {
-        return dispatch(this.stateNamespace + '/saveItems', payload)
-      },
-      hideDetail(dispatch, payload) {
-        this.$emit('propertySheet:willClose')
-        return dispatch(this.stateNamespace + '/hideDetail', payload)
-      },
-      deregisterEditor(dispatch, payload) {
-        return dispatch(this.stateNamespace + '/deregisterEditor', payload)
-      },
-      registerEditor(dispatch, payload) {
-        return dispatch(this.stateNamespace + '/registerEditor', payload)
-      },
-      selectItems(dispatch, payload) {
-        return dispatch(this.stateNamespace + '/selectItems', payload)
-      },
-      setEditingDetailItems(dispatch, payload) {
-        return dispatch(this.stateNamespace + '/setEditingDetailItems', payload)
-      },
-      setBatchSaveAttempted(dispatch, payload) {
-        return dispatch(this.stateNamespace + '/setBatchSaveAttempted', payload)
-      }
-    })
-
-  }
-}
-
-</script>
-
-<style scoped>
-
-.clearfix:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.sfs-property-sheet-header,
-.sfs-property-sheet-footer {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  padding: 10px 16px;
-}
-
-.sfs-property-sheet-header .sfs-title,
-.sfs-property-sheet-footer .sfs-title {
-  flex: 0 0 auto;
-  margin: 0;
-  font-size: 1.2rem;
-  vertical-align: middle;
-  line-height: 2.142rem;
-}
-
-.sfs-property-sheet-header .sfs-spacer,
-.sfs-property-sheet-footer .sfs-spacer {
-  flex: 1 1 auto;
-}
-
-.sfs-property-sheet-header .sfs-property-sheet-controls,
-.sfs-property-sheet-footer .sfs-property-sheet-controls {
-  flex: 0 0 auto;
-  margin-left: auto;
-}
-
-.sfs-property-sheet-controls Button,
-.sfs-property-sheet-validation-warning-controls Button {
-  margin: 0 0.5em;
-  vertical-align: middle;
-}
-
-.sfs-property-sheet-controls Button:last-child,
-.sfs-property-sheet-validation-warning-controls Button:last-child {
-  margin: 0 0 0 0.5em;
-}
-
-.sfs-property-sheet-validation-warning-controls {
-  width: 100%;
-  padding: 0 16px;
-  margin: 10px 0;
-  text-align: right;
-}
-
-.sfs-property-sheet-validation-warning-controls > div.sfs-message {
-  display: inline-block
-}
-
-.sfs-property-sheet-form:deep(.sfs-form-group) {
-
-}
-
-.sfs-property-sheet-form:deep(.sfs-form-item) {
-  float: left;
-  margin: 10px 0 10px 16px;
-}
-
-.sfs-property-sheet-form:deep(.sfs-form-item .p-calendar),
-.sfs-property-sheet-form:deep(.sfs-form-item .p-dropdown),
-.sfs-property-sheet-form:deep(.sfs-form-item .p-inputtext) {
-  width: 268px;
-  /*width: 100%;*/
-}
-
-.sfs-property-sheet-form:deep(.sfs-form-item .p-error) {
-  display: inline-block;
-  max-width: 268px;
-}
-
-.lims-global-errors {
-  padding: 5px;
-  border: 1px solid #c00;
-  color: #c00;
-}
-
-.lims-global-errors .p-warning {
-
-  color: #c60;
-}
-
-.sfs-property-sheet-form:deep(.sfs-form-item .p-warning) {
-  display: inline-block;
-  max-width: 268px;
-  color: #c60
-}
-
-.sfs-property-sheet-form:deep(.sfs-slow-down-warning) {
-  display: block;
-  background-color: yellow;
-  color: red;
-  text-align: center;
-  max-width: 268px;
-}
-
-.sfs-property-sheet-form:deep(.sfs-form-item textarea.p-inputtext) {
-  width: 552px;
-}
-
-.sfs-property-sheet-form:deep(.sfs-form-item .p-calendar .p-inputtext.sfs-dirty),
-.sfs-property-sheet-form:deep(.sfs-form-item .p-dropdown.sfs-dirty),
-.sfs-property-sheet-form:deep(.sfs-form-item input.p-inputtext.sfs-dirty) {
-  border-bottom-color: #fbc02d;
-}
-
-.sfs-property-sheet-form:deep(.sfs-form-item .p-calendar .p-inputtext.p-invalid) {
-  background-image: none;
-  border-bottom-color: #b00020;
-}
-
-.sfs-property-sheet-form:deep(.sfs-form-item .p-dropdown-label) {
-}
-
-.sfs-property-sheet-global-validation-errors {
-  margin: 0 16px;
-  text-align: left;
-}
-
-.sfs-property-sheet-kit-registration-name-mismatch-error {
-
-}
-
-.sfs-error-message {
-  color: #f00;
-}
-
-</style>
diff --git a/src/components/common/PropertySheetGroupOrProperty.vue b/src/components/common/PropertySheetGroupOrProperty.vue
deleted file mode 100644
index 4d69b585..00000000
--- a/src/components/common/PropertySheetGroupOrProperty.vue
+++ /dev/null
@@ -1,823 +0,0 @@
-<template>
-
-<div v-if="field.group" class="clearfix sfs-form-group">
-  <div v-if="title != null" class="sfs-form-group-title">{{ title }}</div>
-  <PropertySheetGroupOrProperty v-for="childField in field.contents || []" :key="childField.path" :saving="saving" :allItems="allItems" :editing="editing" :entitySchema="entitySchema" :field="childField" :items="items" :multiEditSummary="multiEditSummary" :nestedItemPath="nestedItemPath" :viewModel="viewModel" :ref="(el) => setInputRef(el, childField)" @did-blur-with-tab="onDidBlurFieldWithTab($event)" @update:propertyValue="forwardUpdateEvent" />
-</div>
-<div v-if="field.list && ((items.length == 1) && (editing && !field.readonly) || (formattedValue && (formattedValue.length > 0)))" class="clearfix sfs-form-list">
-  <div><span v-if="title != null" class="sfs-form-list-title">{{ title }}</span><span v-if="editing && !field.readonly"> <Button :disabled="addingListItem" class="p-button-default p-button-rounded" icon="pi pi-plus" @click="addingListItem = true" /></span></div>
-  <ul class="sfs-form-list-contents">
-    <li v-for="(listItem, listItemIndex) in formattedValue" :key="listItemIndex">
-      <PropertySheetListItem :ref="el => setListItemRef(el, listItemIndex)" :saving="saving" :allItems="allItems" :editing="false" :entitySchema="entitySchema" :listPath="path" :listItemIndex="null" :item="listItem" :listField="field" noun="Item" :list="formattedValue" :listParentItem="items[0]" :nestedItemPath="nestedItemPath" :stateNamespace="stateNamespace" />
-    </li>
-    <li v-if="addingListItem">
-      <PropertySheetListItem :ref="el => setListItemRef(el, null)" :saving="saving" :allItems="allItems" :editing="editing" :entitySchema="entitySchema" :listPath="path" :listItemIndex="null" :item="null" :listField="field" noun="Item" :list="formattedValue" :listParentItem="items[0]" :nestedItemPath="nestedItemPath" :stateNamespace="stateNamespace" />
-      <Button class="p-button-warning" label="Cancel" @click="addingListItem = false" />
-      <Button class="p-button-default" label="Save" @click="onDidClickSaveNewListItemButton(null)" />
-    </li>
-  </ul>
-</div>
-<div v-if="field.relatedItem" class="clearfix sfs-form-group">
-  <div v-if="title != null" class="sfs-form-group-title">{{ title }}</div>
-  <PropertySheetGroupOrProperty v-for="childField in field.contents || []" :key="childField.path" :saving="saving" :allItems="allItems" :editing="editing" :entitySchema="entitySchema" :field="childField" :items="items" :multiEditSummary="multiEditSummary" :nestedItemPath="path" :viewModel="viewModel" :ref="(el) => setInputRef(el, childField)" @did-blur-with-tab="onDidBlurFieldWithTab($event)" @update:propertyValue="forwardUpdateEvent" />
-</div>
-<div v-if="!field.group && !field.relatedItem && !field.list && !editing" class="sfs-form-item">
-  <span class="p-float-label">
-    <div :id="scopedId('input-' + field.name)" class="sfs-readonly-field-value">{{ formattedValue }}</div>
-    <label for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-</div>
-<div v-if="!field.group && !field.relatedItem && !field.list && editing" class="sfs-form-item">
-  <span v-if="customComponentName != null" class="p-float-label">
-    <component
-        v-if="items != null && customComponent != null"
-        v-bind="field.componentProps || {}"
-        v-model="formattedValue"
-        :classes="fieldValidationInputClass"
-        :is="customComponent"
-        :items="items"
-        :field="field"
-        :placeholder="placeholder"
-        :readonly="field.readonly"
-        :showLabel="true"
-        :title="title"
-        :formatter="valueFormatter"
-        :parser="valueParser"
-        :viewModel="viewModel"
-        @keydown="onKeyDownInInput"
-    />
-  </span>
-  <span v-else-if="inputType == 'text' && field.autocomplete" class="p-float-label">
-    <AutoComplete
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :class="fieldValidationInputClass"
-        :disabled="field.readonly"
-        :placeholder="placeholder"
-        :suggestions="suggestions"
-        ref="input"
-        v-model="formattedValue"
-        @complete="generateSuggestions($event)"
-        @keydown="onKeyDownInInput"
-    />
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <span v-else-if="inputType == 'text'" class="p-float-label">
-    <InputText
-        type="text"
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :class="fieldValidationInputClass"
-        :disabled="field.readonly"
-        :placeholder="placeholder"
-        ref="input"
-        v-model="formattedValue"
-        @keydown="onKeyDownInInput"
-    />
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <span v-else-if="inputType == 'tags'" class="p-float-label">
-    <Chips
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :addOnBlur="true"
-        :allowDuplicate="false"
-        :class="fieldValidationInputClass"
-        :disabled="field.readonly"
-        :placeholder="placeholder"
-        ref="input"
-        v-model="formattedValue"
-        @keydown="onKeyDownInInput"
-    />
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <span v-else-if="inputType == 'taxonomy-classification-picker'" class="p-float-label">
-    <Chips
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :addOnBlur="true"
-        :allowDuplicate="false"
-        :class="fieldValidationInputClass"
-        :disabled="field.readonly"
-        :placeholder="placeholder"
-        ref="input"
-        v-model="formattedValue"
-        @keydown="onKeyDownInInput"
-    />
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <span v-else-if="inputType == 'multilineText'" class="p-float-label">
-    <Textarea
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :class="fieldValidationInputClass"
-        :disabled="field.readonly"
-        :placeholder="placeholder"
-        :autoResize="true"
-        ref="input"
-        rows="5"
-        v-model="formattedValue"
-        @keydown="onKeyDownInInput"
-    />
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <span v-else-if="inputType == 'checkbox'">
-    <Checkbox
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :binary="true"
-        :disabled="field.readonly"
-        ref="input"
-        v-model="formattedValue"
-        @keydown="onKeyDownInInput"
-    />
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <span v-else-if="inputType == 'dateCalendar'" class="p-float-label">
-    <Calendar
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :disabled="field.readonly"
-        :inputClass="fieldValidationInputClass"
-        :manualInput="true"
-        :placeholder="placeholder"
-        :showButtonBar="true"
-        :showIcon="true"
-        dateFormat="yy-mm-dd"
-        ref="input"
-        :modelValue="formattedValue"
-        @blur="onDidBlurDateInput"
-        @date-select="onDidSelectInDateInput"
-        @input="onDidTypeInDateInput"
-        @keydown="onKeyDownInInput"
-    />
-    <Button v-if="!field.readonly && !formattedValue" alt="Today" class="p-button-default p-button-sm p-button-text lims-calendar-now-button" icon="pi pi-calendar-times" title="Today" @click="setToToday"></Button>
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <span v-else-if="inputType == 'dateTimeCalendar'" class="p-float-label">
-    <Calendar
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :disabled="field.readonly"
-        :inputClass="fieldValidationInputClass"
-        :placeholder="placeholder"
-        :showButtonBar="true"
-        :showIcon="true"
-        :showTime="true"
-        dateFormat="yy-mm-dd"
-        hourFormat="12"
-        ref="input"
-        v-model="formattedValue"
-        @keydown="onKeyDownInInput"
-    />
-    <Button v-if="!field.readonly && !formattedValue" alt="Now" class="p-button-default p-button-sm p-button-text lims-calendar-now-button" icon="pi pi-clock" title="Now" @click="setToNow"></Button>
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <span v-else-if="inputType == 'dropdown'" class="p-float-label">
-    <Dropdown
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :class="fieldValidationInputClass"
-        :disabled="field.readonly"
-        :options="enumOptions()"
-        :optionLabel="optionTitleGetter"
-        :optionValue="optionValueGetter"
-        :placeholder="placeholder"
-        ref="input"
-        v-model="formattedValue"
-        @keydown="onKeyDownInInput"
-    />
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <span v-else-if="inputType == 'listbox'" class="p-float-label">
-    <Listbox
-        :id="scopedId('input-' + field.name)"
-        :name="field.name"
-        :class="fieldValidationInputClass"
-        :disabled="field.readonly"
-        :metaKeySelection="false"
-        :multiple="schemaProperty.type == 'array'"
-        :options="enumOptions()"
-        :optionLabel="optionTitleGetter"
-        :optionValue="optionValueGetter"
-        :placeholder="placeholder"
-        ref="input"
-        v-model="formattedValue"
-        @keydown="onKeyDownInInput"
-    />
-    <label :for="scopedId('input-' + field.name)">{{ title }}</label>
-  </span>
-  <small v-if="error != null" :class="errorCssClass">
-    {{ formatError(error) }}
-  </small>
-  <transition name="fade">
-    <small v-if="showSlowDownWarning" class="sfs-slow-down-warning">
-      Please wait, we're still saving a record!
-    </small>
-  </transition>
-</div>
-
-</template>
-
-<script>
-
-import 'datatables.net-dt'
-import $ from 'jquery'
-import _ from 'lodash'
-import moment from 'moment'
-import AutoComplete from 'primevue/autocomplete'
-import Button from 'primevue/button'
-import Calendar from 'primevue/calendar'
-import Checkbox from 'primevue/checkbox'
-import Chips from 'primevue/chips'
-import Dropdown from 'primevue/dropdown'
-import InputText from 'primevue/inputtext'
-import Listbox from 'primevue/listbox'
-import Textarea from 'primevue/textarea'
-import {useField} from 'vee-validate'
-
-import PropertySheetListItem from '@/components/common/PropertySheetListItem'
-import useScopedId from '@/composables/scoped-id'
-// import {componentFromModule} from '@/lib/modules'
-// import modules from '@/modules'
-// import Items from '@/utilities/items'
-
-function viewModelPathToValidatorPath(path) {
-  return path.replace(/\./g, ':')
-}
-
-const beepSound = new Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs/ItAAAGDgYtAgAyN+QWaAAihwMWm4G8QQRDiMcCBcH3Cc+CDv/7xA4Tvh9Rz/y8QADBwMWgQAZG/ILNAARQ4GLTcDeIIIhxGOBAuD7hOfBB3/94gcJ3w+o5/5eIAIAAAVwWgQAVQ2ORaIQwEMAJiDg95G4nQL7mQVWI6GwRcfsZAcsKkJvxgxEjzFUgfHoSQ9Qq7KNwqHwuB13MA4a1q/DmBrHgPcmjiGoh//EwC5nGPEmS4RcfkVKOhJf+WOgoxJclFz3kgn//dBA+ya1GhurNn8zb//9NNutNuhz31f////9vt///z+IdAEAAAK4LQIAKobHItEIYCGAExBwe8jcToF9zIKrEdDYIuP2MgOWFSE34wYiR5iqQPj0JIeoVdlG4VD4XA67mAcNa1fhzA1jwHuTRxDUQ//iYBczjHiTJcIuPyKlHQkv/LHQUYkuSi57yQT//uggfZNajQ3Vmz+Zt//+mm3Wm3Q576v////+32///5/EOgAAADVghQAAAAA//uQZAUAB1WI0PZugAAAAAoQwAAAEk3nRd2qAAAAACiDgAAAAAAABCqEEQRLCgwpBGMlJkIz8jKhGvj4k6jzRnqasNKIeoh5gI7BJaC1A1AoNBjJgbyApVS4IDlZgDU5WUAxEKDNmmALHzZp0Fkz1FMTmGFl1FMEyodIavcCAUHDWrKAIA4aa2oCgILEBupZgHvAhEBcZ6joQBxS76AgccrFlczBvKLC0QI2cBoCFvfTDAo7eoOQInqDPBtvrDEZBNYN5xwNwxQRfw8ZQ5wQVLvO8OYU+mHvFLlDh05Mdg7BT6YrRPpCBznMB2r//xKJjyyOh+cImr2/4doscwD6neZjuZR4AgAABYAAAABy1xcdQtxYBYYZdifkUDgzzXaXn98Z0oi9ILU5mBjFANmRwlVJ3/6jYDAmxaiDG3/6xjQQCCKkRb/6kg/wW+kSJ5//rLobkLSiKmqP/0ikJuDaSaSf/6JiLYLEYnW/+kXg1WRVJL/9EmQ1YZIsv/6Qzwy5qk7/+tEU0nkls3/zIUMPKNX/6yZLf+kFgAfgGyLFAUwY//uQZAUABcd5UiNPVXAAAApAAAAAE0VZQKw9ISAAACgAAAAAVQIygIElVrFkBS+Jhi+EAuu+lKAkYUEIsmEAEoMeDmCETMvfSHTGkF5RWH7kz/ESHWPAq/kcCRhqBtMdokPdM7vil7RG98A2sc7zO6ZvTdM7pmOUAZTnJW+NXxqmd41dqJ6mLTXxrPpnV8avaIf5SvL7pndPvPpndJR9Kuu8fePvuiuhorgWjp7Mf/PRjxcFCPDkW31srioCExivv9lcwKEaHsf/7ow2Fl1T/9RkXgEhYElAoCLFtMArxwivDJJ+bR1HTKJdlEoTELCIqgEwVGSQ+hIm0NbK8WXcTEI0UPoa2NbG4y2K00JEWbZavJXkYaqo9CRHS55FcZTjKEk3NKoCYUnSQ0rWxrZbFKbKIhOKPZe1cJKzZSaQrIyULHDZmV5K4xySsDRKWOruanGtjLJXFEmwaIbDLX0hIPBUQPVFVkQkDoUNfSoDgQGKPekoxeGzA4DUvnn4bxzcZrtJyipKfPNy5w+9lnXwgqsiyHNeSVpemw4bWb9psYeq//uQZBoABQt4yMVxYAIAAAkQoAAAHvYpL5m6AAgAACXDAAAAD59jblTirQe9upFsmZbpMudy7Lz1X1DYsxOOSWpfPqNX2WqktK0DMvuGwlbNj44TleLPQ+Gsfb+GOWOKJoIrWb3cIMeeON6lz2umTqMXV8Mj30yWPpjoSa9ujK8SyeJP5y5mOW1D6hvLepeveEAEDo0mgCRClOEgANv3B9a6fikgUSu/DmAMATrGx7nng5p5iimPNZsfQLYB2sDLIkzRKZOHGAaUyDcpFBSLG9MCQALgAIgQs2YunOszLSAyQYPVC2YdGGeHD2dTdJk1pAHGAWDjnkcLKFymS3RQZTInzySoBwMG0QueC3gMsCEYxUqlrcxK6k1LQQcsmyYeQPdC2YfuGPASCBkcVMQQqpVJshui1tkXQJQV0OXGAZMXSOEEBRirXbVRQW7ugq7IM7rPWSZyDlM3IuNEkxzCOJ0ny2ThNkyRai1b6ev//3dzNGzNb//4uAvHT5sURcZCFcuKLhOFs8mLAAEAt4UWAAIABAAAAAB4qbHo0tIjVkUU//uQZAwABfSFz3ZqQAAAAAngwAAAE1HjMp2qAAAAACZDgAAAD5UkTE1UgZEUExqYynN1qZvqIOREEFmBcJQkwdxiFtw0qEOkGYfRDifBui9MQg4QAHAqWtAWHoCxu1Yf4VfWLPIM2mHDFsbQEVGwyqQoQcwnfHeIkNt9YnkiaS1oizycqJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=")
-
-function beep() {
-  beepSound.play()
-}
-
-const modules = {}
-
-function componentFromModule() {
-  /*
-  if (componentName == 'RelatedItemPicker') {
-    return RelatedItemPicker
-  }
-  for (const moduleName in modules) {
-    const module = modules[moduleName]
-    const component = _.get(module, ['components', ...componentName.split('/')])
-    if (component) {
-      return component
-    }
-  }
-  */
-  return null
-}
-
-export default {
-  name: 'PropertySheetGroupOrProperty',
-  components: {AutoComplete, Button, Calendar, Checkbox, Chips, Dropdown, InputText, Listbox, PropertySheetListItem, Textarea},
-  emits: [
-    'update:propertyValue',
-    'did-blur-with-tab'
-  ],
-
-  setup: (props) => {
-    let value, errors, validationMetadata = [null, [], {}]
-    if (props.field.path) {
-      if (!props.field.group && !props.field.list && !props.field.relatedItem) {
-        ({value, errors, meta: validationMetadata} = useField(viewModelPathToValidatorPath(props.field.path)))
-      }
-    }
-    return {
-      ...useScopedId(),
-      errors,
-      validationMetadata,
-      value
-    }
-  },
-
-  props: {
-    allItems: {
-      type: Array,
-      default: () => []
-    },
-    editing: {
-      type: Boolean,
-      default: true
-    },
-    saving: {
-      type: Boolean,
-      default: true
-    },
-    entitySchema: {
-      type: Object,
-      required: true
-    },
-    field: {
-      type: Object,
-      default: () => ({})
-    },
-    items: {
-      type: Array,
-      default: () => []
-    },
-    nestedItemPath: {
-      type: String,
-      default: null
-    },
-    multiEditSummary: {
-      type: Object,
-      default: null
-    },
-    viewModel: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-
-  data: () => ({
-    addingListItem: false,
-    formattedValue: null,
-    suggestions: [],
-    listItemRefs: {},
-    showSlowDownWarning: false,
-    inputRefs: {}
-  }),
-
-  computed: {
-    error: function() {
-      return this.validationMetadata.pending ? null : _.first(this.errors)
-    },
-
-    errorCssClass: function() {
-      if (_.isObject(this.error) && (this.error.severity == 'warn')) {
-        return 'p-warning'
-      }
-      return 'p-error'
-    },
-
-    title: function() {
-      let title = _.get(this.field, 'title', null)
-      if ((title == null) && (this.field.path != null)) {
-        title = _.capitalize(_.lowerCase(_.last(this.field.path.split('.'))))
-      }
-      return title
-    },
-
-    fieldValidationInputClass: function() {
-      let self = this
-      let classes = []
-      if (self.originalNumValues > 1) {
-        classes.push('p-replacing-multiple-values')
-      }
-      if (this.error != null) {
-        if (this.error.severity == 'warn') {
-          classes.push('p-warning')
-        } else {
-          classes.push('p-invalid')
-        }
-      } else if (!self.validationMetadata.valid) {
-        classes.push('p-invalid')
-      } else if (self.validationMetadata.dirty) (
-        classes.push('sfs-dirty')
-      )
-      return classes.join(' ')
-    },
-
-    originalNumValues: function() {
-      return (this.multiEditSummary && this.multiEditSummary[this.path]) ? this.multiEditSummary[this.path].numValues : 0
-    },
-
-    path: function() {
-      return this.field.path
-      //return [this.schemaPath || null, this.field.path].filter(x => x != null).join('.')
-    },
-
-/*
-    pathRelativeToNestedItem: function() {
-      if (!this.nestedItemPath) {
-        return this.path
-      } else if (this.path.startsWith(`${this.nestedItemPath}.`)) {
-        return this.path.slice(this.nestedItemPath.length + 1)
-      } else {
-        console.log(`WARNING: Inconsistent nested item path. (Current field path="${this.path}", current nested item path="${this.nestedItemPath}")`)
-        return this.path
-      }
-    },*/
-
-    placeholder: function() {
-      return (this.originalNumValues > 1) ? (this.originalNumValues + ' values') : null
-    },
-
-    schemaProperty: function() {
-      return this.field.path ? this.findProperty(this.field.path) : null
-    },
-
-    inputType: function() {
-      return this.field.inputType || (this.schemaProperty ? this.defaultInputTypeForProperty(this.schemaProperty) : null)
-    },
-
-    customComponent: function() {
-      return this.customComponentName && componentFromModule(this.customComponentName)
-    },
-
-    customComponentName: function() {
-      return this.inputType == 'custom' ? this.field.customComponent : null
-    },
-
-    valueFormatter: function() {
-      let format = this.valueFormat
-      if (format) {
-        return _.get(_.get(modules, format), 'format', _.identity)
-      }
-      return _.identity
-    },
-
-    valueParser: function() {
-      let format = this.valueFormat
-      if (format) {
-        return _.get(_.get(modules, format), 'parse', _.identity)
-      }
-      return _.identity
-    },
-
-    valueFormat: function() {
-      if (this.field.format) {
-        return this.field.format
-      }
-      if (this.schemaProperty) {
-        switch (this.schemaProperty.type) {
-        case 'string':
-          switch (this.schemaProperty.format) {
-          case 'date':
-            return 'default.formats.date'
-          case 'date-time':
-           // Backwards! Let's stop using "formats" for this purpose.
-            return 'default.formats.dateTimeInverse'
-          case 'time':
-            return 'default.formats.time'
-          default:
-            break
-          }
-          break
-        default:
-          return 'text'
-        }
-      }
-      return null
-    }
-  },
-
-  watch: {
-    saving: {
-      handler: function(newValue) {
-        if (!newValue) {
-          this.showSlowDownWarning = false
-        }
-      }
-    },
-    viewModel: {
-      deep: true,
-      handler: function(newValue, oldValue) {
-        const oldFieldValue = _.get(oldValue, this.field.path, null)
-        const newFieldValue = _.get(this.viewModel, this.field.path, null)
-        if (!_.isEqual(newFieldValue, oldFieldValue)) {
-          this.value = newFieldValue
-        }
-      }
-    },
-    formattedValue: {
-      handler: async function(newFormattedValue, oldFormattedValue) {
-        if (newFormattedValue != oldFormattedValue) {
-          if (this.editing && !this.field.readonly) {
-            const oldValue = this.value
-            let parsingError = false
-            try {
-              this.value = this.valueParser(newFormattedValue)
-            } catch (err) {
-              console.log('WARNING: Error when parsing value.', err)
-              this.value = null
-              parsingError = true
-            }
-            if (!parsingError && (this.value != oldValue)) {
-              // This condition only obtains when the user has made a change (and not when a new item is loaded).
-              this.formattedValue = this.valueFormatter(this.value)
-              this.$emit('update:propertyValue', {dataPath: this.path, newValue: this.value, oldValue})
-            }
-          }
-        }
-      },
-      immediate: true
-    },
-    value: {
-      handler: function(newValue, oldValue) {
-        if (!this.field.relatedItem && (newValue != oldValue)) {
-          this.formattedValue = this.valueFormatter(newValue)
-        }
-      },
-      immediate: true
-    }
-  },
-
-  beforeUpdate() {
-    this.inputRefs = {}
-  },
-
-  methods: {
-    setToNow() {
-      const oldValue = this.value
-      const newValue = new moment().toISOString()
-      this.value = newValue
-      this.$emit('update:propertyValue', {dataPath: this.path, newValue, oldValue})
-    },
-
-    setToToday() {
-      const oldValue = this.value
-      const newValue = new moment().local().format('YYYY-MM-DD')
-      this.value = newValue
-      this.$emit('update:propertyValue', {dataPath: this.path, newValue, oldValue})
-    },
-
-    setInputRef(element, field) {
-      if (element) {
-        this.inputRefs[field.name] = element
-      }
-    },
-
-    formatError(error) {
-      if (_.isObject(error)) {
-        return error.message
-      } else {
-        return error
-      }
-    },
-
-    setListItemRef(element, listItemIndex) {
-      if (element) {
-        this.listItemRefs[(listItemIndex == null) ? 'new' : listItemIndex] = element
-      }
-    },
-
-    onDidClickSaveNewListItemButton(listItemIndex) {
-      const listItemEditor = this.listItemRefs[(listItemIndex == null) ? 'new' : listItemIndex]
-      if (listItemEditor && listItemEditor.validate() && listItemEditor.isDirty()) {
-        const editedListItem = listItemEditor.getEditedListItem()
-        if (listItemIndex == null) {
-          let newList = (this.value || [])
-          newList.push(editedListItem)
-          this.formattedValue = newList
-          this.addingListItem = false
-        }
-      }
-    },
-
-    defaultInputTypeForProperty(schemaProperty) {
-      if (schemaProperty.readonly) {
-        switch (schemaProperty.type) {
-        case 'array':
-          return 'tags'
-        case 'boolean':
-          return 'checkbox'
-        default:
-          return 'text'
-        }
-      }
-      if (schemaProperty.enum) {
-        return 'dropdown'
-      }
-      switch (schemaProperty.type) {
-      case 'array':
-        if (schemaProperty.format == 'taxonomy-classification') {
-          return 'taxonomy-classification-picker'
-        }
-        return 'tags'
-      case 'boolean':
-        return 'checkbox'
-      case 'string':
-        switch (schemaProperty.format) {
-        case 'date':
-          return 'dateCalendar'
-        case 'date-time':
-          return 'dateTimeCalendar'
-        default:
-          return 'text'
-        }
-      default:
-        return 'text'
-        //console.log(`WARNING: In property sheet, no default input type for property of type ${schemaProperty.type}`)
-      }
-    },
-
-    findProperty(path) {
-      const property = this.findPropertyInSchema(path.split('.'), this.entitySchema)
-      if (property == null) {
-        console.log(`WARNING: In PropertySheetGroupOrProperty, unknown property (path="${path}")`)
-      }
-      return property
-    },
-
-    findPropertyInSchema(path, schema) {
-      switch (schema.type) {
-      case 'object':
-        {
-          const subschema = _.get(schema, ['properties', path[0]], null)
-          if ((path.length == 1) || (subschema == null)) {
-            return subschema
-          } else {
-            return this.findPropertyInSchema(_.slice(path, 1), subschema)
-          }
-        }
-      default:
-        // TODO Warn that we're trying to find a property in a non-object schema.
-        return null
-      }
-    },
-
-    forwardUpdateEvent(event) {
-      this.$emit('update:propertyValue', event)
-    },
-
-    focus(subfieldPath = null) {
-      if (subfieldPath && subfieldPath.length > 0 && this.inputRefs[subfieldPath[0].name]) {
-        this.inputRefs[subfieldPath[0].name].focus(subfieldPath.slice(1))
-      } else if (this.$refs.input) {
-        this.$refs.input.$el.focus()
-      }
-    },
-
-    generateSuggestions: function() {
-      return []
-    },
-
-    /*
-    // TODO Make async?
-    generateSuggestions: function(event) {
-      let self = this
-      let search = event.query
-      self.suggestions = Items.autoComplete(self.path, search, self.allItems)
-    },
-    */
-
-    enumOptions: function() {
-      let options = this.schemaProperty.enum || []
-      if (this.schemaProperty.type == 'array') {
-        options = _.get(this.schemaProperty, 'items.enum', [])
-      }
-      if (!this.field.required) {
-        options = _.clone(options)
-        options.unshift({title: '(none)', value: null})
-      }
-      return options
-    },
-
-    optionTitleGetter: function(option) {
-      return _.isObject(option) ? option.title : option
-    },
-
-    optionValueGetter: function(option) {
-      return _.isObject(option) ? option.value : option
-    },
-
-    onDidBlurDateInput: function(event) {
-      const text = event.target.value
-      if (text.match(/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/)) {
-        // We should have already set the value in onDidTypeInDateInput, but set it again just in case.
-        this.formattedValue = text
-      }
-    },
-
-    onDidSelectInDateInput: function(selectedDate) {
-      // Normally, this happens using two-way data binding on the Calendar component. But we are not using two-way
-      // binding here because we want to allow typing, and with two-way binding and manual entry enabled, the value
-      // gets set as soon as the user types the year part.
-      this.formattedValue = moment(selectedDate).format('YYYY-MM-DD')
-    },
-
-    onDidTypeInDateInput: function(event) {
-      const input = event.target
-      let text = input.value
-      text = text.replaceAll(/[^0-9]/g, '')
-      if (text.length >= 4) {
-        text = `${text.slice(0, 4)}-${text.slice(4)}`
-      }
-      if (text.length >= 7) {
-        text = `${text.slice(0, 7)}-${text.slice(7)}`
-      }
-      if (text.length >= 10) {
-        text = text.slice(0, 10)
-      }
-      input.value = text
-      setTimeout(function(){ input.selectionStart = input.selectionEnd = 10000 }, 0)
-      if (text.length == 10) {
-        this.formattedValue = text
-      } else if (text.length == 0) {
-        this.formattedValue = null
-      }
-    },
-
-    onDidBlurFieldWithTab: function({event, field}) {
-      if (!this.saving) {
-        this.$emit('did-blur-with-tab', {event, field})
-      }
-    },
-
-    onKeyDownInInput: function() {
-      if (this.saving) {
-        event.preventDefault()
-        event.stopPropagation()
-        beep()
-        this.showSlowDownWarning = true
-        return
-      }
-      switch (event.key) {
-        case 'Down':
-        case 'ArrowDown':
-          if ($(this.$refs.input?.$el).is('.p-dropdown') && !this.$refs.input?.overlayVisible) {
-            event.preventDefault()
-            event.stopPropagation()
-            this.$refs.input.show()
-          }
-          break
-        case 'Tab':
-          this.$emit('did-blur-with-tab', {event, field: this.field})
-          break
-        default:
-          break
-      }
-    }
-  }
-}
-
-</script>
-
-<style scoped>
-
-.clearfix:after,
-.clearfix:before {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-.sfs-form-group {
-  float: left;
-  width: 100%; /* Was 568px */
-}
-
-.sfs-form-group-title {
-  font-variant: small-caps;
-  text-align: left;
-  margin: 16px 16px 0 16px;
-}
-
-.p-input-filled .p-float-label .p-replacing-multiple-values ~ label {
-  top: 0.25rem !important;
-  margin-top: 0;
-  background: transparent;
-  font-size: 12px;
-}
-
-.p-float-label .sfs-readonly-field-value {
-  padding-top: 1rem;
-  min-height: 22px;
-  width: 268px;
-  text-align: right;
-  border-bottom: 1px solid #ddd;
-}
-
-.p-float-label .sfs-readonly-field-value ~ label {
-  padding: 2px 4px;
-  margin-left: -4px;
-  font-size: 12px;
-  top: 0.25rem !important;
-  margin-top: 0;
-  background: transparent;
-}
-
-ul.sfs-form-list-contents {
-  list-style: none;
-  padding-left: 0;
-}
-
-ul.sfs-form-list-contents li {
-  border-top: 1px solid #ddd;
-}
-
-ul.sfs-form-list-contents li:last-child {
-  border-bottom: 1px solid #ccc;
-}
-
-.fade-enter-active {
-}
-.fade-leave-active {
-  transition: opacity 2s;
-}
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}
-
-.lims-calendar-now-button {
-  position: absolute;
-  top: 6px;
-  right: 30px;
-  z-index: 1000;
-}
-
-</style>
diff --git a/src/components/common/PropertySheetListItem.vue b/src/components/common/PropertySheetListItem.vue
deleted file mode 100644
index ed4fc12b..00000000
--- a/src/components/common/PropertySheetListItem.vue
+++ /dev/null
@@ -1,430 +0,0 @@
-<template>
-
-<div class="sfs-property-subsheet">
-  <div v-if="(viewModel != null) && ['New', 'EditSingle'].includes(editingMode)" class="clearfix sfs-property-subsheet-form p-input-filled">
-    <PropertySheetGroupOrProperty v-for="field in visibleFields" :saving="saving" :key="field.path" :allItems="allItems" :editing="editing" :entitySchema="listItemSchema" :field="field" :items="[listItem || {}]" :multiEditSummary="multiEditSummary" :ref="el => setInputRef(el, field)" validationState="v$.viewModel" @did-blur-with-tab="onDidBlurFieldWithTab($event)" @update:propertyValue="onDidUpdatePropertyValue" />
-  </div>
-</div>
-
-</template>
-
-<script>
-
-import _ from 'lodash'
-import 'datatables.net-dt'
-import moment from 'moment'
-import pluralize from 'pluralize'
-import {useForm} from 'vee-validate'
-import {computed, defineAsyncComponent} from 'vue'
-import * as yup from 'yup'
-
-import {findPropertyInSchema, schemaPropertyIsRequired} from '@/lib/schemas'
-
-pluralize.addIrregularRule('specimen', 'specimens')
-pluralize.addIrregularRule('sfs-specimen', 'sfs-specimens')
-
-export default {
-  name: 'PropertySheetListItem',
-
-  components: {
-    PropertySheetGroupOrProperty: defineAsyncComponent(() => import('@/components/common/PropertySheetGroupOrProperty'))
-  },
-  emits: ['propertySheet:willClose', 'propertySheet:didDeleteItem', 'propertySheet:didSaveItem'],
-
-  setup: function(props) {
-    const findProperty = (path) => {
-      //let fullPath = `${this.listItemPath}.${path}`
-      const property = findPropertyInSchema(props.listItemSchema, path)
-      if (property == null) {
-        console.log(`WARNING: In PropertySheetListItem, unknown property (path="${path}")`)
-      }
-      return property
-    }
-
-    const flattenLeafFields = (fields) => {
-      return fields.map(field => field.group ? flattenLeafFields(field.contents) : [ field ]).flat()
-    }
-
-    const editingMode = computed(() => {
-      if (props.item) {
-        return 'EditSingle'
-      } else {
-        return 'New'
-      }
-    })
-
-    const fields = computed(() => {
-      return props.listField.itemFields || []
-    })
-
-    const leafFields = computed(() => {
-      return flattenLeafFields(fields.value)
-    })
-
-    const visibleLeafFields = computed(() => {
-      return leafFields.value
-    })
-
-    const form = useForm({
-      validationSchema: validationSchema.value,
-    })
-
-    // Create a reactive validation schema.
-    const validationSchema = computed(() => {
-      const validations = {}
-      for (let field of visibleLeafFields.value) {
-        const schemaProperty = findProperty(field.path) || {}
-        let fieldSchema = null
-        switch (schemaProperty.type) {
-          case 'integer':
-            fieldSchema = yup.number().nullable().integer('Must be an integer')
-            break
-          case 'number':
-            fieldSchema = yup.number('Must be numeric').nullable()
-            break
-          case 'string':
-            switch (schemaProperty.format) {
-              case 'date':
-                fieldSchema = yup.date('Invalid date').nullable()
-                break
-              default:
-                fieldSchema = yup.string('Must be text').nullable()
-                break
-            }
-            break
-          default:
-            fieldSchema = yup.mixed().nullable()
-            break
-        }
-        if (schemaPropertyIsRequired(props.entitySchema.value, field.path)) {
-          fieldSchema = fieldSchema.required('Required')
-        }
-        // TODO ? Restore this when autoAdvance=true, but prevent excessive validations
-        //if (!props.autoAdvance && schemaProperty.unique && (props.items.length == 1) && !fieldBelongsToRelatedItem(field.path)) {
-          //validations[field.path].unique = helpers.withMessage('Already used', (v) => Items.validateUniqueness(field.path, v, this.items[0]._id, this.entityType, this.draftBatchId))
-        //}
-
-        validations[field.path] = fieldSchema
-      }
-
-      return validations
-    })
-
-    return {
-      editingMode,
-      fields,
-      leafFields,
-      visibleLeafFields,
-
-      findProperty,
-      // flattenLeafFields,
-
-      form,
-      formErrors: form.errors,
-      resetForm: form.resetForm,
-      formMeta: form.meta
-    }
-  },
-
-  props: {
-    allItems: {
-      type: Array,
-      default: () => []
-    },
-    editing: {
-      type: Boolean,
-      default: true
-    },
-    saving: {
-      type: Boolean,
-      default: true
-    },
-    entitySchema: {
-      type: Object,
-      required: true
-    },
-    listIndex: {
-      type: Number,
-      default: null
-    },
-    listPath: {
-      type: String,
-      required: true
-    },
-    item: {
-      type: Object,
-      required: true
-    },
-    list: {
-      type: Array,
-      required: true
-    },
-    noun: {
-      type: String,
-      default: 'Item'
-    },
-    readonly: {
-      type: [Boolean, null],
-      default: null
-    },
-    listField: {
-      type: Object,
-      required: true
-    }
-  },
-
-  data: function() {
-    return {
-      viewModel: null,
-      inputRefs: {}
-    }
-  },
-
-  computed: {
-
-    hasValidationErrors: function() {
-      return _.values(this.formErrors).some(error => _.isString(error) || (_.isObject(error) && (error.severity == 'error')))
-    },
-
-    hasValidationWarnings: function() {
-      return _.values(this.formErrors).some(error => _.isObject(error) && (error.severity == 'warn'))
-    },
-
-    dirty: function() {
-      return this.formMeta.dirty
-    },
-
-    valid: function() {
-      return this.formMeta.valid || (!this.formMeta.pending && !this.hasValidationErrors && this.hasValidationWarnings)
-    },
-
-    validationPending: function() {
-      return this.formMeta.pending || this.serverValidationPending
-    },
-
-    visibleFields: function() {
-      return this.fields //this.filterVisibleFields(this.fields)
-    },
-    editableLeafFields: function() {
-      return(this.visibleLeafFields.filter(field => !field.readonly))
-    },
-    multiEditSummary: function() {
-      return this.itemsToMultiEditSummary([...(this.item ? [this.item] : [])])
-    },
-    listItemSchema: function() {
-      const listSchema = findPropertyInSchema(this.entitySchema, this.listPath)
-      if (!listSchema || !listSchema.items) {
-        // TODO Warn about list schema not found
-      }
-      return listSchema.items
-    }
-  },
-
-  watch: {
-    item: {
-      immediate: true,
-      handler: function(newValue) {
-        this.viewModel = this.listItemToViewModel(newValue)
-        this.resetForm({
-          values: this.viewModelToValidatorValues(this.viewModel)
-        })
-      }
-    },
-    visibleLeafFields: {
-      handler: function() {
-        const self = this
-        this.viewModel = this.listItemToViewModel(self.item)
-        self.$nextTick(() => {
-          self.resetForm({
-            values: self.viewModelToValidatorValues(self.viewModel)
-          })
-        })
-      }
-    }
-  },
-
-  beforeUpdate() {
-    this.inputRefs = {}
-  },
-
-  methods: {
-
-    focus() {
-      this.setDefaultFocus()
-    },
-
-    setInputRef(element, field) {
-      if (element) {
-        this.inputRefs[field.name] = element
-      }
-    },
-
-    onDidBlurFieldWithTab: function() { //{event, field}) {
-      //this.$emit('did-blur-with-tab', {event, field})
-    },
-
-    setDefaultFocus: function() {
-      let field = _.first(this.editableLeafFields)
-      if (field && this.inputRefs[field.name]) {
-        this.inputRefs[field.name].focus()
-      }
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // View model
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    itemsToMultiEditSummary: function(items) {
-      var summary = {}
-      for (let field of this.visibleLeafFields) {
-        // When counting values, treat undefined and null as identical.
-        const values = _.uniq(items.map(x => _.get(x, field.path, null)))
-        let numValues = (values.length == 1) ? ((values[0] == null) ? 0 : 1) : values.length
-        summary[field.path] = { numValues }
-      }
-      return summary
-    },
-
-    listItemToViewModel: function(listItem) {
-      let self = this
-      var viewModel = {}
-      for (let field of self.visibleLeafFields) {
-        let value = _.get(listItem, field.path, null)
-        if (field.type == 'date') {
-          value = (value == null) ? null : moment(value).format('YYYY-MM-DD')
-        }
-        viewModel[field.path] = value
-      }
-      return viewModel
-    },
-
-    listItemFromViewModel: function(originalListItem, viewModel) {
-      var listItem = _.cloneDeep(originalListItem || {})
-      for (let key in viewModel) {
-        _.set(listItem, key, viewModel[key] || null)
-      }
-      listItem._id = _.get(originalListItem, '_id', undefined)
-      return listItem
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // Persistence
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    /*
-    delete: async function() {
-      let self = this
-      let itemIds = self.items.map(i => i._id).filter(Boolean)
-      for (const itemId of itemIds) {
-        await self.beginDeletingItem({itemId})
-        // TODO why does this get interrupted?
-        self.$emit('propertySheet:didDeleteItem')
-      }
-    },*/
-
-    getEditedListItem: function() {
-      return this.listItemFromViewModel(this.item, this.viewModel)
-    },
-
-    save: function() {
-      if (this.dirty && this.valid) {
-        const editedListItem = this.listItemFromViewModel(this.item, this.viewModel)
-        this.recordAutoCompleteEntries(editedListItem)
-        //let list = _.clone(_.get(this.listParentItem, this.listPath, []))
-        let list = _.clone(this.list || [])
-        if (this.listIndex == null) {
-          list.push(editedListItem)
-        } else {
-          list.splice(this.listIndex, 1, [editedListItem])
-        }
-        //self.saveItem({item: editedItem})
-        this.$emit('propertySheetListItem:didRequestSave', {listIndex: this.listIndex, value: editedListItem})
-      }
-    },
-
-    recordAutoCompleteEntries: function() {//item) {
-      /*let self = this
-      for (let field of self.leafFields) {
-        if (field.autocomplete) {
-          Items.recordAutoCompleteEntry(field.path, _.get(item, field.path)) // TODO Fix
-        }
-      }*/
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // String formatting functions for use in templates
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    pluralize: function(...args) {
-      return pluralize(...args)
-    },
-
-    titleCase: function(s) {
-      return _.startCase(_.lowerCase(s))
-    },
-
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-    // Event handlers
-    ////////////////////////////////////////////////////////////////////////////////////////////////////
-
-    onDidClickCloseButton: function() {
-      this.hideDetail()
-    },
-
-    onDidClickDeleteButton: function() {
-      let self = this
-      if ((self.items.length > 0) && !self.items.some(x => x._id == null)) {
-      //if ((self.items.length == 1) && (self.items[0]._id != null)) {
-        const messageNounPhrase = (self.items.length == 1) ? ('this ' + self.noun) : ('these ' + pluralize(self.noun, self.items.length, true))
-        const headerText = [
-          'Delete',
-          (self.items.length == 1) ? self.noun : pluralize(self.noun, self.items.length, true),
-          (self.items.length == 1) ? _.get(self.items[0], 'ids.collectionId', null) : null
-        ].filter(Boolean).join(' ')
-        self.$confirm.require({
-          // TODO Change word sample
-          message: 'Are you sure you want to delete ' + messageNounPhrase + '?'
-            + ((self.items.length == 1) ? ' It can be deleted because it has not been synced to ID3C.' : ''),
-          header: headerText,
-          icon: 'pi pi-exclamation-triangle',
-          accept: () => {
-            self.delete()
-          }
-        })
-      } // TODO allow multiple deletion?
-    },
-
-    onDidClickEditButton: function() {
-      this.setEditingDetailItems(true)
-    },
-
-    onDidClickNavigateButton: function(offset) {
-      this.navigate(offset)
-    },
-
-    onDidClickSaveButton: function() {
-      //self.v$.$touch()
-      if (this.dirty && this.valid) {
-        this.save()
-      }
-    },
-
-    onDidUpdatePropertyValue: function(event) {
-      const {dataPath, newValue} = event
-      this.viewModel[dataPath] = newValue
-    }
-
-  }
-}
-
-</script>
-
-<style scoped>
-
-.clearfix:after {
-  display: table;
-  content: "";
-  clear: both;
-}
-
-</style>
diff --git a/src/components/screens/UsersView.vue b/src/components/screens/UsersView.vue
deleted file mode 100644
index 00a211cd..00000000
--- a/src/components/screens/UsersView.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <DefaultLayout height="full" overflow-y="hidden" width="full">
-    <ItemsView entity-type-name="user" />
-  </DefaultLayout>
-</template>
-
-<script lang="ts">
-import {defineComponent} from 'vue'
-import {useHead} from '@unhead/vue'
-
-import ItemsView from '@/components/common/ItemsView.vue'
-import DefaultLayout from '@/components/layout/DefaultLayout.vue'
-
-export default defineComponent({
-  name: 'HomeView',
-
-  components: {DefaultLayout, ItemsView},
-
-  setup: () => {
-    useHead({title: 'User administration'})
-  }
-})
-</script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 8537892e..578d1de4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,7 +24,6 @@ import SearchView from '@/components/screens/SearchView.vue'
 import SettingsScreen from '@/components/screens/SettingsScreen.vue'
 import StatisticsView from '@/components/screens/StatisticsView.vue'
 import {beginAuthentication, isAuthenticated} from '@/lib/orcid'
-import UsersView from '@/components/screens/UsersView.vue'
 import VariantMeasurementScreen from '@/components/screens/VariantMeasurementScreen.vue'
 import VariantScreen from '@/components/screens/VariantScreen.vue'
 import WizardCompletionView from '@/components/screens/WizardCompletionView.vue'
@@ -84,11 +83,6 @@ const routes: RouteRecordRaw[] = [
     component: DashboardView,
     meta: {requiresAuth: true}
   },
-  {
-    path: '/users',
-    component: UsersView,
-    meta: {requiresAuth: true}
-  },
   {
     path: '/statistics',
     name: 'statistics',

From 2f192d0d10af9c0d0356078920e8bcb36f1b9c42 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 29 Dec 2025 12:19:56 -0800
Subject: [PATCH 03/40] Fix component names

For consistency and to avoid any confusion during debugging, component names are being changes to match their file names.
---
 src/components/ScoreSetTable.vue             | 2 +-
 src/components/common/EntityLink.vue         | 2 +-
 src/components/common/ItemNotFound.vue       | 2 +-
 src/components/common/PageLoading.vue        | 2 +-
 src/components/screens/DashboardView.vue     | 2 +-
 src/components/screens/ExperimentCreator.vue | 2 +-
 src/components/screens/SettingsScreen.vue    | 2 +-
 src/components/screens/VariantScreen.vue     | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/ScoreSetTable.vue b/src/components/ScoreSetTable.vue
index 3af49908..71a971f1 100644
--- a/src/components/ScoreSetTable.vue
+++ b/src/components/ScoreSetTable.vue
@@ -20,7 +20,7 @@ import useFormatters from '@/composition/formatters'
 import FlexDataTable from '@/components/common/FlexDataTable'
 
 export default {
-  name: 'PublicationIdentifierView',
+  name: 'ScoreSetTable',
 
   components: {FlexDataTable},
 
diff --git a/src/components/common/EntityLink.vue b/src/components/common/EntityLink.vue
index da8ea63b..8d47a463 100644
--- a/src/components/common/EntityLink.vue
+++ b/src/components/common/EntityLink.vue
@@ -16,7 +16,7 @@ import useItem from '@/composition/item'
  */
 // TODO This can be enhanced easily to show a preview in a pop-over view when the cursor hovers over the link.
 export default defineComponent({
-  name: 'SelectList',
+  name: 'EntityLink',
   components: {},
 
   props: {
diff --git a/src/components/common/ItemNotFound.vue b/src/components/common/ItemNotFound.vue
index 8ef9f452..5202ef26 100644
--- a/src/components/common/ItemNotFound.vue
+++ b/src/components/common/ItemNotFound.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 export default {
-    name: 'PageNotFoundView',
+    name: 'ItemNotFound',
     components: { },
 
     props: {
diff --git a/src/components/common/PageLoading.vue b/src/components/common/PageLoading.vue
index 46559e69..36fec2e4 100644
--- a/src/components/common/PageLoading.vue
+++ b/src/components/common/PageLoading.vue
@@ -8,7 +8,7 @@
 import ProgressSpinner from 'primevue/progressspinner'
 
 export default {
-    name: 'LoadingView',
+    name: 'PageLoading',
     components: { ProgressSpinner },
 }
 </script>
diff --git a/src/components/screens/DashboardView.vue b/src/components/screens/DashboardView.vue
index 1a3d716b..5a5e95e6 100644
--- a/src/components/screens/DashboardView.vue
+++ b/src/components/screens/DashboardView.vue
@@ -71,7 +71,7 @@ import ScoreSetTable from '@/components/ScoreSetTable.vue'
 import DefaultLayout from '@/components/layout/DefaultLayout'
 
 export default {
-  name: 'HomeView',
+  name: 'DashboardView',
 
   components: {DefaultLayout, ScoreSetTable, InputText, Tabs, TabList, Tab, TabPanels, TabPanel, Button, ProgressSpinner},
 
diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index 8370e61b..760a0166 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -626,7 +626,7 @@ const KEYWORD_GROUPS = {
 }
 
 export default {
-  name: 'ExperimentEditor',
+  name: 'ExperimentCreator',
   components: {
     AutoComplete,
     Button,
diff --git a/src/components/screens/SettingsScreen.vue b/src/components/screens/SettingsScreen.vue
index c628f7ef..b755b39c 100644
--- a/src/components/screens/SettingsScreen.vue
+++ b/src/components/screens/SettingsScreen.vue
@@ -142,7 +142,7 @@ import useItems from '@/composition/items'
 import config from '@/config'
 
 export default {
-  name: 'HomeView',
+  name: 'SettingsScreen',
 
   components: {Button, Card, DefaultLayout, InputText, Checkbox},
 
diff --git a/src/components/screens/VariantScreen.vue b/src/components/screens/VariantScreen.vue
index 9574c1e1..3b1c0752 100644
--- a/src/components/screens/VariantScreen.vue
+++ b/src/components/screens/VariantScreen.vue
@@ -85,7 +85,7 @@ import VariantMeasurementView from '@/components/VariantMeasurementView.vue'
 import config from '@/config'
 
 export default defineComponent({
-  name: 'VariantMeasurementScreen',
+  name: 'VariantScreen',
   components: {
     Button,
     DefaultLayout,

From a4405652c454146bda95ece7d49e07519992c2eb Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 29 Dec 2025 12:57:58 -0800
Subject: [PATCH 04/40] Replace Primevue Dropdown component with Select

---
 src/components/CollectionAdder.vue             |  8 ++++----
 src/components/CollectionCreator.vue           |  6 +++---
 src/components/CollectionPermissionsEditor.vue |  6 +++---
 src/components/ProteinStructureView.vue        |  9 ++++-----
 src/components/ScoreSetHistogram.vue           | 10 +++++-----
 src/components/screens/ExperimentCreator.vue   |  6 +++---
 src/components/screens/ExperimentEditor.vue    |  6 +++---
 src/components/screens/ScoreSetCreator.vue     | 14 +++++++-------
 src/components/screens/ScoreSetEditor.vue      | 12 ++++++------
 9 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/src/components/CollectionAdder.vue b/src/components/CollectionAdder.vue
index d1d8f52b..a41efb75 100644
--- a/src/components/CollectionAdder.vue
+++ b/src/components/CollectionAdder.vue
@@ -30,7 +30,7 @@
       :style="{width: '25rem'}"
     >
       <div class="flex align-items-center gap-3 mb-3">
-        <Dropdown
+        <Select
           v-model="selectedCollectionUrn"
           class="w-full"
           option-label="name"
@@ -43,7 +43,7 @@
             <i v-if="option.private" class="mave-collection-option-private pi pi-lock" title="Private collection" />
             <span class="mave-collection-option-sharing">{{ collectionSharingInfo(option) }}</span>
           </template>
-        </Dropdown>
+        </Select>
       </div>
       <div class="mave-save-to-collection-actions">
         <Button label="Create new collection" @click="creatorVisible = true" />
@@ -71,7 +71,7 @@ import axios from 'axios'
 import pluralize from 'pluralize'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 
 import config from '@/config'
 import CollectionCreator from '@/components/CollectionCreator'
@@ -80,7 +80,7 @@ import EmailPrompt from '@/components/common/EmailPrompt.vue'
 
 export default {
   name: 'CollectionAdder',
-  components: {Button, CollectionCreator, Dialog, Dropdown, EmailPrompt},
+  components: {Button, CollectionCreator, Dialog, Select, EmailPrompt},
 
   props: {
     dataSetUrn: {
diff --git a/src/components/CollectionCreator.vue b/src/components/CollectionCreator.vue
index c8c1c5a9..4c2f33c5 100644
--- a/src/components/CollectionCreator.vue
+++ b/src/components/CollectionCreator.vue
@@ -60,7 +60,7 @@
         <Column :field="(userRole) => `${userRole.user.firstName} ${userRole.user.lastName}`" header="Name" />
         <Column field="role" header="Role">
           <template #body="{data}">
-            <Dropdown
+            <Select
               class="mavedb-collection-role-dropdown"
               :model-value="data.role"
               option-label="title"
@@ -91,7 +91,7 @@ import _ from 'lodash'
 import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 import ToggleSwitch from 'primevue/toggleswitch'
 import InputText from 'primevue/inputtext'
 import SelectButton from 'primevue/selectbutton'
@@ -104,7 +104,7 @@ import EmailPrompt from '@/components/common/EmailPrompt.vue'
 
 export default {
   name: 'CollectionCreator',
-  components: {Button, Column, DataTable, Dropdown, EmailPrompt, ToggleSwitch, InputText, SelectButton, Textarea},
+  components: {Button, Column, DataTable, Select, EmailPrompt, ToggleSwitch, InputText, SelectButton, Textarea},
   emits: ['createdCollection', 'canceled'],
 
   setup: useScopedId,
diff --git a/src/components/CollectionPermissionsEditor.vue b/src/components/CollectionPermissionsEditor.vue
index c2303bc1..8780a5ef 100644
--- a/src/components/CollectionPermissionsEditor.vue
+++ b/src/components/CollectionPermissionsEditor.vue
@@ -49,7 +49,7 @@
             <span v-if="orcidIdsToRemove.includes(data.user.orcidId)">{{ data.role }} &nbsp;&rightarrow; None</span>
             <span v-if="data.oldRole">{{ data.oldRole }} &rightarrow;&nbsp;</span>
             <span v-if="data.user.orcidId == userOrcidId">{{ data.role }}</span>
-            <Dropdown
+            <Select
               v-if="!orcidIdsToRemove.includes(data.user.orcidId) && data.user.orcidId != userOrcidId"
               class="mave-collection-role-dropdown"
               :model-value="data.role"
@@ -92,7 +92,7 @@ import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 import InputText from 'primevue/inputtext'
 import SelectButton from 'primevue/selectbutton'
 
@@ -105,7 +105,7 @@ import EmailPrompt from '@/components/common/EmailPrompt.vue'
 export default {
   name: 'CollectionPermissionsEditor',
 
-  components: {Button, Column, DataTable, Dialog, Dropdown, EmailPrompt, InputText, SelectButton},
+  components: {Button, Column, DataTable, Dialog, Select, EmailPrompt, InputText, SelectButton},
 
   props: {
     collectionUrn: {
diff --git a/src/components/ProteinStructureView.vue b/src/components/ProteinStructureView.vue
index d4829f77..09de8600 100644
--- a/src/components/ProteinStructureView.vue
+++ b/src/components/ProteinStructureView.vue
@@ -1,12 +1,11 @@
 <template>
   <div style="display: flex; flex-flow: column; height: 100%">
-    <span v-if="alphaFoldData?.length > 1" class="p-float-label" style="margin-top: 10px; margin-bottom: 4px">
-      <Dropdown
+    <span class="p-float-label" style="margin-top: 10px; margin-bottom: 4px">
+      <Select
         :id="scopedId('alphafold-id')"
         v-model="selectedAlphaFold"
         option-label="id"
         :options="alphaFoldData"
-        style="height: 3em"
       />
       <label :for="scopedId('alphafold-id')">AlphaFold ID</label>
     </span>
@@ -30,7 +29,7 @@
 <script>
 import axios from 'axios'
 import $ from 'jquery'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 import SelectButton from 'primevue/selectbutton'
 import {PDBeMolstarPlugin} from 'pdbe-molstar/lib/viewer'
 import 'pdbe-molstar/build/pdbe-molstar-light.css'
@@ -43,7 +42,7 @@ import useScopedId from '@/composables/scoped-id'
 export default {
   name: 'ProteinStructureView',
 
-  components: {Dropdown, SelectButton},
+  components: {Select, SelectButton},
 
   props: {
     uniprotId: {
diff --git a/src/components/ScoreSetHistogram.vue b/src/components/ScoreSetHistogram.vue
index 6f3118e3..40155e49 100644
--- a/src/components/ScoreSetHistogram.vue
+++ b/src/components/ScoreSetHistogram.vue
@@ -14,7 +14,7 @@
     <div v-if="showCalibrations" class="mavedb-histogram-thresholds-control">
       <div class="mavedb-histogram-control">
         <label class="mavedb-histogram-control-label" for="mavedb-histogram-viz-select">Thresholds: </label>
-        <Dropdown
+        <Select
           v-model="activeCalibration"
           :disabled="!showCalibrations"
           input-id="mavedb-histogram-viz-select"
@@ -39,7 +39,7 @@
         <label class="mavedb-histogram-control-label" for="mavedb-histogram-db-select"
           >Clinical control database:
         </label>
-        <Dropdown
+        <Select
           v-model="controlDb"
           :disabled="!refreshedClinicalControls"
           input-id="mavedb-histogram-db-select"
@@ -50,7 +50,7 @@
         <label class="mavedb-histogram-control-label" for="mavedb-histogram-version-select"
           >Clinical control version:
         </label>
-        <Dropdown
+        <Select
           v-model="controlVersion"
           :disabled="!refreshedClinicalControls"
           input-id="mavedb-histogram-version-select"
@@ -128,7 +128,7 @@
 import axios from 'axios'
 import _ from 'lodash'
 import Checkbox from 'primevue/checkbox'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 import ProgressSpinner from 'primevue/progressspinner'
 import Rating from 'primevue/rating'
 import Tabs from 'primevue/tabs'
@@ -194,7 +194,7 @@ interface Margins {
 export default defineComponent({
   name: 'ScoreSetHistogram',
 
-  components: {Checkbox, Dropdown, Rating, Tabs, TabList, Tab, ProgressSpinner},
+  components: {Checkbox, Select, Rating, Tabs, TabList, Tab, ProgressSpinner},
 
   props: {
     coordinates: {
diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index 760a0166..f9c712bd 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -427,7 +427,7 @@
 
                     <div class="mavedb-wizard-content keyword-editor">
                       <span class="p-float-label field">
-                        <Dropdown
+                        <Select
                           :id="scopedId(`keyword-input-${keyword.key}`)"
                           v-model="keywordKeys[keyword.key]"
                           class="keyword-dropdown"
@@ -512,7 +512,7 @@ import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Chips from 'primevue/chips'
 import Dialog from 'primevue/dialog'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 import FileUpload from 'primevue/fileupload'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
@@ -633,7 +633,7 @@ export default {
     Chips,
     DefaultLayout,
     Dialog,
-    Dropdown,
+    Select,
     EmailPrompt,
     FileUpload,
     InputText,
diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 2bfd384c..fbfb81b9 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -315,7 +315,7 @@
                 <div v-if="keywordVisibility[keyword.key]">
                   <div class="field">
                     <span class="p-float-label">
-                      <Dropdown
+                      <Select
                         :id="scopedId(`keyword-input-${keyword.key}`)"
                         v-model="keywordKeys[keyword.key]"
                         class="keyword-dropdown"
@@ -418,7 +418,7 @@ import Button from 'primevue/button'
 import Card from 'primevue/card'
 import Chips from 'primevue/chips'
 import Dialog from 'primevue/dialog'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 import Multiselect from 'primevue/multiselect'
 import FileUpload from 'primevue/fileupload'
 import InputText from 'primevue/inputtext'
@@ -534,7 +534,7 @@ export default {
     Card,
     Chips,
     Dialog,
-    Dropdown,
+    Select,
     Multiselect,
     DefaultLayout,
     EmailPrompt,
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index feb5e6c3..26fc91d1 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -104,7 +104,7 @@
                     <div class="mavedb-wizard-content">
                       <div style="position: relative">
                         <span class="p-float-label">
-                          <Dropdown
+                          <Select
                             :id="scopedId('input-experiment')"
                             ref="experimentInput"
                             v-model="experiment"
@@ -121,7 +121,7 @@
                             <template #empty>
                               <div style="padding: 10px; text-align: center">No experiments found.</div>
                             </template>
-                          </Dropdown>
+                          </Select>
                           <label :for="scopedId('input-experiment')">Experiment</label>
                         </span>
                         <span v-if="validationErrors.experiment" class="mave-field-error">{{
@@ -369,7 +369,7 @@
                     </div>
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
-                        <Dropdown
+                        <Select
                           :id="scopedId('input-targetLicenseId')"
                           v-model="licenseId"
                           option-label="longName"
@@ -1082,7 +1082,7 @@
                     <div class="mavedb-wizard-content">
                       <span class="p-float-label">
                         <!-- Assembly is the reference genome property in coordinate cases -->
-                        <Dropdown
+                        <Select
                           v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.assembly"
                           :aria-labelledby="scopedId('input-targetGeneAssemblyLabel')"
                           :options="assemblies"
@@ -1104,7 +1104,7 @@
                     </div>
                     <div class="mavedb-wizard-content">
                       <span class="p-float-label">
-                        <Dropdown
+                        <Select
                           :id="scopedId('input-targetGeneGeneNameLabel')"
                           v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.gene"
                           filter
@@ -1437,7 +1437,7 @@ import {marked} from 'marked'
 import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Chips from 'primevue/chips'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 import FileUpload from 'primevue/fileupload'
 import InputNumber from 'primevue/inputnumber'
 import ToggleSwitch from 'primevue/toggleswitch'
@@ -1514,7 +1514,7 @@ export default {
     CalibrationEditor,
     Chips,
     DefaultLayout,
-    Dropdown,
+    Select,
     EmailPrompt,
     FileUpload,
     InputNumber,
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index bed172e9..a243bcd1 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -29,7 +29,7 @@
               <div v-else>
                 <div class="field">
                   <span class="p-float-label">
-                    <Dropdown
+                    <Select
                       :id="scopedId('input-experiment')"
                       v-model="experiment"
                       option-label="title"
@@ -155,7 +155,7 @@
               <div>
                 <div class="field">
                   <span class="p-float-label">
-                    <Dropdown
+                    <Select
                       :id="scopedId('input-targetLicenseId')"
                       v-model="licenseId"
                       option-label="longName"
@@ -520,7 +520,7 @@
                           <div class="field-column">
                             <span class="p-float-label">
                               <!-- Assembly is the reference genome property in coordinate cases -->
-                              <Dropdown
+                              <Select
                                 :id="scopedId('input-targetGeneAssembly')"
                                 v-model="assembly"
                                 :options="assemblies"
@@ -531,7 +531,7 @@
                           </div>
                           <div class="field-column">
                             <span class="p-float-label">
-                              <Dropdown
+                              <Select
                                 :id="scopedId('input-targetGeneGeneNames')"
                                 v-model="geneName"
                                 filter
@@ -955,7 +955,7 @@ import Card from 'primevue/card'
 import Chips from 'primevue/chips'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
-import Dropdown from 'primevue/dropdown'
+import Select from 'primevue/select'
 import FileUpload from 'primevue/fileupload'
 import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
@@ -1019,7 +1019,7 @@ export default {
     Column,
     DataTable,
     DefaultLayout,
-    Dropdown,
+    Select,
     EmailPrompt,
     EntityLink,
     FileUpload,

From 80266dc01042b6fadbfb1a77823099921d87aca8 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 29 Dec 2025 13:06:39 -0800
Subject: [PATCH 05/40] Replace Primevue Sidebar component with Drawer

---
 src/components/screens/ScoreSetView.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index 692b0b3a..7cdf6095 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -360,7 +360,7 @@
     </div>
   </DefaultLayout>
   <div v-if="itemStatus == 'Loaded'" class="card flex justify-content-center">
-    <Sidebar
+    <Drawer
       v-model:visible="isScoreSetVisualizerVisible"
       class="scoreset-viz-sidebar"
       :header="item.title"
@@ -373,7 +373,7 @@
         :scores="variants"
         :uniprot-id="uniprotId"
       />
-    </Sidebar>
+    </Drawer>
   </div>
   <!-- Set z-index to ensure dialog appears above heatmap color legend -->
   <PrimeDialog
@@ -424,7 +424,7 @@ import ProgressSpinner from 'primevue/progressspinner'
 import ProgressBar from 'primevue/progressbar'
 import PrimeDialog from 'primevue/dialog'
 import ScrollPanel from 'primevue/scrollpanel'
-import Sidebar from 'primevue/sidebar'
+import Drawer from 'primevue/drawer'
 import SplitButton from 'primevue/splitbutton'
 import {ref} from 'vue'
 import {mapState} from 'vuex'
@@ -486,7 +486,7 @@ export default {
     ScoreSetProcessingStatus,
     ScoreSetSecondaryMetadata,
     ScrollPanel,
-    Sidebar,
+    Drawer,
     SplitButton,
     TargetGene
   },

From 7f28a8f21e5a63291756b49509fe0bddb15a4f4a Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 29 Dec 2025 15:16:01 -0800
Subject: [PATCH 06/40] Replace ExperimentCreator contributors Chip component
 with AutoComplete

---
 src/components/screens/ExperimentCreator.vue | 59 ++++++++------------
 1 file changed, 23 insertions(+), 36 deletions(-)

diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index f9c712bd..2767ebce 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -205,30 +205,17 @@
                     </div>
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
-                        <Chips
+                        <AutoComplete
                           :id="scopedId('input-contributors')"
-                          ref="contributorsInput"
                           v-model="contributors"
-                          :add-on-blur="true"
-                          :allow-duplicate="false"
-                          :placeholder="contributors?.length > 0 ? '' : 'Type or paste ORCID IDs here.'"
-                          @add="newContributorsAdded"
-                          @keyup.escape="clearContributorSearch"
-                        >
-                          <template #chip="slotProps">
-                            <div>
-                              <div v-if="slotProps.value.givenName || slotProps.value.familyName">
-                                {{ slotProps.value.givenName }} {{ slotProps.value.familyName }} ({{
-                                  slotProps.value.orcidId
-                                }})
-                              </div>
-                              <div v-else>{{ slotProps.value.orcidId }}</div>
-                            </div>
-                            <div>
-                              <i class="pi pi-times-circle" @click="removeContributor(slotProps.value)"></i>
-                            </div>
-                          </template>
-                        </Chips>
+                          fluid
+                          multiple
+                          :option-label="(x) => x.givenName || x.familyName ? `${x.givenName} ${x.familyName} (${x.orcidId})` : x.orcidId"
+                          :typeahead="false"
+                          @blur="updateContributors"
+                          @keyup.space="updateContributors"
+                          @update:model-value="newContributorsAdded"
+                        />
                         <label :for="scopedId('input-contributors')">Contributors</label>
                       </span>
                       <span v-if="validationErrors.contributors" class="mave-field-error">{{
@@ -846,12 +833,6 @@ export default {
     // Contributors
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-    clearContributorSearch: function () {
-      // This could change with a new PrimeVue version.
-      const input = this.$refs.contributorsInput
-      input.$refs.input.value = ''
-    },
-
     lookupOrcidUser: async function (orcidId) {
       let orcidUser = null
       try {
@@ -862,8 +843,20 @@ export default {
       return orcidUser
     },
 
-    newContributorsAdded: async function (event) {
-      const newContributors = event.value
+    updateContributors: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.contributors.push(currentValue.trim())
+        this.newContributorsAdded()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    newContributorsAdded: async function () {
+      // new contributor values are those that are strings rather than objects
+      const newContributors = this.contributors.filter(_.isString)
 
       // Convert any strings to ORCID users without names. Remove whitespace from new entries.
       this.contributors = this.contributors.map((c) => (_.isString(c) ? {orcidId: c.trim()} : c))
@@ -907,12 +900,6 @@ export default {
       }
     },
 
-    removeContributor: function (contributor) {
-      const index = this.contributors.findIndex(c => c.orcidId === contributor.orcidId)
-      if (index !== -1) {
-        this.contributors.splice(index, 1)
-      }
-    },
     removeRawReadIdentifier: function (rawReadIdentifier) {
       const index = this.rawReadIdentifiers.findIndex(r => r.identifier === rawReadIdentifier.identifier)
       if (index !== -1) {

From ef8e51cce7901d6ee8a5721f29f183c2b1a14a02 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 29 Dec 2025 15:45:36 -0800
Subject: [PATCH 07/40] Replace ExperimentCreator DOI identifiers Chip
 component with AutoComplete

---
 src/components/screens/ExperimentCreator.vue | 48 ++++++++------------
 1 file changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index 2767ebce..36fcd1b6 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -169,24 +169,17 @@
                   </div>
                   <div class="mavedb-wizard-content field">
                     <span class="p-float-label">
-                      <Chips
+                      <AutoComplete
                         :id="scopedId('input-doiIdentifiers')"
                         ref="doiIdentifiersInput"
                         v-model="doiIdentifiers"
-                        :add-on-blur="true"
-                        :allow-duplicate="false"
-                        @add="acceptNewDoiIdentifier"
-                        @keyup.escape="clearDoiIdentifierSearch"
-                      >
-                        <template #chip="slotProps">
-                          <div>
-                              <span>{{ slotProps.value?.identifier }}</span>
-                          </div>
-                          <div>
-                            <i class="pi pi-times-circle" @click="removeDoiIdentifier(slotProps.value)"></i>
-                          </div>
-                        </template>
-                      </Chips>
+                        :multiple="true"
+                        option-label="identifier"
+                        :typeahead="false"
+                        @blur="updateDoiIdentifiers"
+                        @keyup.space="updateDoiIdentifiers"
+                        @update:model-value="newDoiIdentifiersAdded"
+                      />
                       <label :for="scopedId('input-doiIdentifiers')">DOIs</label>
                     </span>
                     <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
@@ -906,12 +899,6 @@ export default {
         this.rawReadIdentifiers.splice(index, 1)
       }
     },
-    removeDoiIdentifier: function (doiIdentifier) {
-      const index = this.doiIdentifiers.findIndex(d => d.identifier === doiIdentifier.identifier)
-      if (index !== -1) {
-        this.doiIdentifiers.splice(index, 1)
-      }
-    },
 
     suggestionsForAutocomplete: function (suggestions) {
       // The PrimeVue AutoComplete doesn't seem to like it if we set the suggestion list to [].
@@ -969,7 +956,18 @@ export default {
     // Form fields
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-    acceptNewDoiIdentifier: function () {
+    updateDoiIdentifiers: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.doiIdentifiers.push(currentValue.trim())
+        this.newDoiIdentifiersAdded()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    newDoiIdentifiersAdded: function () {
       // Remove new string item from the model and add new structured item in its place if it validates and is not a duplicate.
       const idx = this.doiIdentifiers.findIndex((item) => typeof item === 'string' || item instanceof String)
       if (idx == -1) {
@@ -993,12 +991,6 @@ export default {
       }
     },
 
-    clearDoiIdentifierSearch: function () {
-      // This could change with a new Primevue version.
-      const input = this.$refs.doiIdentifiersInput
-      input.$refs.input.value = ''
-    },
-
     acceptNewPublicationIdentifier: function () {
       // We assume the newest value is the right-most one here. That seems to always be true in this version of Primevue,
       // but that may change in the future.

From 1fa844f4ee9e159592cfd3243f48c35043c7003a Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 29 Dec 2025 17:04:59 -0800
Subject: [PATCH 08/40] Replace ExperimentCreator raw read identifiers Chip
 component with AutoComplete

Also updates styling of publication identifers AutoComplete chips to match the others on this page.
---
 src/components/screens/ExperimentCreator.vue | 62 ++++++++------------
 1 file changed, 25 insertions(+), 37 deletions(-)

diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index 36fcd1b6..0d7d42d3 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -235,20 +235,19 @@
                           :id="scopedId('input-publicationIdentifiers')"
                           ref="publicationIdentifiersInput"
                           v-model="publicationIdentifiers"
-                          class="p-inputwrapper-filled"
                           :multiple="true"
-                          option-label="identifier"
                           :suggestions="publicationIdentifierSuggestionsList"
+                          @blur="clearPublicationIdentifierSearch"
                           @complete="searchPublicationIdentifiers"
                           @keyup.escape="clearPublicationIdentifierSearch"
                           @option-select="acceptNewPublicationIdentifier"
                         >
                           <template #chip="slotProps">
-                            <div class="p-inputchips-chip-item">
-                              {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                              <div>
-                                <i class="pi pi-times-circle" @click="removePublicationIdentifier(slotProps.value)"></i>
+                            <div class="p-chip p-component p-autocomplete-chip">
+                              <div class="p-chip-label">
+                                {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
                               </div>
+                              <i class="pi pi-times-circle cursor-pointer" @click="removePublicationIdentifier(slotProps.value)"></i>
                             </div>
                           </template>
                           <template #option="slotProps">
@@ -321,24 +320,17 @@
                     </div>
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
-                        <Chips
+                        <AutoComplete
                           :id="scopedId('input-rawReadIdentifiers')"
                           ref="rawReadIdentifiersInput"
                           v-model="rawReadIdentifiers"
-                          :add-on-blur="true"
-                          :allow-duplicate="false"
-                          @add="acceptNewRawReadIdentifier"
-                          @keyup.escape="clearRawReadIdentifierSearch"
-                        >
-                          <template #chip="slotProps">
-                            <div>
-                                <span>{{ slotProps.value.identifier }} </span>
-                            </div>
-                            <div>
-                              <i class="pi pi-times-circle" @click="removeRawReadIdentifier(slotProps.value)"></i>
-                            </div>
-                          </template>
-                        </Chips>
+                          :multiple="true"
+                          option-label="identifier"
+                          :typeahead="false"
+                          @blur="updateRawReadIdentifiers"
+                          @keyup.space="updateRawReadIdentifiers"
+                          @update:model-value="newRawReadIdentifiersAdded"
+                        />
                         <label :for="scopedId('input-rawReadIdentifiers')">Raw Read</label>
                       </span>
                       <span v-if="validationErrors.rawReadIdentifiers" class="mave-field-error">{{
@@ -490,7 +482,6 @@ import _ from 'lodash'
 import {marked} from 'marked'
 import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
-import Chips from 'primevue/chips'
 import Dialog from 'primevue/dialog'
 import Select from 'primevue/select'
 import FileUpload from 'primevue/fileupload'
@@ -610,7 +601,6 @@ export default {
   components: {
     AutoComplete,
     Button,
-    Chips,
     DefaultLayout,
     Dialog,
     Select,
@@ -893,13 +883,6 @@ export default {
       }
     },
 
-    removeRawReadIdentifier: function (rawReadIdentifier) {
-      const index = this.rawReadIdentifiers.findIndex(r => r.identifier === rawReadIdentifier.identifier)
-      if (index !== -1) {
-        this.rawReadIdentifiers.splice(index, 1)
-      }
-    },
-
     suggestionsForAutocomplete: function (suggestions) {
       // The PrimeVue AutoComplete doesn't seem to like it if we set the suggestion list to [].
       // This causes the drop-down to stop appearing when we later populate the list.
@@ -1039,7 +1022,18 @@ export default {
       return title.length > 50 ? title.slice(0, 50) + '...' : title
     },
 
-    acceptNewRawReadIdentifier: function () {
+    updateRawReadIdentifiers: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.rawReadIdentifiers.push(currentValue.trim())
+        this.newRawReadIdentifiersAdded()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    newRawReadIdentifiersAdded: function () {
       // Remove new string item from the model and add new structured item in its place if it validates and is not a duplicate.
       const idx = this.rawReadIdentifiers.findIndex((item) => typeof item === 'string' || item instanceof String)
       if (idx == -1) {
@@ -1063,12 +1057,6 @@ export default {
       }
     },
 
-    clearRawReadIdentifierSearch: function () {
-      // This could change with a new Primevue version.
-      const input = this.$refs.rawReadIdentifiersInput
-      input.$refs.input.value = ''
-    },
-
     fileCleared: function (inputName) {
       if (inputName == 'extraMetadataFile') {
         this.extraMetadata = null

From 29ff44cfe2238be28f84fb7063938b15dd65991b Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 30 Dec 2025 08:51:05 -0800
Subject: [PATCH 09/40] Update ExperimentEditor to replace Chips components
 with AutoComplete

---
 src/components/screens/ExperimentEditor.vue | 154 ++++++++++----------
 1 file changed, 76 insertions(+), 78 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index fbfb81b9..d3629cc4 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -69,24 +69,17 @@
               </div>
               <div class="field">
                 <span class="p-float-label">
-                  <Chips
+                 <AutoComplete
                     :id="scopedId('input-doiIdentifiers')"
                     ref="doiIdentifiersInput"
                     v-model="doiIdentifiers"
-                    :add-on-blur="true"
-                    :allow-duplicate="false"
-                    @add="acceptNewDoiIdentifier"
-                    @keyup.escape="clearDoiIdentifierSearch"
-                  >
-                    <template #chip="slotProps">
-                      <div>
-                          <span>{{ slotProps.value?.identifier }}</span>
-                      </div>
-                      <div>
-                        <i class="pi pi-times-circle" @click="removeDoiIdentifier(slotProps.value)"></i>
-                      </div>
-                    </template>
-                  </Chips>
+                    :multiple="true"
+                    option-label="identifier"
+                    :typeahead="false"
+                    @blur="updateDoiIdentifiers"
+                    @keyup.space="updateDoiIdentifiers"
+                    @update:model-value="newDoiIdentifiersAdded"
+                  />
                   <label :for="scopedId('input-doiIdentifiers')">DOIs</label>
                 </span>
                 <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
@@ -99,20 +92,19 @@
                     :id="scopedId('input-publicationIdentifiers')"
                     ref="publicationIdentifiersInput"
                     v-model="publicationIdentifiers"
-                    class="p-inputwrapper-filled"
                     :multiple="true"
-                    option-label="identifier"
                     :suggestions="publicationIdentifierSuggestionsList"
+                    @blur="clearPublicationIdentifierSearch"
                     @complete="searchPublicationIdentifiers"
                     @keyup.escape="clearPublicationIdentifierSearch"
                     @option-select="acceptNewPublicationIdentifier"
                   >
                     <template #chip="slotProps">
-                      <div class="p-inputchips-chip-item">
-                        {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                        <div>
-                          <i class="pi pi-times-circle" @click="removePublicationIdentifier(slotProps.value)"></i>
+                      <div class="p-chip p-component p-autocomplete-chip">
+                        <div class="p-chip-label">
+                          {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
                         </div>
+                        <i class="pi pi-times-circle cursor-pointer" @click="removePublicationIdentifier(slotProps.value)"></i>
                       </div>
                     </template>
                     <template #option="slotProps">
@@ -159,24 +151,17 @@
               </div>
               <div class="field">
                 <span class="p-float-label">
-                  <Chips
+                  <AutoComplete
                     :id="scopedId('input-rawReadIdentifiers')"
                     ref="rawReadIdentifiersInput"
                     v-model="rawReadIdentifiers"
-                    :add-on-blur="true"
-                    :allow-duplicate="false"
-                    @add="acceptNewRawReadIdentifier"
-                    @keyup.escape="clearRawReadIdentifierSearch"
-                  >
-                    <template #chip="slotProps">
-                      <div>
-                          <span>{{ slotProps.value?.identifier }}</span>
-                      </div>
-                      <div>
-                        <i class="pi pi-times-circle" @click="removeRawReadIdentifier(slotProps.value)"></i>
-                      </div>
-                    </template>
-                  </Chips>
+                    :multiple="true"
+                    option-label="identifier"
+                    :typeahead="false"
+                    @blur="updateRawReadIdentifiers"
+                    @keyup.space="updateRawReadIdentifiers"
+                    @update:model-value="newRawReadIdentifiersAdded"
+                  />
                   <label :for="scopedId('input-rawReadIdentifiers')">Raw Read</label>
                 </span>
                 <span v-if="validationErrors.rawReadIdentifiers" class="mave-field-error">{{
@@ -231,30 +216,17 @@
               </div>
               <div class="field">
                 <span class="p-float-label">
-                  <Chips
+                  <AutoComplete
                     :id="scopedId('input-contributors')"
-                    ref="contributorsInput"
                     v-model="contributors"
-                    :add-on-blur="true"
-                    :allow-duplicate="false"
-                    :placeholder="contributors.length > 0 ? '' : 'Type or paste ORCID IDs here.'"
-                    @add="newContributorsAdded"
-                    @keyup.escape="clearContributorSearch"
-                  >
-                    <template #chip="slotProps">
-                      <div>
-                        <div v-if="slotProps.value.givenName || slotProps.value.familyName">
-                          {{ slotProps.value.givenName }} {{ slotProps.value.familyName }} ({{
-                            slotProps.value.orcidId
-                          }})
-                        </div>
-                        <div v-else>{{ slotProps.value.orcidId }}</div>
-                      </div>
-                      <div>
-                        <i class="pi pi-times-circle" @click="removeContributor(slotProps.value)"></i>
-                      </div>
-                    </template>
-                  </Chips>
+                    fluid
+                    multiple
+                    :option-label="(x) => x.givenName || x.familyName ? `${x.givenName} ${x.familyName} (${x.orcidId})` : x.orcidId"
+                    :typeahead="false"
+                    @blur="updateContributors"
+                    @keyup.space="updateContributors"
+                    @update:model-value="newContributorsAdded"
+                  />
                   <label :for="scopedId('input-contributors')">Contributors</label>
                 </span>
                 <span v-if="validationErrors.contributors" class="mave-field-error">{{
@@ -719,12 +691,6 @@ export default {
     // Contributors
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-    clearContributorSearch: function () {
-      // This could change with a new PrimeVue version.
-      const input = this.$refs.contributorsInput
-      input.$refs.input.value = ''
-    },
-
     lookupOrcidUser: async function (orcidId) {
       let orcidUser = null
       try {
@@ -735,8 +701,20 @@ export default {
       return orcidUser
     },
 
-    newContributorsAdded: async function (event) {
-      const newContributors = event.value
+    updateContributors: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.contributors.push(currentValue.trim())
+        this.newContributorsAdded()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    newContributorsAdded: async function () {
+      // new contributor values are those that are strings rather than objects
+      const newContributors = this.contributors.filter(_.isString)
 
       // Convert any strings to ORCID users without names. Remove whitespace from new entries.
       this.contributors = this.contributors.map((c) => (_.isString(c) ? {orcidId: c.trim()} : c))
@@ -793,7 +771,18 @@ export default {
     // Form fields
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-    acceptNewDoiIdentifier: function () {
+    updateDoiIdentifiers: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.doiIdentifiers.push(currentValue.trim())
+        this.newDoiIdentifiersAdded()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    newDoiIdentifiersAdded: function () {
       // Remove new string item from the model and add new structured item in its place if it validates and is not a duplicate.
       const idx = this.doiIdentifiers.findIndex((item) => typeof item === 'string' || item instanceof String)
       if (idx == -1) {
@@ -817,10 +806,14 @@ export default {
       }
     },
 
-    clearDoiIdentifierSearch: function () {
-      // This could change with a new Primevue version.
-      const input = this.$refs.doiIdentifiersInput
-      input.$refs.input.value = ''
+    updatePublicationIdentifiers: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.publicationIdentifiers.push(currentValue.trim())
+        this.acceptNewPublicationIdentifier()
+        // clear the input field
+        event.target.value = ''
+      }
     },
 
     acceptNewPublicationIdentifier: function () {
@@ -890,7 +883,18 @@ export default {
       }
     },
 
-    acceptNewRawReadIdentifier: function () {
+    updateRawReadIdentifiers: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.rawReadIdentifiers.push(currentValue.trim())
+        this.addNewRawReadIdentifier()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    addNewRawReadIdentifier: function () {
       // Remove new string item from the model and add new structured item in its place if it validates and is not a duplicate.
       const idx = this.rawReadIdentifiers.findIndex((item) => typeof item === 'string' || item instanceof String)
       if (idx == -1) {
@@ -914,12 +918,6 @@ export default {
       }
     },
 
-    clearRawReadIdentifierSearch: function () {
-      // This could change with a new Primevue version.
-      const input = this.$refs.rawReadIdentifiersInput
-      input.$refs.input.value = ''
-    },
-
     fileCleared: function (inputName) {
       if (inputName == 'extraMetadataFile') {
         this.extraMetadata = null

From 47ff830d078ab09e88f4e583e607c816a0f1b4d4 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 30 Dec 2025 09:00:27 -0800
Subject: [PATCH 10/40] Restore previous escape behavior on ExperimentCreator
 and ExperimentEditor AutoComplete components

---
 src/components/screens/ExperimentCreator.vue | 21 ++++++++++----------
 src/components/screens/ExperimentEditor.vue  | 20 ++++++++++---------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index 0d7d42d3..71304d18 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -171,12 +171,12 @@
                     <span class="p-float-label">
                       <AutoComplete
                         :id="scopedId('input-doiIdentifiers')"
-                        ref="doiIdentifiersInput"
                         v-model="doiIdentifiers"
                         :multiple="true"
                         option-label="identifier"
                         :typeahead="false"
                         @blur="updateDoiIdentifiers"
+                        @keyup.escape="clearAutoCompleteInput"
                         @keyup.space="updateDoiIdentifiers"
                         @update:model-value="newDoiIdentifiersAdded"
                       />
@@ -206,6 +206,7 @@
                           :option-label="(x) => x.givenName || x.familyName ? `${x.givenName} ${x.familyName} (${x.orcidId})` : x.orcidId"
                           :typeahead="false"
                           @blur="updateContributors"
+                          @keyup.escape="clearAutoCompleteInput"
                           @keyup.space="updateContributors"
                           @update:model-value="newContributorsAdded"
                         />
@@ -233,13 +234,12 @@
                       <span class="p-float-label">
                         <AutoComplete
                           :id="scopedId('input-publicationIdentifiers')"
-                          ref="publicationIdentifiersInput"
                           v-model="publicationIdentifiers"
                           :multiple="true"
                           :suggestions="publicationIdentifierSuggestionsList"
-                          @blur="clearPublicationIdentifierSearch"
+                          @blur="clearAutoCompleteInput"
                           @complete="searchPublicationIdentifiers"
-                          @keyup.escape="clearPublicationIdentifierSearch"
+                          @keyup.escape="clearAutoCompleteInput"
                           @option-select="acceptNewPublicationIdentifier"
                         >
                           <template #chip="slotProps">
@@ -328,6 +328,7 @@
                           option-label="identifier"
                           :typeahead="false"
                           @blur="updateRawReadIdentifiers"
+                          @keyup.escape="clearAutoCompleteInput"
                           @keyup.space="updateRawReadIdentifiers"
                           @update:model-value="newRawReadIdentifiersAdded"
                         />
@@ -812,6 +813,12 @@ export default {
   },
 
   methods: {
+    clearAutoCompleteInput: function(event) {
+      if (event.target) {
+        event.target.value = ''
+      }
+    },
+
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     // Contributors
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -1004,12 +1011,6 @@ export default {
       }
     },
 
-    clearPublicationIdentifierSearch: function () {
-      // This could change with a new Primevue version.
-      const input = this.$refs.publicationIdentifiersInput
-      input.$refs.focusInput.value = ''
-    },
-
     searchPublicationIdentifiers: function (event) {
       const searchText = (event.query || '').trim()
       if (searchText.length > 0) {
diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index d3629cc4..814b6979 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -77,6 +77,7 @@
                     option-label="identifier"
                     :typeahead="false"
                     @blur="updateDoiIdentifiers"
+                    @keyup.escape="clearAutoCompleteInput"
                     @keyup.space="updateDoiIdentifiers"
                     @update:model-value="newDoiIdentifiersAdded"
                   />
@@ -90,13 +91,12 @@
                 <span class="p-float-label">
                   <AutoComplete
                     :id="scopedId('input-publicationIdentifiers')"
-                    ref="publicationIdentifiersInput"
                     v-model="publicationIdentifiers"
                     :multiple="true"
                     :suggestions="publicationIdentifierSuggestionsList"
-                    @blur="clearPublicationIdentifierSearch"
+                    @blur="clearAutoCompleteInput"
                     @complete="searchPublicationIdentifiers"
-                    @keyup.escape="clearPublicationIdentifierSearch"
+                    @keyup.escape="clearAutoCompleteInput"
                     @option-select="acceptNewPublicationIdentifier"
                   >
                     <template #chip="slotProps">
@@ -159,6 +159,7 @@
                     option-label="identifier"
                     :typeahead="false"
                     @blur="updateRawReadIdentifiers"
+                    @keyup.escape="clearAutoCompleteInput"
                     @keyup.space="updateRawReadIdentifiers"
                     @update:model-value="newRawReadIdentifiersAdded"
                   />
@@ -224,6 +225,7 @@
                     :option-label="(x) => x.givenName || x.familyName ? `${x.givenName} ${x.familyName} (${x.orcidId})` : x.orcidId"
                     :typeahead="false"
                     @blur="updateContributors"
+                    @keyup.escape="clearAutoCompleteInput"
                     @keyup.space="updateContributors"
                     @update:model-value="newContributorsAdded"
                   />
@@ -687,6 +689,12 @@ export default {
   },
 
   methods: {
+    clearAutoCompleteInput: function(event) {
+      if (event.target) {
+        event.target.value = ''
+      }
+    },
+
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     // Contributors
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -865,12 +873,6 @@ export default {
       }
     },
 
-    clearPublicationIdentifierSearch: function () {
-      // This could change with a new Primevue version.
-      const input = this.$refs.publicationIdentifiersInput
-      input.$refs.focusInput.value = ''
-    },
-
     truncatePublicationTitle: function (title) {
       return title.length > 50 ? title.slice(0, 50) + '...' : title
     },

From a5a52339207d95a80fcb0eab362c98d25c8209e8 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 30 Dec 2025 09:57:32 -0800
Subject: [PATCH 11/40] Replace Chips components with AutoComplete on
 ScoreSetCreator and ScoreSetEditor

---
 src/components/screens/ScoreSetCreator.vue | 118 ++++++++++-----------
 src/components/screens/ScoreSetEditor.vue  |  95 +++++++++--------
 2 files changed, 109 insertions(+), 104 deletions(-)

diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 26fc91d1..e81501e4 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -435,30 +435,18 @@
                     </div>
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
-                        <Chips
+                        <AutoComplete
                           :id="scopedId('input-contributors')"
-                          ref="contributorsInput"
                           v-model="contributors"
-                          :add-on-blur="true"
-                          :allow-duplicate="false"
-                          :placeholder="contributors?.length > 0 ? '' : 'Type or paste ORCID IDs here.'"
-                          @add="newContributorsAdded"
-                          @keyup.escape="clearContributorSearch"
-                        >
-                          <template #chip="slotProps">
-                            <div>
-                              <div v-if="slotProps.value.givenName || slotProps.value.familyName">
-                                {{ slotProps.value.givenName }} {{ slotProps.value.familyName }} ({{
-                                  slotProps.value.orcidId
-                                }})
-                              </div>
-                              <div v-else>{{ slotProps.value.orcidId }}</div>
-                            </div>
-                            <div>
-                              <i class="pi pi-times-circle" @click="removeContributor(slotProps.value)"></i>
-                            </div>
-                          </template>
-                        </Chips>
+                          fluid
+                          multiple
+                          :option-label="(x) => x.givenName || x.familyName ? `${x.givenName} ${x.familyName} (${x.orcidId})` : x.orcidId"
+                          :typeahead="false"
+                          @blur="updateContributors"
+                          @keyup.escape="clearAutoCompleteInput"
+                          @keyup.space="updateContributors"
+                          @update:model-value="newContributorsAdded"
+                        />
                         <label :for="scopedId('input-contributors')">Contributors</label>
                       </span>
                       <span v-if="validationErrors.contributors" class="mave-field-error">{{
@@ -478,22 +466,17 @@
                     </div>
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
-                        <Chips
+                        <AutoComplete
                           :id="scopedId('input-doiIdentifiers')"
                           v-model="doiIdentifiers"
-                          :add-on-blur="true"
-                          :allow-duplicate="false"
-                          @add="acceptNewDoiIdentifier"
-                        >
-                          <template #chip="slotProps">
-                            <div>
-                              <div>{{ slotProps.value.identifier }}</div>
-                            </div>
-                            <div>
-                              <i class="pi pi-times-circle" @click="removeDoiIdentifier(slotProps.value)"></i>
-                            </div>
-                          </template>
-                        </Chips>
+                          :multiple="true"
+                          option-label="identifier"
+                          :typeahead="false"
+                          @blur="updateDoiIdentifiers"
+                          @keyup.escape="clearAutoCompleteInput"
+                          @keyup.space="updateDoiIdentifiers"
+                          @update:model-value="newDoiIdentifiersAdded"
+                        />
                         <label :for="scopedId('input-doiIdentifiers')">DOI identifiers</label>
                       </span>
                       <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
@@ -515,24 +498,22 @@
                     </div>
                     <div class="mavedb-wizard-content field">
                       <span class="p-float-label">
-                        <AutoComplete
+                         <AutoComplete
                           :id="scopedId('input-publicationIdentifiers')"
-                          ref="publicationIdentifiersInput"
                           v-model="publicationIdentifiers"
-                          class="p-inputwrapper-filled"
                           :multiple="true"
-                          option-label="identifier"
                           :suggestions="publicationIdentifierSuggestionsList"
+                          @blur="clearAutoCompleteInput"
                           @complete="searchPublicationIdentifiers"
-                          @keyup.escape="clearPublicationIdentifierSearch"
+                          @keyup.escape="clearAutoCompleteInput"
                           @option-select="acceptNewPublicationIdentifier"
                         >
                           <template #chip="slotProps">
-                            <div class="p-inputchips-chip-item">
-                              {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                              <div>
-                                <i class="pi pi-times-circle" @click="removePublicationIdentifier(slotProps.value)"></i>
+                            <div class="p-chip p-component p-autocomplete-chip">
+                              <div class="p-chip-label">
+                                {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
                               </div>
+                              <i class="pi pi-times-circle cursor-pointer" @click="removePublicationIdentifier(slotProps.value)"></i>
                             </div>
                           </template>
                           <template #option="slotProps">
@@ -1872,16 +1853,16 @@ export default {
   },
 
   methods: {
+    clearAutoCompleteInput: function(event) {
+      if (event.target) {
+        event.target.value = ''
+      }
+    },
+
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     // Contributors
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-    clearContributorSearch: function () {
-      // This could change with a new PrimeVue version.
-      const input = this.$refs.contributorsInput
-      input.$refs.input.value = ''
-    },
-
     lookupOrcidUser: async function (orcidId) {
       let orcidUser = null
       try {
@@ -1892,8 +1873,20 @@ export default {
       return orcidUser
     },
 
-    newContributorsAdded: async function (event) {
-      const newContributors = event.value
+    updateContributors: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.contributors.push(currentValue.trim())
+        this.newContributorsAdded()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    newContributorsAdded: async function () {
+      // new contributor values are those that are strings rather than objects
+      const newContributors = this.contributors.filter(_.isString)
 
       // Convert any strings to ORCID users without names. Remove whitespace from new entries.
       this.contributors = this.contributors.map((c) => (_.isString(c) ? {orcidId: c.trim()} : c))
@@ -2245,7 +2238,18 @@ export default {
       this.externalIdentifierTextToObject(dbName, targetIdx, event)
     },
 
-    acceptNewDoiIdentifier: function () {
+    updateDoiIdentifiers: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.doiIdentifiers.push(currentValue.trim())
+        this.newDoiIdentifiersAdded()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    newDoiIdentifiersAdded: function () {
       // Remove new string item from the model and add new structured item in its place if it validates and is not a duplicate.
       const idx = this.doiIdentifiers.findIndex((item) => typeof item === 'string' || item instanceof String)
       if (idx == -1) {
@@ -2312,12 +2316,6 @@ export default {
       }
     },
 
-    clearPublicationIdentifierSearch: function () {
-      // This could change with a new Primevue version.
-      const input = this.$refs.publicationIdentifiersInput
-      input.$refs.focusInput.value = ''
-    },
-
     searchPublicationIdentifiers: function (event) {
       const searchText = (event.query || '').trim()
       if (searchText.length > 0) {
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index a243bcd1..aa9ed0b7 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -125,27 +125,18 @@
               </div>
               <div class="field">
                 <span class="p-float-label">
-                  <Chips
+                  <AutoComplete
                     :id="scopedId('input-contributors')"
-                    ref="contributorsInput"
                     v-model="contributors"
-                    :add-on-blur="true"
-                    :allow-duplicate="false"
-                    placeholder="Type or paste ORCID IDs here."
-                    @add="newContributorsAdded"
-                    @keyup.escape="clearContributorSearch"
-                  >
-                    <template #chip="slotProps">
-                      <div>
-                        <div v-if="slotProps.value.givenName || slotProps.value.familyName">
-                          {{ slotProps.value.givenName }} {{ slotProps.value.familyName }} ({{
-                            slotProps.value.orcidId
-                          }})
-                        </div>
-                        <div v-else>{{ slotProps.value.orcidId }}</div>
-                      </div>
-                    </template>
-                  </Chips>
+                    fluid
+                    multiple
+                    :option-label="(x) => x.givenName || x.familyName ? `${x.givenName} ${x.familyName} (${x.orcidId})` : x.orcidId"
+                    :typeahead="false"
+                    @blur="updateContributors"
+                    @keyup.escape="clearAutoCompleteInput"
+                    @keyup.space="updateContributors"
+                    @update:model-value="newContributorsAdded"
+                  />
                   <label :for="scopedId('input-contributors')">Contributors</label>
                 </span>
                 <span v-if="validationErrors.contributors" class="mave-field-error">{{
@@ -184,24 +175,17 @@
                 </div>
                 <div class="field">
                   <span class="p-float-label">
-                    <Chips
+                    <AutoComplete
                       :id="scopedId('input-doiIdentifiers')"
-                      ref="doiIdentifiersInput"
                       v-model="doiIdentifiers"
-                      :add-on-blur="true"
-                      :allow-duplicate="false"
-                      @add="acceptNewDoiIdentifier"
-                      @keyup.escape="clearDoiIdentifierSearch"
-                    >
-                      <template #chip="slotProps">
-                        <div>
-                          <div>{{ slotProps.value.identifier }}</div>
-                        </div>
-                        <div>
-                          <i class="pi pi-times-circle" @click="removeDoiIdentifier(slotProps.value)"></i>
-                        </div>
-                      </template>
-                    </Chips>
+                      :multiple="true"
+                      option-label="identifier"
+                      :typeahead="false"
+                      @blur="updateDoiIdentifiers"
+                      @keyup.escape="clearAutoCompleteInput"
+                      @keyup.space="updateDoiIdentifiers"
+                      @update:model-value="newDoiIdentifiersAdded"
+                    />
                     <label :for="scopedId('input-doiIdentifiers')">DOIs</label>
                   </span>
                   <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
@@ -1315,16 +1299,16 @@ export default {
   },
 
   methods: {
+    clearAutoCompleteInput: function(event) {
+      if (event.target) {
+        event.target.value = ''
+      }
+    },
+
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
     // Contributors
     //////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-    clearContributorSearch: function () {
-      // This could change with a new PrimeVue version.
-      const input = this.$refs.contributorsInput
-      input.$refs.input.value = ''
-    },
-
     lookupOrcidUser: async function (orcidId) {
       let orcidUser = null
       try {
@@ -1335,8 +1319,20 @@ export default {
       return orcidUser
     },
 
-    newContributorsAdded: async function (event) {
-      const newContributors = event.value
+    updateContributors: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.contributors.push(currentValue.trim())
+        this.newContributorsAdded()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    newContributorsAdded: async function () {
+      // new contributor values are those that are strings rather than objects
+      const newContributors = this.contributors.filter(_.isString)
 
       // Convert any strings to ORCID users without names. Remove whitespace from new entries.
       this.contributors = this.contributors.map((c) => (_.isString(c) ? {orcidId: c.trim()} : c))
@@ -1539,7 +1535,18 @@ export default {
       })
     },
 
-    acceptNewDoiIdentifier: function () {
+    updateDoiIdentifiers: function (event) {
+      const currentValue = event.target?.value
+      if (currentValue && currentValue.trim() != '') {
+        this.doiIdentifiers.push(currentValue.trim())
+        this.newDoiIdentifiersAdded()
+
+        // clear the input field
+        event.target.value = ''
+      }
+    },
+
+    newDoiIdentifiersAdded: function () {
       // Remove new string item from the model and add new structured item in its place if it validates and is not a duplicate.
       const idx = this.doiIdentifiers.findIndex((item) => typeof item === 'string' || item instanceof String)
       if (idx == -1) {

From a540f6585fa5bd80a84f33de51dae04e6517f656 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 30 Dec 2025 11:21:44 -0800
Subject: [PATCH 12/40] Remove unused imports

---
 src/components/screens/ExperimentEditor.vue | 2 --
 src/components/screens/ScoreSetCreator.vue  | 2 --
 src/components/screens/ScoreSetEditor.vue   | 2 --
 3 files changed, 6 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 814b6979..4b986ab9 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -390,7 +390,6 @@ import {marked} from 'marked'
 import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
-import Chips from 'primevue/chips'
 import Dialog from 'primevue/dialog'
 import Select from 'primevue/select'
 import Multiselect from 'primevue/multiselect'
@@ -506,7 +505,6 @@ export default {
     AutoComplete,
     Button,
     Card,
-    Chips,
     Dialog,
     Select,
     Multiselect,
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index e81501e4..0416b97b 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -1417,7 +1417,6 @@ import _ from 'lodash'
 import {marked} from 'marked'
 import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
-import Chips from 'primevue/chips'
 import Select from 'primevue/select'
 import FileUpload from 'primevue/fileupload'
 import InputNumber from 'primevue/inputnumber'
@@ -1493,7 +1492,6 @@ export default {
     AutoComplete,
     Button,
     CalibrationEditor,
-    Chips,
     DefaultLayout,
     Select,
     EmailPrompt,
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index aa9ed0b7..7ba6890e 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -936,7 +936,6 @@ import {marked} from 'marked'
 import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
-import Chips from 'primevue/chips'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Select from 'primevue/select'
@@ -999,7 +998,6 @@ export default {
     AutoComplete,
     Button,
     Card,
-    Chips,
     Column,
     DataTable,
     DefaultLayout,

From ff816d953363078459455e962f6ca1a8cc9a10a7 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 30 Dec 2025 11:22:39 -0800
Subject: [PATCH 13/40] Replace Chips component with AutoComplete on
 CollectionDataSetEditor

---
 src/components/CollectionDataSetEditor.vue | 49 ++++++++++++----------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/components/CollectionDataSetEditor.vue b/src/components/CollectionDataSetEditor.vue
index 2fe50a3a..570ff1bd 100644
--- a/src/components/CollectionDataSetEditor.vue
+++ b/src/components/CollectionDataSetEditor.vue
@@ -33,24 +33,16 @@
           <Column field="title" header="Title"></Column>
         </DataTable>
         <div class="flex gap-2">
-          <Chips
+          <AutoComplete
             v-model="unvalidatedUrnsToAdd"
-            :add-on-blur="true"
-            :allow-duplicate="false"
             class="flex-auto p-fluid"
-            placeholder="Type or paste comma-separated URNs"
-            separator=" "
-            @keyup.escape="unvalidatedUrnsToAdd = []"
-          >
-            <template #chip="slotProps">
-              <div>
-                  <span>{{ slotProps.value }}</span>
-              </div>
-              <div>
-                <i class="pi pi-times-circle" @click="removeUnvalidatedUrnsToAdd(slotProps.value)"></i>
-              </div>
-            </template>
-          </Chips>
+            :multiple="true"
+            :placeholder="unvalidatedUrnsToAdd.length ? '' : 'Type or paste comma-separated URNs'"
+            :pt="{overlay: (options) => ({class: ['invisible']})}"
+            @keyup.,="newUnvalidatedUrnToAdd"
+            @keyup.escape="clearAutoCompleteInput"
+            @keyup.space="newUnvalidatedUrnToAdd"
+          />
           <Button
             class="flex-none mavedb-collection-add-data-set-button"
             icon="pi pi-plus"
@@ -81,9 +73,9 @@
 
 <script>
 import axios from 'axios'
-import _, { remove } from 'lodash'
+import _ from 'lodash'
+import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
-import Chips from 'primevue/chips'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
@@ -96,7 +88,7 @@ import EmailPrompt from '@/components/common/EmailPrompt.vue'
 export default {
   name: 'CollectionDataSetEditor',
 
-  components: {Button, Chips, Column, DataTable, Dialog, EmailPrompt, Message},
+  components: {AutoComplete, Button, Column, DataTable, Dialog, EmailPrompt, Message},
 
   props: {
     collectionUrn: {
@@ -178,6 +170,21 @@ export default {
   },
 
   methods: {
+    clearAutoCompleteInput: function (event) {
+      if (event.target) {
+        event.target.value = ''
+      }
+    },
+
+    newUnvalidatedUrnToAdd: function (event) {
+      const val = (event.target?.value || '').replace(',', '').trim()
+      if (val !== '') {
+        if (!this.unvalidatedUrnsToAdd.includes(val)) {
+          this.unvalidatedUrnsToAdd.push(val)
+        }
+      }
+      event.target.value = ''
+    },
     rowStyle: function (data) {
       if (this.urnsToRemove.includes(data.urn)) {
         return {backgroundColor: '#ffcccb'} // Light red
@@ -196,10 +203,6 @@ export default {
       }
     },
 
-    removeUnvalidatedUrnsToAdd: function (urn) {
-      _.remove(this.unvalidatedUrnsToAdd, (item) => item === urn)
-    },
-
     saveChanges: async function () {
       if (this.unvalidatedUrnsToAdd.length > 0) {
         this.unpreparedChangesDialogVisible = true

From c9862834c1c3cbc7727b1ef0da450a9d51a5b427 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 30 Dec 2025 13:11:42 -0800
Subject: [PATCH 14/40] Remove chip slots from AutoComplete components to
 prevent issue with PrimeVue4 styling

---
 src/components/screens/ExperimentCreator.vue | 43 +++++++++-----------
 src/components/screens/ExperimentEditor.vue  | 34 ++++++----------
 src/components/screens/ScoreSetCreator.vue   | 34 +++++-----------
 src/components/screens/ScoreSetEditor.vue    | 35 ++++++----------
 4 files changed, 55 insertions(+), 91 deletions(-)

diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index 71304d18..5fddb925 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -236,20 +236,13 @@
                           :id="scopedId('input-publicationIdentifiers')"
                           v-model="publicationIdentifiers"
                           :multiple="true"
+                          :option-label="(x) => `${x.identifier}: ${truncatePublicationTitle(x.title)}`"
                           :suggestions="publicationIdentifierSuggestionsList"
                           @blur="clearAutoCompleteInput"
                           @complete="searchPublicationIdentifiers"
                           @keyup.escape="clearAutoCompleteInput"
                           @option-select="acceptNewPublicationIdentifier"
                         >
-                          <template #chip="slotProps">
-                            <div class="p-chip p-component p-autocomplete-chip">
-                              <div class="p-chip-label">
-                                {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                              </div>
-                              <i class="pi pi-times-circle cursor-pointer" @click="removePublicationIdentifier(slotProps.value)"></i>
-                            </div>
-                          </template>
                           <template #option="slotProps">
                             <div>
                               <div>Title: {{ slotProps.option.title }}</div>
@@ -274,7 +267,6 @@
                       <span class="p-float-label" style="display: block">
                         <Multiselect
                           :id="scopedId('input-primaryPublicationIdentifiers')"
-                          ref="primaryPublicationIdentifiersInput"
                           v-model="primaryPublicationIdentifiers"
                           class="p-inputwrapper-filled"
                           option-label="identifier"
@@ -809,7 +801,25 @@ export default {
         this.keywordKeys['In Vitro Construct Library Method System'] = null
         this.keywordKeys['In Vitro Construct Library Method Mechanism'] = null
       }
-    }
+    },
+    publicationIdentifiers: {
+      handler: function (newValue, oldValue) {
+        if (newValue.length == 1) {
+          this.primaryPublicationIdentifiers = newValue
+        } else if (
+          newValue.length == 0 ||
+          (newValue.length > 1 && oldValue.length == 1) ||
+          (this.primaryPublicationIdentifiers.length > 0 &&
+          !newValue
+            .map((pi) => pi.identifier)
+            .includes(this.primaryPublicationIdentifiers[0].identifier))
+        ) {
+          // Clear primary publication if we have just added a second ID, or if we have deleted all IDs,
+          // or if the primary publication is no longer in the list of publications.
+          this.primaryPublicationIdentifiers = []
+        }
+      }
+    },
   },
 
   methods: {
@@ -998,19 +1008,6 @@ export default {
       }
     },
 
-    removePublicationIdentifier: function (event) {
-      const removedIdentifier = event.identifier
-      const publicationIdx = this.publicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
-      if (publicationIdx != -1) {
-        this.publicationIdentifiers.splice(publicationIdx, 1)
-      }
-      // If we are removing a primary publication identifier, also remove it from that list.
-      const primaryIdx = this.primaryPublicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
-      if (primaryIdx != -1) {
-        this.primaryPublicationIdentifiers.splice(primaryIdx, 1)
-      }
-    },
-
     searchPublicationIdentifiers: function (event) {
       const searchText = (event.query || '').trim()
       if (searchText.length > 0) {
diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 4b986ab9..a10aae03 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -93,20 +93,13 @@
                     :id="scopedId('input-publicationIdentifiers')"
                     v-model="publicationIdentifiers"
                     :multiple="true"
+                    :option-label="(x) => `${x.identifier}: ${truncatePublicationTitle(x.title)}`"
                     :suggestions="publicationIdentifierSuggestionsList"
                     @blur="clearAutoCompleteInput"
                     @complete="searchPublicationIdentifiers"
                     @keyup.escape="clearAutoCompleteInput"
                     @option-select="acceptNewPublicationIdentifier"
                   >
-                    <template #chip="slotProps">
-                      <div class="p-chip p-component p-autocomplete-chip">
-                        <div class="p-chip-label">
-                          {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                        </div>
-                        <i class="pi pi-times-circle cursor-pointer" @click="removePublicationIdentifier(slotProps.value)"></i>
-                      </div>
-                    </template>
                     <template #option="slotProps">
                       <div>
                         <div>Title: {{ slotProps.option.title }}</div>
@@ -126,7 +119,6 @@
                 <span class="p-float-label" style="display: block">
                   <Multiselect
                     :id="scopedId('input-primaryPublicationIdentifiers')"
-                    ref="primaryPublicationIdentifiersInput"
                     v-model="primaryPublicationIdentifiers"
                     class="p-inputwrapper-filled"
                     option-label="identifier"
@@ -679,6 +671,17 @@ export default {
         this.keywordKeys['In Vitro Construct Library Method System'] = null
         this.keywordKeys['In Vitro Construct Library Method Mechanism'] = null
       }
+    },
+    publicationIdentifiers: function () {
+      // If the primary publication is no longer in the list of publications, clear it.
+      if (
+        this.primaryPublicationIdentifiers.length > 0 &&
+        !this.publicationIdentifiers
+          .map((pi) => pi.identifier)
+          .includes(this.primaryPublicationIdentifiers[0].identifier)
+      ) {
+        this.primaryPublicationIdentifiers = []
+      }
     }
   },
 
@@ -839,19 +842,6 @@ export default {
       }
     },
 
-    removePublicationIdentifier: function (event) {
-      const removedIdentifier = event.identifier
-      const publicationIdx = this.publicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
-      if (publicationIdx != -1) {
-        this.publicationIdentifiers.splice(publicationIdx, 1)
-      }
-      // If we are removing a primary publication identifier, also remove it from that list.
-      const primaryIdx = this.primaryPublicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
-      if (primaryIdx != -1) {
-        this.primaryPublicationIdentifiers.splice(primaryIdx, 1)
-      }
-    },
-
     removeContributor: function (contributor) {
       const index = this.contributors.findIndex(c => c.orcidId === contributor.orcidId)
       if (index !== -1) {
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 0416b97b..f4230c4a 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -502,20 +502,13 @@
                           :id="scopedId('input-publicationIdentifiers')"
                           v-model="publicationIdentifiers"
                           :multiple="true"
+                          :option-label="(x) => `${x.identifier}: ${truncatePublicationTitle(x.title)}`"
                           :suggestions="publicationIdentifierSuggestionsList"
                           @blur="clearAutoCompleteInput"
                           @complete="searchPublicationIdentifiers"
                           @keyup.escape="clearAutoCompleteInput"
                           @option-select="acceptNewPublicationIdentifier"
                         >
-                          <template #chip="slotProps">
-                            <div class="p-chip p-component p-autocomplete-chip">
-                              <div class="p-chip-label">
-                                {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                              </div>
-                              <i class="pi pi-times-circle cursor-pointer" @click="removePublicationIdentifier(slotProps.value)"></i>
-                            </div>
-                          </template>
                           <template #option="slotProps">
                             <div>
                               <div>Title: {{ slotProps.option.title }}</div>
@@ -1803,8 +1796,16 @@ export default {
       handler: function (newValue, oldValue) {
         if (newValue.length == 1) {
           this.primaryPublicationIdentifiers = newValue
-        } else if (newValue.length == 0 || (newValue.length > 1 && oldValue.length == 1)) {
-          // Clear primary publication if we have just added a second ID, or if we have deleted all IDs.
+        } else if (
+          newValue.length == 0 ||
+          (newValue.length > 1 && oldValue.length == 1) ||
+          (this.primaryPublicationIdentifiers.length > 0 &&
+          !newValue
+            .map((pi) => pi.identifier)
+            .includes(this.primaryPublicationIdentifiers[0].identifier))
+        ) {
+          // Clear primary publication if we have just added a second ID, or if we have deleted all IDs,
+          // or if the primary publication is no longer in the list of publications.
           this.primaryPublicationIdentifiers = []
         }
       }
@@ -2288,19 +2289,6 @@ export default {
       }
     },
 
-    removePublicationIdentifier: function (value) {
-      const removedIdentifier = value.identifier
-      const publicationIdx = this.publicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
-      if (publicationIdx != -1) {
-        this.publicationIdentifiers.splice(publicationIdx, 1)
-      }
-      // If we are removing a primary publication identifier, also remove it from that list.
-      const primaryIdx = this.primaryPublicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
-      if (primaryIdx != -1) {
-        this.primaryPublicationIdentifiers.splice(primaryIdx, 1)
-      }
-    },
-
     removeContributor: function (contributor) {
       const index = this.contributors.findIndex(c => c.orcidId === contributor.orcidId)
       if (index !== -1) {
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index 7ba6890e..352cb1ac 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -200,20 +200,12 @@
                       v-model="publicationIdentifiers"
                       class="p-inputwrapper-filled"
                       :multiple="true"
-                      option-label="identifier"
+                      :option-label="(x) => `${x.identifier}: ${truncatePublicationTitle(x.title)}`"
                       :suggestions="publicationIdentifierSuggestionsList"
                       @complete="searchPublicationIdentifiers"
                       @keyup.escape="clearPublicationIdentifierSearch"
                       @option-select="acceptNewPublicationIdentifier"
                     >
-                      <template #chip="slotProps">
-                        <div class="p-inputchips-chip-item">
-                          {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                          <div>
-                            <i class="pi pi-times-circle" @click="removePublicationIdentifier(slotProps.value)"></i>
-                          </div>
-                        </div>
-                      </template>
                       <template #option="slotProps">
                         <div>
                           <div>Title: {{ slotProps.option.title }}</div>
@@ -233,7 +225,6 @@
                   <span class="p-float-label">
                     <Multiselect
                       :id="scopedId('input-primaryPublicationIdentifiers')"
-                      ref="primaryPublicationIdentifiersInput"
                       v-model="primaryPublicationIdentifiers"
                       class="p-inputwrapper-filled"
                       option-label="identifier"
@@ -1289,6 +1280,17 @@ export default {
           this.assemblySuggestions = await this.fetchTargetAccessionsByAssembly(this.assemblyDropdownValue)
         }
       }
+    },
+    publicationIdentifiers: function () {
+      // If the primary publication is no longer in the list of publications, clear it.
+      if (
+        this.primaryPublicationIdentifiers.length > 0 &&
+        !this.publicationIdentifiers
+          .map((pi) => pi.identifier)
+          .includes(this.primaryPublicationIdentifiers[0].identifier)
+      ) {
+        this.primaryPublicationIdentifiers = []
+      }
     }
   },
 
@@ -1598,19 +1600,6 @@ export default {
       }
     },
 
-    removePublicationIdentifier: function (value) {
-      const removedIdentifier = value.identifier
-      const publicationIdx = this.publicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
-      if (publicationIdx != -1) {
-        this.publicationIdentifiers.splice(publicationIdx, 1)
-      }
-      // If we are removing a primary publication identifier, also remove it from that list.
-      const primaryIdx = this.primaryPublicationIdentifiers.findIndex((pub) => pub.identifier == removedIdentifier)
-      if (primaryIdx != -1) {
-        this.primaryPublicationIdentifiers.splice(primaryIdx, 1)
-      }
-    },
-
     clearPublicationIdentifierSearch: function () {
       // This could change with a new Primevue version.
       const input = this.$refs.publicationIdentifiersInput

From 8a8b7ad1059c345cdac1de38696331d875eeb790 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 30 Dec 2025 14:45:08 -0800
Subject: [PATCH 15/40] Remove custom chip slots from CalibrationEditor
 component for proper Primevue 4 styling

Also prevent closing parent Dialog components on escape because escape already has defined behavior on AutoCompletes within CalibrationEditor.
---
 src/components/CalibrationEditor.vue          | 69 ++++++-------------
 .../screens/ScoreSetCalibrationsView.vue      |  2 +-
 src/components/screens/ScoreSetView.vue       |  2 +-
 3 files changed, 22 insertions(+), 51 deletions(-)

diff --git a/src/components/CalibrationEditor.vue b/src/components/CalibrationEditor.vue
index b2e453fd..2c0198c6 100644
--- a/src/components/CalibrationEditor.vue
+++ b/src/components/CalibrationEditor.vue
@@ -441,24 +441,15 @@
         <span class="p-float-label">
           <AutoComplete
             :id="scopedId('input-threshold-sources')"
-            ref="thresholdSourcesInput"
             v-model="draft.thresholdSources"
-            class="p-inputwrapper-filled"
             :multiple="true"
-            option-label="identifier"
+            :option-label="(option) => `${option.identifier}: ${truncatePublicationTitle(option.title)}`"
             :suggestions="publicationIdentifierSuggestionsList"
+            @blur="clearAutoCompleteInput"
             @complete="searchPublicationIdentifiers"
-            @keyup.escape="clearPublicationIdentifierSearch('thresholdSourcesInput')"
+            @keyup.escape="clearAutoCompleteInput"
             @option-select="acceptNewPublicationIdentifier(draft.thresholdSources)"
           >
-            <template #chip="slotProps">
-              <div class="p-inputchips-chip-item">
-                {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                <div>
-                  <i class="pi pi-times-circle" @click="removePublicationIdentifier(slotProps.value, draft.thresholdSources)"></i>
-                </div>
-              </div>
-            </template>
             <template #option="slotProps">
               <div>
                 <div>Title: {{ slotProps.option.title }}</div>
@@ -487,24 +478,15 @@
         <span class="p-float-label">
           <AutoComplete
             :id="scopedId('input-classification-sources-publication-identifiers')"
-            ref="classificationSourcesInput"
             v-model="draft.classificationSources"
-            class="p-inputwrapper-filled"
             :multiple="true"
-            option-label="identifier"
+            :option-label="(option) => `${option.identifier}: ${truncatePublicationTitle(option.title)}`"
             :suggestions="publicationIdentifierSuggestionsList"
+            @blur="clearAutoCompleteInput"
             @complete="searchPublicationIdentifiers"
-            @keyup.escape="clearPublicationIdentifierSearch('classificationSourcesInput')"
+            @keyup.escape="clearAutoCompleteInput"
             @option-select="acceptNewPublicationIdentifier(draft.classificationSources)"
           >
-            <template #chip="slotProps">
-              <div class="p-inputchips-chip-item">
-                {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                <div>
-                  <i class="pi pi-times-circle" @click="removePublicationIdentifier(slotProps.value, draft.classificationSources)"></i>
-                </div>
-              </div>
-            </template>
             <template #option="slotProps">
               <div>
                 <div>Title: {{ slotProps.option.title }}</div>
@@ -533,24 +515,15 @@
         <span class="p-float-label">
           <AutoComplete
             :id="scopedId('input-method-sources-publication-identifiers')"
-            ref="methodSourcesInput"
             v-model="draft.methodSources"
-            class="p-inputwrapper-filled"
             :multiple="true"
-            option-label="identifier"
+            :option-label="(option) => `${option.identifier}: ${truncatePublicationTitle(option.title)}`"
             :suggestions="publicationIdentifierSuggestionsList"
+            @blur="clearAutoCompleteInput"
             @complete="searchPublicationIdentifiers"
-            @keyup.escape="clearPublicationIdentifierSearch('methodSourcesInput')"
+            @keyup.escape="clearAutoCompleteInput"
             @option-select="acceptNewPublicationIdentifier(draft.methodSources)"
           >
-            <template #chip="slotProps">
-              <div class="p-inputchips-chip-item">
-                {{ slotProps.value.identifier }}: {{ truncatePublicationTitle(slotProps.value.title) }}
-                <div>
-                  <i class="pi pi-times-circle" @click="removePublicationIdentifier(slotProps.value, draft.methodSources)"></i>
-                </div>
-              </div>
-            </template>
             <template #option="slotProps">
               <div>
                 <div>Title: {{ slotProps.option.title }}</div>
@@ -923,6 +896,12 @@ export default {
     await this.loadEditableScoreSets()
   },
   methods: {
+    clearAutoCompleteInput: function(event) {
+      if (event.target) {
+        event.target.value = ''
+      }
+    },
+
     loadEditableScoreSets: async function () {
       try {
         const response = await axios.post(`${config.apiBaseUrl}/me/score-sets/search`, {
@@ -979,11 +958,11 @@ export default {
       }
     },
 
-    clearPublicationIdentifierSearch: function (refName: string) {
-      // This could change with a new Primevue version.
-      const input = this.$refs[refName]
-      input.$refs.focusInput.value = ''
-    },
+    // clearPublicationIdentifierSearch: function (refName: string) {
+    //   // This could change with a new Primevue version.
+    //   const input = this.$refs[refName]
+    //   input.$refs.focusInput.value = ''
+    // },
 
     searchPublicationIdentifiers: function (event: {query: string}) {
       const searchText = (event.query || '').trim()
@@ -1100,14 +1079,6 @@ export default {
       this.recomputeMeta()
     },
 
-    removePublicationIdentifier: function (val: PublicationIdentifier, publicationList: PublicationIdentifier[]) {
-      const removedIdentifier = val.identifier
-      const publicationIdx = publicationList.findIndex((pub) => pub.identifier == removedIdentifier)
-      if (publicationIdx != -1) {
-        publicationList.splice(publicationIdx, 1)
-      }
-    },
-
     saveCalibration: function () {
       this.$emit('saved', this.draft)
       // Update original snapshot after external save (parent may call back). We optimistically snapshot here.
diff --git a/src/components/screens/ScoreSetCalibrationsView.vue b/src/components/screens/ScoreSetCalibrationsView.vue
index 06dec8cb..be62234a 100644
--- a/src/components/screens/ScoreSetCalibrationsView.vue
+++ b/src/components/screens/ScoreSetCalibrationsView.vue
@@ -195,7 +195,7 @@
   </DefaultLayout>
   <PrimeDialog
     v-model:visible="editorVisible"
-    :close-on-escape="true"
+    :close-on-escape="false"
     :header="editingCalibrationUrn ? 'Edit Calibration' : 'Create New Calibration'"
     modal
     :style="{maxWidth: '90%', width: '75rem'}"
diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index 7cdf6095..26266000 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -379,7 +379,7 @@
   <PrimeDialog
     v-model:visible="calibrationEditorVisible"
     :base-z-index="2003"
-    :close-on-escape="true"
+    :close-on-escape="false"
     header="Create New Calibration"
     modal
     :style="{maxWidth: '90%', width: '75rem'}"

From 1e51263667a58b2c1240ae4102805b0b3f35781d Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 30 Dec 2025 17:08:40 -0800
Subject: [PATCH 16/40] Redefine button styles via props and update formatting
 of error messages on ScoreSetCalibrationsView

---
 .../screens/ScoreSetCalibrationsView.vue      | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/screens/ScoreSetCalibrationsView.vue b/src/components/screens/ScoreSetCalibrationsView.vue
index be62234a..17eb704a 100644
--- a/src/components/screens/ScoreSetCalibrationsView.vue
+++ b/src/components/screens/ScoreSetCalibrationsView.vue
@@ -6,19 +6,16 @@
         <div class="calibration-title-actions">
           <PrimeButton
             v-if="userIsAuthorizedToEditScoreSet"
-            class="p-button p-component"
             icon="pi pi-plus"
             label="New calibration"
             @click="createCalibration(item.urn)"
           />
           <PrimeButton
-            class="p-button p-component"
             icon="pi pi-refresh"
             title="Reload calibrations"
             @click="reloadItem()"
           />
           <PrimeButton
-            class="p-button p-component"
             icon="pi pi-download"
             title="Download calibration JSON"
             @click="downloadCalibrations()"
@@ -61,14 +58,16 @@
                 </span>
                 <PrimeButton
                   v-if="data.notes && data.notes.length > 100 && !expandedNotes[data.id]"
-                  class="p-button p-component p-button-text p-button-sm"
                   label="See more"
+                  size="small"
+                  variant="text"
                   @click="expandedNotes[data.id] = true"
                 />
                 <PrimeButton
                   v-if="data.notes && expandedNotes[data.id]"
-                  class="p-button p-component p-button-text p-button-sm"
                   label="See less"
+                  size="small"
+                  variant="text"
                   @click="expandedNotes[data.id] = false"
                 />
               </template>
@@ -118,51 +117,56 @@
                     :to="{name: 'scoreSet', params: {urn: item.urn}, query: {calibration: data.urn}}"
                   >
                     <PrimeButton
-                      class="p-button p-component p-button-sm p-button-info"
                       icon="pi pi-eye"
-                      :rounded="true"
+                      rounded
+                      severity="info"
+                      size="small"
                     />
                   </router-link>
                   <!-- Only an authenticated user will be able to edit these properties -->
                   <template v-if="userIsAuthenticated">
                     <PrimeButton
                       v-if="calibrationAuthorizations[data.urn]?.update && userIsAuthorizedToEditScoreSet"
-                      class="p-button p-component p-button-sm"
                       icon="pi pi-pencil"
                       :rounded="true"
+                      size="small"
                       title="Edit calibration"
                       @click="editCalibration(data.urn)"
                     />
                     <PrimeButton
                       v-if="calibrationAuthorizations[data.urn]?.change_rank && data.primary"
-                      class="p-button p-component p-button-sm p-button-warning"
                       icon="pi pi-angle-double-down"
                       :rounded="true"
+                      severity="warn"
+                      size="small"
                       title="Demote calibration to non-primary"
                       @click="demoteCalibration(data.urn)"
                     />
                     <PrimeButton
                       v-if="calibrationAuthorizations[data.urn]?.change_rank && !data.primary"
-                      class="p-button p-component p-button-sm p-button-warning"
                       :disabled="data.researchUseOnly || primaryExists"
                       icon="pi pi-angle-double-up"
                       :rounded="true"
+                      severity="warn"
+                      size="small"
                       title="Promote calibration to primary"
                       @click="promoteCalibration(data.urn)"
                     />
                     <PrimeButton
                       v-if="calibrationAuthorizations[data.urn]?.publish && data.private"
-                      class="p-button p-component p-button-sm p-button-success"
                       icon="pi pi-check-circle"
                       :rounded="true"
+                      severity="success"
+                      size="small"
                       title="Publish calibration"
                       @click="publishCalibration(data.urn)"
                     />
                     <PrimeButton
                       v-if="calibrationAuthorizations[data.urn]?.delete"
-                      class="p-button p-component p-button-sm p-button-danger"
                       icon="pi pi-trash"
                       :rounded="true"
+                      severity="danger"
+                      size="small"
                       title="Delete calibration"
                       @click="deleteCalibration(data.urn)"
                     />
@@ -209,15 +213,15 @@
     />
     <template #footer>
       <PrimeButton
-        class="p-button p-component p-button-secondary"
         icon="pi pi-times"
         label="Close"
+        severity="secondary"
         @click="cancelEditCreate"
       />
       <PrimeButton
-        class="p-button p-component p-button-success"
         icon="pi pi-save"
         label="Save Changes"
+        severity="success"
         @click="saveChildCalibration"
       />
     </template>
@@ -493,10 +497,11 @@ export default {
             await this.reloadItem()
           } catch (error) {
             console.error('Error publishing calibration:', error)
+            const errorMessage = axios.isAxiosError(error) && error.response?.data?.detail && (typeof error.response.data.detail === 'string' || error.response.data.detail instanceof String) ? error.response.data.detail : error
             this.$toast.add({
               severity: 'error',
               summary: 'Calibration Not Published',
-              detail: `An error occurred while publishing the calibration: ${error}. Please try again later.`,
+              detail: `An error occurred while publishing the calibration: ${errorMessage}. Please try again later.`,
               life: 4000
             })
           }
@@ -520,10 +525,11 @@ export default {
         await this.reloadItem()
       } catch (error) {
         console.error('Error demoting calibration:', error)
+        const errorMessage = axios.isAxiosError(error) && error.response?.data?.detail && (typeof error.response.data.detail === 'string' || error.response.data.detail instanceof String) ? error.response.data.detail : error
         this.$toast.add({
           severity: 'error',
           summary: 'Calibration Not Demoted',
-          detail: `An error occurred while demoting the calibration: ${error}. Please try again later.`,
+          detail: `An error occurred while demoting the calibration: ${errorMessage}. Please try again later.`,
           life: 4000
         })
       }
@@ -541,10 +547,11 @@ export default {
         await this.reloadItem()
       } catch (error) {
         console.error('Error promoting calibration:', error)
+        const errorMessage = axios.isAxiosError(error) && error.response?.data?.detail && (typeof error.response.data.detail === 'string' || error.response.data.detail instanceof String) ? error.response.data.detail : error
         this.$toast.add({
           severity: 'error',
           summary: 'Calibration Not Promoted',
-          detail: `An error occurred while promoting the calibration: ${error}. Please try again later.`,
+          detail: `An error occurred while promoting the calibration: ${errorMessage}. Please try again later.`,
           life: 4000
         })
       }
@@ -573,10 +580,11 @@ export default {
             await this.reloadItem()
           } catch (error) {
             console.error('Error deleting calibration:', error)
+            const errorMessage = axios.isAxiosError(error) && error.response?.data?.detail && (typeof error.response.data.detail === 'string' || error.response.data.detail instanceof String) ? error.response.data.detail : error
             this.$toast.add({
               severity: 'error',
               summary: 'Calibration Not Deleted',
-              detail: `An error occurred while deleting the calibration: ${error}. Please try again later.`,
+              detail: `An error occurred while deleting the calibration: ${errorMessage}. Please try again later.`,
               life: 4000
             })
           }
@@ -603,10 +611,11 @@ export default {
         document.body.removeChild(link)
       } catch (error) {
         console.error('Error downloading calibrations:', error)
+        const errorMessage = axios.isAxiosError(error) && error.response?.data?.detail && (typeof error.response.data.detail === 'string' || error.response.data.detail instanceof String) ? error.response.data.detail : error
         this.$toast.add({
           severity: 'error',
           summary: 'Download Failed',
-          detail: `An error occurred while downloading the calibrations: ${error}. Please try again later.`,
+          detail: `An error occurred while downloading the calibrations: ${errorMessage}. Please try again later.`,
           life: 4000
         })
       }

From 956c2b3fbdccfeb864363bc38250c594427eceaa Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 30 Dec 2025 17:09:27 -0800
Subject: [PATCH 17/40] Redefine button styles via props and move tooltip
 button styling to global CSS

---
 src/assets/app.css                            | 23 +++++++
 src/components/CalibrationTable.vue           | 36 +++-------
 src/components/ScoreSetHeatmap.vue            |  2 +-
 src/components/TargetGene.vue                 |  6 +-
 src/components/layout/Toolbar.vue             |  8 +--
 src/components/screens/DashboardView.vue      |  7 +-
 src/components/screens/ExperimentCreator.vue  |  4 +-
 src/components/screens/ExperimentEditor.vue   | 24 ++++---
 src/components/screens/ExperimentSetView.vue  |  2 +-
 src/components/screens/ExperimentView.vue     | 16 +++--
 src/components/screens/HomeScreen.vue         |  4 +-
 src/components/screens/ScoreSetCreator.vue    |  4 +-
 src/components/screens/ScoreSetEditor.vue     | 34 +++++-----
 src/components/screens/ScoreSetView.vue       | 66 +++++++------------
 .../screens/SearchVariantsScreen.vue          | 15 ++---
 src/components/screens/SearchView.vue         |  2 +-
 src/components/screens/SettingsScreen.vue     | 14 ++--
 17 files changed, 131 insertions(+), 136 deletions(-)

diff --git a/src/assets/app.css b/src/assets/app.css
index 1f4549c6..401a0ca5 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -129,3 +129,26 @@ body .p-button {
 .p-listbox-header {
   padding: 0 !important;
 }
+
+.mavedb-help-tooltip-button {
+  margin-left: 0.6rem;
+  vertical-align: middle;
+  margin-top: 0;
+  margin-bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  background: none;
+  width: 1.2em !important;
+  height: 1.2em !important;
+  border-color: var(--p-button-outlined-help-color) !important;
+}
+
+.mavedb-help-tooltip-button:focus,
+.mavedb-help-tooltip-button:active,
+.mavedb-help-tooltip-button.p-focus {
+  background: none;
+}
+
+.mavedb-help-tooltip-button > .p-button-icon {
+  font-size: 0.5rem !important;
+}
diff --git a/src/components/CalibrationTable.vue b/src/components/CalibrationTable.vue
index 99d80bc3..3114e27d 100644
--- a/src/components/CalibrationTable.vue
+++ b/src/components/CalibrationTable.vue
@@ -13,10 +13,11 @@
         <PrimeButton
           v-tooltip.right="{value: scoreCalibration.baselineScoreDescription, autoHide: false}"
           aria-label="Info"
-          class="p-button-help mavedb-help-tooltip-button size-2!"
+          class="mavedb-help-tooltip-button"
           icon="pi pi-info"
           outlined
           rounded
+          severity="help"
         />
       </span>
     </div>
@@ -47,10 +48,11 @@
               <PrimeButton
                 v-tooltip.right="{value: range.description, autoHide: false}"
                 aria-label="Info"
-                class="p-button-help mavedb-help-tooltip-button size-2!"
+                class="mavedb-help-tooltip-button"
                 icon="pi pi-info"
                 outlined
                 rounded
+                severity="help"
               />
             </span>
           </div>
@@ -198,10 +200,11 @@
               autoHide: false
             }"
             aria-label="Threshold sources info"
-            class="p-button-help mavedb-help-tooltip-button size-2!"
+            class="mavedb-help-tooltip-button"
             icon="pi pi-info"
             outlined
             rounded
+            severity="help"
           />
           <strong>Thresholds:</strong>
           <span class="citation-list">
@@ -234,10 +237,11 @@
               autoHide: false
             }"
             aria-label="Method sources info"
-            class="p-button-help mavedb-help-tooltip-button size-2!"
+            class="mavedb-help-tooltip-button"
             icon="pi pi-info"
             outlined
             rounded
+            severity="help"
           />
           <strong>Method:</strong>
           <span class="citation-list">
@@ -267,10 +271,11 @@
               autoHide: false
             }"
             aria-label="Evidence calculation sources info"
-            class="p-button-help mavedb-help-tooltip-button size-2!"
+            class="mavedb-help-tooltip-button"
             icon="pi pi-info"
             outlined
             rounded
+            severity="help"
           />
           <strong>Evidence calcs:</strong>
           <span class="citation-list">
@@ -767,27 +772,6 @@ export default defineComponent({
   vertical-align: -0.05em;
 }
 
-/* Tooltips */
-.mavedb-help-tooltip-button {
-  margin-left: 0.6rem;
-  vertical-align: middle;
-  margin-top: 0;
-  margin-bottom: 0;
-  display: inline-flex;
-  align-items: center;
-  background: none;
-}
-
-.mavedb-help-tooltip-button:focus,
-.mavedb-help-tooltip-button:active,
-.mavedb-help-tooltip-button.p-focus {
-  background: none;
-}
-
-.mavedb-help-tooltip-button:deep(.p-button-icon) {
-  font-size: 0.5rem;
-}
-
 /* Responsive behavior */
 @media (max-width: 900px) {
   .evidence-strength-cell {
diff --git a/src/components/ScoreSetHeatmap.vue b/src/components/ScoreSetHeatmap.vue
index 91d5e895..6bb0f1ea 100644
--- a/src/components/ScoreSetHeatmap.vue
+++ b/src/components/ScoreSetHeatmap.vue
@@ -38,8 +38,8 @@
         />
         <Button
           v-if="showProteinStructureButton && sequenceType == 'protein'"
-          class="p-button p-button-info"
           label="View protein structure"
+          severity="info"
           @click="$emit('onDidClickShowProteinStructure')"
         />
       </div>
diff --git a/src/components/TargetGene.vue b/src/components/TargetGene.vue
index bb554c00..5c0c49a6 100644
--- a/src/components/TargetGene.vue
+++ b/src/components/TargetGene.vue
@@ -32,11 +32,13 @@
       <template v-else>{{ targetGene.targetSequence.sequence.substring(0, 500) + '....' }} </template>
       <Button
         v-if="showingFullSequence"
-        class="p-button-text p-button-sm p-button-info"
+        severity="info"
+        size="small"
+        variant="text"
         @click="showFullSequence(false)"
         >Show less</Button
       >
-      <Button v-else class="p-button-text p-button-sm p-button-info" @click="showFullSequence(true)"
+      <Button v-else severity="info" size="small" variant="text" @click="showFullSequence(true)"
         >Show more</Button
       > </template
     ><template v-else>{{ targetGene.targetSequence.sequence }}</template>
diff --git a/src/components/layout/Toolbar.vue b/src/components/layout/Toolbar.vue
index 0ecf5ffb..e219c5fb 100644
--- a/src/components/layout/Toolbar.vue
+++ b/src/components/layout/Toolbar.vue
@@ -23,17 +23,17 @@
             <InputText
               ref="searchTextInput"
               v-model="searchText"
-              class="p-inputtext-sm !rounded-r-none w-full"
+              class="rounded-r-none! w-full"
               placeholder="Search"
-              style="width: 200px; height: auto;"
+              size="small"
               type="search"
               @keyup.enter="search"
             />
             <Button
-              class="p-button-default p-button-sm !rounded-l-none"
+              class="rounded-l-none!"
               :enabled="searchText && searchText.length > 0"
               icon="pi pi-search"
-              style="height: auto;"
+              size="small"
               @click="search"
             />
           </div>
diff --git a/src/components/screens/DashboardView.vue b/src/components/screens/DashboardView.vue
index 5a5e95e6..9a575543 100644
--- a/src/components/screens/DashboardView.vue
+++ b/src/components/screens/DashboardView.vue
@@ -20,16 +20,17 @@
                   <InputText
                     ref="searchTextInput"
                     v-model="searchText"
-                    class="p-inputtext-sm rounded-r-none!"
+                    class="rounded-r-none!"
                     placeholder="Search"
-                    style="width: 200px; height: auto;"
+                    size="small"
                     type="text"
                     @change="search"
                   />
                   <Button
-                    class="p-button-default p-button-sm rounded-l-none!"
+                    class="rounded-l-none!"
                     :enabled="searchText && searchText.length > 0"
                     icon="pi pi-search"
+                    size="small"
                     @click="search"
                   />
                   <ProgressSpinner
diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index 5fddb925..c44566fe 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -11,7 +11,7 @@
         <div v-if="item" class="mavedb-screen-title-controls">
           <Button @click="saveEditContent">Save changes</Button>
           <Button severity="help" @click="resetForm">Clear</Button>
-          <Button class="p-button-warning" @click="viewItem">Cancel</Button>
+          <Button severity="warn" @click="viewItem">Cancel</Button>
         </div>
       </div>
       <div v-else class="mave-screen-title-bar">
@@ -19,7 +19,7 @@
         <div class="mavedb-screen-title-controls">
           <Button @click="validateAndSave">Save</Button>
           <Button severity="help" @click="resetForm">Clear</Button>
-          <Button class="p-button-warning" @click="backDashboard">Cancel</Button>
+          <Button severity="warn" @click="backDashboard">Cancel</Button>
         </div>
       </div>
       <div class="mavedb-wizard">
diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index a10aae03..8ef40a32 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -12,16 +12,16 @@
             <div class="mave-screen-title">Edit experiment {{ item.urn }}</div>
             <div v-if="item" class="mavedb-screen-title-controls">
               <Button @click="validateAndSave">Save changes</Button>
-              <Button class="p-button-help" @click="resetForm">Clear</Button>
-              <Button class="p-button-warning" @click="viewItem">Cancel</Button>
+              <Button severity="help" @click="resetForm">Clear</Button>
+              <Button severity="warn" @click="viewItem">Cancel</Button>
             </div>
           </div>
           <div v-else class="mave-screen-title-bar">
             <div class="mave-screen-title">Create a new experiment</div>
             <div class="mavedb-screen-title-controls">
               <Button @click="validateAndSave">Save experiment</Button>
-              <Button class="p-button-help" @click="resetForm">Clear</Button>
-              <Button class="p-button-warning" @click="backDashboard">Cancel</Button>
+              <Button severity="help" @click="resetForm">Clear</Button>
+              <Button severity="warn" @click="backDashboard">Cancel</Button>
             </div>
           </div>
         </div>
@@ -234,14 +234,16 @@
                     <i class="pi pi-check mr-3"></i>
                     <Button
                       v-tooltip="{value: 'View extra metadata'}"
-                      class="p-button-info mr-2"
+                      class="mr-2"
                       icon="pi pi-eye"
+                      severity="info"
                       @click="jsonToDisplay = JSON.stringify(extraMetadata, null, 2)"
                     ></Button>
                     <Button
                       v-tooltip="{value: 'Delete extra metadata'}"
-                      class="p-button-danger mr-2"
+                      class="mr-2"
                       icon="pi pi-times"
+                      severity="danger"
                       @click="fileCleared('extraMetadataFile')"
                     ></Button>
                   </div>
@@ -346,9 +348,9 @@
                   </div>
                 </div>
               </div>
-              <div class="field">
-                <Button class="p-button-help" @click="resetKeywords">Reset Keywords</Button>
-                <Button class="p-button-warning padded-button" @click="clearKeywords">Clear Keywords</Button>
+              <div class="field space-x-2">
+                <Button severity="help" @click="resetKeywords">Reset Keywords</Button>
+                <Button severity="warn" @click="clearKeywords">Clear Keywords</Button>
               </div>
             </template>
           </Card>
@@ -1261,10 +1263,6 @@ export default {
   width: 450px;
 }
 
-.padded-button {
-  margin-left: 5px;
-}
-
 .p-inputwrapper, .p-textarea, .p-inputtext {
   width: 100%;
 }
diff --git a/src/components/screens/ExperimentSetView.vue b/src/components/screens/ExperimentSetView.vue
index ea578a99..0be6131f 100644
--- a/src/components/screens/ExperimentSetView.vue
+++ b/src/components/screens/ExperimentSetView.vue
@@ -6,7 +6,7 @@
           <div class="mave-screen-title">{{ item.urn }}</div>
           <div v-if="userIsAuthenticated & userIsAuthorized">
             <div class="mavedb-screen-title-controls">
-              <Button class="p-button-sm" @click="addExperiment">Add an experiment</Button>
+              <Button size="small" @click="addExperiment">Add an experiment</Button>
             </div>
           </div>
         </div>
diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index da92ec8c..de512fda 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -15,11 +15,11 @@
           </div>
           <div v-if="userIsAuthenticated">
             <div class="mavedb-screen-title-controls">
-              <Button v-if="userIsAuthorized.add_score_set" class="p-button-sm" @click="addScoreSet"
+              <Button v-if="userIsAuthorized.add_score_set" size="small" @click="addScoreSet"
                 >Add a score set</Button
               >
-              <Button v-if="userIsAuthorized.update" class="p-button-sm" @click="editItem">Edit</Button>
-              <Button v-if="userIsAuthorized.delete" class="p-button-sm p-button-danger" @click="deleteItem"
+              <Button v-if="userIsAuthorized.update" size="small" @click="editItem">Edit</Button>
+              <Button v-if="userIsAuthorized.delete" severity="danger" size="small" @click="deleteItem"
                 >Delete</Button
               >
             </div>
@@ -164,7 +164,11 @@
                       {{ keyword.description.substring(0, 300) + '....' }}
                     </div>
                     <div v-else>{{ keyword.description }}</div>
-                    <Button class="p-button-text p-button-sm p-button-info" @click="showFullDescription(index)">
+                    <Button
+                      severity="info"
+                      size="small"
+                      variant="text"
+                      @click="showFullDescription(index)">
                       {{ fullDescription[index] ? 'Show less' : 'Show all' }}
                     </Button>
                   </div>
@@ -218,10 +222,10 @@
                     >{{ targetGene.targetSequence.sequence.substring(0, 500) + '....' }}
                   </template>
                   <template v-if="readMore == false">{{ targetGene.targetSequence.sequence }}</template>
-                  <Button v-if="readMore == true" class="p-button-text p-button-sm p-button-info" @click="showMore"
+                  <Button v-if="readMore == true" severity="info" size="small" variant="text" @click="showMore"
                     >Show more</Button
                   >
-                  <Button v-if="readMore == false" class="p-button-text p-button-sm p-button-info" @click="showLess"
+                  <Button v-if="readMore == false" severity="info" size="small" variant="text" @click="showLess"
                     >Show less</Button
                   > </template
                 ><template v-else>{{ targetGene.targetSequence.sequence }}</template>
diff --git a/src/components/screens/HomeScreen.vue b/src/components/screens/HomeScreen.vue
index 144c86e4..5e00379e 100644
--- a/src/components/screens/HomeScreen.vue
+++ b/src/components/screens/HomeScreen.vue
@@ -74,10 +74,10 @@
         <Card class="mt-4">
           <template #title>Upload Your Data</template>
           <template #content>
-            <Button class="p-button-sm" @click="addExperiment"
+            <Button size="small" @click="addExperiment"
               >Add an experiment</Button
             >&nbsp;&nbsp;
-            <Button class="p-button-sm" @click="addScoreSet"
+            <Button size="small" @click="addScoreSet"
                 >Add a score set</Button
               >
           </template>
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index f4230c4a..5b843777 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -8,8 +8,8 @@
       <div class="mave-screen-title-bar">
         <div class="mave-screen-title">Create a new score set</div>
         <div class="mavedb-screen-title-controls">
-          <Button class="p-button-help" @click="resetForm">Clear</Button>
-          <Button class="p-button-warning" @click="backDashboard">Cancel</Button>
+          <Button severity="help" @click="resetForm">Clear</Button>
+          <Button severity="warn" @click="backDashboard">Cancel</Button>
         </div>
       </div>
       <div class="mavedb-wizard">
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index 352cb1ac..5cc03687 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -11,8 +11,8 @@
             <div class="mave-screen-title">Edit score set {{ item.urn }}</div>
             <div class="mavedb-screen-title-controls">
               <Button @click="saveEditContent">Save changes</Button>
-              <Button class="p-button-help" @click="resetForm">Reset</Button>
-              <Button class="p-button-warning" @click="viewItem">Cancel</Button>
+              <Button severity="help" @click="resetForm">Reset</Button>
+              <Button severity="warn" @click="viewItem">Cancel</Button>
             </div>
           </div>
         </div>
@@ -259,14 +259,16 @@
                       <i class="pi pi-check mr-3"></i>
                       <Button
                         v-tooltip="{value: 'View extra metadata'}"
-                        class="p-button-info mr-2"
+                        class="mr-2"
                         icon="pi pi-eye"
+                        severity="info"
                         @click="jsonToDisplay = JSON.stringify(extraMetadata, null, 2)"
                       ></Button>
                       <Button
                         v-tooltip="{value: 'Delete extra metadata'}"
-                        class="p-button-danger mr-2"
+                        class="mr-2"
                         icon="pi pi-times"
+                        severity="danger"
                         @click="fileCleared('extraMetadataFile')"
                       ></Button>
                     </div>
@@ -471,10 +473,9 @@
                         <div>
                           <Button icon="pi pi-check" label="Add Target" @click="addTarget" />
                           <Button
-                            class="p-button-help"
                             icon="pi pi-times"
                             label="Clear Target"
-                            severity="secondary"
+                            severity="help"
                             style="margin-left: 0.5em"
                             @click="resetTarget"
                           />
@@ -563,10 +564,9 @@
                             @click="swapNucleotideProteinAccessions"
                           />
                           <Button
-                            class="p-button-help"
                             icon="pi pi-times"
                             label="Clear Target"
-                            severity="secondary"
+                            severity="help"
                             size="small"
                             style="margin-left: 0.5em"
                             @click="resetTarget"
@@ -590,10 +590,9 @@
                       <Column>
                         <template #body="slotProps">
                           <Button
-                            class="p-button-help"
                             icon="pi pi-minus-circle"
                             label="Remove"
-                            severity="secondary"
+                            severity="help"
                             size="small"
                             @click="targetDeleted(slotProps.data)"
                           />
@@ -723,10 +722,9 @@
                       <template #footer>
                         <div class="flex flex-wrap justify-content-start gap-2">
                           <Button
-                            class="p-button-help"
                             icon="pi pi-times-circle"
                             label="Clear all"
-                            severity="secondary"
+                            severity="help"
                             size="small"
                             @click="targetsCleared"
                           />
@@ -800,14 +798,16 @@
                       <i class="pi pi-check mr-3"></i>
                       <Button
                         v-tooltip="{value: 'View scores column metadata'}"
-                        class="p-button-info mr-2"
+                        class="mr-2"
                         icon="pi pi-eye"
+                        severity="info"
                         @click="jsonToDisplay = JSON.stringify(scoreColumnsMetadata, null, 2)"
                       ></Button>
                       <Button
                         v-tooltip="{value: 'Delete scores column metadata'}"
-                        class="p-button-danger mr-2"
+                        class="mr-2"
                         icon="pi pi-times"
+                        severity="danger"
                         @click="fileCleared('scoreColumnsMetadataFile')"
                       ></Button>
                     </div>
@@ -864,14 +864,16 @@
                       <i class="pi pi-check mr-3"></i>
                       <Button
                         v-tooltip="{value: 'View counts column metadata'}"
-                        class="p-button-info mr-2"
+                        class="mr-2"
                         icon="pi pi-eye"
+                        severity="info"
                         @click="jsonToDisplay = JSON.stringify(countColumnsMetadata, null, 2)"
                       ></Button>
                       <Button
                         v-tooltip="{value: 'Delete counts column metadata'}"
-                        class="p-button-danger mr-2"
+                        class="mr-2"
                         icon="pi pi-times"
+                        severity="danger"
                         @click="fileCleared('countColumnsMetadataFile')"
                       ></Button>
                     </div>
diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index 26266000..2e0852e1 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -17,26 +17,26 @@
           </div>
           <div v-if="userIsAuthenticated" class="mavedb-screen-title-controls">
             <Button
-              class="p-butto p-button-sm"
               icon="pi pi-external-link"
               label="Score set calibrations"
+              size="small"
               @click="$router.push({path: `/score-sets/${item.urn}/calibrations`})"
             />
             <Button
               v-if="userIsAuthorized.addCalibration"
-              class="p-button p-button-sm"
+              size="small"
               @click="calibrationEditorVisible = true"
               >Add calibration</Button
             >
             <template v-if="!item.publishedDate">
-              <Button v-if="userIsAuthorized.update" class="p-button p-button-sm" @click="editItem">Edit</Button>
-              <Button v-if="userIsAuthorized.publish" class="p-button p-button-sm" @click="publishItem">Publish</Button>
-              <Button v-if="userIsAuthorized.delete" class="p-button p-button-sm p-button-danger" @click="deleteItem"
+              <Button v-if="userIsAuthorized.update" size="small" @click="editItem">Edit</Button>
+              <Button v-if="userIsAuthorized.publish" size="small" @click="publishItem">Publish</Button>
+              <Button v-if="userIsAuthorized.delete" severity="danger" size="small" @click="deleteItem"
                 >Delete</Button
               >
             </template>
             <template v-if="item.publishedDate">
-              <Button v-if="userIsAuthorized.update" class="p-button p-button-sm" @click="editItem">Edit</Button>
+              <Button v-if="userIsAuthorized.update" size="small" @click="editItem">Edit</Button>
             </template>
           </div>
         </div>
@@ -81,10 +81,11 @@
             <Button
               v-tooltip="clinicalModeHelpText"
               aria-label="About raw vs. clinical mode"
-              class="p-button-help mavedb-help-tooltip-button"
+              class="mavedb-help-tooltip-button"
               icon="pi pi-info"
               outlined
               rounded
+              severity="help"
             />
           </span>
         </div>
@@ -167,14 +168,14 @@
         </div>
         <div>
           Download files and/or charts
-          <Button class="p-button-outlined p-button-sm" @click="downloadFile('scores')">Scores</Button>&nbsp;
+          <Button severity="outlined" size="small" @click="downloadFile('scores')">Scores</Button>&nbsp;
           <template v-if="hasCounts">
-            <Button class="p-button-outlined p-button-sm" @click="downloadFile('counts')">Counts</Button>&nbsp;
+            <Button severity="outlined" size="small" @click="downloadFile('counts')">Counts</Button>&nbsp;
           </template>
           <template v-if="isMetaDataEmpty != true">
-            <Button class="p-button-outlined p-button-sm" @click="downloadMetadata">Metadata</Button>&nbsp;
+            <Button severity="outlined" size="small" @click="downloadMetadata">Metadata</Button>&nbsp;
           </template>
-          <Button class="p-button-outlined p-button-sm" @click="downloadMappedVariants()">Mapped Variants</Button>&nbsp;
+          <Button severity="outlined" size="small" @click="downloadMappedVariants()">Mapped Variants</Button>&nbsp;
           <div style="display: inline-block; position: relative">
             <SplitButton
               :button-props="{class: 'p-button-outlined p-button-sm'}"
@@ -191,11 +192,11 @@
               <ProgressBar show-value style="height: 1.5em" :value="annotatedDownloadProgress" />
             </div>
           </div>
-          &nbsp; <Button class="p-button-outlined p-button-sm" @click="histogramExport()">Histogram</Button>&nbsp;
+          &nbsp; <Button severity="outlined" size="small" @click="histogramExport()">Histogram</Button>&nbsp;
           <template v-if="heatmapExists">
-            <Button class="p-button-outlined p-button-sm" @click="heatmapExport()">Heatmap</Button>&nbsp;
+            <Button severity="outlined" size="small" @click="heatmapExport()">Heatmap</Button>&nbsp;
           </template>
-          <Button class="p-button-outlined p-button-sm" @click="showOptions()"> Custom Data </Button>
+          <Button severity="outlined" size="small" @click="showOptions()"> Custom Data </Button>
           <Dialog
             v-model:visible="optionsVisible"
             :base-z-index="901"
@@ -213,11 +214,11 @@
               <label :for="scopedId('input-' + dataOption.value)">{{ dataOption.label }}</label>
             </div>
             <p />
-            <Button class="p-button-outlined p-button-sm" label="Download" @click="downloadMultipleData"
+            <Button severity="outlined" size="small" label="Download" @click="downloadMultipleData"
               >Download</Button
             >
             &nbsp;
-            <Button class="p-button-warning p-button-sm" label="Cancel" @click="optionsVisible = false">Cancel</Button>
+            <Button label="Cancel" severity="warn" size="small" @click="optionsVisible = false">Cancel</Button>
           </Dialog>
           <br />
         </div>
@@ -225,11 +226,11 @@
 
         <div v-if="requestFromGalaxy == '1'">
           <br />Send files to <a :href="galaxyUrl">Galaxy</a>
-          <Button class="p-button-outlined p-button-sm" @click="sendToGalaxy('scores')">Scores</Button>&nbsp;
+          <Button severity="outlined" size="small" @click="sendToGalaxy('scores')">Scores</Button>&nbsp;
           <template v-if="hasCounts">
-            <Button class="p-button-outlined p-button-sm" @click="sendToGalaxy('counts')">Counts</Button>&nbsp;
+            <Button severity="outlined" size="small" @click="sendToGalaxy('counts')">Counts</Button>&nbsp;
           </template>
-          <Button class="p-button-outlined p-button-sm" @click="sendToGalaxy('mappedVariants')">Mapped Variants</Button
+          <Button severity="outlined" size="small" @click="sendToGalaxy('mappedVariants')">Mapped Variants</Button
           >&nbsp;
         </div>
         <div v-if="item.abstractText">
@@ -392,15 +393,15 @@
     />
     <template #footer>
       <Button
-        class="p-button p-component p-button-secondary"
         icon="pi pi-times"
         label="Close"
+        severity="secondary"
         @click="calibrationEditorVisible = false"
       />
       <Button
-        class="p-button p-component p-button-success"
         icon="pi pi-save"
         label="Save Changes"
+        severity="success"
         @click="saveCreatedCalibration"
       />
     </template>
@@ -1336,29 +1337,6 @@ export default {
   content: '';
   clear: both;
 }
-
-.mavedb-help-tooltip-button {
-  height: 0.5rem !important;
-  width: 0.5rem !important;
-  vertical-align: middle;
-  /* Remove extra vertical margin/padding if any. */
-  margin-top: 0;
-  margin-bottom: 0;
-  /* Ensure that button is inline with text. */
-  display: inline-flex;
-  align-items: center;
-  background: none;
-}
-
-.mavedb-help-tooltip-button:focus,
-.mavedb-help-tooltip-button:active,
-.mavedb-help-tooltip-button.p-focus {
-  background: none;
-}
-
-.mavedb-help-tooltip-button:deep(.p-button-icon) {
-  font-size: 0.5rem;
-}
 </style>
 
 <style>
diff --git a/src/components/screens/SearchVariantsScreen.vue b/src/components/screens/SearchVariantsScreen.vue
index 576a98bf..a76970cf 100644
--- a/src/components/screens/SearchVariantsScreen.vue
+++ b/src/components/screens/SearchVariantsScreen.vue
@@ -55,10 +55,10 @@
         </div>
         <div class="mavedb-search-form-view-switch">
           Don't have a versioned reference sequence identifier? Click here to perform a fuzzy search instead:
-          <Button class="p-button-plain" @click="showSearch('fuzzy')">Fuzzy Search</Button>
+          <Button @click="showSearch('fuzzy')">Fuzzy Search</Button>
         </div>
         <div class="mavedb-examples-button-container">
-          <Button class="p-button-plain p-button-text" @click="searchSuggestionsVisible = !searchSuggestionsVisible">
+          <Button variant="text" @click="searchSuggestionsVisible = !searchSuggestionsVisible">
             {{ searchSuggestionsVisible ? 'Hide search examples' : 'Show search examples' }}
           </Button>
         </div>
@@ -107,10 +107,9 @@
             :options="selectedAlleleOptions"
             placeholder="Alternate allele"
           />
-          <Button class="p-button-plain" @click="fuzzySearch">Search</Button>
+          <Button @click="fuzzySearch">Search</Button>
           <div class="mavedb-clear-search-button-container">
             <Button
-              class="p-button-plain"
               :disabled="!searchIsClearable"
               icon="pi pi-times"
               rounded
@@ -120,7 +119,7 @@
         </div>
         <div class="mavedb-search-form-view-switch">
           Click here to return to standard search:
-          <Button class="p-button-plain" @click="showSearch('default')">Standard Search</Button>
+          <Button @click="showSearch('default')">Standard Search</Button>
         </div>
       </div>
       <div v-if="!searchResultsVisible" class="mavedb-expander-container">
@@ -261,9 +260,9 @@
                       </li>
                       <Button
                         v-if="allele.variants.nucleotide.length > defaultNumScoreSetsToShow"
-                        class="p-button-text"
                         icon="pi pi-angle-down"
                         style="width: fit-content"
+                        variant="text"
                         @click="
                           nucleotideScoreSetListIsExpanded[alleleIdx] = !nucleotideScoreSetListIsExpanded[alleleIdx]
                         "
@@ -291,9 +290,9 @@
                       </li>
                       <Button
                         v-if="allele.variants.protein.length > defaultNumScoreSetsToShow"
-                        class="p-button-text"
                         icon="pi pi-angle-down"
                         style="width: fit-content"
+                        variant="text"
                         @click="proteinScoreSetListIsExpanded[alleleIdx] = !proteinScoreSetListIsExpanded[alleleIdx]"
                       >
                         {{
@@ -322,9 +321,9 @@
                       </li>
                       <Button
                         v-if="allele.variants.associatedNucleotide.length > defaultNumScoreSetsToShow"
-                        class="p-button-text"
                         icon="pi pi-angle-down"
                         style="width: fit-content"
+                        variant="text"
                         @click="
                           associatedNucleotideScoreSetListIsExpanded[alleleIdx] =
                             !associatedNucleotideScoreSetListIsExpanded[alleleIdx]
diff --git a/src/components/screens/SearchView.vue b/src/components/screens/SearchView.vue
index c78a9097..f8b0d14c 100644
--- a/src/components/screens/SearchView.vue
+++ b/src/components/screens/SearchView.vue
@@ -16,7 +16,7 @@
               type="search"
             />
           </IconField>
-          <Button class="p-button-plain" @click="clear">Clear All</Button>
+          <Button @click="clear">Clear All</Button>
         </div>
         <div class="mavedb-search-tab-view-container">
           <Tabs class="mavedb-search-tabs" value="0">
diff --git a/src/components/screens/SettingsScreen.vue b/src/components/screens/SettingsScreen.vue
index b755b39c..93741b6b 100644
--- a/src/components/screens/SettingsScreen.vue
+++ b/src/components/screens/SettingsScreen.vue
@@ -23,10 +23,10 @@
       <template #footer>
         <Button :disabled="!user || email == user.email" icon="pi pi-check" label="Save" @click="saveEmail" />
         <Button
-          class="p-button-secondary"
           :disabled="!user || email == user.email"
           icon="pi pi-times"
           label="Cancel"
+          severity="secondary"
           style="margin-left: 0.5em"
           @click="cancelEmailEditing"
         />
@@ -41,14 +41,16 @@
             {{ accessKeysByRole['ordinary user'] }}
             &nbsp;
             <Button
-              class="p-button-rounded p-button-outlined"
               icon="pi pi-copy"
+              rounded
+              variant="outlined"
               @click="copyTextToClipboard(accessKeysByRole['ordinary user'])"
             />
             &nbsp;
             <Button
-              class="p-button-rounded p-button-danger"
               icon="pi pi-times"
+              rounded
+              severity="danger"
               @click="deleteAccessKeyWithConfirmation(accessKeysByRole['ordinary user'])"
             />
           </div>
@@ -95,14 +97,16 @@
                     {{ accessKeysByRole[role] }}
                     &nbsp;
                     <Button
-                      class="p-button-rounded p-button-outlined"
                       icon="pi pi-copy"
+                      rounded
+                      variant="outlined"
                       @click="copyTextToClipboard(accessKeysByRole[role])"
                     />
                     &nbsp;
                     <Button
-                      class="p-button-rounded p-button-danger"
                       icon="pi pi-times"
+                      rounded
+                      severity="danger"
                       @click="deleteAccessKeyWithConfirmation(accessKeysByRole[role])"
                     />
                   </div>

From 5555e46ec9117d1c612d59a9413e8e9f8a508326 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 10:45:43 -0800
Subject: [PATCH 18/40] Remove Primevue 3 theme.css import and customize
 Primeuve 4 theme colors to match existing site

---
 src/components/layout/DefaultLayout.vue |  1 -
 src/main.js                             | 66 +++++++++++++++++++------
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/components/layout/DefaultLayout.vue b/src/components/layout/DefaultLayout.vue
index 324ce6e5..c791399b 100644
--- a/src/components/layout/DefaultLayout.vue
+++ b/src/components/layout/DefaultLayout.vue
@@ -29,7 +29,6 @@
 import '@fontsource/raleway'
 
 import '@/assets/app.css'
-import '@/assets/theme.css'
 import Toolbar from '@/components/layout/Toolbar.vue'
 import Footer from '@/components/layout/Footer.vue'
 import EmailPrompt from '@/components/common/EmailPrompt.vue'
diff --git a/src/main.js b/src/main.js
index 789895ff..da2b41ce 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,7 +8,7 @@ import {createApp} from 'vue'
 import {createHead} from '@unhead/vue/client'
 import {TemplateParamsPlugin} from 'unhead/plugins'
 import Aura from '@primevue/themes/aura'
-import { definePreset } from '@primeuix/themes'
+import { definePreset, palette } from '@primeuix/themes'
 
 import App from '@/App.vue'
 import config from '@/config'
@@ -58,23 +58,61 @@ const head = createHead({
   ]
 })
 
+const darkBluePalette = palette('#3f51b5')
+
 const MaveDbTheme = definePreset(Aura, {
     semantic: {
         primary: {
-            50: '{blue.50}',
-            100: '{blue.100}',
-            200: '{blue.200}',
-            300: '{blue.300}',
-            400: '{blue.400}',
-            500: '{blue.500}',
-            600: '{blue.600}',
-            700: '{blue.700}',
-            800: '{blue.800}',
-            900: '{blue.900}',
-            950: '{blue.950}'
+            50: darkBluePalette[50],
+            100: darkBluePalette[100],
+            200: darkBluePalette[200],
+            300: darkBluePalette[300],
+            400: darkBluePalette[400],
+            500: darkBluePalette[500],
+            600: darkBluePalette[600],
+            700: darkBluePalette[700],
+            800: darkBluePalette[800],
+            900: darkBluePalette[900],
+            950: darkBluePalette[950],
         }
-    }
-});
+    },
+    components: {
+        button: {
+          colorScheme: {
+            light: {
+              root: {
+                warn: {
+                  background: '{yellow.400}',
+                  borderColor: '{yellow.400}',
+                  color: '{black.900}',
+                  hoverColor: '{black.900}',
+                  hoverBackground: '{yellow.500}',
+                  hoverBorderColor: '{yellow.500}',
+                  activeColor: '{black.900}',
+                  activeBackground: '{yellow.600}',
+                  activeBorderColor: '{yellow.600}',
+                },
+              }
+            },
+            dark: {
+              root: {
+                warn: {
+                  background: '{yellow.400}',
+                  borderColor: '{yellow.400}',
+                  color: '{black.900}',
+                  hoverColor: '{black.900}',
+                  hoverBackground: '{yellow.500}',
+                  hoverBorderColor: '{yellow.500}',
+                  activeColor: '{black.900}',
+                  activeBackground: '{yellow.600}',
+                  activeBorderColor: '{yellow.600}',
+                },
+              }
+            },
+          },
+        }
+    },
+})
 
 createApp(App)
   .use(router)

From 3a978c4c4c9bcbb11be93fc2128cf6388fe254e6 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 10:46:57 -0800
Subject: [PATCH 19/40] Fix z-index issue causing menubar submenu being
 displayed under some elements

---
 src/assets/app.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/assets/app.css b/src/assets/app.css
index 401a0ca5..c54e3bcc 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -152,3 +152,7 @@ body .p-button {
 .mavedb-help-tooltip-button > .p-button-icon {
   font-size: 0.5rem !important;
 }
+
+.mavedb-toolbar .p-menubar-submenu {
+  z-index: 1100 !important;
+}

From 72dbf41647bc70f0a8117deb0cbb077f2c1a7a8b Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 11:47:09 -0800
Subject: [PATCH 20/40] Adding global styles for headings that are otherwise
 dropped by tailwind

---
 src/assets/app.css                           | 20 ++++++++++++++++++++
 src/components/screens/AboutView.vue         |  4 ++--
 src/components/screens/DashboardView.vue     |  4 ++--
 src/components/screens/DocumentationView.vue |  2 +-
 src/components/screens/SettingsScreen.vue    |  2 +-
 src/components/screens/StatisticsView.vue    | 18 +++++++++---------
 6 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/assets/app.css b/src/assets/app.css
index c54e3bcc..6aa0b18f 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -1,5 +1,25 @@
 @import "tailwindcss";
 
+/* Tailwind removes styling for headings, so adding them back */
+h1 {
+  @apply text-3xl font-bold text-gray-800 mt-6 mb-2;
+}
+h2 {
+  @apply text-2xl font-semibold text-gray-800 mt-5 mb-2;
+}
+h3 {
+  @apply text-xl font-semibold text-gray-800 mt-4 mb-2;
+}
+h4 {
+  @apply text-lg font-semibold text-gray-800 mt-3 mb-2;
+}
+h5 {
+  @apply text-base font-semibold text-gray-800 mt-2 mb-2;
+}
+h6 {
+  @apply text-sm font-semibold text-gray-800 mt-1 mb-2;
+}
+
 * {
   text-rendering: optimizeLegibility;
   font-family: 'Raleway', sans-serif;
diff --git a/src/components/screens/AboutView.vue b/src/components/screens/AboutView.vue
index 14f27b22..ac12d09d 100644
--- a/src/components/screens/AboutView.vue
+++ b/src/components/screens/AboutView.vue
@@ -2,7 +2,7 @@
     <DefaultLayout>
         <section class="p-4">
             <header>
-                <h1 class="text-3xl font-extrabold pb-4">About MaveDB</h1>
+                <h1 class="pb-4">About MaveDB</h1>
             </header>
             <main class="leading-relaxed flex flex-col space-y-4">
                 <p>
@@ -80,7 +80,7 @@
                 </p>
                 <hr style="border:0; border-top:1px solid #ccc; height:0; margin:1.5rem 0;" />
 
-                <h2 class="text-2xl font-extrabold">Citing MaveDB</h2>
+                <h2 class="pb-2">Citing MaveDB</h2>
                 <p>
                 To cite MaveDB, please cite our most recent publication:
                 </p>
diff --git a/src/components/screens/DashboardView.vue b/src/components/screens/DashboardView.vue
index 9a575543..3b7d93e5 100644
--- a/src/components/screens/DashboardView.vue
+++ b/src/components/screens/DashboardView.vue
@@ -9,7 +9,7 @@
       <TabPanels>
         <TabPanel header="Published" value="0">
           <div class="mavedb-search-view">
-            <h2 class="text-xl font-bold py-2">Published Score sets</h2>
+            <h2>Published Score sets</h2>
             <div class="mavedb-search-form">
               <!-- <span class="p-input-icon-left">
                 <i class="pi pi-search" />
@@ -46,7 +46,7 @@
         </TabPanel>
         <TabPanel header="Unpublished" value="1">
           <div class="mavedb-search-view">
-            <h2 class="text-xl font-bold py-2">Unpublished Score sets</h2>
+            <h2 class="pb-2">Unpublished Score sets</h2>
             <ScoreSetTable :data="unpublishedScoreSets" :language="language" :scroll-x="true" :scroll-y="true" />
           </div>
         </TabPanel>
diff --git a/src/components/screens/DocumentationView.vue b/src/components/screens/DocumentationView.vue
index 7bd9c22e..462ab347 100644
--- a/src/components/screens/DocumentationView.vue
+++ b/src/components/screens/DocumentationView.vue
@@ -1,7 +1,7 @@
 <template>
   <DefaultLayout>
     <div class="ml-12 mt-4">
-      <h1 class="text-2xl font-extrabold mb-4">Documentation</h1>
+      <h1 class="mb-4">Documentation</h1>
       <p class="mb-4">Welcome to the documentation page for MaveDB and its associated packages.</p>
       <ul class="ml-10 list-disc">
         <li><a href="/docs/mavedb/index.html">MaveDB documentation homepage</a></li>
diff --git a/src/components/screens/SettingsScreen.vue b/src/components/screens/SettingsScreen.vue
index 93741b6b..579b2542 100644
--- a/src/components/screens/SettingsScreen.vue
+++ b/src/components/screens/SettingsScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <DefaultLayout>
-    <h1 class="font-bold text-4xl mx-2 my-4">Welcome to MaveDB</h1>
+    <h1>Welcome to MaveDB</h1>
     <Card>
       <template #title> Profile </template>
       <template #content>
diff --git a/src/components/screens/StatisticsView.vue b/src/components/screens/StatisticsView.vue
index aec7e49c..bc620023 100644
--- a/src/components/screens/StatisticsView.vue
+++ b/src/components/screens/StatisticsView.vue
@@ -2,7 +2,7 @@
   <DefaultLayout :with-email-prompt="!isEmbedded" :with-toolbar="!isEmbedded">
     <div v-if="loading"><PageLoading></PageLoading></div>
     <div v-else>
-      <h1 style="font-size: 2em; color: #3f51b5">MaveDB Site Statistics</h1>
+      <h1 style="color: #3f51b5">MaveDB Site Statistics</h1>
       <div class="statistics-pane">
         <Card class="statistics-tile-full">
           <template #content>
@@ -16,8 +16,8 @@
               <template #item="slotProps">
                 <div class="border-1 border-gray-300! surface-border border-round m-2 p-3">
                   <div class="count-container">
-                    <h2 class="count-header font-bold text-2xl my-2">{{ slotProps.data.title }}</h2>
-                    <h1 class="emphasis-number font-bold text-6xl my-5">
+                    <h2 class="count-header">{{ slotProps.data.title }}</h2>
+                    <h1 class="emphasis-number my-5">
                       {{ new Intl.NumberFormat('en-US').format(slotProps.data.statistic) }}
                     </h1>
                     <p class="count-footer">{{ slotProps.data.footer }}</p>
@@ -31,7 +31,7 @@
           <template #content>
             <div class="chart-header">
               <div class="chart-header-item">
-                <h2 class="m-0 font-bold text-2xl">Database Growth over Time</h2>
+                <h2 class="m-0">Database Growth over Time</h2>
               </div>
               <div class="chart-header-item" style="margin-right: auto">
                 <SelectButton
@@ -94,9 +94,9 @@
               <template #content>
                 <div class="flowchart-card-element">
                   <span style="text-align: center">
-                    <h1 class="emphasis-number font-bold text-6xl my-5">{{ new Intl.NumberFormat('en-US').format(totalScoreSets) }}</h1>
+                    <h1 class="emphasis-number my-5">{{ new Intl.NumberFormat('en-US').format(totalScoreSets) }}</h1>
                     total score sets
-                    <h1 class="emphasis-number font-bold text-6xl my-5">{{ new Intl.NumberFormat('en-US').format(totalVariants) }}</h1>
+                    <h1 class="emphasis-number my-5">{{ new Intl.NumberFormat('en-US').format(totalVariants) }}</h1>
                     variant effect measurements
                   </span>
                 </div>
@@ -109,9 +109,9 @@
               <template #content>
                 <div class="flowchart-card-element">
                   <span style="text-align: center">
-                    <h1 class="emphasis-number font-bold text-6xl my-5">{{ new Intl.NumberFormat('en-US').format(totalHumanScoreSets) }}</h1>
+                    <h1 class="emphasis-number my-5">{{ new Intl.NumberFormat('en-US').format(totalHumanScoreSets) }}</h1>
                     score sets with human targets
-                    <h1 class="emphasis-number font-bold text-6xl my-5">{{ new Intl.NumberFormat('en-US').format(totalMappedVariants) }}</h1>
+                    <h1 class="emphasis-number my-5">{{ new Intl.NumberFormat('en-US').format(totalMappedVariants) }}</h1>
                     variant effect measurements mapped to the human genome
                   </span>
                 </div>
@@ -125,7 +125,7 @@
                 <div class="flowchart-card-element">
                   <span style="text-align: center">
                     These variant effect measurements map to
-                    <h1 class="emphasis-number font-bold text-6xl my-5">{{ new Intl.NumberFormat('en-US').format(totalMappedTargetGenes) }}</h1>
+                    <h1 class="emphasis-number my-5">{{ new Intl.NumberFormat('en-US').format(totalMappedTargetGenes) }}</h1>
                     distinct human genes
                   </span>
                 </div>

From 80677b5d54d4f2bf359de8e2a28572daa2901afc Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 11:53:00 -0800
Subject: [PATCH 21/40] Applying heading styles to home page

---
 src/components/common/HighlightsView.vue |  4 ++--
 src/components/screens/HomeScreen.vue    | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/common/HighlightsView.vue b/src/components/common/HighlightsView.vue
index 83e24500..de0d5d4f 100644
--- a/src/components/common/HighlightsView.vue
+++ b/src/components/common/HighlightsView.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="$props.model == 'Target'">
     <Card>
-      <template #title>Target Gene Highlights</template>
+      <template #title><h2 class="mt-0">Target Gene Highlights</h2></template>
       <template #content>
         <Tabs v-model:value="activeTabIndex" @update:value="(idx) => { field = targetLeaderboardFields[idx] }">
           <TabList>
@@ -100,7 +100,7 @@
   </div>
   <div v-else-if="$props.model == 'ScoreSet'">
     <Card>
-      <template #title>Score Set Highlights</template>
+      <template #title><h2 class="mt-0">Score Set Highlights</h2></template>
       <template #content>
         <Tabs v-model:value="activeTabIndex" @update:value="(idx) => { field = scoreSetLeaderboardFields[idx] }">
           <TabList>
diff --git a/src/components/screens/HomeScreen.vue b/src/components/screens/HomeScreen.vue
index 5e00379e..99c60a13 100644
--- a/src/components/screens/HomeScreen.vue
+++ b/src/components/screens/HomeScreen.vue
@@ -9,7 +9,7 @@
       </div>
       <div class="col-8 flex">
         <Card class="flex-1">
-          <template #title>About</template>
+          <template #title><h2 class="mt-0">About</h2></template>
           <template #content>
             <p>
               MaveDB is a public repository for datasets from Multiplexed Assays of Variant Effect (MAVEs), such as those
@@ -41,7 +41,7 @@
       </div>
       <div class="col-4 flex flex-column">
         <Card class="flex-1">
-          <template #title>Featured Searches</template>
+          <template #title><h2 class="mt-0">Featured Searches</h2></template>
           <template #content>
             <table>
               <thead>
@@ -72,7 +72,7 @@
           </template>
         </Card>
         <Card class="mt-4">
-          <template #title>Upload Your Data</template>
+          <template #title><h2 class="mt-0">Upload Your Data</h2></template>
           <template #content>
             <Button size="small" @click="addExperiment"
               >Add an experiment</Button
@@ -91,7 +91,7 @@
       </div>
       <div class="col-4">
         <Card>
-          <template #title>News</template>
+          <template #title><h2 class="mt-0">News</h2></template>
           <template #content>
             <ul>
               <li>
@@ -117,7 +117,7 @@
       </div>
       <div class="col-12">
         <Card>
-          <template #title>Citing MaveDB</template>
+          <template #title><h2 class="mt-0">Citing MaveDB</h2></template>
           <template #content>
             <p>
               To cite MaveDB, please cite our most recent publication:

From 811c204a179aa581da70cd3449d5c609808756f2 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 13:06:58 -0800
Subject: [PATCH 22/40] Set global button padding to match style prior to
 PrimeVue 4

---
 src/assets/app.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/assets/app.css b/src/assets/app.css
index 6aa0b18f..7f025011 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -44,6 +44,8 @@ body .p-inputtext {
 /* Override the minimum width from the PrimeVue theme. */
 body .p-button {
   min-width: 10px;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 
 .p-badge {

From b03d556cf7224bd2d05da721efba938e80ab36f0 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 13:31:03 -0800
Subject: [PATCH 23/40] Update buttons on ScoreSetView to use outlined prop
 instead of severity

---
 src/components/screens/ScoreSetView.vue | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index 2e0852e1..1b1a1d8f 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -168,14 +168,14 @@
         </div>
         <div>
           Download files and/or charts
-          <Button severity="outlined" size="small" @click="downloadFile('scores')">Scores</Button>&nbsp;
+          <Button outlined size="small" @click="downloadFile('scores')">Scores</Button>&nbsp;
           <template v-if="hasCounts">
-            <Button severity="outlined" size="small" @click="downloadFile('counts')">Counts</Button>&nbsp;
+            <Button outlined size="small" @click="downloadFile('counts')">Counts</Button>&nbsp;
           </template>
           <template v-if="isMetaDataEmpty != true">
-            <Button severity="outlined" size="small" @click="downloadMetadata">Metadata</Button>&nbsp;
+            <Button outlined size="small" @click="downloadMetadata">Metadata</Button>&nbsp;
           </template>
-          <Button severity="outlined" size="small" @click="downloadMappedVariants()">Mapped Variants</Button>&nbsp;
+          <Button outlined size="small" @click="downloadMappedVariants()">Mapped Variants</Button>&nbsp;
           <div style="display: inline-block; position: relative">
             <SplitButton
               :button-props="{class: 'p-button-outlined p-button-sm'}"
@@ -192,11 +192,11 @@
               <ProgressBar show-value style="height: 1.5em" :value="annotatedDownloadProgress" />
             </div>
           </div>
-          &nbsp; <Button severity="outlined" size="small" @click="histogramExport()">Histogram</Button>&nbsp;
+          &nbsp; <Button outlined size="small" @click="histogramExport()">Histogram</Button>&nbsp;
           <template v-if="heatmapExists">
-            <Button severity="outlined" size="small" @click="heatmapExport()">Heatmap</Button>&nbsp;
+            <Button outlined size="small" @click="heatmapExport()">Heatmap</Button>&nbsp;
           </template>
-          <Button severity="outlined" size="small" @click="showOptions()"> Custom Data </Button>
+          <Button outlined size="small" @click="showOptions()"> Custom Data </Button>
           <Dialog
             v-model:visible="optionsVisible"
             :base-z-index="901"
@@ -214,7 +214,7 @@
               <label :for="scopedId('input-' + dataOption.value)">{{ dataOption.label }}</label>
             </div>
             <p />
-            <Button severity="outlined" size="small" label="Download" @click="downloadMultipleData"
+            <Button label="Download" outlined size="small" @click="downloadMultipleData"
               >Download</Button
             >
             &nbsp;
@@ -226,11 +226,11 @@
 
         <div v-if="requestFromGalaxy == '1'">
           <br />Send files to <a :href="galaxyUrl">Galaxy</a>
-          <Button severity="outlined" size="small" @click="sendToGalaxy('scores')">Scores</Button>&nbsp;
+          <Button outlined size="small" @click="sendToGalaxy('scores')">Scores</Button>&nbsp;
           <template v-if="hasCounts">
-            <Button severity="outlined" size="small" @click="sendToGalaxy('counts')">Counts</Button>&nbsp;
+            <Button outlined size="small" @click="sendToGalaxy('counts')">Counts</Button>&nbsp;
           </template>
-          <Button severity="outlined" size="small" @click="sendToGalaxy('mappedVariants')">Mapped Variants</Button
+          <Button outlined size="small" @click="sendToGalaxy('mappedVariants')">Mapped Variants</Button
           >&nbsp;
         </div>
         <div v-if="item.abstractText">

From 86798c656a1d32b742e0ae129828471959bc4b9c Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 13:32:43 -0800
Subject: [PATCH 24/40] Replace inline styles on ProteinStructureView with
 tailwind classes

---
 src/components/ProteinStructureView.vue | 14 +++++---------
 src/components/ScoreSetHeatmap.vue      |  1 -
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/ProteinStructureView.vue b/src/components/ProteinStructureView.vue
index 09de8600..edd17143 100644
--- a/src/components/ProteinStructureView.vue
+++ b/src/components/ProteinStructureView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="display: flex; flex-flow: column; height: 100%">
-    <span class="p-float-label" style="margin-top: 10px; margin-bottom: 4px">
+  <div class="flex flex-col h-full">
+    <span v-if="alphaFoldData?.length > 1" class="p-float-label m-2">
       <Select
         :id="scopedId('alphafold-id')"
         v-model="selectedAlphaFold"
@@ -13,14 +13,14 @@
       <span class="ml-2">Color by:</span>
       <SelectButton
         v-model="colorBy"
-        class="protein-viz-colorby-button ml-2"
+        class="ml-2"
         option-label="name"
         option-value="value"
         :options="colorByOptions"
       />
     </div>
-    <div v-show="selectedAlphaFold" id="pdbe-molstar-viewer-container" style="flex: 1; position: relative"></div>
-    <div v-if="!selectedAlphaFold" style="flex: 1; position: relative; margin: auto; align-content: center">
+    <div v-show="selectedAlphaFold" id="pdbe-molstar-viewer-container" class="flex-1 relative"></div>
+    <div v-if="!selectedAlphaFold" class="m-auto">
       No AlphaFold entry found
     </div>
   </div>
@@ -304,8 +304,4 @@ export default {
 .msp-plugin .msp-layout-standard {
   border: 0;
 }
-.protein-viz-colorby-button .p-button {
-  padding: 2px !important;
-  font-size: 0.8em;
-}
 </style>
diff --git a/src/components/ScoreSetHeatmap.vue b/src/components/ScoreSetHeatmap.vue
index 6bb0f1ea..be625fab 100644
--- a/src/components/ScoreSetHeatmap.vue
+++ b/src/components/ScoreSetHeatmap.vue
@@ -39,7 +39,6 @@
         <Button
           v-if="showProteinStructureButton && sequenceType == 'protein'"
           label="View protein structure"
-          severity="info"
           @click="$emit('onDidClickShowProteinStructure')"
         />
       </div>

From 9c110c18673bd4bd6011bca4753991518be0b48d Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 14:22:15 -0800
Subject: [PATCH 25/40] Update unordered list elements to use tailwind styles

---
 src/components/screens/CollectionView.vue     | 22 +++++++++----------
 src/components/screens/ExperimentCreator.vue  | 11 ++--------
 src/components/screens/ExperimentSetView.vue  |  2 +-
 src/components/screens/ExperimentView.vue     |  8 +++----
 src/components/screens/HomeScreen.vue         | 15 +++++--------
 src/components/screens/ScoreSetCreator.vue    |  4 ++--
 src/components/screens/ScoreSetView.vue       |  4 ++--
 .../screens/SearchVariantsScreen.vue          |  2 +-
 .../screens/WizardCompletionView.vue          |  5 +----
 9 files changed, 29 insertions(+), 44 deletions(-)

diff --git a/src/components/screens/CollectionView.vue b/src/components/screens/CollectionView.vue
index 177461cf..adff52ca 100644
--- a/src/components/screens/CollectionView.vue
+++ b/src/components/screens/CollectionView.vue
@@ -119,7 +119,7 @@
             />
           </div>
         </div>
-        <ul v-if="item.scoreSetUrns.length != 0">
+        <ul v-if="item.scoreSetUrns.length != 0" class="list-disc ml-5">
           <li v-for="scoreSetUrn in item.scoreSetUrns" :key="scoreSetUrn">
             <EntityLink display="title" entity-type="scoreSet" :urn="scoreSetUrn" />
           </li>
@@ -136,7 +136,7 @@
             />
           </div>
         </div>
-        <ul v-if="item.experimentUrns.length != 0">
+        <ul v-if="item.experimentUrns.length != 0" class="list-disc ml-5">
           <li v-for="experimentUrn in item.experimentUrns" :key="experimentUrn">
             <EntityLink display="title" entity-type="experiment" :urn="experimentUrn" />
           </li>
@@ -153,37 +153,37 @@
           class="mave-collection-contributors-subsection"
         >
           <div class="mave-collection-contributors-subsection-title">Admins</div>
-          <ul v-if="item.admins.length > 0">
-            <div v-for="admin in item.admins" :key="admin">
+          <ul v-if="item.admins.length > 0" class="ml-5">
+            <li v-for="admin in item.admins" :key="admin">
               <a class="flex items-center gap-1" :href="`https://orcid.org/${admin.orcidId}`" target="_blank">
                 <img alt="ORCIDiD" src="@/assets/ORCIDiD_icon.png" />
                 {{ admin.firstName }} {{ admin.lastName }}
               </a>
-            </div>
+            </li>
           </ul>
           <p v-else>No admins</p>
         </div>
         <div v-if="userIsAuthorized.add_role" class="mave-collection-contributors-subsection">
           <div class="mave-collection-contributors-subsection-title">Editors</div>
-          <ul v-if="item.editors.length > 0">
-            <div v-for="editor in item.editors" :key="editor">
+          <ul v-if="item.editors.length > 0" class="ml-5">
+            <li v-for="editor in item.editors" :key="editor">
               <a class="flex items-center gap-1" :href="`https://orcid.org/${editor.orcidId}`" target="_blank">
                 <img alt="ORCIDiD" src="@/assets/ORCIDiD_icon.png" />
                 {{ editor.firstName }} {{ editor.lastName }}
               </a>
-            </div>
+            </li>
           </ul>
           <p v-else>No editors</p>
         </div>
         <div v-if="userIsAuthorized.add_role" class="mave-collection-contributors-subsection">
           <div class="mave-collection-contributors-subsection-title">Viewers</div>
-          <ul v-if="item.viewers.length > 0">
-            <div v-for="viewer in item.viewers" :key="viewer">
+          <ul v-if="item.viewers.length > 0" class="ml-5">
+            <li v-for="viewer in item.viewers" :key="viewer">
               <a class="flex items-center gap-1" :href="`https://orcid.org/${viewer.orcidId}`" target="_blank">
                 <img alt="ORCIDiD" src="@/assets/ORCIDiD_icon.png" />
                 {{ viewer.firstName }} {{ viewer.lastName }}
               </a>
-            </div>
+            </li>
           </ul>
           <p v-else>No viewers</p>
         </div>
diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index c44566fe..f47b30fc 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -125,7 +125,7 @@
                       May be formatted using
                       <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>. Should
                       include:
-                      <ul>
+                      <ul class="list-disc ml-5">
                         <li>variant library construction methods,</li>
                         <li>description of the functional assay, including model system and selection type,</li>
                         <li>sequencing strategy and sequencing technology, and</li>
@@ -298,7 +298,7 @@
                       </label>
                       <div class="mavedb-help-small">
                         MaveDB currently supports accession numbers for:
-                        <ul>
+                        <ul class="list-disc ml-5">
                           <li>
                             <a href="https://www.ebi.ac.uk/biostudies/arrayexpress" target="_blank">ArrayExpress</a>
                           </li>
@@ -1505,11 +1505,4 @@ export default {
 .keyword-description-input, .keyword-dropdown {
   width: 450px;
 }
-
-/* Fix list bullets in help text */
-.mavedb-help-small ul {
-  list-style-type: disc;
-  list-style-position: inside;
-  padding-left: 1rem;
-}
 </style>
diff --git a/src/components/screens/ExperimentSetView.vue b/src/components/screens/ExperimentSetView.vue
index 0be6131f..9dfa3c23 100644
--- a/src/components/screens/ExperimentSetView.vue
+++ b/src/components/screens/ExperimentSetView.vue
@@ -18,7 +18,7 @@
         <div v-if="item.publishedDate">Published {{ formatDate(item.publishedDate) }}</div>
         <div class="mave-score-set-section-title">Experiments</div>
         <div v-if="item.experiments.length != 0">
-          <ul style="list-style-type: square">
+          <ul class="list-[square] ml-5">
             <li v-for="ex in item.experiments" :key="ex">
               <router-link :to="{name: 'experiment', params: {urn: ex.urn}}">{{ ex.urn }}</router-link>
               <div>
diff --git a/src/components/screens/ExperimentView.vue b/src/components/screens/ExperimentView.vue
index de512fda..600d6bd6 100644
--- a/src/components/screens/ExperimentView.vue
+++ b/src/components/screens/ExperimentView.vue
@@ -96,7 +96,7 @@
         <div class="mave-score-set-section-title">Primary References</div>
         <div v-if="item.primaryPublicationIdentifiers.length > 0">
           <div v-for="publication in item.primaryPublicationIdentifiers" :key="publication">
-            <ul class="pl-4" style="list-style-type: square">
+            <ul class="pl-4 list-[square]">
               <!-- eslint-disable-next-line vue/no-v-html -->
               <li v-html="markdownToHtml(publication.referenceHtml)"></li>
               <div>
@@ -116,7 +116,7 @@
         <div class="mave-score-set-section-title">Secondary References</div>
         <div v-if="item.secondaryPublicationIdentifiers.length > 0">
           <div v-for="publication in item.secondaryPublicationIdentifiers" :key="publication">
-            <ul class="pl-4" style="list-style-type: square">
+            <ul class="pl-4 list-[square]">
               <!-- eslint-disable-next-line vue/no-v-html -->
               <li v-html="markdownToHtml(publication.referenceHtml)"></li>
               <div>
@@ -260,7 +260,7 @@
         <div class="mave-score-set-section-title">External identifier</div>
         <strong>DOI: </strong>
         <div v-if="item.doiIdentifiers.length != 0">
-          <ul class="pl-4" style="list-style-type: square">
+          <ul class="pl-4 list-[square]">
             <li v-for="(doi, i) of item.doiIdentifiers" :key="i">
               <a :href="`${doi.url}`" target="blank">{{ doi.identifier }}</a>
             </li>
@@ -269,7 +269,7 @@
         <template v-else>No associated DOIs<br /></template>
         <strong>Raw reads: </strong>
         <div v-if="item.rawReadIdentifiers.length != 0">
-          <ul class="pl-4" style="list-style-type: square">
+          <ul class="pl-4 list-[square]">
             <li v-for="(read, i) of item.rawReadIdentifiers" :key="i">
               <a :href="`${read.url}`" target="blank">{{ read.identifier }}</a>
             </li>
diff --git a/src/components/screens/HomeScreen.vue b/src/components/screens/HomeScreen.vue
index 99c60a13..29d86891 100644
--- a/src/components/screens/HomeScreen.vue
+++ b/src/components/screens/HomeScreen.vue
@@ -53,14 +53,14 @@
               <tbody>
                 <tr>
                   <td>
-                    <ul>
+                    <ul class="ml-5 list-disc">
                       <li><router-link :to="{name: 'search', query: {search: 'Homo sapiens'}}">Homo sapiens</router-link></li>
                       <li><router-link :to="{name: 'search', query: {search: 'Mus musculus'}}">Mus musculus</router-link></li>
                       <li><router-link :to="{name: 'search', query: {search: 'Saccharomyces cerevisiae S288C'}}">Saccharomyces cerevisiae S288C</router-link></li>
                     </ul>
                   </td>
                   <td>
-                    <ul>
+                    <ul class="ml-5 list-disc">
                       <li><router-link :to="{name: 'search', query: {search: 'HSP90'}}">HSP90</router-link></li>
                       <li><router-link :to="{name: 'search', query: {search: 'KCNQ4'}}">KCNQ4</router-link></li>
                       <li><router-link :to="{name: 'search', query: {search: 'TEM-1 β-lactamase'}}">TEM-1 β-lactamase</router-link></li>
@@ -93,13 +93,13 @@
         <Card>
           <template #title><h2 class="mt-0">News</h2></template>
           <template #content>
-            <ul>
+            <ul class="ml-2 list-disc space-y-4">
               <li>
                 <p>Tracks for many score sets are now available on the UCSC Genome Browser.</p>
-                <p>
+                <p class="mt-2">
                   Example:
                   <a href="https://genome.ucsc.edu/cgi-bin/hgTracks?db=hg38&position=chr17:43051063-43051117&hubUrl=https://public.gi.ucsc.edu/~cline/mavedb/hub/hub.txt&Variant_Effect_Maps_hideKids=1&BRCA1_00000097-s-1=dense" target="_blank">
-                    <img alt="UCSC Genome Browser" src="@/assets/logo-ucsc-genome-browser.png" style="height: 20px;" />
+                    <img alt="UCSC Genome Browser" class="inline h-5" src="@/assets/logo-ucsc-genome-browser.png" />
                     UCSC Genome Browser
                   </a>
                   track for
@@ -188,11 +188,6 @@ td, th {
   vertical-align: top;
 }
 
-ul {
-  padding-left: 1em;
-  list-style-type: disc;
-}
-
 .mave-hgvs-example {
   background: #eee;
   padding: 0 3px;
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 5b843777..63b269b7 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -75,7 +75,7 @@
                       <div class="mavedb-help-small">
                         Meta-analyses are score sets derived from data in other score sets that were created by you or
                         other users. For example:
-                        <ul>
+                        <ul class="list-disc ml-5">
                           <li>a score set that combines data from two other score sets to produce new scores, or</li>
                           <li>a score set that adds imputed missing values to the scores in another score set.</li>
                         </ul>
@@ -309,7 +309,7 @@
                       May be formatted using
                       <a href="https://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown</a>. Should
                       include:
-                      <ul>
+                      <ul class="list-disc ml-5">
                         <template v-if="isMetaAnalysis">
                           <li>
                             a description of how the scores in this score set were generated from the data in the
diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index 1b1a1d8f..7ff20451 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -305,7 +305,7 @@
         <div class="mavedb-score-set-section-title">External identifier</div>
         <strong>DOI: </strong>
         <div v-if="item.doiIdentifiers.length != 0">
-          <ul style="list-style-type: square">
+          <ul class="list-[square]">
             <li v-for="(doi, i) of item.doiIdentifiers" :key="i">
               <a :href="`${doi.url}`" target="blank">{{ doi.identifier }}</a>
             </li>
@@ -314,7 +314,7 @@
         <template v-else>No associated DOIs<br /></template>
         <strong>Raw reads: </strong>
         <div v-if="item.experiment.rawReadIdentifiers.length != 0">
-          <ul style="list-style-type: square">
+          <ul class="list-[square]">
             <li v-for="(read, i) of item.experiment.rawReadIdentifiers" :key="i">
               <a :href="`${read.url}`" target="blank">{{ read.identifier }}</a>
             </li>
diff --git a/src/components/screens/SearchVariantsScreen.vue b/src/components/screens/SearchVariantsScreen.vue
index a76970cf..f4bcba1d 100644
--- a/src/components/screens/SearchVariantsScreen.vue
+++ b/src/components/screens/SearchVariantsScreen.vue
@@ -65,7 +65,7 @@
         <div v-if="searchSuggestionsVisible" class="mavedb-search-suggestions">
           <p>
             Examples of supported searches:
-            <ul>
+            <ul class="ml-5 list-disc">
               <li v-for="option in searchTypeOptions" :key="option.code">
                 {{ option.name }}
                 <template v-for="(example, index) in option.examples" :key="example">
diff --git a/src/components/screens/WizardCompletionView.vue b/src/components/screens/WizardCompletionView.vue
index 54b758e8..6da0febc 100644
--- a/src/components/screens/WizardCompletionView.vue
+++ b/src/components/screens/WizardCompletionView.vue
@@ -21,7 +21,7 @@
           <router-link :to="{name: 'createExperiment'}">create a score set in a new experiment</router-link>.
         </div>
         <h3>Attention</h3>
-        <ul class="attention-list">
+        <ul class="list-disc ml-5">
           <li>
             Your data is currently unpublished and viewable only to you. You can add other users as contributors without
             publishing it, or add the dataset to a collection and give users permission to view the collection.
@@ -85,9 +85,6 @@ export default {
 </script>
 
 <style scoped>
-.attention-list {
-  margin-top: 0.25rem;
-}
 .mave-wizard-completion {
   padding: 20px;
 }

From 8b8cc2f80c473f3be8024c7370306fdf50c236bb Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 15:21:43 -0800
Subject: [PATCH 26/40] Replace span.p-float-label elements with Primevue 4
 FloatLabels in ScoreSetCreator

---
 src/components/screens/ScoreSetCreator.vue | 182 ++++++++++-----------
 1 file changed, 91 insertions(+), 91 deletions(-)

diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 63b269b7..151c3026 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -103,7 +103,7 @@
                     </div>
                     <div class="mavedb-wizard-content">
                       <div style="position: relative">
-                        <span class="p-float-label">
+                        <FloatLabel variant="on">
                           <Select
                             :id="scopedId('input-experiment')"
                             ref="experimentInput"
@@ -123,7 +123,7 @@
                             </template>
                           </Select>
                           <label :for="scopedId('input-experiment')">Experiment</label>
-                        </span>
+                        </FloatLabel>
                         <span v-if="validationErrors.experiment" class="mave-field-error">{{
                           validationErrors.experiment
                         }}</span>
@@ -139,7 +139,7 @@
                     </div>
                     <div class="mavedb-wizard-content">
                       <div class="field">
-                        <span class="p-float-label">
+                        <FloatLabel variant="on">
                           <AutoComplete
                             :id="scopedId('input-supersededScoreSet')"
                             ref="supersededScoreSetInput"
@@ -160,7 +160,7 @@
                             </template>
                           </AutoComplete>
                           <label :for="scopedId('input-supersededScoreSet')">Supersedes</label>
-                        </span>
+                        </FloatLabel>
                         <span v-if="validationErrors.supersededScoreSetUrn" class="mave-field-error">{{
                           validationErrors.supersededScoreSetUrn
                         }}</span>
@@ -177,7 +177,7 @@
                     </div>
                     <div class="mavedb-wizard-content">
                       <div class="field">
-                        <span class="p-float-label">
+                        <FloatLabel variant="on">
                           <AutoComplete
                             :id="scopedId('input-metaAnalyzesScoreSets')"
                             ref="metaAnalyzesScoreSetsInput"
@@ -193,7 +193,7 @@
                             </template>
                           </AutoComplete>
                           <label :for="scopedId('input-metaAnalyzesScoreSets')">Meta-analysis for</label>
-                        </span>
+                        </FloatLabel>
                         <span v-if="validationErrors.metaAnalyzesScoreSetUrns" class="mave-field-error">{{
                           validationErrors.metaAnalyzesScoreSetUrns
                         }}</span>
@@ -236,10 +236,10 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <InputText :id="scopedId('input-title')" v-model="title" />
                       <label :for="scopedId('input-title')">Title</label>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors.title" class="mave-field-error">{{ validationErrors.title }}</span>
                   </div>
                 </div>
@@ -255,10 +255,10 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <Textarea :id="scopedId('input-shortDescription')" v-model="shortDescription" rows="4" />
                       <label :for="scopedId('input-shortDescription')">Short description</label>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors.shortDescription" class="mave-field-error">{{
                       validationErrors.shortDescription
                     }}</span>
@@ -283,10 +283,10 @@
                       </TabList>
                       <TabPanels>
                         <TabPanel header="Edit" value="0">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="10" />
                             <label :for="scopedId('input-abstractText')">Abstract</label>
-                          </span>
+                          </FloatLabel>
                         </TabPanel>
                         <TabPanel header="Preview" value="1">
                           <!-- eslint-disable-next-line vue/no-v-html -->
@@ -338,10 +338,10 @@
                       </TabList>
                       <TabPanels>
                         <TabPanel header="Edit" value="0">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="10" />
                             <label :for="scopedId('input-methodText')">Methods</label>
-                          </span>
+                          </FloatLabel>
                         </TabPanel>
                         <TabPanel header="Preview" value="1">
                           <!-- eslint-disable-next-line vue/no-v-html -->
@@ -368,7 +368,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <Select
                           :id="scopedId('input-targetLicenseId')"
                           v-model="licenseId"
@@ -378,7 +378,7 @@
                           style="min-width: 500px"
                         />
                         <label :for="scopedId('input-targetLicenseId')">License</label>
-                      </span>
+                      </FloatLabel>
                       <Message
                         v-if="licenseId && licenses && licenses.find((l) => l.id == licenseId)?.shortName != 'CC0'"
                         closable
@@ -416,10 +416,10 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <Textarea :id="scopedId('input-dataUsagePolicy')" v-model="dataUsagePolicy" rows="4" />
                         <label :for="scopedId('input-dataUsagePolicy')">Data usage guidelines</label>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.dataUsagePolicy" class="mave-field-error">{{
                         validationErrors.dataUsagePolicy
                       }}</span>
@@ -434,7 +434,7 @@
                       <div class="mavedb-help-small">Examples: 1111-1111-1111-1111</div>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <AutoComplete
                           :id="scopedId('input-contributors')"
                           v-model="contributors"
@@ -448,7 +448,7 @@
                           @update:model-value="newContributorsAdded"
                         />
                         <label :for="scopedId('input-contributors')">Contributors</label>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.contributors" class="mave-field-error">{{
                         validationErrors.contributors
                       }}</span>
@@ -465,7 +465,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <AutoComplete
                           :id="scopedId('input-doiIdentifiers')"
                           v-model="doiIdentifiers"
@@ -478,7 +478,7 @@
                           @update:model-value="newDoiIdentifiersAdded"
                         />
                         <label :for="scopedId('input-doiIdentifiers')">DOI identifiers</label>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
                         validationErrors.doiIdentifiers
                       }}</span>
@@ -497,7 +497,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                          <AutoComplete
                           :id="scopedId('input-publicationIdentifiers')"
                           v-model="publicationIdentifiers"
@@ -519,7 +519,7 @@
                           </template>
                         </AutoComplete>
                         <label :for="scopedId('input-publicationIdentifiers')">Publication identifiers</label>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.publicationIdentifiers" class="mave-field-error">{{
                         validationErrors.publicationIdentifiers
                       }}</span>
@@ -530,7 +530,7 @@
                       <label> Of the above publications, the primary publication that describes the score set. </label>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <Multiselect
                           :id="scopedId('input-primaryPublicationIdentifiers')"
                           ref="primaryPublicationIdentifiersInput"
@@ -552,7 +552,7 @@
                           </template>
                         </Multiselect>
                         <label :for="scopedId('input-primaryPublicationIdentifiers')">Primary publication</label>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.primaryPublicationIdentifiers" class="mave-field-error">{{
                         validationErrors.primaryPublicationIdentifiers
                       }}</span>
@@ -563,7 +563,7 @@
                       <label> Any additional metadata about the score set, as a JSON file. </label>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <FileUpload
                           :id="scopedId('input-extraMetadataFile')"
                           accept="application/json"
@@ -581,7 +581,7 @@
                             <p>Upload a JSON file here.</p>
                           </template>
                         </FileUpload>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.extraMetadata" class="mave-field-error">{{
                         validationErrors.extraMetadata
                       }}</span>
@@ -685,7 +685,7 @@
                     <label>How many targets will be included with this score set?</label>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <InputNumber
                         :id="scopedId(`input-numTargets`)"
                         v-model="numTargets"
@@ -695,7 +695,7 @@
                         suffix=" targets"
                       />
                       <label :for="scopedId(`input-numTargets`)">Targets</label>
-                    </span>
+                    </FloatLabel>
                   </div>
                 </div>
               </div>
@@ -725,7 +725,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <AutoComplete
                         :id="scopedId('input-existingTargetGene')"
                         ref="existingTargetGeneInput"
@@ -752,7 +752,7 @@
                         </template>
                       </AutoComplete>
                       <label :for="scopedId('input-existingTargetGene')">Copy from an existing target</label>
-                    </span>
+                    </FloatLabel>
                   </div>
                 </div>
                 <div class="mavedb-wizard-row">
@@ -765,14 +765,14 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <InputText
                         :id="scopedId('input-targetGeneName')"
                         v-model="createdTargetGenes[targetIdx].targetGene.name"
                         style="width: 100%"
                       />
                       <label :for="scopedId('input-targetGeneName')">Target name</label>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors[`targetGene.${targetIdx}.name`]" class="mave-field-error">{{
                       validationErrors[`targetGene.${targetIdx}.name`]
                     }}</span>
@@ -790,14 +790,14 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <InputText
                           :id="scopedId('input-targetGeneLabel')"
                           v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.label"
                           style="width: 100%"
                         />
                         <label :for="scopedId('input-targetGeneLabel')">Target label</label>
-                      </span>
+                      </FloatLabel>
                       <span
                         v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.label`]"
                         class="mave-field-error"
@@ -811,15 +811,13 @@
                       <label :id="scopedId('input-targetGeneCategory')">The functional category of the target</label>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
-                        <span class="p-float-label">
-                          <SelectButton
-                            :id="scopedId('input-targetGeneCategory')"
-                            v-model="createdTargetGenes[targetIdx].targetGene.category"
-                            :option-label="textForTargetGeneCategory"
-                            :options="targetGeneCategories"
-                          />
-                        </span>
+                      <span>
+                        <SelectButton
+                          :id="scopedId('input-targetGeneCategory')"
+                          v-model="createdTargetGenes[targetIdx].targetGene.category"
+                          :option-label="textForTargetGeneCategory"
+                          :options="targetGeneCategories"
+                        />
                       </span>
                       <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{
                         validationErrors[`targetGene.${targetIdx}.category`]
@@ -856,23 +854,25 @@
                         v-if="createdTargetGenes[targetIdx].linkedAccessions[dbName]"
                         class="mavedb-wizard-subcontent field-columns"
                       >
-                        <div class="p-float-label field-column">
-                          <AutoComplete
-                            :id="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
-                            v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].identifier"
-                            field="identifier"
-                            :force-selection="false"
-                            option-label="identifier"
-                            style="width: 100%"
-                            :suggestions="targetGeneIdentifierSuggestionsList[dbName]"
-                            @complete="searchTargetGeneIdentifiers(dbName, $event)"
-                            @update:model-value="externalTargetIdentifierChanged(dbName, targetIdx, $event)"
-                          />
-                          <label :for="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
-                            >{{ dbName }} identifier</label
-                          >
+                        <div class="field-column">
+                          <FloatLabel variant="on">
+                            <AutoComplete
+                              :id="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
+                              v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].identifier"
+                              field="identifier"
+                              :force-selection="false"
+                              option-label="identifier"
+                              style="width: 100%"
+                              :suggestions="targetGeneIdentifierSuggestionsList[dbName]"
+                              @complete="searchTargetGeneIdentifiers(dbName, $event)"
+                              @update:model-value="externalTargetIdentifierChanged(dbName, targetIdx, $event)"
+                            />
+                            <label :for="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
+                              >{{ dbName }} identifier</label
+                            >
+                          </FloatLabel>
                         </div>
-                        <span class="p-float-label">
+                        <FloatLabel variant="on">
                           <InputNumber
                             :id="scopedId(`input-${dbName.toLowerCase()}Offset`)"
                             v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].offset"
@@ -882,7 +882,7 @@
                             suffix=" bp"
                           />
                           <label :for="scopedId(`input-${dbName.toLowerCase()}Offset`)">Offset</label>
-                        </span>
+                        </FloatLabel>
                       </div>
                       <span
                         v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}`]"
@@ -916,7 +916,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <AutoComplete
                           :id="scopedId('input-targetGeneTaxonomyLabel')"
                           ref="taxonomyInput"
@@ -940,7 +940,7 @@
                           </template>
                         </AutoComplete>
                         <label :for="scopedId('input-targetGeneTaxonomyLabel')">Taxonomy</label>
-                      </span>
+                      </FloatLabel>
                       <span
                         v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.taxonomy`]"
                         class="mave-field-error"
@@ -953,13 +953,13 @@
                       <label :id="scopedId('input-targetGeneSequenceTypeLabel')">The sequence type of the target</label>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <SelectButton
                           :id="scopedId('input-targetGeneSequenceType')"
                           v-model="createdTargetGenes[targetIdx].targetGene.targetSequence.sequenceType"
                           :options="sequenceTypes"
                         />
-                      </span>
+                      </FloatLabel>
                       <span
                         v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.sequenceType`]"
                         class="mave-field-error"
@@ -976,7 +976,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <FileUpload
                           :id="scopedId('input-targetGeneSequenceFileLabel')"
                           ref="sequenceFileUpload"
@@ -1014,7 +1014,7 @@
                             </div>
                           </template>
                         </FileUpload>
-                      </span>
+                      </FloatLabel>
                       <span
                         v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.sequence`]"
                         class="mave-field-error"
@@ -1054,7 +1054,7 @@
                       <label :id="scopedId('input-targetGeneAssemblyLabel')">The assembly for this accession</label>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <!-- Assembly is the reference genome property in coordinate cases -->
                         <Select
                           v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.assembly"
@@ -1064,7 +1064,7 @@
                           @change="refreshAccessionOptions(targetIdx)"
                         />
                         <label :for="scopedId('input-targetGeneAssemblyLabel')">Assembly</label>
-                      </span>
+                      </FloatLabel>
                       <span
                         v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.assembly`]"
                         class="mave-field-error"
@@ -1077,7 +1077,7 @@
                       <label :id="scopedId('input-targetGeneGeneNameLabel')">The gene name for this accession</label>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <Select
                           :id="scopedId('input-targetGeneGeneNameLabel')"
                           v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.gene"
@@ -1089,7 +1089,7 @@
                           @change="autofillGeneName($event, targetIdx)"
                         />
                         <label :for="scopedId('input-targetGeneGeneNameLabel')">HGNC Name</label>
-                      </span>
+                      </FloatLabel>
                       <span
                         v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.gene`]"
                         class="mave-field-error"
@@ -1111,7 +1111,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <AutoComplete
                           :id="scopedId('input-targetGeneAccessionLabel')"
                           v-model="createdTargetGenes[targetIdx].targetGene.targetAccession.accession"
@@ -1122,7 +1122,7 @@
                           @complete="fetchTargetAccessions($event)"
                         />
                         <label :for="scopedId('input-targetGeneAccessionLabel')"> Accession Identifier </label>
-                      </span>
+                      </FloatLabel>
                       <div v-if="showSwitchToProteinAccessionButton(targetIdx)" class="mavedb-wizard-subcontent">
                         <Button
                           icon="pi pi-arrows-h"
@@ -1143,15 +1143,13 @@
                       <label :id="scopedId('input-targetGeneCategoryLabel')">The genetic category of the target</label>
                     </div>
                     <div class="mavedb-wizard-content">
-                      <span class="p-float-label">
-                        <span class="p-float-label">
-                          <SelectButton
-                            :id="scopedId('input-targetGeneCategoryLabel')"
-                            v-model="createdTargetGenes[targetIdx].targetGene.category"
-                            :option-label="textForTargetGeneCategory"
-                            :options="targetGeneCategories"
-                          />
-                        </span>
+                      <span>
+                        <SelectButton
+                          :id="scopedId('input-targetGeneCategoryLabel')"
+                          v-model="createdTargetGenes[targetIdx].targetGene.category"
+                          :option-label="textForTargetGeneCategory"
+                          :options="targetGeneCategories"
+                        />
                       </span>
                       <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{
                         validationErrors[`targetGene.${targetIdx}.category`]
@@ -1253,7 +1251,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <FileUpload
                         :id="scopedId('input-scoresFile')"
                         ref="scoresFileUpload"
@@ -1270,7 +1268,7 @@
                           <p>Drop a file here.</p>
                         </template>
                       </FileUpload>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors.scoresFile" class="mave-field-error">{{
                       validationErrors.scoresFile
                     }}</span>
@@ -1286,7 +1284,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <FileUpload
                         :id="scopedId('input-scoreColumnsMetadataFile')"
                         ref="scoreColumnsMetadataFileUpload"
@@ -1306,7 +1304,7 @@
                           <p>Drop a file here.</p>
                         </template>
                       </FileUpload>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors.scoreColumnsMetadataFile" class="mave-field-error">{{
                       validationErrors.scoreColumnsMetadataFile
                     }}</span>
@@ -1322,7 +1320,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <FileUpload
                         :id="scopedId('input-countsFile')"
                         ref="countsFileUpload"
@@ -1339,7 +1337,7 @@
                           <p>Drop a file here.</p>
                         </template>
                       </FileUpload>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors.countsFile" class="mave-field-error">{{
                       validationErrors.countsFile
                     }}</span>
@@ -1355,7 +1353,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <FileUpload
                         :id="scopedId('input-countColumnsMetadataFile')"
                         ref="countColumnsMetadataFileUpload"
@@ -1375,7 +1373,7 @@
                           <p>Drop a file here.</p>
                         </template>
                       </FileUpload>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors.countColumnsMetadataFile" class="mave-field-error">{{
                       validationErrors.countColumnsMetadataFile
                     }}</span>
@@ -1412,6 +1410,7 @@ import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Select from 'primevue/select'
 import FileUpload from 'primevue/fileupload'
+import FloatLabel from 'primevue/floatlabel'
 import InputNumber from 'primevue/inputnumber'
 import ToggleSwitch from 'primevue/toggleswitch'
 import InputText from 'primevue/inputtext'
@@ -1489,6 +1488,7 @@ export default {
     Select,
     EmailPrompt,
     FileUpload,
+    FloatLabel,
     InputNumber,
     ToggleSwitch,
     InputText,

From a2a9a131023286c8d39f95cb36ab2e4771eb6a05 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 15:55:53 -0800
Subject: [PATCH 27/40] Replace span.p-float-label elements with Primevue 4
 FloatLabels in ScoreSetEditor

---
 src/components/screens/ScoreSetEditor.vue | 130 +++++++++++-----------
 1 file changed, 66 insertions(+), 64 deletions(-)

diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index 5cc03687..45e47c0c 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -28,7 +28,7 @@
               </div>
               <div v-else>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <Select
                       :id="scopedId('input-experiment')"
                       v-model="experiment"
@@ -38,7 +38,7 @@
                       @change="populateExperimentMetadata"
                     />
                     <label :for="scopedId('input-experiment')">Experiment</label>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.experiment" class="mave-field-error">{{
                     validationErrors.experiment
                   }}</span>
@@ -62,17 +62,17 @@
             <template #title>Score set information</template>
             <template #content>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                   <InputText :id="scopedId('input-title')" v-model="title" />
                   <label :for="scopedId('input-title')">Title</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.title" class="mave-field-error">{{ validationErrors.title }}</span>
               </div>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                   <Textarea :id="scopedId('input-shortDescription')" v-model="shortDescription" rows="4" />
                   <label :for="scopedId('input-shortDescription')">Short description</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.shortDescription" class="mave-field-error">{{
                   validationErrors.shortDescription
                 }}</span>
@@ -85,10 +85,10 @@
                   </TabList>
                   <TabPanels>
                     <TabPanel header="Edit" value="0">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="4" />
                         <label :for="scopedId('input-abstractText')">Abstract</label>
-                      </span>
+                      </FloatLabel>
                     </TabPanel>
                     <TabPanel header="Preview" value="1">
                       <!-- eslint-disable-next-line vue/no-v-html -->
@@ -108,10 +108,10 @@
                   </TabList>
                   <TabPanels>
                     <TabPanel header="Edit" value="0">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="4" />
                         <label :for="scopedId('input-methodText')">Methods</label>
-                      </span>
+                      </FloatLabel>
                     </TabPanel>
                     <TabPanel header="Preview" value="1">
                       <!-- eslint-disable-next-line vue/no-v-html -->
@@ -124,7 +124,7 @@
                 }}</span>
               </div>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                   <AutoComplete
                     :id="scopedId('input-contributors')"
                     v-model="contributors"
@@ -138,14 +138,14 @@
                     @update:model-value="newContributorsAdded"
                   />
                   <label :for="scopedId('input-contributors')">Contributors</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.contributors" class="mave-field-error">{{
                   validationErrors.contributors
                 }}</span>
               </div>
               <div>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <Select
                       :id="scopedId('input-targetLicenseId')"
                       v-model="licenseId"
@@ -155,7 +155,7 @@
                       style="width: 100%"
                     />
                     <label :for="scopedId('input-targetLicenseId')">License</label>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.licenseId" class="mave-field-error">{{
                     validationErrors.licenseId
                   }}</span>
@@ -174,7 +174,7 @@
                   </Message>
                 </div>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <AutoComplete
                       :id="scopedId('input-doiIdentifiers')"
                       v-model="doiIdentifiers"
@@ -187,21 +187,21 @@
                       @update:model-value="newDoiIdentifiersAdded"
                     />
                     <label :for="scopedId('input-doiIdentifiers')">DOIs</label>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
                     validationErrors.doiIdentifiers
                   }}</span>
                 </div>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <AutoComplete
                       :id="scopedId('input-publicationIdentifiers')"
                       ref="publicationIdentifiersInput"
                       v-model="publicationIdentifiers"
-                      class="p-inputwrapper-filled"
                       :multiple="true"
                       :option-label="(x) => `${x.identifier}: ${truncatePublicationTitle(x.title)}`"
                       :suggestions="publicationIdentifierSuggestionsList"
+                      @blur="clearAutoCompleteInput"
                       @complete="searchPublicationIdentifiers"
                       @keyup.escape="clearPublicationIdentifierSearch"
                       @option-select="acceptNewPublicationIdentifier"
@@ -216,13 +216,13 @@
                       </template>
                     </AutoComplete>
                     <label :for="scopedId('input-publicationIdentifiers')">Publication identifiers</label>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.publicationIdentifiers" class="mave-field-error">{{
                     validationErrors.publicationIdentifiers
                   }}</span>
                 </div>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <Multiselect
                       :id="scopedId('input-primaryPublicationIdentifiers')"
                       v-model="primaryPublicationIdentifiers"
@@ -243,7 +243,7 @@
                       </template>
                     </Multiselect>
                     <label :for="scopedId('input-primaryPublicationIdentifiers')">Primary publication</label>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.primaryPublicationIdentifiers" class="mave-field-error">{{
                     validationErrors.primaryPublicationIdentifiers
                   }}</span>
@@ -253,7 +253,7 @@
                   are still relevant to this score set.
                 </Message>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <div v-if="extraMetadata">
                       <span class="mr-2"> Extra metadata</span>
                       <i class="pi pi-check mr-3"></i>
@@ -291,16 +291,16 @@
                         <p>Drop a JSON file here.</p>
                       </template>
                     </FileUpload>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.extraMetadata" class="mave-field-error">{{
                     validationErrors.extraMetadata
                   }}</span>
                 </div>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <Textarea :id="scopedId('input-dataUsagePolicy')" v-model="dataUsagePolicy" rows="4" />
                     <label :for="scopedId('input-dataUsagePolicy')">Data usage policy</label>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.dataUsagePolicy" class="mave-field-error">{{
                     validationErrors.dataUsagePolicy
                   }}</span>
@@ -324,7 +324,7 @@
                     <TabPanels>
                       <TabPanel value="0">
                         <div class="field">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <AutoComplete
                               :id="scopedId('input-existingTargetGene')"
                             ref="existingTargetGeneInput"
@@ -350,16 +350,16 @@
                               </template>
                             </AutoComplete>
                             <label :for="scopedId('input-existingTargetGene')">Copy from an existing target gene</label>
-                          </span>
+                          </FloatLabel>
                         </div>
                         <div class="field">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <InputText :id="scopedId('input-targetGeneName')" v-model="targetGene.name" />
                             <label :for="scopedId('input-targetGeneName')">Target name</label>
-                          </span>
+                          </FloatLabel>
                         </div>
                         <div class="field">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <InputText
                               :id="scopedId('input-targetSequenceLabel')"
                               v-model="targetGene.targetSequence.label"
@@ -367,21 +367,21 @@
                             <label :for="scopedId('input-targetSequenceLabel')"
                               >Target label (only required when providing multiple targets)</label
                             >
-                          </span>
+                          </FloatLabel>
                         </div>
                         <div class="field">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <SelectButton
                               :id="scopedId('input-targetGeneCategory')"
                               v-model="targetGene.category"
                               :option-label="textForTargetGeneCategory"
                               :options="targetGeneCategories"
                             />
-                          </span>
+                          </FloatLabel>
                         </div>
                         <div v-for="dbName of externalGeneDatabases" :key="dbName" class="field field-columns">
                           <div class="field-column">
-                            <span class="p-float-label">
+                            <FloatLabel variant="on">
                               <AutoComplete
                                 :id="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
                                 :ref="`${dbName.toLowerCase()}IdentifierInput`"
@@ -396,10 +396,10 @@
                               <label :for="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
                                 >{{ dbName }} identifier</label
                               >
-                            </span>
+                            </FloatLabel>
                           </div>
                           <div class="field-column">
-                            <span class="p-float-label">
+                            <FloatLabel variant="on">
                               <InputNumber
                                 :id="scopedId(`input-${dbName.toLowerCase()}Offset`)"
                                 v-model="targetGene.externalIdentifiers[dbName].offset"
@@ -409,11 +409,11 @@
                                 suffix=" bp"
                               />
                               <label :for="scopedId(`input-${dbName.toLowerCase()}Offset`)">Offset</label>
-                            </span>
+                            </FloatLabel>
                           </div>
                         </div>
                         <div class="field">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <AutoComplete
                               :id="scopedId('input-targetSequenceTaxonomy')"
                               ref="taxonomyInput"
@@ -435,13 +435,13 @@
                               </template>
                             </AutoComplete>
                             <label :for="scopedId('input-targetSequenceTaxonomy')">Taxonomy</label>
-                          </span>
+                          </FloatLabel>
                           <span v-if="validationErrors['targetGene.targetSequence.taxonomy']" class="mave-field-error">{{
                             validationErrors['targetGene.targetSequence.taxonomy']
                           }}</span>
                         </div>
                         <div class="field">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <FileUpload
                               :id="scopedId('input-targetGeneTargetSequenceSequenceFile')"
                               ref="sequenceFileUpload"
@@ -459,16 +459,16 @@
                                 <p>Drop a FASTA file here.</p>
                               </template>
                             </FileUpload>
-                          </span>
+                          </FloatLabel>
                         </div>
                         <div class="field">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <SelectButton
                               :id="scopedId('input-targetGeneTargetSequenceSequenceType')"
                               v-model="targetGene.targetSequence.sequenceType"
                               :options="sequenceTypes"
                             />
-                          </span>
+                          </FloatLabel>
                         </div>
                         <div>
                           <Button icon="pi pi-check" label="Add Target" @click="addTarget" />
@@ -484,17 +484,17 @@
                       <TabPanel header="Genomic Coordinates" value="1">
                         <div class="field field-columns">
                           <div class="field-column">
-                            <span class="p-float-label">
+                            <FloatLabel variant="on">
                               <InputText
                                 :id="scopedId('input-targetGeneName')"
                                 v-model="targetGene.name"
                                 style="width: 100%"
                               />
                               <label :for="scopedId('input-targetGene')">Target gene name</label>
-                            </span>
+                            </FloatLabel>
                           </div>
                           <div class="field-column">
-                            <span class="p-float-label">
+                            <FloatLabel variant="on">
                               <!-- Assembly is the reference genome property in coordinate cases -->
                               <Select
                                 :id="scopedId('input-targetGeneAssembly')"
@@ -503,10 +503,10 @@
                                 style="width: 100%"
                               />
                               <label :for="scopedId('input-targetGeneAssembly')">Assembly</label>
-                            </span>
+                            </FloatLabel>
                           </div>
                           <div class="field-column">
-                            <span class="p-float-label">
+                            <FloatLabel variant="on">
                               <Select
                                 :id="scopedId('input-targetGeneGeneNames')"
                                 v-model="geneName"
@@ -518,15 +518,15 @@
                                 @change="autofillGeneName"
                               />
                               <label :for="scopedId('input-targetGeneAssembly')">HGNC Name</label>
-                            </span>
+                            </FloatLabel>
                           </div>
                         </div>
                         <div class="field">
-                          <span class="p-float-label pb-2">
-                            Autocomplete By:
+                          <div class="flex align-items-center space-x-2">
+                            <span>Autocomplete By:</span>
                             <SelectButton v-model="targetAutocomplete" aria-labelledby="basic" :options="targetOptions" />
-                          </span>
-                          <span class="p-float-label">
+                          </div>
+                          <FloatLabel class="mt-3" variant="on">
                             <AutoComplete
                               :id="scopedId('input-targetGene-accession')"
                               v-model="targetGene.targetAccession.accession"
@@ -536,17 +536,17 @@
                               @complete="fetchTargetAccessions"
                             />
                             <label :for="scopedId('input-targetGene-accession')">Accession/Transcript Identifier</label>
-                          </span>
+                          </FloatLabel>
                         </div>
                         <div class="field">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <SelectButton
                               :id="scopedId('input-targetGeneCategory')"
                               v-model="targetGene.category"
                               :option-label="textForTargetGeneCategory"
                               :options="targetGeneCategories"
                             />
-                          </span>
+                          </FloatLabel>
                         </div>
                         <div>
                           <Button
@@ -769,7 +769,7 @@
                 </div>
                 <div v-else>Load a scores file and an optional counts file:</div>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <FileUpload
                       :id="scopedId('input-scoresFile')"
                       ref="scoresFileUpload"
@@ -786,13 +786,13 @@
                         <p>Drop a file here.</p>
                       </template>
                     </FileUpload>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.scoresFile" class="mave-field-error">{{
                     validationErrors.scoresFile
                   }}</span>
                 </div>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <div v-if="scoreColumnsMetadata">
                       <span class="mr-2">Scores column metadata</span>
                       <i class="pi pi-check mr-3"></i>
@@ -829,13 +829,13 @@
                         <p>Drop a JSON file here.</p>
                       </template>
                     </FileUpload>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.scoreColumnsMetadataFile" class="mave-field-error">{{
                     validationErrors.scoreColumnsMetadataFile
                   }}</span>
                 </div>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <FileUpload
                       :id="scopedId('input-countsFile')"
                       ref="countsFileUpload"
@@ -852,13 +852,13 @@
                         <p>Drop a file here.</p>
                       </template>
                     </FileUpload>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.countsFile" class="mave-field-error">{{
                     validationErrors.countsFile
                   }}</span>
                 </div>
                 <div class="field">
-                  <span class="p-float-label">
+                  <FloatLabel variant="on">
                     <div v-if="countColumnsMetadata">
                       <span class="mr-2">Counts column metadata</span>
                       <i class="pi pi-check mr-3"></i>
@@ -895,7 +895,7 @@
                         <p>Drop a JSON file here.</p>
                       </template>
                     </FileUpload>
-                  </span>
+                  </FloatLabel>
                   <span v-if="validationErrors.countColumnsMetadataFile" class="mave-field-error">{{
                     validationErrors.countColumnsMetadataFile
                   }}</span>
@@ -933,6 +933,7 @@ import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
 import Select from 'primevue/select'
 import FileUpload from 'primevue/fileupload'
+import FloatLabel from 'primevue/floatlabel'
 import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
 import ToggleSwitch from 'primevue/toggleswitch'
@@ -998,6 +999,7 @@ export default {
     EmailPrompt,
     EntityLink,
     FileUpload,
+    FloatLabel,
     InputNumber,
     InputText,
     ToggleSwitch,

From 3eb4b2660a66eeaf84bdbe15e9a0d7d291dd1868 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 16:07:56 -0800
Subject: [PATCH 28/40] Replace span.p-float-label elements with Primevue 4
 FloatLabels in ExperimentCreator

---
 src/components/screens/ExperimentCreator.vue | 72 ++++++++++----------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index f47b30fc..bc0f7367 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -52,10 +52,10 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <InputText :id="scopedId('input-title')" v-model="title" />
                       <label :for="scopedId('input-title')">Title</label>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors.title" class="mave-field-error">{{ validationErrors.title }}</span>
                   </div>
                 </div>
@@ -71,10 +71,10 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <Textarea :id="scopedId('input-shortDescription')" v-model="shortDescription" rows="4" />
                       <label :for="scopedId('input-shortDescription')">Short description</label>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors.shortDescription" class="mave-field-error">{{
                       validationErrors.shortDescription
                     }}</span>
@@ -99,10 +99,10 @@
                       </TabList>
                       <TabPanels>
                         <TabPanel header="Edit" value="0">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="10" />
                             <label :for="scopedId('input-abstractText')">Abstract</label>
-                          </span>
+                          </FloatLabel>
                         </TabPanel>
                         <TabPanel header="Preview" value="1">
                           <!-- eslint-disable-next-line vue/no-v-html -->
@@ -141,10 +141,10 @@
                       </TabList>
                       <TabPanels>
                         <TabPanel header="Edit" value="0">
-                          <span class="p-float-label">
+                          <FloatLabel variant="on">
                             <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="10" />
                             <label :for="scopedId('input-methodText')">Methods</label>
-                          </span>
+                          </FloatLabel>
                         </TabPanel>
                         <TabPanel header="Preview" value="1">
                           <!-- eslint-disable-next-line vue/no-v-html -->
@@ -168,7 +168,7 @@
                     </div>
                   </div>
                   <div class="mavedb-wizard-content field">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <AutoComplete
                         :id="scopedId('input-doiIdentifiers')"
                         v-model="doiIdentifiers"
@@ -181,7 +181,7 @@
                         @update:model-value="newDoiIdentifiersAdded"
                       />
                       <label :for="scopedId('input-doiIdentifiers')">DOIs</label>
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
                       validationErrors.doiIdentifiers
                     }}</span>
@@ -197,7 +197,7 @@
                       <div class="mavedb-help-small">Examples: 1111-1111-1111-1111</div>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <AutoComplete
                           :id="scopedId('input-contributors')"
                           v-model="contributors"
@@ -211,7 +211,7 @@
                           @update:model-value="newContributorsAdded"
                         />
                         <label :for="scopedId('input-contributors')">Contributors</label>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.contributors" class="mave-field-error">{{
                         validationErrors.contributors
                       }}</span>
@@ -231,7 +231,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <AutoComplete
                           :id="scopedId('input-publicationIdentifiers')"
                           v-model="publicationIdentifiers"
@@ -253,7 +253,7 @@
                           </template>
                         </AutoComplete>
                         <label :for="scopedId('input-publicationIdentifiers')">Publication identifiers</label>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.publicationIdentifiers" class="mave-field-error">{{
                         validationErrors.publicationIdentifiers
                       }}</span>
@@ -264,7 +264,7 @@
                       <label> Of the above publications, the primary publication that describes the score set. </label>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label" style="display: block">
+                      <FloatLabel variant="on">
                         <Multiselect
                           :id="scopedId('input-primaryPublicationIdentifiers')"
                           v-model="primaryPublicationIdentifiers"
@@ -284,7 +284,7 @@
                           </template>
                         </Multiselect>
                         <label :for="scopedId('input-primaryPublicationIdentifiers')">Primary publication</label>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.primaryPublicationIdentifiers" class="mave-field-error">{{
                         validationErrors.primaryPublicationIdentifiers
                       }}</span>
@@ -311,7 +311,7 @@
                       </div>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <AutoComplete
                           :id="scopedId('input-rawReadIdentifiers')"
                           ref="rawReadIdentifiersInput"
@@ -325,7 +325,7 @@
                           @update:model-value="newRawReadIdentifiersAdded"
                         />
                         <label :for="scopedId('input-rawReadIdentifiers')">Raw Read</label>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.rawReadIdentifiers" class="mave-field-error">{{
                         validationErrors.rawReadIdentifiers
                       }}</span>
@@ -336,7 +336,7 @@
                       <label> Any additional metadata about the experiment, as a JSON file. </label>
                     </div>
                     <div class="mavedb-wizard-content field">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <FileUpload
                           :id="scopedId('input-extraMetadataFile')"
                           accept="application/json"
@@ -354,7 +354,7 @@
                             <p>Drop a JSON file here.</p>
                           </template>
                         </FileUpload>
-                      </span>
+                      </FloatLabel>
                       <span v-if="validationErrors.extraMetadata" class="mave-field-error">{{
                         validationErrors.extraMetadata
                       }}</span>
@@ -391,16 +391,18 @@
                     </div>
 
                     <div class="mavedb-wizard-content keyword-editor">
-                      <span class="p-float-label field">
-                        <Select
-                          :id="scopedId(`keyword-input-${keyword.key}`)"
-                          v-model="keywordKeys[keyword.key]"
-                          class="keyword-dropdown"
-                          :option-label="(option) => formatKeywordOptionLabel(option)"
-                          option-value="label"
-                          :options="getKeywordOptions(keyword.option)"
-                        />
-                        <label :for="scopedId(`keyword-input-${keyword.key}`)">{{ keyword.key }}</label>
+                      <span class="field">
+                        <FloatLabel variant="on">
+                          <Select
+                            :id="scopedId(`keyword-input-${keyword.key}`)"
+                            v-model="keywordKeys[keyword.key]"
+                            class="keyword-dropdown"
+                            :option-label="(option) => formatKeywordOptionLabel(option)"
+                            option-value="label"
+                            :options="getKeywordOptions(keyword.option)"
+                          />
+                          <label :for="scopedId(`keyword-input-${keyword.key}`)">{{ keyword.key }}</label>
+                        </FloatLabel>
                         <Button
                           aria-label="Filter"
                           class="keyword-button"
@@ -433,13 +435,13 @@
                       }}</span>
 
                       <div v-if="keywordTextVisible[keyword.key] || keywordKeys[keyword.key] === 'Other'" class="field">
-                        <span class="p-float-label keyword-description-input">
+                        <FloatLabel class="keyword-description-input" variant="on">
                           <Textarea :id="scopedId('input-title')" v-model="keywordDescriptions[keyword.key]" rows="4" />
                           <label :for="scopedId('input-title')"
                             >{{ keyword.descriptionLabel }}
                             {{ keywordKeys[keyword.key] === 'Other' ? '(Required)' : '(Optional)' }}</label
                           >
-                        </span>
+                        </FloatLabel>
                         <span v-if="validationErrors[`keywordDescriptions.${keyword.key}`]" class="mave-field-error">
                           {{ validationErrors[`keywordDescriptions.${keyword.key}`] }}</span
                         >
@@ -476,6 +478,7 @@ import {marked} from 'marked'
 import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
+import FloatLabel from 'primevue/floatlabel'
 import Select from 'primevue/select'
 import FileUpload from 'primevue/fileupload'
 import InputText from 'primevue/inputtext'
@@ -596,6 +599,7 @@ export default {
     Button,
     DefaultLayout,
     Dialog,
+    FloatLabel,
     Select,
     EmailPrompt,
     FileUpload,
@@ -1391,10 +1395,6 @@ export default {
   margin-left: 4px;
 }
 
-.keyword-description-input {
-  width: 450px;
-}
-
 .mavedb-wizard:deep(.p-stepper) {
   min-width: 1180px; /* Design is not responsive past this point. */
 }

From 63c069e95809104bd585efc7433030a47b61d6b7 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Wed, 31 Dec 2025 16:16:21 -0800
Subject: [PATCH 29/40] Replace span.p-float-label elements with Primevue 4
 FloatLabels in ExperimentEditor

---
 src/components/screens/ExperimentEditor.vue | 50 +++++++++++----------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 8ef40a32..34f646a1 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -52,23 +52,23 @@
                 </div>
               </div>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                   <InputText :id="scopedId('input-title')" v-model="title" />
                   <label :for="scopedId('input-title')">Title</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.title" class="mave-field-error">{{ validationErrors.title }}</span>
               </div>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                   <Textarea :id="scopedId('input-shortDescription')" v-model="shortDescription" rows="4" />
                   <label :for="scopedId('input-shortDescription')">Short description</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.shortDescription" class="mave-field-error">{{
                   validationErrors.shortDescription
                 }}</span>
               </div>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                  <AutoComplete
                     :id="scopedId('input-doiIdentifiers')"
                     ref="doiIdentifiersInput"
@@ -82,13 +82,13 @@
                     @update:model-value="newDoiIdentifiersAdded"
                   />
                   <label :for="scopedId('input-doiIdentifiers')">DOIs</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.doiIdentifiers" class="mave-field-error">{{
                   validationErrors.doiIdentifiers
                 }}</span>
               </div>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                   <AutoComplete
                     :id="scopedId('input-publicationIdentifiers')"
                     v-model="publicationIdentifiers"
@@ -110,13 +110,13 @@
                     </template>
                   </AutoComplete>
                   <label :for="scopedId('input-publicationIdentifiers')">Publication identifiers</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.publicationIdentifiers" class="mave-field-error">{{
                   validationErrors.publicationIdentifiers
                 }}</span>
               </div>
               <div class="field">
-                <span class="p-float-label" style="display: block">
+                <FloatLabel variant="on">
                   <Multiselect
                     :id="scopedId('input-primaryPublicationIdentifiers')"
                     v-model="primaryPublicationIdentifiers"
@@ -136,13 +136,13 @@
                     </template>
                   </Multiselect>
                   <label :for="scopedId('input-primaryPublicationIdentifiers')">Primary publication</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.primaryPublicationIdentifiers" class="mave-field-error">{{
                   validationErrors.primaryPublicationIdentifiers
                 }}</span>
               </div>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                   <AutoComplete
                     :id="scopedId('input-rawReadIdentifiers')"
                     ref="rawReadIdentifiersInput"
@@ -156,7 +156,7 @@
                     @update:model-value="newRawReadIdentifiersAdded"
                   />
                   <label :for="scopedId('input-rawReadIdentifiers')">Raw Read</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.rawReadIdentifiers" class="mave-field-error">{{
                   validationErrors.rawReadIdentifiers
                 }}</span>
@@ -169,10 +169,10 @@
                   </TabList>
                   <TabPanels>
                     <TabPanel header="Edit" value="0">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <Textarea :id="scopedId('input-abstractText')" v-model="abstractText" rows="4" />
                         <label :for="scopedId('input-abstractText')">Abstract</label>
-                      </span>
+                      </FloatLabel>
                     </TabPanel>
                     <TabPanel header="Preview" value="1">
                       <!-- eslint-disable-next-line vue/no-v-html -->
@@ -192,10 +192,10 @@
                   </TabList>
                   <TabPanels>
                     <TabPanel header="Edit" value="0">
-                      <span class="p-float-label">
+                      <FloatLabel variant="on">
                         <Textarea :id="scopedId('input-methodText')" v-model="methodText" rows="4" />
                         <label :for="scopedId('input-methodText')">Methods</label>
-                      </span>
+                      </FloatLabel>
                     </TabPanel>
                     <TabPanel header="Preview" value="1">
                       <!-- eslint-disable-next-line vue/no-v-html -->
@@ -208,7 +208,7 @@
                 }}</span>
               </div>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                   <AutoComplete
                     :id="scopedId('input-contributors')"
                     v-model="contributors"
@@ -222,13 +222,13 @@
                     @update:model-value="newContributorsAdded"
                   />
                   <label :for="scopedId('input-contributors')">Contributors</label>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.contributors" class="mave-field-error">{{
                   validationErrors.contributors
                 }}</span>
               </div>
               <div class="field">
-                <span class="p-float-label">
+                <FloatLabel variant="on">
                   <div v-if="extraMetadata">
                     <span class="mr-2">Extra metadata</span>
                     <i class="pi pi-check mr-3"></i>
@@ -265,7 +265,7 @@
                       <p>Drop a JSON file here.</p>
                     </template>
                   </FileUpload>
-                </span>
+                </FloatLabel>
                 <span v-if="validationErrors.extraMetadata" class="mave-field-error">{{
                   validationErrors.extraMetadata
                 }}</span>
@@ -282,7 +282,7 @@
               <div v-for="keyword in keywordData" :key="keyword.key">
                 <div v-if="keywordVisibility[keyword.key]">
                   <div class="field">
-                    <span class="p-float-label">
+                    <FloatLabel variant="on">
                       <Select
                         :id="scopedId(`keyword-input-${keyword.key}`)"
                         v-model="keywordKeys[keyword.key]"
@@ -292,7 +292,7 @@
                         :options="getKeywordOptions(keyword.option)"
                       />
                       <label :for="scopedId(`keyword-input-${keyword.key}`)">{{ keyword.key }}</label>
-                    </span>
+                    </FloatLabel>
                     <Button
                       aria-label="Filter"
                       class="keyword-description-button"
@@ -335,13 +335,13 @@
                     }}</span>
                   </div>
                   <div v-if="keywordTextVisible[keyword.key] || keywordKeys[keyword.key] === 'Other'" class="field">
-                    <span class="p-float-label keyword-description-input">
+                    <FloatLabel variant="on" class="keyword-description-input">
                       <Textarea :id="scopedId('input-title')" v-model="keywordDescriptions[keyword.key]" rows="4" />
                       <label :for="scopedId('input-title')"
                         >{{ keyword.descriptionLabel }}
                         {{ keywordKeys[keyword.key] === 'Other' ? '(Required)' : '(Optional)' }}</label
                       >
-                    </span>
+                    </FloatLabel>
                     <span v-if="validationErrors[`keywordDescriptions.${keyword.key}`]" class="mave-field-error">
                       {{ validationErrors[`keywordDescriptions.${keyword.key}`] }}</span
                     >
@@ -385,6 +385,7 @@ import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
 import Dialog from 'primevue/dialog'
+import FloatLabel from 'primevue/floatlabel'
 import Select from 'primevue/select'
 import Multiselect from 'primevue/multiselect'
 import FileUpload from 'primevue/fileupload'
@@ -500,6 +501,7 @@ export default {
     Button,
     Card,
     Dialog,
+    FloatLabel,
     Select,
     Multiselect,
     DefaultLayout,

From 7d4ab35f0184b40fc95032ba1f9c75dea7eb87f2 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Fri, 2 Jan 2026 08:31:25 -0800
Subject: [PATCH 30/40] Replace span.p-float-label elements with Primevue 4
 FloatLabels in CalibrationEditor

---
 src/components/CalibrationEditor.vue | 62 ++++++++++++++--------------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/components/CalibrationEditor.vue b/src/components/CalibrationEditor.vue
index 2c0198c6..173576b8 100644
--- a/src/components/CalibrationEditor.vue
+++ b/src/components/CalibrationEditor.vue
@@ -8,7 +8,7 @@
           <p>Select the score set to which this calibration will apply.</p>
         </div>
         <div class="mavedb-wizard-content">
-          <span class="p-float-label">
+          <FloatLabel variant="on">
             <Select
               :id="scopedId('input-containing-score-set')"
               v-model="selectedScoreSet"
@@ -24,7 +24,7 @@
               </template>
             </Select>
             <label :for="scopedId('input-containing-score-set')">Score Set</label>
-          </span>
+          </FloatLabel>
           <span v-if="validationErrors['scoreSetUrn']" class="mave-field-error">{{
             validationErrors['scoreSetUrn']
           }}</span>
@@ -37,10 +37,10 @@
           <div class="mavedb-help-small">Display name for this calibration used in visualizations and listings.</div>
         </div>
         <div class="mavedb-wizard-content">
-          <span class="p-float-label">
+          <FloatLabel variant="on">
             <InputText :id="scopedId('input-calibration-title')" v-model="draft.title" style="width: 100%" />
             <label :for="scopedId('input-calibration-title')">Calibration Title</label>
-          </span>
+          </FloatLabel>
           <span v-if="validationErrors['title']" class="mave-field-error">{{ validationErrors['title'] }}</span>
         </div>
       </div>
@@ -50,10 +50,10 @@
           <label>Provide additional notes or context for the calibration.</label>
         </div>
         <div class="mavedb-wizard-content">
-          <span class="p-float-label">
+          <FloatLabel variant="on">
             <PrimeTextarea :id="scopedId('input-calibration-notes')" v-model="draft.notes" style="width: 100%" />
             <label :for="scopedId('input-calibration-notes')">Calibration Notes (optional)</label>
-          </span>
+          </FloatLabel>
           <span v-if="validationErrors['notes']" class="mave-field-error">{{ validationErrors['notes'] }}</span>
         </div>
       </div>
@@ -66,7 +66,7 @@
           <div class="mavedb-help-small">This number should not be in a range classified as abnormal.</div>
         </div>
         <div class="mavedb-wizard-content">
-          <span class="p-float-label">
+          <FloatLabel variant="on">
             <InputNumber
               v-model="draft.baselineScore"
               :aria-labelledby="scopedId('input-investigatorProvidedBaselineScore')"
@@ -75,7 +75,7 @@
               style="width: 100%"
             />
             <label :for="scopedId('input-investigatorProvidedBaselineScore')">Baseline Score</label>
-          </span>
+          </FloatLabel>
           <span v-if="validationErrors['baselineScore']" class="mave-field-error">{{
             validationErrors['baselineScore']
           }}</span>
@@ -93,7 +93,7 @@
           </div>
         </div>
         <div class="mavedb-wizard-content">
-          <span class="p-float-label">
+          <FloatLabel variant="on">
             <PrimeTextarea
               v-model="draft.baselineScoreDescription"
               :aria-labelledby="scopedId('input-investigatorProvidedBaselineScoreDescription')"
@@ -104,7 +104,7 @@
             <label :for="scopedId('input-investigatorProvidedBaselineScoreDescription')"
               >Baseline Score Description (optional)</label
             >
-          </span>
+          </FloatLabel>
           <span v-if="validationErrors['baselineScoreDescription']" class="mave-field-error">{{
             validationErrors['baselineScoreDescription']
           }}</span>
@@ -141,14 +141,14 @@
           <div class="mavedb-help-small">Display name used in visualizations.</div>
         </div>
         <div class="mavedb-wizard-content">
-          <span class="p-float-label">
+          <FloatLabel variant="on">
             <InputText
               v-model="rangeObj.label"
               :aria-labelledby="scopedId(`input-investigatorProvidedRangeLabel-${rangeIdx}`)"
               style="width: 100%"
             />
             <label :for="scopedId(`input-investigatorProvidedRangeLabel-${rangeIdx}`)">Functional range label</label>
-          </span>
+          </FloatLabel>
           <span v-if="validationErrors[`functionalRanges.${rangeIdx}.label`]" class="mave-field-error">{{
             validationErrors[`functionalRanges.${rangeIdx}.label`]
           }}</span>
@@ -163,7 +163,7 @@
           <div class="mavedb-help-small">Provide contextual meaning for the range.</div>
         </div>
         <div class="mavedb-wizard-content">
-          <span class="p-float-label">
+          <FloatLabel variant="on">
             <PrimeTextarea
               v-model="rangeObj.description"
               :aria-labelledby="scopedId(`input-investigatorProvidedRangeDescription-${rangeIdx}`)"
@@ -174,7 +174,7 @@
             <label :for="scopedId(`input-investigatorProvidedRangeDescription-${rangeIdx}`)"
               >Functional range description (optional)</label
             >
-          </span>
+          </FloatLabel>
           <span v-if="validationErrors[`functionalRanges.${rangeIdx}.description`]" class="mave-field-error">{{
             validationErrors[`functionalRanges.${rangeIdx}.description`]
           }}</span>
@@ -223,7 +223,7 @@
               @click="toggleBoundary(rangeIdx, 'lower')"
               ><FontAwesomeIcon class="score-range-toggle-icon" icon="fa-solid fa-circle-half-stroke"
             /></PrimeButton>
-            <span class="p-float-label w-full">
+            <FloatLabel class="w-full" variant="on">
               <InputNumber
                 v-model="rangeObj.range[0]"
                 :aria-labelledby="scopedId(`input-investigatorProvidedRangeLower-${rangeIdx}`)"
@@ -238,9 +238,9 @@
                     ? 'Lower Bound (inclusive)'
                     : 'Lower Bound (exclusive)'
               }}</label>
-            </span>
+            </FloatLabel>
             <InputGroupAddon>to</InputGroupAddon>
-            <span class="p-float-label w-full">
+            <FloatLabel class="w-full" variant="on">
               <InputNumber
                 v-model="rangeObj.range[1]"
                 :aria-labelledby="scopedId(`input-investigatorProvidedRangeUpper-${rangeIdx}`)"
@@ -255,7 +255,7 @@
                     ? 'Upper Bound (inclusive)'
                     : 'Upper Bound (exclusive)'
               }}</label>
-            </span>
+            </FloatLabel>
             <PrimeButton
               class="score-range-toggle-button"
               :disabled="functionalRangeHelpers[rangeIdx].infiniteUpper"
@@ -322,7 +322,7 @@
         </div>
         <div class="mavedb-wizard-content">
           <InputGroup>
-            <span class="p-float-label w-full">
+            <FloatLabel class="w-full" variant="on">
               <Select
                 v-model="rangeObj.acmgClassification.criterion"
                 :aria-labelledby="scopedId('input-investigatorProvidedOddsPathEvidence')"
@@ -331,8 +331,8 @@
                 :options="criterions"
               />
               <label :for="scopedId('input-investigatorProvidedOddspathsCriterion')">Criterion</label>
-            </span>
-            <span class="p-float-label w-full">
+            </FloatLabel>
+            <FloatLabel class="w-full" variant="on">
               <Select
                 v-model="rangeObj.acmgClassification.evidenceStrength"
                 :aria-labelledby="scopedId('input-investigatorProvidedOddsPathEvidence')"
@@ -342,7 +342,7 @@
                 :options="evidenceStrengths"
               />
               <label :for="scopedId('input-investigatorProvidedOddsPathEvidence')">Evidence Strength</label>
-            </span>
+            </FloatLabel>
           </InputGroup>
           <span
             v-if="validationErrors[`functionalRanges.${rangeIdx}.acmgClassification.criterion`]"
@@ -380,7 +380,7 @@
           <label :id="scopedId('input-investigatorProvidedOddsPathRatio')">OddsPaths ratio.</label>
         </div>
         <div class="mavedb-wizard-content">
-          <span class="p-float-label" style="margin-right: 1em">
+          <FloatLabel variant="on">
             <InputNumber
               v-model="rangeObj.oddspathsRatio"
               :aria-labelledby="scopedId('input-investigatorProvidedOddsPathRatio')"
@@ -389,7 +389,7 @@
               style="width: 100%"
             />
             <label :for="scopedId('input-oddsPathRatio')">OddsPaths Ratio</label>
-          </span>
+          </FloatLabel>
           <span v-if="validationErrors[`functionalRanges.${rangeIdx}.oddspathsRatio`]" class="mave-field-error">{{
             validationErrors[`functionalRanges.${rangeIdx}.oddspathsRatio`]
           }}</span>
@@ -438,7 +438,7 @@
         </div>
       </div>
       <div class="mavedb-wizard-content">
-        <span class="p-float-label">
+        <FloatLabel variant="on">
           <AutoComplete
             :id="scopedId('input-threshold-sources')"
             v-model="draft.thresholdSources"
@@ -463,7 +463,7 @@
           <span v-if="validationErrors['thresholdSources']" class="mave-field-error">{{
             validationErrors['thresholdSources']
           }}</span>
-        </span>
+        </FloatLabel>
       </div>
     </div>
 
@@ -475,7 +475,7 @@
         </div>
       </div>
       <div class="mavedb-wizard-content">
-        <span class="p-float-label">
+        <FloatLabel variant="on">
           <AutoComplete
             :id="scopedId('input-classification-sources-publication-identifiers')"
             v-model="draft.classificationSources"
@@ -500,7 +500,7 @@
           <span v-if="validationErrors['classificationSources']" class="mave-field-error">{{
             validationErrors['classificationSources']
           }}</span>
-        </span>
+        </FloatLabel>
       </div>
     </div>
 
@@ -512,7 +512,7 @@
         </div>
       </div>
       <div class="mavedb-wizard-content">
-        <span class="p-float-label">
+        <FloatLabel variant="on">
           <AutoComplete
             :id="scopedId('input-method-sources-publication-identifiers')"
             v-model="draft.methodSources"
@@ -537,7 +537,7 @@
           <span v-if="validationErrors['methodSources']" class="mave-field-error">{{
             validationErrors['methodSources']
           }}</span>
-        </span>
+        </FloatLabel>
       </div>
     </div>
   </div>
@@ -553,6 +553,7 @@ import SelectButton from 'primevue/selectbutton'
 import Select from 'primevue/select'
 import {reactive, ref} from 'vue'
 import type {PropType} from 'vue'
+import FloatLabel from 'primevue/floatlabel'
 import InputText from 'primevue/inputtext'
 import PrimeButton from 'primevue/button'
 import PrimeTextarea from 'primevue/textarea'
@@ -587,6 +588,7 @@ export interface DraftScoreCalibration extends DraftScoreCalibrationWithNullable
 export default {
   name: 'CalibrationEditor',
   components: {
+    FloatLabel,
     InputText,
     PrimeButton,
     PrimeTextarea,

From 5f053ac972b4aefa55e45f5dbd17ed21bbea84a0 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Fri, 2 Jan 2026 08:33:32 -0800
Subject: [PATCH 31/40] Replace span.p-float-label elements with Primevue 4
 FloatLabels in remaining components

---
 src/components/ProteinStructureView.vue   |  7 ++++---
 src/components/common/EmailPrompt.vue     |  9 +++++----
 src/components/screens/ScoreSetView.vue   | 11 ++++-------
 src/components/screens/SettingsScreen.vue |  7 ++++---
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/ProteinStructureView.vue b/src/components/ProteinStructureView.vue
index edd17143..e00697a2 100644
--- a/src/components/ProteinStructureView.vue
+++ b/src/components/ProteinStructureView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col h-full">
-    <span v-if="alphaFoldData?.length > 1" class="p-float-label m-2">
+    <FloatLabel v-if="alphaFoldData?.length > 1" class="m-2" variant="on">
       <Select
         :id="scopedId('alphafold-id')"
         v-model="selectedAlphaFold"
@@ -8,7 +8,7 @@
         :options="alphaFoldData"
       />
       <label :for="scopedId('alphafold-id')">AlphaFold ID</label>
-    </span>
+    </FloatLabel>
     <div class="flex">
       <span class="ml-2">Color by:</span>
       <SelectButton
@@ -29,6 +29,7 @@
 <script>
 import axios from 'axios'
 import $ from 'jquery'
+import FloatLabel from 'primevue/floatlabel'
 import Select from 'primevue/select'
 import SelectButton from 'primevue/selectbutton'
 import {PDBeMolstarPlugin} from 'pdbe-molstar/lib/viewer'
@@ -42,7 +43,7 @@ import useScopedId from '@/composables/scoped-id'
 export default {
   name: 'ProteinStructureView',
 
-  components: {Select, SelectButton},
+  components: {FloatLabel, Select, SelectButton},
 
   props: {
     uniprotId: {
diff --git a/src/components/common/EmailPrompt.vue b/src/components/common/EmailPrompt.vue
index f9ad2678..f8c913ea 100644
--- a/src/components/common/EmailPrompt.vue
+++ b/src/components/common/EmailPrompt.vue
@@ -1,10 +1,10 @@
 <template>
   <Dialog v-model:visible="visible" :closable="false" :header="title" :style="{width: '25rem'}">
     <span class="p-text-secondary block mb-5">{{ dialog }}</span>
-    <div class="flex align-items-center gap-3 mb-3 p-float-label">
-      <InputText :id="scopedId('email-input')" v-model:model-value="email" class="flex-auto" />
+    <FloatLabel class="mb-2" variant="on">
+      <InputText :id="scopedId('email-input')" v-model:model-value="email" class="w-full" />
       <label :for="scopedId('email-input')">Email</label>
-    </div>
+    </FloatLabel>
     <div>
       <span v-if="emailValidationError" class="mave-field-error">{{ emailValidationError }}</span>
     </div>
@@ -19,6 +19,7 @@
 import axios from 'axios'
 import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
+import FloatLabel from 'primevue/floatlabel'
 import InputText from 'primevue/inputtext'
 
 import useScopedId from '@/composables/scoped-id'
@@ -27,7 +28,7 @@ import config from '@/config'
 import {ref} from 'vue'
 
 export default {
-  components: {Button, Dialog, InputText},
+  components: {Button, Dialog, FloatLabel, InputText},
 
   props: {
     title: {
diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index 7ff20451..3a8c5fd3 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -44,7 +44,7 @@
       </div>
       <div v-if="variants?.length">
         <div class="mavedb-score-set-variant-search">
-          <span class="p-float-label">
+          <FloatLabel variant="on">
             <AutoComplete
               :id="scopedId('variant-search')"
               v-model="selectedVariant"
@@ -66,7 +66,7 @@
               :style="{visibility: variantToVisualize ? 'visible' : 'hidden'}"
               @click="selectedVariant = null"
             />
-          </span>
+          </FloatLabel>
           <span v-if="config.CLINICAL_FEATURES_ENABLED" class="mavedb-clinical-mode-control-container">
             <span :class="clinicalMode ? 'mavedb-clinical-mode-option-off' : 'mavedb-clinical-mode-option-on'"
               >Raw data</span
@@ -420,6 +420,7 @@ import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import Dialog from 'primevue/dialog'
+import FloatLabel from 'primevue/floatlabel'
 import ToggleSwitch from 'primevue/toggleswitch'
 import ProgressSpinner from 'primevue/progressspinner'
 import ProgressBar from 'primevue/progressbar'
@@ -474,6 +475,7 @@ export default {
     CollectionBadge,
     DefaultLayout,
     Dialog,
+    FloatLabel,
     ToggleSwitch,
     ItemNotFound,
     PageLoading,
@@ -1249,11 +1251,6 @@ export default {
   column-gap: 0.5em;
 }
 
-.p-float-label {
-  display: flex;
-  width: 100%;
-}
-
 /* Histogram */
 
 .mavedb-score-set-histogram-pane {
diff --git a/src/components/screens/SettingsScreen.vue b/src/components/screens/SettingsScreen.vue
index 579b2542..62dd9c08 100644
--- a/src/components/screens/SettingsScreen.vue
+++ b/src/components/screens/SettingsScreen.vue
@@ -5,7 +5,7 @@
       <template #title> Profile </template>
       <template #content>
         <div class="field">
-          <span class="p-float-label">
+          <FloatLabel variant="on">
             <InputText
               :id="scopedId('input-email')"
               v-model="email"
@@ -14,7 +14,7 @@
               type="text"
             />
             <label :for="scopedId('input-email')">Email</label>
-          </span>
+          </FloatLabel>
         </div>
         <div>
           <span v-if="emailValidationError" class="mave-field-error">{{ emailValidationError }}</span>
@@ -134,6 +134,7 @@ import axios from 'axios'
 import Button from 'primevue/button'
 import Card from 'primevue/card'
 import Checkbox from 'primevue/checkbox'
+import FloatLabel from 'primevue/floatlabel'
 import InputText from 'primevue/inputtext'
 import {useHead} from '@unhead/vue'
 
@@ -148,7 +149,7 @@ import config from '@/config'
 export default {
   name: 'SettingsScreen',
 
-  components: {Button, Card, DefaultLayout, InputText, Checkbox},
+  components: {Button, Card, DefaultLayout, FloatLabel,InputText, Checkbox},
 
   setup: () => {
     useHead({title: 'Settings'})

From 8b719605ea032d0beb1335f0d9b4409b5c9be8b4 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Fri, 2 Jan 2026 08:41:35 -0800
Subject: [PATCH 32/40] Remove unused styles

---
 src/assets/app.css    |  105 -
 src/assets/layout.css |   27 +
 src/assets/theme.css  | 6077 -----------------------------------------
 3 files changed, 27 insertions(+), 6182 deletions(-)
 delete mode 100644 src/assets/theme.css

diff --git a/src/assets/app.css b/src/assets/app.css
index 7f025011..36e3b1c7 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -52,84 +52,6 @@ body .p-button {
   text-align: center;
 }
 
-
-/* Float label styles to match PrimeVue 3 theme */
-
-.p-float-label {
-  position: relative;
-  display: block;
-}
-/* Base label positioning - add missing properties to existing rule */
-.p-float-label > label {
-  position: absolute;
-  left: 0.75rem;
-  top: 1.5rem;
-  transform: translateY(-50%);
-  color: rgba(0, 0, 0, 0.6);
-  transition-duration: 0.2s;
-  transition-property: top, transform, font-size, color, background-color;
-  pointer-events: none;
-  font-size: 1rem;
-  line-height: 1;
-  z-index: 1;
-}
-
-/* Enhanced focused/filled label positioning */
-.p-float-label input:focus ~ label,
-.p-float-label input.p-filled ~ label,
-.p-float-label textarea:focus ~ label,
-.p-float-label textarea.p-filled ~ label,
-.p-float-label .p-inputwrapper-focus ~ label,
-.p-float-label .p-inputwrapper-filled ~ label {
-  top: -0.5rem !important;
-  transform: none;
-  font-size: 0.75rem;
-  background-color: #ffffff;
-  padding: 2px 4px;
-  margin-left: -4px;
-  margin-top: 0;
-}
-
-/* Hide placeholder text in float label components since label acts as placeholder */
-.p-float-label input::placeholder,
-.p-float-label textarea::placeholder,
-.p-float-label .p-chips-multiple-container input::placeholder {
-  color: transparent !important;
-}
-
-/* Show placeholder text when label is floated (focused or filled) */
-.p-float-label input:focus::placeholder,
-.p-float-label input.p-filled::placeholder,
-.p-float-label textarea:focus::placeholder,
-.p-float-label textarea.p-filled::placeholder,
-.p-float-label .p-inputwrapper-focus input::placeholder,
-.p-float-label .p-inputwrapper-filled input::placeholder,
-.p-float-label .p-chips-multiple-container input:focus::placeholder,
-.p-float-label .p-multiselect:focus-within .p-multiselect-label {
-  color: rgba(0, 0, 0, 0.6) !important;
-}
-
-/* Style Chips components to match PrimeVue 3 appearance */
-.p-inputchips-chip-item {
-  background: #e9ecef !important;
-  color: #495057 !important;
-  border-radius: 1rem !important;
-  padding: 0.25rem 0.5rem !important;
-  margin-right: 0.5rem !important;
-  margin-bottom: 0.5rem !important;
-  margin-bottom: auto !important;
-  display: inline-flex !important;
-  align-items: center !important;
-}
-.p-inputchips-chip-item .pi-times,
-.p-inputchips-chip-item .pi-times-circle {
-  margin-left: 0.5rem !important;
-  cursor: pointer !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
 /* Prevent autocomplete overlay from taking full page width */
 .p-autocomplete-overlay {
   max-width: 75% !important;
@@ -151,30 +73,3 @@ body .p-button {
 .p-listbox-header {
   padding: 0 !important;
 }
-
-.mavedb-help-tooltip-button {
-  margin-left: 0.6rem;
-  vertical-align: middle;
-  margin-top: 0;
-  margin-bottom: 0;
-  display: inline-flex;
-  align-items: center;
-  background: none;
-  width: 1.2em !important;
-  height: 1.2em !important;
-  border-color: var(--p-button-outlined-help-color) !important;
-}
-
-.mavedb-help-tooltip-button:focus,
-.mavedb-help-tooltip-button:active,
-.mavedb-help-tooltip-button.p-focus {
-  background: none;
-}
-
-.mavedb-help-tooltip-button > .p-button-icon {
-  font-size: 0.5rem !important;
-}
-
-.mavedb-toolbar .p-menubar-submenu {
-  z-index: 1100 !important;
-}
diff --git a/src/assets/layout.css b/src/assets/layout.css
index 45100914..b3fec019 100644
--- a/src/assets/layout.css
+++ b/src/assets/layout.css
@@ -55,3 +55,30 @@
 .mavedb-screen-title-controls .p-button:last-child {
   margin-right: 0;
 }
+
+.mavedb-help-tooltip-button {
+  margin-left: 0.6rem;
+  vertical-align: middle;
+  margin-top: 0;
+  margin-bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  background: none;
+  width: 1.2em !important;
+  height: 1.2em !important;
+  border-color: var(--p-button-outlined-help-color) !important;
+}
+
+.mavedb-help-tooltip-button:focus,
+.mavedb-help-tooltip-button:active,
+.mavedb-help-tooltip-button.p-focus {
+  background: none;
+}
+
+.mavedb-help-tooltip-button > .p-button-icon {
+  font-size: 0.5rem !important;
+}
+
+.mavedb-toolbar .p-menubar-submenu {
+  z-index: 1100 !important;
+}
diff --git a/src/assets/theme.css b/src/assets/theme.css
deleted file mode 100644
index 0bb253ec..00000000
--- a/src/assets/theme.css
+++ /dev/null
@@ -1,6077 +0,0 @@
-@charset "UTF-8";
-:root {
-  --surface-a:#ffffff;
-  --surface-b:#fafafa;
-  --surface-c:rgba(0,0,0,.04);
-  --surface-d:rgba(0,0,0,.12);
-  --surface-e:#ffffff;
-  --surface-f:#ffffff;
-  --text-color:rgba(0, 0, 0, 0.87);
-  --text-color-secondary:textSecondaryColor;
-  --primary-color:#3F51B5;
-  --primary-color-text:#ffffff;
-  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-  --surface-0: #ffffff;
-  --surface-50: #FAFAFA;
-  --surface-100: #F5F5F5;
-  --surface-200: #EEEEEE;
-  --surface-300: #E0E0E0;
-  --surface-400: #BDBDBD;
-  --surface-500: #9E9E9E;
-  --surface-600: #757575;
-  --surface-700: #616161;
-  --surface-800: #424242;
-  --surface-900: #212121;
-  --content-padding:1rem;
-  --inline-spacing:0.5rem;
-}
-
-/* roboto-regular - latin-ext_latin */
-@font-face {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  src: local("Roboto"), local("Roboto-Regular"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-regular.woff") format("woff");
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* roboto-500 - latin-ext_latin */
-@font-face {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 500;
-  src: local("Roboto Medium"), local("Roboto-Medium"), url("./fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-500.woff") format("woff");
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* roboto-700 - latin-ext_latin */
-@font-face {
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 700;
-  src: local("Roboto Bold"), local("Roboto-Bold"), url("./fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("./fonts/roboto-v20-latin-ext_latin-700.woff") format("woff");
-  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-* {
-  box-sizing: border-box;
-}
-
-.p-component {
-  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-  font-size: 1rem;
-  font-weight: normal;
-}
-
-.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-  transition-duration: 0.2s;
-}
-
-.p-disabled, .p-component:disabled {
-  opacity: 0.38;
-}
-
-.p-error {
-  color: #B00020;
-}
-
-.p-text-secondary {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.pi {
-  font-size: 1rem;
-}
-
-.p-link {
-  font-size: 1rem;
-  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-  border-radius: 4px;
-}
-.p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-
-:root {
-  --blue-50:#f4fafe;
-  --blue-100:#cae6fc;
-  --blue-200:#a0d2fa;
-  --blue-300:#75bef8;
-  --blue-400:#4baaf5;
-  --blue-500:#2196f3;
-  --blue-600:#1c80cf;
-  --blue-700:#1769aa;
-  --blue-800:#125386;
-  --blue-900:#0d3c61;
-  --green-50:#f7faf5;
-  --green-100:#dbe8cf;
-  --green-200:#bed6a9;
-  --green-300:#a1c384;
-  --green-400:#85b15e;
-  --green-500:#689f38;
-  --green-600:#588730;
-  --green-700:#496f27;
-  --green-800:#39571f;
-  --green-900:#2a4016;
-  --yellow-50:#fffcf5;
-  --yellow-100:#fef0cd;
-  --yellow-200:#fde4a5;
-  --yellow-300:#fdd87d;
-  --yellow-400:#fccc55;
-  --yellow-500:#fbc02d;
-  --yellow-600:#d5a326;
-  --yellow-700:#b08620;
-  --yellow-800:#8a6a19;
-  --yellow-900:#644d12;
-  --cyan-50:#f2fcfd;
-  --cyan-100:#c2eff5;
-  --cyan-200:#91e2ed;
-  --cyan-300:#61d5e4;
-  --cyan-400:#30c9dc;
-  --cyan-500:#00bcd4;
-  --cyan-600:#00a0b4;
-  --cyan-700:#008494;
-  --cyan-800:#006775;
-  --cyan-900:#004b55;
-  --pink-50:#fef4f7;
-  --pink-100:#fac9da;
-  --pink-200:#f69ebc;
-  --pink-300:#f1749e;
-  --pink-400:#ed4981;
-  --pink-500:#e91e63;
-  --pink-600:#c61a54;
-  --pink-700:#a31545;
-  --pink-800:#801136;
-  --pink-900:#5d0c28;
-  --indigo-50:#f6f7fc;
-  --indigo-100:#d5d9ef;
-  --indigo-200:#b3bae2;
-  --indigo-300:#919cd5;
-  --indigo-400:#707dc8;
-  --indigo-500:#4e5fbb;
-  --indigo-600:#42519f;
-  --indigo-700:#374383;
-  --indigo-800:#2b3467;
-  --indigo-900:#1f264b;
-  --teal-50:#f2faf9;
-  --teal-100:#c2e6e2;
-  --teal-200:#91d2cc;
-  --teal-300:#61beb5;
-  --teal-400:#30aa9f;
-  --teal-500:#009688;
-  --teal-600:#008074;
-  --teal-700:#00695f;
-  --teal-800:#00534b;
-  --teal-900:#003c36;
-  --orange-50:#fffaf2;
-  --orange-100:#ffe6c2;
-  --orange-200:#ffd391;
-  --orange-300:#ffbf61;
-  --orange-400:#ffac30;
-  --orange-500:#ff9800;
-  --orange-600:#d98100;
-  --orange-700:#b36a00;
-  --orange-800:#8c5400;
-  --orange-900:#663d00;
-  --bluegray-50:#f7f9f9;
-  --bluegray-100:#d9e0e3;
-  --bluegray-200:#bbc7cd;
-  --bluegray-300:#9caeb7;
-  --bluegray-400:#7e96a1;
-  --bluegray-500:#607d8b;
-  --bluegray-600:#526a76;
-  --bluegray-700:#435861;
-  --bluegray-800:#35454c;
-  --bluegray-900:#263238;
-  --purple-50:#faf4fb;
-  --purple-100:#e7cbec;
-  --purple-200:#d4a2dd;
-  --purple-300:#c279ce;
-  --purple-400:#af50bf;
-  --purple-500:#9c27b0;
-  --purple-600:#852196;
-  --purple-700:#6d1b7b;
-  --purple-800:#561561;
-  --purple-900:#3e1046;
-  --red-50:#fef2f2;
-  --red-100:#fee2e2;
-  --red-200:#fecaca;
-  --red-300:#fca5a5;
-  --red-400:#f87171;
-  --red-500:#ef4444;
-  --red-600:#dc2626;
-  --red-700:#b91c1c;
-  --red-800:#991b1b;
-  --red-900:#7f1d1d;
-}
-
-.p-autocomplete .p-autocomplete-loader {
-  right: 0.75rem;
-}
-.p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
-  right: 3rem;
-}
-.p-autocomplete .p-autocomplete-multiple-container {
-  padding: 0.375rem 0.75rem;
-}
-.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  border-color: rgba(0, 0, 0, 0.87);
-}
-.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  border-color: #3F51B5;
-}
-.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: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-  font-size: 1rem;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0;
-  margin: 0;
-}
-.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
-  padding: 0.375rem 0.75rem;
-  margin-right: 0.5rem;
-  background: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 16px;
-}
-.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
-  margin-left: 0.5rem;
-}
-.p-autocomplete.p-invalid.p-component > .p-inputtext {
-  border-color: #B00020;
-}
-
-.p-autocomplete-panel {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-.p-autocomplete-panel .p-autocomplete-items {
-  padding: 0;
-}
-.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
-  margin: 0;
-  padding: 0.75rem 0.75rem;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
-  color: rgba(0, 0, 0, 0.87);
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
-  margin: 0;
-  padding: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-  background: #ffffff;
-  font-weight: 400;
-}
-
-.p-calendar.p-invalid.p-component > .p-inputtext {
-  border-color: #B00020;
-}
-
-.p-datepicker {
-  padding: 0.5rem;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-}
-.p-datepicker:not(.p-datepicker-inline) {
-  background: #ffffff;
-  border: 0 none;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-.p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
-  background: #ffffff;
-}
-.p-datepicker .p-datepicker-header {
-  padding: 0.5rem;
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  font-weight: 500;
-  margin: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-prev,
-.p-datepicker .p-datepicker-header .p-datepicker-next {
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
-.p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.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: none;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title {
-  line-height: 2rem;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title select {
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  border-color: #3F51B5;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
-  margin-right: 0.5rem;
-}
-.p-datepicker table {
-  font-size: 1rem;
-  margin: 0.5rem 0;
-}
-.p-datepicker table th {
-  padding: 0.5rem;
-}
-.p-datepicker table th > span {
-  width: 2.25rem;
-  height: 2.25rem;
-}
-.p-datepicker table td {
-  padding: 0.5rem;
-}
-.p-datepicker table td > span {
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: 50%;
-  transition: none;
-  border: 1px solid transparent;
-}
-.p-datepicker table td > span.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-datepicker table td > span:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-datepicker table td.p-datepicker-today > span {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border-color: black;
-}
-.p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-datepicker .p-datepicker-buttonbar {
-  padding: 0.75rem 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-}
-.p-datepicker .p-datepicker-buttonbar .p-button {
-  width: auto;
-}
-.p-datepicker .p-timepicker {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 0.5rem;
-}
-.p-datepicker .p-timepicker button {
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-datepicker .p-timepicker button:enabled:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-datepicker .p-timepicker button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.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 0.5rem;
-}
-.p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-.p-datepicker .p-monthpicker {
-  margin: 0.5rem 0;
-}
-.p-datepicker .p-monthpicker .p-monthpicker-month {
-  padding: 0.5rem;
-  transition: none;
-  border-radius: 4px;
-}
-.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid rgba(0, 0, 0, 0.12);
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-}
-.p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-  border-right: 0 none;
-}
-.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-
-.p-datepicker-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
-@media screen and (max-width: 769px) {
-  .p-datepicker table th, .p-datepicker table td {
-    padding: 0;
-  }
-}
-.p-cascadeselect {
-  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.38);
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-  border-radius: 4px;
-}
-.p-cascadeselect:not(.p-disabled):hover {
-  border-color: rgba(0, 0, 0, 0.87);
-}
-.p-cascadeselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  border-color: #3F51B5;
-}
-.p-cascadeselect .p-cascadeselect-label {
-  background: transparent;
-  border: 0 none;
-  padding: 0.75rem 0.75rem;
-}
-.p-cascadeselect .p-cascadeselect-label.p-placeholder {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-cascadeselect .p-cascadeselect-label:enabled:focus {
-  outline: 0 none;
-  box-shadow: none;
-}
-.p-cascadeselect .p-cascadeselect-trigger {
-  background: transparent;
-  color: rgba(0, 0, 0, 0.6);
-  width: 2.357rem;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.p-cascadeselect.p-invalid.p-component {
-  border-color: #B00020;
-}
-
-.p-cascadeselect-panel {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-.p-cascadeselect-panel .p-cascadeselect-items {
-  padding: 0;
-}
-.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
-  margin: 0;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-  padding: 0.75rem 0.75rem;
-}
-.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: rgba(0, 0, 0, 0.87);
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
-  font-size: 0.875rem;
-}
-
-.p-input-filled .p-cascadeselect {
-  background: #f5f5f5;
-}
-.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-  background-color: #ececec;
-}
-.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
-  background-color: #dcdcdc;
-}
-
-.p-checkbox {
-  width: 18px;
-  height: 18px;
-}
-.p-checkbox .p-checkbox-box {
-  border: 2px solid #757575;
-  background: #ffffff;
-  width: 18px;
-  height: 18px;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 4px;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.p-checkbox .p-checkbox-box .p-checkbox-icon {
-  transition-duration: 0.2s;
-  color: #ffffff;
-  font-size: 14px;
-}
-.p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #3F51B5;
-  background: #3F51B5;
-}
-.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-  border-color: rgba(0, 0, 0, 0.87);
-}
-.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  border-color: #3F51B5;
-}
-.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-  border-color: #3F51B5;
-  background: #3F51B5;
-  color: #ffffff;
-}
-.p-checkbox.p-invalid > .p-checkbox-box {
-  border-color: #B00020;
-}
-
-.p-input-filled .p-checkbox .p-checkbox-box {
-  background-color: #f5f5f5;
-}
-.p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
-  background: #3F51B5;
-}
-.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
-  background-color: #ececec;
-}
-.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
-  background: #3F51B5;
-}
-
-.p-chips .p-chips-multiple-container {
-  padding: 0.375rem 0.75rem;
-}
-.p-chips .p-chips-multiple-container:not(.p-disabled):hover {
-  border-color: rgba(0, 0, 0, 0.87);
-}
-.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  border-color: #3F51B5;
-}
-.p-chips .p-chips-multiple-container .p-chips-token {
-  padding: 0.375rem 0.75rem;
-  margin-right: 0.5rem;
-  background: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 16px;
-}
-.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
-  margin-left: 0.5rem;
-}
-.p-chips .p-chips-multiple-container .p-chips-input-token {
-  padding: 0.375rem 0;
-}
-.p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-  font-size: 1rem;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0;
-  margin: 0;
-}
-.p-chips.p-invalid.p-component > .p-inputtext {
-  border-color: #B00020;
-}
-
-.p-colorpicker-preview {
-  width: 2rem;
-  height: 2rem;
-}
-
-.p-colorpicker-panel {
-  background: #323232;
-  border-color: #191919;
-}
-.p-colorpicker-panel .p-colorpicker-color-handle,
-.p-colorpicker-panel .p-colorpicker-hue-handle {
-  border-color: #ffffff;
-}
-
-.p-colorpicker-overlay-panel {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.p-dropdown {
-  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.38);
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-  border-radius: 4px;
-}
-.p-dropdown:not(.p-disabled):hover {
-  border-color: rgba(0, 0, 0, 0.87);
-}
-.p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  border-color: #3F51B5;
-}
-.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: rgba(0, 0, 0, 0.6);
-}
-.p-dropdown .p-dropdown-label:enabled:focus {
-  outline: 0 none;
-  box-shadow: none;
-}
-.p-dropdown .p-dropdown-trigger {
-  background: transparent;
-  color: rgba(0, 0, 0, 0.6);
-  width: 2.357rem;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.p-dropdown .p-dropdown-clear-icon {
-  color: rgba(0, 0, 0, 0.6);
-  right: 2.357rem;
-}
-.p-dropdown.p-invalid.p-component {
-  border-color: #B00020;
-}
-
-.p-dropdown-panel {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-.p-dropdown-panel .p-dropdown-header {
-  padding: 0.75rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  margin: 0;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
-  padding-right: 1.75rem;
-}
-.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
-  right: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-dropdown-panel .p-dropdown-items {
-  padding: 0;
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
-  margin: 0;
-  padding: 0.75rem 0.75rem;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
-  color: rgba(0, 0, 0, 0.87);
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-  background: #ffffff;
-  font-weight: 400;
-}
-.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
-  padding: 0.75rem 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-}
-
-.p-input-filled .p-dropdown {
-  background: #f5f5f5;
-}
-.p-input-filled .p-dropdown:not(.p-disabled):hover {
-  background-color: #ececec;
-}
-.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
-  background-color: #dcdcdc;
-}
-
-.p-editor-container .p-editor-toolbar {
-  background: #ffffff;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid #e0e0e0;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
-  stroke: rgba(0, 0, 0, 0.6);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
-  fill: rgba(0, 0, 0, 0.6);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
-  stroke: rgba(0, 0, 0, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
-  fill: rgba(0, 0, 0, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-  stroke: rgba(0, 0, 0, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-  fill: rgba(0, 0, 0, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  background: #ffffff;
-  border: 0 none;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  padding: 0;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
-  color: rgba(0, 0, 0, 0.87);
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
-  padding: 0.75rem 0.75rem;
-}
-.p-editor-container .p-editor-content {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.p-editor-container .p-editor-content.ql-snow {
-  border: 1px solid #e0e0e0;
-}
-.p-editor-container .p-editor-content .ql-editor {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover,
-.p-editor-container .ql-snow.ql-toolbar button:focus {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
-  stroke: rgba(0, 0, 0, 0.87);
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
-  fill: rgba(0, 0, 0, 0.87);
-}
-.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: #3F51B5;
-}
-.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: #3F51B5;
-}
-.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: #3F51B5;
-}
-.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: #3F51B5;
-}
-
-.p-inputgroup-addon {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.6);
-  border-top: 1px solid rgba(0, 0, 0, 0.38);
-  border-left: 1px solid rgba(0, 0, 0, 0.38);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.38);
-  padding: 0.75rem 0.75rem;
-  min-width: 2.357rem;
-}
-.p-inputgroup-addon:last-child {
-  border-right: 1px solid rgba(0, 0, 0, 0.38);
-}
-
-.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: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.p-inputgroup .p-float-label:first-child input {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.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: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.p-inputgroup .p-float-label:last-child input {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-.p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 2.25rem;
-}
-
-.p-inputnumber.p-invalid.p-component > .p-inputtext {
-  border-color: #B00020;
-}
-
-.p-inputswitch {
-  width: 2.75rem;
-  height: 1rem;
-}
-.p-inputswitch .p-inputswitch-slider {
-  background: rgba(0, 0, 0, 0.38);
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-  border-radius: 0.5rem;
-}
-.p-inputswitch .p-inputswitch-slider:before {
-  background: #ffffff;
-  width: 1.5rem;
-  height: 1.5rem;
-  left: -1px;
-  margin-top: -0.75rem;
-  border-radius: 50%;
-  transition-duration: 0.2s;
-}
-.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  transform: translateX(1.5rem);
-}
-.p-inputswitch.p-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background: rgba(0, 0, 0, 0.38);
-}
-.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background: rgba(63, 81, 181, 0.5);
-}
-.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  background: #3F51B5;
-}
-.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background: rgba(63, 81, 181, 0.5);
-}
-.p-inputswitch.p-invalid {
-  border-color: #B00020;
-}
-
-.p-inputtext {
-  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-  font-size: 1rem;
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid rgba(0, 0, 0, 0.38);
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-  appearance: none;
-  border-radius: 4px;
-}
-.p-inputtext:enabled:hover {
-  border-color: rgba(0, 0, 0, 0.87);
-}
-.p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  border-color: #3F51B5;
-}
-.p-inputtext.p-invalid.p-component {
-  border-color: #B00020;
-}
-/* .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: rgba(0, 0, 0, 0.6);
-  transition-duration: 0.2s;
-}
-
-.p-input-icon-left > i:first-of-type {
-  left: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.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: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.p-input-icon-right > .p-inputtext {
-  padding-right: 2.5rem;
-}
-
-::-webkit-input-placeholder {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-:-moz-placeholder {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-::-moz-placeholder {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-:-ms-input-placeholder {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.p-input-filled .p-inputtext {
-  background-color: #f5f5f5;
-}
-.p-input-filled .p-inputtext:enabled:hover {
-  background-color: #ececec;
-}
-.p-input-filled .p-inputtext:enabled:focus {
-  background-color: #dcdcdc;
-}
-
-.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: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-}
-.p-listbox .p-listbox-header {
-  padding: 0.75rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  margin: 0;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.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: rgba(0, 0, 0, 0.6);
-}
-.p-listbox .p-listbox-list {
-  padding: 0;
-}
-.p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.75rem 0.75rem;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  transition: none;
-  border-radius: 0;
-}
-.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-listbox .p-listbox-list .p-listbox-item-group {
-  margin: 0;
-  padding: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-  background: #ffffff;
-  font-weight: 400;
-}
-.p-listbox .p-listbox-list .p-listbox-empty-message {
-  padding: 0.75rem 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-}
-.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: rgba(0, 0, 0, 0.87);
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-listbox.p-invalid {
-  border-color: #B00020;
-}
-
-.p-multiselect {
-  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.38);
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-  border-radius: 4px;
-}
-.p-multiselect:not(.p-disabled):hover {
-  border-color: rgba(0, 0, 0, 0.87);
-}
-.p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  border-color: #3F51B5;
-}
-.p-multiselect .p-multiselect-label {
-  padding: 0.75rem 0.75rem;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.p-multiselect .p-multiselect-label.p-placeholder {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-multiselect.p-multiselect-chip .p-multiselect-token {
-  padding: 0.375rem 0.75rem;
-  margin-right: 0.5rem;
-  background: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 16px;
-}
-.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
-  margin-left: 0.5rem;
-}
-.p-multiselect .p-multiselect-trigger {
-  background: transparent;
-  color: rgba(0, 0, 0, 0.6);
-  width: 2.357rem;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.p-multiselect.p-invalid.p-component {
-  border-color: #B00020;
-}
-
-.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
-  padding: 0.375rem 0.75rem;
-}
-
-.p-multiselect-panel {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-.p-multiselect-panel .p-multiselect-header {
-  padding: 0.75rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  margin: 0;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.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: rgba(0, 0, 0, 0.6);
-}
-.p-multiselect-panel .p-multiselect-header .p-checkbox {
-  margin-right: 0.5rem;
-}
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  margin-left: 0.5rem;
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-multiselect-panel .p-multiselect-items {
-  padding: 0;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.75rem 0.75rem;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: rgba(0, 0, 0, 0.87);
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  margin-right: 0.5rem;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
-  margin: 0;
-  padding: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-  background: #ffffff;
-  font-weight: 400;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
-  padding: 0.75rem 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-}
-
-.p-input-filled .p-multiselect {
-  background: #f5f5f5;
-}
-.p-input-filled .p-multiselect:not(.p-disabled):hover {
-  background-color: #ececec;
-}
-.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
-  background-color: #dcdcdc;
-}
-
-.p-password.p-invalid.p-component > .p-inputtext {
-  border-color: #B00020;
-}
-
-.p-password-panel {
-  padding: 0.75rem;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-}
-.p-password-panel .p-password-meter {
-  margin-bottom: 0.5rem;
-  background: rgba(63, 81, 181, 0.32);
-}
-.p-password-panel .p-password-meter .p-password-strength.weak {
-  background: #D32F2F;
-}
-.p-password-panel .p-password-meter .p-password-strength.medium {
-  background: #FBC02D;
-}
-.p-password-panel .p-password-meter .p-password-strength.strong {
-  background: #689F38;
-}
-
-.p-radiobutton {
-  width: 20px;
-  height: 20px;
-}
-.p-radiobutton .p-radiobutton-box {
-  border: 2px solid #757575;
-  background: #ffffff;
-  width: 20px;
-  height: 20px;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 50%;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: rgba(0, 0, 0, 0.87);
-}
-.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  border-color: #3F51B5;
-}
-.p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  width: 10px;
-  height: 10px;
-  transition-duration: 0.2s;
-  background-color: #3F51B5;
-}
-.p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #3F51B5;
-  background: #ffffff;
-}
-.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #3F51B5;
-  background: #ffffff;
-  color: #3F51B5;
-}
-.p-radiobutton.p-invalid > .p-radiobutton-box {
-  border-color: #B00020;
-}
-.p-radiobutton:focus {
-  outline: 0 none;
-}
-
-.p-input-filled .p-radiobutton .p-radiobutton-box {
-  background-color: #f5f5f5;
-}
-.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
-  background-color: #ececec;
-}
-.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
-  background: #ffffff;
-}
-.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  background: #ffffff;
-}
-
-.p-rating .p-rating-icon {
-  color: #3F51B5;
-  margin-left: 0.5rem;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-  font-size: 1rem;
-}
-.p-rating .p-rating-icon.p-rating-cancel {
-  color: #B00020;
-}
-.p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star {
-  color: #3F51B5;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
-  color: #3F51B5;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
-  color: #B00020;
-}
-
-.p-selectbutton .p-button {
-  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.p-selectbutton .p-button .p-button-icon-left,
-.p-selectbutton .p-button .p-button-icon-right {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background: #f6f6f6;
-  border-color: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-}
-.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: rgba(0, 0, 0, 0.6);
-}
-.p-selectbutton .p-button.p-highlight {
-  background: #e0e0e1;
-  border-color: #e0e0e1;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-selectbutton .p-button.p-highlight .p-button-icon-left,
-.p-selectbutton .p-button.p-highlight .p-button-icon-right {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-selectbutton .p-button.p-highlight:hover {
-  background: #d9d8d9;
-  border-color: #d9d8d9;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
-.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-selectbutton.p-invalid > .p-button {
-  border-color: #B00020;
-}
-
-.p-slider {
-  background: #c1c1c1;
-  border: 0 none;
-  border-radius: 4px;
-}
-.p-slider.p-slider-horizontal {
-  height: 2px;
-}
-.p-slider.p-slider-horizontal .p-slider-handle {
-  margin-top: -10px;
-  margin-left: -10px;
-}
-.p-slider.p-slider-vertical {
-  width: 2px;
-}
-.p-slider.p-slider-vertical .p-slider-handle {
-  margin-left: -10px;
-  margin-bottom: -10px;
-}
-.p-slider .p-slider-handle {
-  height: 20px;
-  width: 20px;
-  background: #3F51B5;
-  border: 0 none;
-  border-radius: 50%;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.p-slider .p-slider-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-slider .p-slider-range {
-  background: #3F51B5;
-}
-.p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background: #3F51B5;
-  border-color: 0 none;
-}
-
-.p-togglebutton.p-button {
-  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.p-togglebutton.p-button .p-button-icon-left,
-.p-togglebutton.p-button .p-button-icon-right {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
-  background: #f6f6f6;
-  border-color: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-}
-.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: rgba(0, 0, 0, 0.6);
-}
-.p-togglebutton.p-button.p-highlight {
-  background: #e0e0e1;
-  border-color: #e0e0e1;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-togglebutton.p-button.p-highlight .p-button-icon-left,
-.p-togglebutton.p-button.p-highlight .p-button-icon-right {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-togglebutton.p-button.p-highlight:hover {
-  background: #d9d8d9;
-  border-color: #d9d8d9;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
-.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-togglebutton.p-button.p-invalid > .p-button {
-  border-color: #B00020;
-}
-
-.p-button {
-  color: #ffffff;
-  background: #3F51B5;
-  border: 0 none !important;
-  padding: 0.571rem 0.75rem;
-  font-size: 1rem;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-  border-radius: 4px;
-}
-.p-button:enabled:hover {
-  background: rgba(63, 81, 181, 0.92);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button:enabled:active {
-  background: rgba(63, 81, 181, 0.68);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-outlined {
-  background-color: transparent;
-  color: #3F51B5;
-  border: 1px solid !important;
-}
-.p-button.p-button-outlined:enabled:hover {
-  background: rgba(63, 81, 181, 0.04);
-  color: #3F51B5;
-  border: 1px solid;
-}
-.p-button.p-button-outlined:enabled:active {
-  background: rgba(63, 81, 181, 0.16);
-  color: #3F51B5;
-  border: 1px solid;
-}
-.p-button.p-button-outlined.p-button-plain {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: rgba(0, 0, 0, 0.6);
-}
-.p-button.p-button-outlined.p-button-plain:enabled:hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-button.p-button-outlined.p-button-plain:enabled:active {
-  background: rgba(0, 0, 0, 0.16);
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-button.p-button-text {
-  background-color: transparent !important;
-  color: #3F51B5 !important;
-  border-color: transparent !important;
-}
-.p-button.p-button-text:enabled:hover {
-  background: rgba(63, 81, 181, 0.04) !important;
-  color: #3F51B5 !important;
-  border-color: transparent !important;
-}
-.p-button.p-button-text:enabled:active {
-  background: rgba(63, 81, 181, 0.16) !important;
-  color: #3F51B5 !important;
-  border-color: transparent !important;
-}
-.p-button.p-button-text.p-button-plain {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-button.p-button-text.p-button-plain:enabled:hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-button.p-button-text.p-button-plain:enabled:active {
-  background: rgba(0, 0, 0, 0.16);
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-button .p-button-icon-left {
-  margin-right: 0.5rem;
-}
-.p-button .p-button-icon-right {
-  margin-left: 0.5rem;
-}
-.p-button .p-button-icon-bottom {
-  margin-top: 0.5rem;
-}
-.p-button .p-button-icon-top {
-  margin-bottom: 0.5rem;
-}
-.p-button .p-badge {
-  margin-left: 0.5rem;
-  min-width: 1rem;
-  height: 1rem;
-  line-height: 1rem;
-  color: #3F51B5;
-  background-color: #ffffff;
-}
-.p-button.p-button-raised {
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-}
-.p-button.p-button-rounded {
-  border-radius: 2rem;
-}
-.p-button.p-button-icon-only {
-  width: 2.25rem;
-  padding: 0.571rem;
-}
-.p-button.p-button-icon-only .p-button-icon-left,
-.p-button.p-button-icon-only .p-button-icon-right {
-  margin: 0;
-}
-.p-button.p-button-icon-only.p-button-rounded {
-  border-radius: 50%;
-  height: 2.25rem;
-}
-.p-button.p-button-sm {
-  font-size: 0.875rem;
-  padding: 0.2rem 0.4rem;
-}
-.p-button.p-button-sm .p-button-icon {
-  font-size: 0.875rem;
-}
-.p-button.p-button-lg {
-  font-size: 1.25rem;
-  padding: 0.71375rem 0.9375rem;
-}
-.p-button.p-button-lg .p-button-icon {
-  font-size: 1.25rem;
-}
-
-.p-fluid .p-button {
-  width: 100%;
-}
-.p-fluid .p-button-icon-only {
-  width: 2.25rem;
-}
-.p-fluid .p-buttonset {
-  display: flex;
-}
-.p-fluid .p-buttonset .p-button {
-  flex: 1;
-}
-
-.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
-  color: #ffffff;
-  background: #ff4081;
-  border: 0 none;
-}
-.p-button.p-button-secondary:enabled:hover, .p-buttonset.p-button-secondary > .p-button:enabled:hover, .p-splitbutton.p-button-secondary > .p-button:enabled:hover {
-  background: rgba(255, 64, 129, 0.92);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus {
-  box-shadow: none;
-}
-.p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active {
-  background: rgba(255, 64, 129, 0.68);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined {
-  background-color: transparent;
-  color: #ff4081;
-  border: 1px solid;
-}
-.p-button.p-button-secondary.p-button-outlined:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover {
-  background: rgba(255, 64, 129, 0.04);
-  color: #ff4081;
-  border: 1px solid;
-}
-.p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active {
-  background: rgba(255, 64, 129, 0.16);
-  color: #ff4081;
-  border: 1px solid;
-}
-.p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text {
-  background-color: transparent;
-  color: #ff4081;
-  border-color: transparent;
-}
-.p-button.p-button-secondary.p-button-text:enabled:hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover {
-  background: rgba(255, 64, 129, 0.04);
-  border-color: transparent;
-  color: #ff4081;
-}
-.p-button.p-button-secondary.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active {
-  background: rgba(255, 64, 129, 0.16);
-  border-color: transparent;
-  color: #ff4081;
-}
-
-.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
-  color: #ffffff;
-  background: #2196F3;
-  border: 0 none;
-}
-.p-button.p-button-info:enabled:hover, .p-buttonset.p-button-info > .p-button:enabled:hover, .p-splitbutton.p-button-info > .p-button:enabled:hover {
-  background: rgba(33, 150, 243, 0.92);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus {
-  box-shadow: none;
-}
-.p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active {
-  background: rgba(33, 150, 243, 0.68);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined {
-  background-color: transparent;
-  color: #2196F3;
-  border: 1px solid;
-}
-.p-button.p-button-info.p-button-outlined:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover {
-  background: rgba(33, 150, 243, 0.04);
-  color: #2196F3;
-  border: 1px solid;
-}
-.p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active {
-  background: rgba(33, 150, 243, 0.16);
-  color: #2196F3;
-  border: 1px solid;
-}
-.p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text {
-  background-color: transparent;
-  color: #2196F3;
-  border-color: transparent;
-}
-.p-button.p-button-info.p-button-text:enabled:hover, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover {
-  background: rgba(33, 150, 243, 0.04);
-  border-color: transparent;
-  color: #2196F3;
-}
-.p-button.p-button-info.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active {
-  background: rgba(33, 150, 243, 0.16);
-  border-color: transparent;
-  color: #2196F3;
-}
-
-.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
-  color: #ffffff;
-  background: #689F38;
-  border: 0 none;
-}
-.p-button.p-button-success:enabled:hover, .p-buttonset.p-button-success > .p-button:enabled:hover, .p-splitbutton.p-button-success > .p-button:enabled:hover {
-  background: rgba(104, 159, 56, 0.92);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus {
-  box-shadow: none;
-}
-.p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active {
-  background: rgba(104, 159, 56, 0.68);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined {
-  background-color: transparent;
-  color: #689F38;
-  border: 1px solid;
-}
-.p-button.p-button-success.p-button-outlined:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover {
-  background: rgba(104, 159, 56, 0.04);
-  color: #689F38;
-  border: 1px solid;
-}
-.p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active {
-  background: rgba(104, 159, 56, 0.16);
-  color: #689F38;
-  border: 1px solid;
-}
-.p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text {
-  background-color: transparent;
-  color: #689F38;
-  border-color: transparent;
-}
-.p-button.p-button-success.p-button-text:enabled:hover, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover {
-  background: rgba(104, 159, 56, 0.04);
-  border-color: transparent;
-  color: #689F38;
-}
-.p-button.p-button-success.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active {
-  background: rgba(104, 159, 56, 0.16);
-  border-color: transparent;
-  color: #689F38;
-}
-
-.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
-  color: #212529;
-  background: #FBC02D;
-  border: 0 none;
-}
-.p-button.p-button-warning:enabled:hover, .p-buttonset.p-button-warning > .p-button:enabled:hover, .p-splitbutton.p-button-warning > .p-button:enabled:hover {
-  background: rgba(251, 192, 45, 0.92);
-  color: #212529;
-  border-color: transparent;
-}
-.p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus {
-  box-shadow: none;
-}
-.p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active {
-  background: rgba(251, 192, 45, 0.68);
-  color: #212529;
-  border-color: transparent;
-}
-.p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined {
-  background-color: transparent;
-  color: #FBC02D;
-  border: 1px solid;
-}
-.p-button.p-button-warning.p-button-outlined:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover {
-  background: rgba(251, 192, 45, 0.04);
-  color: #FBC02D;
-  border: 1px solid;
-}
-.p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active {
-  background: rgba(251, 192, 45, 0.16);
-  color: #FBC02D;
-  border: 1px solid;
-}
-.p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text {
-  background-color: transparent;
-  color: #FBC02D;
-  border-color: transparent;
-}
-.p-button.p-button-warning.p-button-text:enabled:hover, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover {
-  background: rgba(251, 192, 45, 0.04);
-  border-color: transparent;
-  color: #FBC02D;
-}
-.p-button.p-button-warning.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active {
-  background: rgba(251, 192, 45, 0.16);
-  border-color: transparent;
-  color: #FBC02D;
-}
-
-.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
-  color: #ffffff;
-  background: #9C27B0;
-  border: 0 none;
-}
-.p-button.p-button-help:enabled:hover, .p-buttonset.p-button-help > .p-button:enabled:hover, .p-splitbutton.p-button-help > .p-button:enabled:hover {
-  background: rgba(156, 39, 176, 0.92);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus {
-  box-shadow: none;
-}
-.p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active {
-  background: rgba(156, 39, 176, 0.68);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined {
-  background-color: transparent;
-  color: #9C27B0;
-  border: 1px solid;
-}
-.p-button.p-button-help.p-button-outlined:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover {
-  background: rgba(156, 39, 176, 0.04);
-  color: #9C27B0;
-  border: 1px solid;
-}
-.p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active {
-  background: rgba(156, 39, 176, 0.16);
-  color: #9C27B0;
-  border: 1px solid;
-}
-.p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text {
-  background-color: transparent;
-  color: #9C27B0;
-  border-color: transparent;
-}
-.p-button.p-button-help.p-button-text:enabled:hover, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover {
-  background: rgba(156, 39, 176, 0.04);
-  border-color: transparent;
-  color: #9C27B0;
-}
-.p-button.p-button-help.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active {
-  background: rgba(156, 39, 176, 0.16);
-  border-color: transparent;
-  color: #9C27B0;
-}
-
-.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
-  color: #ffffff;
-  background: #D32F2F;
-  border: 0 none;
-}
-.p-button.p-button-danger:enabled:hover, .p-buttonset.p-button-danger > .p-button:enabled:hover, .p-splitbutton.p-button-danger > .p-button:enabled:hover {
-  background: rgba(211, 47, 47, 0.92);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus {
-  box-shadow: none;
-}
-.p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active {
-  background: rgba(211, 47, 47, 0.68);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined {
-  background-color: transparent;
-  color: #D32F2F;
-  border: 1px solid;
-}
-.p-button.p-button-danger.p-button-outlined:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover {
-  background: rgba(211, 47, 47, 0.04);
-  color: #D32F2F;
-  border: 1px solid;
-}
-.p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active {
-  background: rgba(211, 47, 47, 0.16);
-  color: #D32F2F;
-  border: 1px solid;
-}
-.p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text {
-  background-color: transparent;
-  color: #D32F2F;
-  border-color: transparent;
-}
-.p-button.p-button-danger.p-button-text:enabled:hover, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover {
-  background: rgba(211, 47, 47, 0.04);
-  border-color: transparent;
-  color: #D32F2F;
-}
-.p-button.p-button-danger.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active {
-  background: rgba(211, 47, 47, 0.16);
-  border-color: transparent;
-  color: #D32F2F;
-}
-
-.p-button.p-button-link {
-  color: #3F51B5;
-  background: transparent;
-  border: transparent;
-}
-.p-button.p-button-link:enabled:hover {
-  background: transparent;
-  color: #3F51B5;
-  border-color: transparent;
-}
-.p-button.p-button-link:enabled:hover .p-button-label {
-  text-decoration: underline;
-}
-.p-button.p-button-link:enabled:focus {
-  background: transparent;
-  box-shadow: none;
-  border-color: transparent;
-}
-.p-button.p-button-link:enabled:active {
-  background: transparent;
-  color: #3F51B5;
-  border-color: transparent;
-}
-
-.p-carousel .p-carousel-content .p-carousel-prev,
-.p-carousel .p-carousel-content .p-carousel-next {
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  margin: 0.5rem;
-}
-.p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
-.p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.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: none;
-}
-.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: #dcdcdc;
-  width: 2rem;
-  height: 0.5rem;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  border-radius: 0;
-}
-.p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
-  background: #ececec;
-}
-.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-  background: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-
-.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;
-}
-.p-datatable .p-datatable-header {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 0.75rem;
-  font-weight: 500;
-}
-.p-datatable .p-datatable-footer {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 0.75rem;
-  font-weight: 500;
-}
-.p-datatable .p-datatable-thead > tr > th {
-  text-align: left;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  transition: none;
-}
-.p-datatable .p-datatable-tfoot > tr > td {
-  text-align: left;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-}
-.p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: rgba(0, 0, 0, 0.6);
-  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: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-  margin-left: 0.5rem;
-}
-.p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-datatable .p-sortable-column.p-highlight {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-datatable .p-sortable-column.p-highlight:hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-datatable .p-sortable-column:focus {
-  box-shadow: none;
-  outline: 0 none;
-}
-.p-datatable .p-datatable-tbody > tr {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  transition: none;
-  outline-color: transparent;
-}
-.p-datatable .p-datatable-tbody > tr > td {
-  text-align: left;
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 0.75rem;
-}
-.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: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.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: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.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: none;
-}
-.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.p-highlight {
-  background: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 rgba(63, 81, 181, 0.12);
-}
-.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 rgba(63, 81, 181, 0.12);
-}
-.p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-datatable .p-column-resizer-helper {
-  background: #3F51B5;
-}
-.p-datatable .p-datatable-scrollable-header,
-.p-datatable .p-datatable-scrollable-footer {
-  background: #ffffff;
-}
-.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-striped .p-datatable-tbody > tr:nth-child(even) {
-  background: rgba(0, 0, 0, 0.02);
-}
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #3F51B5;
-}
-.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #3F51B5;
-}
-.p-datatable.p-datatable-sm .p-datatable-header {
-  padding: 0.375rem 0.375rem;
-}
-.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
-  padding: 0.375rem 0.375rem;
-}
-.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
-  padding: 0.375rem 0.375rem;
-}
-.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
-  padding: 0.375rem 0.375rem;
-}
-.p-datatable.p-datatable-sm .p-datatable-footer {
-  padding: 0.375rem 0.375rem;
-}
-.p-datatable.p-datatable-lg .p-datatable-header {
-  padding: 0.9375rem 0.9375rem;
-}
-.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
-  padding: 0.9375rem 0.9375rem;
-}
-.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
-  padding: 0.9375rem 0.9375rem;
-}
-.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
-  padding: 0.9375rem 0.9375rem;
-}
-.p-datatable.p-datatable-lg .p-datatable-footer {
-  padding: 0.9375rem 0.9375rem;
-}
-
-.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;
-}
-.p-dataview .p-dataview-header {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 0.75rem;
-  font-weight: 500;
-}
-.p-dataview .p-dataview-content {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  padding: 0.75rem;
-}
-.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div {
-  border: solid rgba(0, 0, 0, 0.12);
-  border-width: 0 0 1px 0;
-}
-.p-dataview .p-dataview-footer {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 0.75rem;
-  font-weight: 500;
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.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: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-column-filter-menu-button:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
-  background: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.p-column-filter-menu-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-
-.p-column-filter-clear-button {
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-column-filter-clear-button:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-column-filter-clear-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-
-.p-column-filter-overlay {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  min-width: 12.5rem;
-}
-.p-column-filter-overlay .p-column-filter-row-items {
-  padding: 0;
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
-  margin: 0;
-  padding: 0.75rem 0.75rem;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-  transition: none;
-  border-radius: 0;
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
-  color: rgba(0, 0, 0, 0.87);
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  margin: 0.5rem 0;
-}
-
-.p-column-filter-overlay-menu .p-column-filter-operator {
-  padding: 0.75rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  margin: 0;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-column-filter-overlay-menu .p-column-filter-constraint {
-  padding: 0.75rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
-.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 0.75rem;
-}
-.p-column-filter-overlay-menu .p-column-filter-buttonbar {
-  padding: 0.75rem;
-}
-
-.fc .fc-view-harness th {
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
-  color: rgba(0, 0, 0, 0.87);
-}
-.fc .fc-view-harness td {
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
-  color: rgba(0, 0, 0, 0.87);
-  border-top-width: 0;
-  border-left-width: 0;
-}
-.fc .fc-view-harness .fc-daygrid-event-dot {
-  border-color: #3F51B5;
-}
-.fc .fc-view-harness .fc-row {
-  border-right: 1px solid #e0e0e0;
-  display: none !important;
-}
-.fc .fc-view-harness .fc-event, .fc .fc-view-harness .fc-event-main {
-  background: rgba(63, 81, 181, 0.12);
-  border: 1px solid rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.fc .fc-view-harness .fc-divider {
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
-  display: none !important;
-}
-.fc .fc-view-harness .fc-scrollgrid {
-  border: 1px solid #e0e0e0;
-}
-.fc .fc-view-harness .fc-scrollgrid-section-header > *,
-.fc .fc-view-harness .fc-scrollgrid-section-footer > * {
-  border-bottom-width: 0;
-}
-.fc .fc-toolbar .fc-button {
-  color: #ffffff;
-  background: #3F51B5;
-  border: 0 none;
-  font-size: 1rem;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-}
-.fc .fc-toolbar .fc-button:enabled:hover {
-  background: rgba(63, 81, 181, 0.92);
-  color: #ffffff;
-  border-color: transparent;
-}
-.fc .fc-toolbar .fc-button:enabled:active {
-  background: rgba(63, 81, 181, 0.68);
-  color: #ffffff;
-  border-color: transparent;
-}
-.fc .fc-toolbar .fc-button:enabled:active:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-  font-size: 1rem;
-}
-.fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: "";
-}
-.fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-  font-size: 1rem;
-}
-.fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: "";
-}
-.fc .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.fc .fc-toolbar .fc-button.fc-dayGridMonth-button, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button, .fc .fc-toolbar .fc-button.fc-timeGridDay-button {
-  background: #ffffff;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.fc .fc-toolbar .fc-button.fc-dayGridMonth-button:hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:hover {
-  background: #f6f6f6;
-  border-color: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-}
-.fc .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active, .fc .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
-  background: #e0e0e1;
-  border-color: #e0e0e1;
-  color: rgba(0, 0, 0, 0.87);
-}
-.fc .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active:hover, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active:hover, .fc .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active:hover {
-  background: #d9d8d9;
-  border-color: #d9d8d9;
-  color: rgba(0, 0, 0, 0.87);
-}
-.fc .fc-toolbar .fc-button.fc-dayGridMonth-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridWeek-button:focus, .fc .fc-toolbar .fc-button.fc-timeGridDay-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-  z-index: 1;
-}
-.fc .fc-toolbar .fc-button-group .fc-button {
-  border-radius: 0;
-}
-.fc .fc-toolbar .fc-button-group .fc-button:first-child {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.fc .fc-toolbar .fc-button-group .fc-button:last-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.p-orderlist .p-orderlist-controls {
-  padding: 0.75rem;
-}
-.p-orderlist .p-orderlist-controls .p-button {
-  margin-bottom: 0.5rem;
-}
-.p-orderlist .p-orderlist-header {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e0e0e0;
-  padding: 0.75rem;
-  font-weight: 500;
-  border-bottom: 0 none;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-orderlist .p-orderlist-list {
-  border: 1px solid #e0e0e0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.75rem 0.75rem;
-  margin: 0;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-  transition: transform 0.2s, none;
-}
-.p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-
-.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: rgba(30, 39, 86, 0.12);
-}
-.p-organizationchart .p-organizationchart-line-down {
-  background: rgba(0, 0, 0, 0.12);
-}
-.p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #e0e0e0;
-  border-color: rgba(0, 0, 0, 0.12);
-}
-.p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #e0e0e0;
-  border-color: rgba(0, 0, 0, 0.12);
-}
-.p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #e0e0e0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0.75rem;
-}
-.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: none;
-}
-
-.p-paginator {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: solid #e4e4e4;
-  border-width: 0;
-  padding: 0.375rem 0.75rem;
-  border-radius: 4px;
-}
-.p-paginator .p-paginator-first,
-.p-paginator .p-paginator-prev,
-.p-paginator .p-paginator-next,
-.p-paginator .p-paginator-last {
-  background-color: transparent;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.6);
-  min-width: 3rem;
-  height: 3rem;
-  margin: 0.143rem;
-  transition: none;
-  border-radius: 50%;
-}
-.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: rgba(0, 0, 0, 0.04);
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-paginator .p-paginator-first {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.p-paginator .p-paginator-last {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.p-paginator .p-dropdown {
-  margin-left: 0.5rem;
-  height: 3rem;
-}
-.p-paginator .p-dropdown .p-dropdown-label {
-  padding-right: 0;
-}
-.p-paginator .p-paginator-current {
-  background-color: transparent;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.6);
-  min-width: 3rem;
-  height: 3rem;
-  margin: 0.143rem;
-  padding: 0 0.5rem;
-}
-.p-paginator .p-paginator-pages .p-paginator-page {
-  background-color: transparent;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.6);
-  min-width: 3rem;
-  height: 3rem;
-  margin: 0.143rem;
-  transition: none;
-  border-radius: 50%;
-}
-.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background: rgba(63, 81, 181, 0.12);
-  border-color: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.p-picklist .p-picklist-buttons {
-  padding: 0.75rem;
-}
-.p-picklist .p-picklist-buttons .p-button {
-  margin-bottom: 0.5rem;
-}
-.p-picklist .p-picklist-header {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e0e0e0;
-  padding: 0.75rem;
-  font-weight: 500;
-  border-bottom: 0 none;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-picklist .p-picklist-list {
-  border: 1px solid #e0e0e0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.75rem 0.75rem;
-  margin: 0;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  background: transparent;
-  transition: transform 0.2s, none;
-}
-.p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  color: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-}
-
-.p-timeline .p-timeline-event-marker {
-  border: 0 none;
-  border-radius: 50%;
-  width: 1rem;
-  height: 1rem;
-  background-color: #bdbdbd;
-}
-.p-timeline .p-timeline-event-connector {
-  background-color: #bdbdbd;
-}
-.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 #e0e0e0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0.75rem;
-  border-radius: 4px;
-}
-.p-tree .p-tree-container .p-treenode {
-  padding: 0.25rem;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content {
-  border-radius: 4px;
-  transition: none;
-  padding: 0.571rem;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  margin-right: 0.5rem;
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  margin-right: 0.5rem;
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-  margin-right: 0.5rem;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.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: #3F51B5;
-}
-.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: #3F51B5;
-}
-.p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.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: rgba(0, 0, 0, 0.6);
-}
-.p-tree .p-treenode-children {
-  padding: 0 0 0 1rem;
-}
-.p-tree .p-tree-loading-icon {
-  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;
-}
-.p-treetable .p-treetable-header {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 0.75rem;
-  font-weight: 500;
-}
-.p-treetable .p-treetable-footer {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 0.75rem;
-  font-weight: 500;
-}
-.p-treetable .p-treetable-thead > tr > th {
-  text-align: left;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  transition: none;
-}
-.p-treetable .p-treetable-tfoot > tr > td {
-  text-align: left;
-  padding: 0.75rem 0.75rem;
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-}
-.p-treetable .p-sortable-column {
-  outline-color: transparent;
-}
-.p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: rgba(0, 0, 0, 0.6);
-  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: #3F51B5;
-  background: rgba(63, 81, 181, 0.12);
-  margin-left: 0.5rem;
-}
-.p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-treetable .p-sortable-column.p-highlight {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-treetable .p-treetable-tbody > tr {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  transition: none;
-  outline-color: transparent;
-}
-.p-treetable .p-treetable-tbody > tr > td {
-  text-align: left;
-  border: 1px solid #e4e4e4;
-  border-width: 0 0 1px 0;
-  padding: 0.75rem 0.75rem;
-}
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  margin-right: 0.5rem;
-}
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
-  margin-right: 0.5rem;
-}
-.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox .p-indeterminate .p-checkbox-icon {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-treetable .p-treetable-tbody > tr.p-highlight {
-  background: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #3F51B5;
-}
-.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
-  color: #3F51B5;
-}
-.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-treetable .p-column-resizer-helper {
-  background: #3F51B5;
-}
-.p-treetable .p-treetable-scrollable-header,
-.p-treetable .p-treetable-scrollable-footer {
-  background: #ffffff;
-}
-.p-treetable .p-treetable-loading-icon {
-  font-size: 2rem;
-}
-.p-treetable.p-treetable-gridlines .p-datatable-header {
-  border-width: 1px 1px 0 1px;
-}
-.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: 0.65625rem 0.65625rem;
-}
-.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
-  padding: 0.375rem 0.375rem;
-}
-.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
-  padding: 0.375rem 0.375rem;
-}
-.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
-  padding: 0.375rem 0.375rem;
-}
-.p-treetable.p-treetable-sm .p-treetable-footer {
-  padding: 0.375rem 0.375rem;
-}
-.p-treetable.p-treetable-lg .p-treetable-header {
-  padding: 0.9375rem 0.9375rem;
-}
-.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
-  padding: 0.9375rem 0.9375rem;
-}
-.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
-  padding: 0.9375rem 0.9375rem;
-}
-.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
-  padding: 0.9375rem 0.9375rem;
-}
-.p-treetable.p-treetable-lg .p-treetable-footer {
-  padding: 0.9375rem 0.9375rem;
-}
-
-.p-accordion .p-accordion-header .p-accordion-header-link {
-  padding: 1.25rem;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  font-weight: 400;
-  border-radius: 4px;
-  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: none;
-}
-.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
-  background: #f6f6f6;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
-  background: #ffffff;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
-  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: transparent;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-accordion .p-accordion-content {
-  padding: 0.75rem 1.25rem;
-  border: 0 none;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border-top: 0;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.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: 4px;
-  border-top-left-radius: 4px;
-}
-.p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.p-accordion .p-accordion-tab:last-child .p-accordion-content {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.p-card {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-}
-.p-card .p-card-body {
-  padding: 0.75rem;
-}
-.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: rgba(0, 0, 0, 0.6);
-}
-.p-card .p-card-content {
-  padding: 0.75rem 0;
-}
-.p-card .p-card-footer {
-  padding: 0.75rem 0 0 0;
-}
-
-.p-fieldset {
-  border: 1px solid #e0e0e0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 4px;
-}
-.p-fieldset .p-fieldset-legend {
-  padding: 0.75rem;
-  border: 1px solid #e0e0e0;
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  font-weight: 500;
-  border-radius: 4px;
-}
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
-  padding: 0;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
-  padding: 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 4px;
-  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: none;
-}
-.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: #e0e0e0;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-fieldset .p-fieldset-content {
-  padding: 0.75rem;
-}
-
-.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 rgba(0, 0, 0, 0.12);
-}
-.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 rgba(0, 0, 0, 0.12);
-}
-.p-divider.p-divider-vertical .p-divider-content {
-  padding: 0.5rem 0;
-}
-
-.p-panel .p-panel-header {
-  border: 1px solid #e0e0e0;
-  padding: 0.75rem;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-panel .p-panel-header .p-panel-title {
-  font-weight: 500;
-}
-.p-panel .p-panel-header .p-panel-header-icon {
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-panel .p-panel-header .p-panel-header-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-panel.p-panel-toggleable .p-panel-header {
-  padding: 0.5rem 1rem;
-}
-.p-panel .p-panel-content {
-  padding: 0.75rem;
-  border: 1px solid #e0e0e0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  border-top: 0 none;
-}
-.p-panel .p-panel-footer {
-  padding: 0.75rem 0.75rem;
-  border: 1px solid #e0e0e0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border-top: 0 none;
-}
-
-.p-scrollpanel .p-scrollpanel-bar {
-  background: rgba(0, 0, 0, 0.12);
-  border: 0 none;
-}
-
-.p-splitter {
-  border: 1px solid #e0e0e0;
-  background: #ffffff;
-  border-radius: 4px;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-splitter .p-splitter-gutter {
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
-  background: rgba(0, 0, 0, 0.12);
-}
-.p-splitter .p-splitter-gutter-resizing {
-  background: rgba(0, 0, 0, 0.12);
-}
-
-.p-tabview .p-tabview-nav {
-  background: #ffffff;
-  border: solid rgba(0, 0, 0, 0.12);
-  border-width: 0 0 1px 0;
-}
-.p-tabview .p-tabview-nav li {
-  margin-right: 0;
-}
-.p-tabview .p-tabview-nav li .p-tabview-nav-link {
-  border: none;
-  border-width: 0 0 0 0;
-  border-color: transparent transparent transparent transparent;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.6);
-  padding: 0.75rem 1.25rem;
-  font-weight: 500;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  transition: none;
-  margin: 0 0 0 0;
-}
-.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
-  background: rgba(63, 81, 181, 0.04);
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
-  background: #ffffff;
-  border-color: transparent;
-  color: #3F51B5;
-}
-.p-tabview .p-tabview-panels {
-  background: #ffffff;
-  padding: 0.75rem;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.p-toolbar {
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
-  padding: 0.75rem;
-  border-radius: 4px;
-}
-.p-toolbar .p-toolbar-separator {
-  margin: 0 0.5rem;
-}
-
-.p-confirm-popup {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  border-radius: 4px;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
-}
-.p-confirm-popup .p-confirm-popup-content {
-  padding: 1.25rem;
-}
-.p-confirm-popup .p-confirm-popup-footer {
-  text-align: right;
-  padding: 0 1.25rem 0.75rem 1.25rem;
-}
-.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: 4px;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
-  border: 0 none;
-}
-.p-dialog .p-dialog-header {
-  border-bottom: 0 none;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 1.25rem;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-dialog .p-dialog-header .p-dialog-title {
-  font-weight: 500;
-  font-size: 1.25rem;
-}
-.p-dialog .p-dialog-header .p-dialog-header-icon {
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  margin-right: 0.5rem;
-}
-.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-dialog .p-dialog-header .p-dialog-header-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
-  margin-right: 0;
-}
-.p-dialog .p-dialog-content {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0 1.25rem 1.25rem 1.25rem;
-}
-.p-dialog .p-dialog-footer {
-  border-top: 0 none;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0.75rem 1.25rem;
-  text-align: right;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.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-dialog-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
-}
-
-.p-overlaypanel {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  border-radius: 4px;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
-}
-.p-overlaypanel .p-overlaypanel-content {
-  padding: 0.75rem;
-}
-.p-overlaypanel .p-overlaypanel-close {
-  background: #3F51B5;
-  color: #ffffff;
-  width: 2rem;
-  height: 2rem;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  border-radius: 50%;
-  position: absolute;
-  top: -1rem;
-  right: -1rem;
-}
-.p-overlaypanel .p-overlaypanel-close:enabled:hover {
-  background: rgba(63, 81, 181, 0.92);
-  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: #ffffff;
-}
-.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: rgba(0, 0, 0, 0.87);
-  padding: 0.75rem;
-  border: 0 none;
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
-}
-.p-sidebar .p-sidebar-close {
-  width: 2rem;
-  height: 2rem;
-  color: rgba(0, 0, 0, 0.6);
-  border: 0 none;
-  background: transparent;
-  border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-sidebar .p-sidebar-close:enabled:hover {
-  color: rgba(0, 0, 0, 0.6);
-  border-color: transparent;
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-sidebar .p-sidebar-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-
-.p-sidebar-mask.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
-.p-tooltip .p-tooltip-text {
-  background: rgba(97, 97, 97, 0.9);
-  color: #ffffff;
-  padding: 0.5rem;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-}
-.p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: rgba(97, 97, 97, 0.9);
-}
-.p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: rgba(97, 97, 97, 0.9);
-}
-.p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: rgba(97, 97, 97, 0.9);
-}
-.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: rgba(97, 97, 97, 0.9);
-}
-
-.p-fileupload .p-fileupload-buttonbar {
-  background: #ffffff;
-  padding: 0.75rem;
-  border: 1px solid #e0e0e0;
-  color: rgba(0, 0, 0, 0.87);
-  border-bottom: 0 none;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-fileupload .p-fileupload-buttonbar .p-button {
-  margin-right: 0.5rem;
-}
-.p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-fileupload .p-fileupload-content {
-  background: #ffffff;
-  padding: 2rem 1rem;
-  border: 1px solid #e0e0e0;
-  color: rgba(0, 0, 0, 0.87);
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.p-fileupload .p-progressbar {
-  height: 4px;
-}
-.p-fileupload .p-fileupload-row > div {
-  padding: 0.75rem 0.75rem;
-}
-.p-fileupload.p-fileupload-advanced .p-message {
-  margin-top: 0;
-}
-
-.p-fileupload-choose:not(.p-disabled):hover {
-  background: rgba(63, 81, 181, 0.92);
-  color: #ffffff;
-  border-color: transparent;
-}
-.p-fileupload-choose:not(.p-disabled):active {
-  background: rgba(63, 81, 181, 0.68);
-  color: #ffffff;
-  border-color: transparent;
-}
-
-.p-breadcrumb {
-  background: #ffffff;
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-  padding: 0.75rem;
-}
-.p-breadcrumb ul li .p-menuitem-link {
-  transition: none;
-  border-radius: 4px;
-}
-.p-breadcrumb ul li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-breadcrumb ul li.p-breadcrumb-chevron {
-  margin: 0 0.5rem 0 0.5rem;
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-breadcrumb ul li:last-child .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-breadcrumb ul li:last-child .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.p-contextmenu {
-  padding: 0.5rem 0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  width: 12.5rem;
-}
-.p-contextmenu .p-menuitem-link {
-  padding: 0.75rem 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0;
-  transition: none;
-  user-select: none;
-}
-.p-contextmenu .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-contextmenu .p-menuitem-link .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-right: 0.5rem;
-}
-.p-contextmenu .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-contextmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-contextmenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-contextmenu .p-submenu-list {
-  padding: 0.5rem 0;
-  background: #ffffff;
-  border: 0 none;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-}
-.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-contextmenu .p-menu-separator {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  margin: 0.5rem 0;
-}
-.p-contextmenu .p-submenu-icon {
-  font-size: 0.875rem;
-}
-
-.p-megamenu {
-  padding: 0.75rem;
-  background: transparent;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 4px;
-  transition: none;
-  user-select: none;
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-right: 0.5rem;
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-left: 0.5rem;
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
-.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text,
-.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon,
-.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon,
-.p-megamenu .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-megamenu .p-menuitem-link {
-  padding: 0.75rem 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0;
-  transition: none;
-  user-select: none;
-}
-.p-megamenu .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-megamenu .p-menuitem-link .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-right: 0.5rem;
-}
-.p-megamenu .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-megamenu .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-megamenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-megamenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-megamenu .p-megamenu-panel {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 0 none;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-}
-.p-megamenu .p-megamenu-submenu-header {
-  margin: 0;
-  padding: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-  background: #ffffff;
-  font-weight: 400;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-megamenu .p-megamenu-submenu {
-  padding: 0.5rem 0;
-  width: 12.5rem;
-}
-.p-megamenu .p-megamenu-submenu .p-menu-separator {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  margin: 0.5rem 0;
-}
-.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-megamenu.p-megamenu-vertical {
-  width: 12.5rem;
-  padding: 0.5rem 0;
-}
-
-.p-menu {
-  padding: 0.5rem 0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-  width: 12.5rem;
-}
-.p-menu .p-menuitem-link {
-  padding: 0.75rem 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0;
-  transition: none;
-  user-select: none;
-}
-.p-menu .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-menu .p-menuitem-link .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-right: 0.5rem;
-}
-.p-menu .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menu .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-menu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-menu.p-menu-overlay {
-  background: #ffffff;
-  border: 0 none;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-}
-.p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.75rem;
-  color: rgba(0, 0, 0, 0.6);
-  background: #ffffff;
-  font-weight: 400;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-.p-menu .p-menu-separator {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  margin: 0.5rem 0;
-}
-
-.p-menubar {
-  padding: 0.75rem;
-  background: transparent;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-}
-.p-menubar .p-menuitem-link {
-  padding: 0.75rem 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0;
-  transition: none;
-  user-select: none;
-}
-.p-menubar .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-menubar .p-menuitem-link .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-right: 0.5rem;
-}
-.p-menubar .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menubar .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menubar .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menubar .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 4px;
-  transition: none;
-  user-select: none;
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-right: 0.5rem;
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-left: 0.5rem;
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link,
-.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text,
-.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon,
-.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon,
-.p-menubar .p-menubar-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-menubar .p-submenu-list {
-  padding: 0.5rem 0;
-  background: #ffffff;
-  border: 0 none;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  width: 12.5rem;
-}
-.p-menubar .p-submenu-list .p-menu-separator {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  margin: 0.5rem 0;
-}
-.p-menubar .p-submenu-list .p-submenu-icon {
-  font-size: 0.875rem;
-}
-.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-
-@media screen and (max-width: 960px) {
-  .p-menubar {
-    position: relative;
-  }
-  .p-menubar .p-menubar-button {
-    display: flex;
-    width: 2rem;
-    height: 2rem;
-    color: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
-    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  }
-  .p-menubar .p-menubar-button:hover {
-    color: rgba(0, 0, 0, 0.6);
-    background: rgba(0, 0, 0, 0.04);
-  }
-  .p-menubar .p-menubar-button:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-menubar .p-menubar-root-list {
-    position: absolute;
-    display: none;
-    padding: 0.5rem 0;
-    background: #ffffff;
-    border: 0 none;
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    width: 100%;
-  }
-  .p-menubar .p-menubar-root-list .p-menu-separator {
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
-    margin: 0.5rem 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-link {
-    padding: 0.75rem 0.75rem;
-    color: rgba(0, 0, 0, 0.87);
-    border-radius: 0;
-    transition: none;
-    user-select: none;
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-text {
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-menuitem-icon {
-    color: rgba(0, 0, 0, 0.6);
-    margin-right: 0.5rem;
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link .p-submenu-icon {
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
-    background: rgba(0, 0, 0, 0.04);
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-    color: rgba(0, 0, 0, 0.87);
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:focus {
-    outline: 0 none;
-    outline-offset: 0;
-    box-shadow: none;
-  }
-  .p-menubar .p-menubar-root-list > .p-menuitem > .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-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-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 ul li a {
-    padding-left: 2.25rem;
-  }
-  .p-menubar .p-menubar-root-list ul li ul li a {
-    padding-left: 3.75rem;
-  }
-  .p-menubar .p-menubar-root-list ul li ul li ul li a {
-    padding-left: 5.25rem;
-  }
-  .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
-    padding-left: 6.75rem;
-  }
-  .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
-    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 > a {
-  padding: 1.25rem;
-  border: 0 none;
-  color: rgba(0, 0, 0, 0.87);
-  background: #ffffff;
-  font-weight: 400;
-  border-radius: 4px;
-  transition: none;
-}
-.p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
-  margin-right: 0.5rem;
-}
-.p-panelmenu .p-panelmenu-header > a .p-menuitem-icon {
-  margin-right: 0.5rem;
-}
-.p-panelmenu .p-panelmenu-header > a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover {
-  background: #f6f6f6;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-panelmenu .p-panelmenu-header.p-highlight {
-  margin-bottom: 0;
-}
-.p-panelmenu .p-panelmenu-header.p-highlight > a {
-  background: #ffffff;
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled) > a:hover {
-  border-color: transparent;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-panelmenu .p-panelmenu-content {
-  padding: 0.5rem 0;
-  border: 0 none;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  margin-bottom: 0;
-  border-top: 0;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
-  padding: 0.75rem 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0;
-  transition: none;
-  user-select: none;
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-right: 0.5rem;
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
-  margin-right: 0.5rem;
-}
-.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-submenu) {
-  padding: 0 0 0 1rem;
-}
-.p-panelmenu .p-panelmenu-panel {
-  margin-bottom: 0;
-}
-.p-panelmenu .p-panelmenu-panel .p-panelmenu-header > a {
-  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 > a {
-  border-top: 0 none;
-}
-.p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover > a, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover > a {
-  border-top: 0 none;
-}
-.p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header > a {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) > a {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-
-.p-steps .p-steps-item .p-menuitem-link {
-  background: transparent;
-  transition: none;
-  border-radius: 4px;
-  background: transparent;
-}
-.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid transparent;
-  background: transparent;
-  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: rgba(0, 0, 0, 0.87);
-}
-.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-steps .p-steps-item:before {
-  content: " ";
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -1rem;
-}
-
-.p-tabmenu .p-tabmenu-nav {
-  background: #ffffff;
-  border: solid rgba(0, 0, 0, 0.12);
-  border-width: 0 0 1px 0;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
-  margin-right: 0;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  border: none;
-  border-width: 0 0 0 0;
-  border-color: transparent transparent transparent transparent;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.6);
-  padding: 0.75rem 1.25rem;
-  font-weight: 500;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  transition: none;
-  margin: 0 0 0 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: none;
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background: rgba(63, 81, 181, 0.04);
-  border-color: transparent;
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background: #ffffff;
-  border-color: transparent;
-  color: #3F51B5;
-}
-
-.p-tieredmenu {
-  padding: 0.5rem 0;
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e5e5e5;
-  border-radius: 4px;
-  width: 12.5rem;
-}
-.p-tieredmenu .p-menuitem-link {
-  padding: 0.75rem 0.75rem;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0;
-  transition: none;
-  user-select: none;
-}
-.p-tieredmenu .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-tieredmenu .p-menuitem-link .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-  margin-right: 0.5rem;
-}
-.p-tieredmenu .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-tieredmenu .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-tieredmenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-.p-tieredmenu.p-tieredmenu-overlay {
-  background: #ffffff;
-  border: 0 none;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-}
-.p-tieredmenu .p-submenu-list {
-  padding: 0.5rem 0;
-  background: #ffffff;
-  border: 0 none;
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-}
-.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-tieredmenu .p-menu-separator {
-  border-top: 1px solid rgba(0, 0, 0, 0.12);
-  margin: 0.5rem 0;
-}
-.p-tieredmenu .p-submenu-icon {
-  font-size: 0.875rem;
-}
-
-.p-inline-message {
-  padding: 0.75rem 0.75rem;
-  margin: 0;
-  border-radius: 4px;
-}
-.p-inline-message.p-inline-message-info {
-  background: #B3E5FC;
-  border: solid transparent;
-  border-width: 1px;
-  color: #01579B;
-}
-.p-inline-message.p-inline-message-info .p-inline-message-icon {
-  color: #01579B;
-}
-.p-inline-message.p-inline-message-success {
-  background: #C8E6C9;
-  border: solid transparent;
-  border-width: 1px;
-  color: #1B5E20;
-}
-.p-inline-message.p-inline-message-success .p-inline-message-icon {
-  color: #1B5E20;
-}
-.p-inline-message.p-inline-message-warn {
-  background: #FFECB3;
-  border: solid transparent;
-  border-width: 1px;
-  color: #7f6003;
-}
-.p-inline-message.p-inline-message-warn .p-inline-message-icon {
-  color: #7f6003;
-}
-.p-inline-message.p-inline-message-error {
-  background: #FFCDD2;
-  border: solid transparent;
-  border-width: 1px;
-  color: #B71C1C;
-}
-.p-inline-message.p-inline-message-error .p-inline-message-icon {
-  color: #B71C1C;
-}
-.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: 0.75rem 0;
-  border-radius: 4px;
-}
-.p-message .p-message-wrapper {
-  padding: 1rem 1.25rem;
-}
-.p-message .p-message-close {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background: transparent;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.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: none;
-}
-.p-message.p-message-info {
-  background: #B3E5FC;
-  border: solid transparent;
-  border-width: 0 0 0 0;
-  color: #01579B;
-}
-.p-message.p-message-info .p-message-icon {
-  color: #01579B;
-}
-.p-message.p-message-info .p-message-close {
-  color: #01579B;
-}
-.p-message.p-message-success {
-  background: #C8E6C9;
-  border: solid transparent;
-  border-width: 0 0 0 0;
-  color: #1B5E20;
-}
-.p-message.p-message-success .p-message-icon {
-  color: #1B5E20;
-}
-.p-message.p-message-success .p-message-close {
-  color: #1B5E20;
-}
-.p-message.p-message-warn {
-  background: #FFECB3;
-  border: solid transparent;
-  border-width: 0 0 0 0;
-  color: #7f6003;
-}
-.p-message.p-message-warn .p-message-icon {
-  color: #7f6003;
-}
-.p-message.p-message-warn .p-message-close {
-  color: #7f6003;
-}
-.p-message.p-message-error {
-  background: #FFCDD2;
-  border: solid transparent;
-  border-width: 0 0 0 0;
-  color: #B71C1C;
-}
-.p-message.p-message-error .p-message-icon {
-  color: #B71C1C;
-}
-.p-message.p-message-error .p-message-close {
-  color: #B71C1C;
-}
-.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 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-}
-.p-toast .p-toast-message .p-toast-message-content {
-  padding: 1.25rem;
-  border-width: 0 0 0 0;
-}
-.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: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.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: none;
-}
-.p-toast .p-toast-message.p-toast-message-info {
-  background: #B3E5FC;
-  border: solid transparent;
-  border-width: 0 0 0 0;
-  color: #01579B;
-}
-.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: #01579B;
-}
-.p-toast .p-toast-message.p-toast-message-success {
-  background: #C8E6C9;
-  border: solid transparent;
-  border-width: 0 0 0 0;
-  color: #1B5E20;
-}
-.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: #1B5E20;
-}
-.p-toast .p-toast-message.p-toast-message-warn {
-  background: #FFECB3;
-  border: solid transparent;
-  border-width: 0 0 0 0;
-  color: #7f6003;
-}
-.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: #7f6003;
-}
-.p-toast .p-toast-message.p-toast-message-error {
-  background: #FFCDD2;
-  border: solid transparent;
-  border-width: 0 0 0 0;
-  color: #B71C1C;
-}
-.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: #B71C1C;
-}
-
-.p-galleria .p-galleria-close {
-  margin: 0.5rem;
-  background: transparent;
-  color: rgba(255, 255, 255, 0.87);
-  width: 4rem;
-  height: 4rem;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  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: rgba(255, 255, 255, 0.87);
-}
-.p-galleria .p-galleria-item-nav {
-  background: transparent;
-  color: #f6f6f6;
-  width: 4rem;
-  height: 4rem;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  border-radius: 50%;
-  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: rgba(255, 255, 255, 0.87);
-}
-.p-galleria .p-galleria-caption {
-  background: rgba(0, 0, 0, 0.5);
-  color: rgba(255, 255, 255, 0.87);
-  padding: 1rem;
-}
-.p-galleria .p-galleria-indicators {
-  padding: 1rem;
-}
-.p-galleria .p-galleria-indicators .p-galleria-indicator button {
-  background-color: #dcdcdc;
-  width: 1.25rem;
-  height: 1.25rem;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  border-radius: 50%;
-}
-.p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
-  background: #ececec;
-}
-.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.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: rgba(63, 81, 181, 0.12);
-  color: #3F51B5;
-}
-.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: rgba(255, 255, 255, 0.87);
-  width: 2rem;
-  height: 2rem;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-  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: rgba(255, 255, 255, 0.87);
-}
-.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-
-.p-galleria-mask.p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.9);
-}
-
-.p-avatar {
-  background-color: rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-}
-.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: #3F51B5;
-  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: #ff4081;
-  color: #ffffff;
-}
-.p-badge.p-badge-success {
-  background-color: #689F38;
-  color: #ffffff;
-}
-.p-badge.p-badge-info {
-  background-color: #2196F3;
-  color: #ffffff;
-}
-.p-badge.p-badge-warning {
-  background-color: #FBC02D;
-  color: #212529;
-}
-.p-badge.p-badge-danger {
-  background-color: #D32F2F;
-  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-blockui.p-component-overlay {
-  background: rgba(0, 0, 0, 0.32);
-}
-
-.p-chip {
-  background-color: rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 16px;
-  padding: 0 0.75rem;
-}
-.p-chip .p-chip-text {
-  line-height: 1.5;
-  margin-top: 0.375rem;
-  margin-bottom: 0.375rem;
-}
-.p-chip .p-chip-icon {
-  margin-right: 0.5rem;
-}
-.p-chip img {
-  width: 2.25rem;
-  height: 2.25rem;
-  margin-left: -0.75rem;
-  margin-right: 0.5rem;
-}
-.p-chip .p-chip-remove-icon {
-  margin-left: 0.5rem;
-  border-radius: 4px;
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-chip .p-chip-remove-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-
-.p-inplace .p-inplace-display {
-  padding: 1rem 1rem;
-  border-radius: 4px;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background: rgba(0, 0, 0, 0.04);
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: none;
-}
-
-.p-progressbar {
-  border: 0 none;
-  height: 4px;
-  background: rgba(63, 81, 181, 0.32);
-  border-radius: 4px;
-}
-.p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #3F51B5;
-}
-.p-progressbar .p-progressbar-label {
-  color: rgba(0, 0, 0, 0.87);
-  line-height: 4px;
-}
-
-.p-scrolltop {
-  width: 2.75rem;
-  height: 2.75rem;
-  border-radius: 50%;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
-}
-.p-scrolltop.p-link {
-  background: #ff4081;
-}
-.p-scrolltop.p-link:hover {
-  background: rgba(255, 64, 129, 0.92);
-}
-.p-scrolltop .p-scrolltop-icon {
-  font-size: 1.15rem;
-  color: #ffffff;
-}
-
-.p-skeleton {
-  background-color: rgba(0, 0, 0, 0.08);
-  border-radius: 4px;
-}
-.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: #3F51B5;
-  color: #ffffff !important;
-  font-size: 0.75rem;
-  font-weight: 700;
-  padding: 0.25rem 0.4rem;
-  border-radius: 4px;
-}
-.p-tag.p-tag-success {
-  background-color: #689F38;
-  color: #ffffff;
-}
-.p-tag.p-tag-info {
-  background-color: #2196F3;
-  color: #ffffff;
-}
-.p-tag.p-tag-warning {
-  background-color: #FBC02D;
-  color: #212529;
-}
-.p-tag.p-tag-danger {
-  background-color: #D32F2F;
-  color: #ffffff;
-}
-.p-tag .p-tag-icon {
-  margin-right: 0.25rem;
-  font-size: 0.75rem;
-}
-
-.p-terminal {
-  background: #ffffff;
-  color: rgba(0, 0, 0, 0.87);
-  border: 1px solid #e0e0e0;
-  padding: 0.75rem;
-}
-.p-terminal .p-terminal-input {
-  font-size: 1rem;
-  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
-}
-
-.p-accordion .p-accordion-tab {
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  margin-bottom: 0;
-  border-radius: 0;
-  position: relative;
-  transition: margin-bottom 225ms;
-}
-.p-accordion .p-accordion-tab:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-.p-accordion .p-accordion-tab:last-child {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.p-accordion .p-accordion-tab .p-accordion-toggle-icon {
-  order: 1;
-  margin-left: auto;
-  transition: transform 0.2s;
-}
-.p-accordion .p-accordion-tab:not(.p-accordion-tab-active) .p-accordion-header-link:focus {
-  background: #f6f6f6;
-}
-.p-accordion .p-accordion-tab:not(.p-accordion-tab-active) .p-accordion-toggle-icon {
-  transform: rotate(-270deg);
-}
-.p-accordion .p-accordion-tab.p-accordion-tab-active {
-  margin-bottom: 1rem;
-}
-.p-accordion .p-accordion-tab.p-accordion-tab-active .p-accordion-toggle-icon {
-  transform: rotate(-180deg);
-}
-.p-accordion .p-accordion-tab .p-accordion-header.p-disabled {
-  opacity: 1;
-}
-.p-accordion .p-accordion-tab .p-accordion-header.p-disabled .p-accordion-header-link > * {
-  opacity: 0.38;
-}
-
-.p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
-}
-
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid transparent;
-  background: #f5f5f5 no-repeat;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
-  background-size: 0 2px, 100% 1px;
-  background-position: 50% 100%, 50% 100%;
-  background-origin: border-box;
-}
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  background-color: #ececec;
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
-}
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-color: #dcdcdc;
-  border-color: transparent;
-  background-size: 100% 2px, 100% 1px;
-}
-.p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:hover, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-inputtext:enabled:focus {
-  background-image: none;
-  background: transparent;
-}
-
-.p-float-label .p-autocomplete-multiple-container .p-autocomplete-token {
-  padding: 0.25rem 1rem;
-}
-
-.p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
-  font-size: 75%;
-}
-.p-input-filled .p-float-label .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  padding: 0;
-}
-.p-input-filled .p-autocomplete.p-invalid > .p-inputtext {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-autocomplete.p-invalid > .p-inputtext:enabled:hover {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-autocomplete.p-invalid > .p-inputtext:enabled:focus {
-  box-shadow: none;
-  border-color: transparent;
-}
-.p-input-filled .p-autocomplete.p-invalid > .p-autocomplete-multiple-container {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-
-.p-autocomplete.p-invalid > .p-inputtext:enabled:focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-.p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-
-.p-button {
-  font-weight: 500;
-  min-width: 4rem;
-}
-.p-button.p-button-icon-only {
-  min-width: auto;
-}
-.p-button:enabled:focus {
-  background: rgba(63, 81, 181, 0.76);
-}
-.p-button:enabled:active {
-  background: rgba(63, 81, 181, 0.68);
-}
-.p-button .p-ink {
-  background-color: rgba(255, 255, 255, 0.32);
-}
-.p-button.p-button-text:enabled:focus, .p-button.p-button-outlined:enabled:focus {
-  background: rgba(63, 81, 181, 0.12);
-}
-.p-button.p-button-text:enabled:active, .p-button.p-button-outlined:enabled:active {
-  background: rgba(63, 81, 181, 0.16);
-}
-.p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink {
-  background-color: rgba(63, 81, 181, 0.16);
-}
-.p-button:disabled {
-  background-color: rgba(0, 0, 0, 0.12) !important;
-  color: rgba(0, 0, 0, 0.38) !important;
-  opacity: 1;
-}
-.p-button:disabled.p-button-text {
-  background-color: transparent !important;
-  color: rgba(0, 0, 0, 0.38) !important;
-}
-.p-button:disabled.p-button-outlined {
-  background-color: transparent !important;
-  color: rgba(0, 0, 0, 0.38) !important;
-  border-color: rgba(0, 0, 0, 0.38) !important;
-}
-.p-button.p-button-raised:enabled:focus {
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-}
-
-.p-button.p-button-secondary:enabled:focus, .p-buttonset.p-button-secondary > .p-button:enabled:focus, .p-splitbutton.p-button-secondary > .p-button:enabled:focus {
-  background: rgba(255, 64, 129, 0.76);
-}
-.p-button.p-button-secondary:enabled:active, .p-buttonset.p-button-secondary > .p-button:enabled:active, .p-splitbutton.p-button-secondary > .p-button:enabled:active {
-  background: rgba(255, 64, 129, 0.68);
-}
-.p-button.p-button-secondary.p-button-text:enabled:focus, .p-button.p-button-secondary.p-button-outlined:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus {
-  background: rgba(255, 64, 129, 0.12);
-}
-.p-button.p-button-secondary.p-button-text:enabled:active, .p-button.p-button-secondary.p-button-outlined:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active {
-  background: rgba(255, 64, 129, 0.16);
-}
-.p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink {
-  background-color: rgba(255, 64, 129, 0.16);
-}
-
-.p-button.p-button-info:enabled:focus, .p-buttonset.p-button-info > .p-button:enabled:focus, .p-splitbutton.p-button-info > .p-button:enabled:focus {
-  background: rgba(33, 150, 243, 0.76);
-}
-.p-button.p-button-info:enabled:active, .p-buttonset.p-button-info > .p-button:enabled:active, .p-splitbutton.p-button-info > .p-button:enabled:active {
-  background: rgba(33, 150, 243, 0.68);
-}
-.p-button.p-button-info.p-button-text:enabled:focus, .p-button.p-button-info.p-button-outlined:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus {
-  background: rgba(33, 150, 243, 0.12);
-}
-.p-button.p-button-info.p-button-text:enabled:active, .p-button.p-button-info.p-button-outlined:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active {
-  background: rgba(33, 150, 243, 0.16);
-}
-.p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink {
-  background-color: rgba(33, 150, 243, 0.16);
-}
-
-.p-button.p-button-success:enabled:focus, .p-buttonset.p-button-success > .p-button:enabled:focus, .p-splitbutton.p-button-success > .p-button:enabled:focus {
-  background: rgba(104, 159, 56, 0.76);
-}
-.p-button.p-button-success:enabled:active, .p-buttonset.p-button-success > .p-button:enabled:active, .p-splitbutton.p-button-success > .p-button:enabled:active {
-  background: rgba(104, 159, 56, 0.68);
-}
-.p-button.p-button-success.p-button-text:enabled:focus, .p-button.p-button-success.p-button-outlined:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus {
-  background: rgba(104, 159, 56, 0.12);
-}
-.p-button.p-button-success.p-button-text:enabled:active, .p-button.p-button-success.p-button-outlined:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active {
-  background: rgba(104, 159, 56, 0.16);
-}
-.p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink {
-  background-color: rgba(104, 159, 56, 0.16);
-}
-
-.p-button.p-button-warning:enabled:focus, .p-buttonset.p-button-warning > .p-button:enabled:focus, .p-splitbutton.p-button-warning > .p-button:enabled:focus {
-  background: rgba(251, 192, 45, 0.76);
-}
-.p-button.p-button-warning:enabled:active, .p-buttonset.p-button-warning > .p-button:enabled:active, .p-splitbutton.p-button-warning > .p-button:enabled:active {
-  background: rgba(251, 192, 45, 0.68);
-}
-.p-button.p-button-warning.p-button-text:enabled:focus, .p-button.p-button-warning.p-button-outlined:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus {
-  background: rgba(251, 192, 45, 0.12);
-}
-.p-button.p-button-warning.p-button-text:enabled:active, .p-button.p-button-warning.p-button-outlined:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active {
-  background: rgba(251, 192, 45, 0.16);
-}
-.p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink {
-  background-color: rgba(251, 192, 45, 0.16);
-}
-
-.p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus {
-  background: rgba(156, 39, 176, 0.76) !important;
-}
-.p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active {
-  background: rgba(156, 39, 176, 0.68) !important;
-}
-.p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus {
-  background: rgba(156, 39, 176, 0.12) !important;
-}
-.p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active {
-  background: rgba(156, 39, 176, 0.16) !important;
-}
-.p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink {
-  background-color: rgba(156, 39, 176, 0.16) !important;
-}
-
-.p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus {
-  background: rgba(211, 47, 47, 0.76);
-}
-.p-button.p-button-danger:enabled:active, .p-buttonset.p-button-danger > .p-button:enabled:active, .p-splitbutton.p-button-danger > .p-button:enabled:active {
-  background: rgba(211, 47, 47, 0.68);
-}
-.p-button.p-button-danger.p-button-text:enabled:focus, .p-button.p-button-danger.p-button-outlined:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus {
-  background: rgba(211, 47, 47, 0.12);
-}
-.p-button.p-button-danger.p-button-text:enabled:active, .p-button.p-button-danger.p-button-outlined:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active {
-  background: rgba(211, 47, 47, 0.16);
-}
-.p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink {
-  background-color: rgba(211, 47, 47, 0.16);
-}
-
-.p-calendar-w-btn {
-  border: 1px solid rgba(0, 0, 0, 0.38);
-  background: #ffffff;
-  border-radius: 4px;
-  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-}
-.p-calendar-w-btn .p-inputtext {
-  background-image: none;
-  background-color: transparent;
-  border: 0 none;
-}
-.p-calendar-w-btn .p-inputtext:enabled:focus {
-  box-shadow: none;
-}
-.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  background-color: transparent;
-  border: 0 none;
-}
-.p-calendar-w-btn .p-datepicker-trigger.p-button span {
-  color: rgba(0, 0, 0, 0.6);
-}
-.p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-.p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
-  background: rgba(0, 0, 0, 0.12);
-}
-.p-calendar-w-btn:not(.p-disabled):hover {
-  border-color: rgba(0, 0, 0, 0.87);
-}
-.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
-  border-color: #3F51B5;
-  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
-}
-
-.p-datepicker .p-datepicker-header {
-  border-bottom: 0 none;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0 auto 0 0;
-  order: 1;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-prev {
-  order: 2;
-}
-.p-datepicker .p-datepicker-header .p-datepicker-next {
-  order: 3;
-}
-.p-datepicker table th {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-  color: rgba(0, 0, 0, 0.38);
-  font-weight: 400;
-  font-size: 0.875rem;
-}
-.p-datepicker table td.p-datepicker-today > span {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38);
-}
-.p-datepicker table td.p-datepicker-today.p-highlight {
-  box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12);
-}
-
-.p-calendar.p-invalid .p-inputtext:enabled:focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-.p-calendar.p-invalid.p-calendar-w-btn {
-  border-color: #B00020;
-}
-.p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
-  box-shadow: none;
-}
-.p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-
-.p-input-filled .p-calendar-w-btn {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid transparent;
-  background: #f5f5f5 no-repeat;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
-  background-size: 0 2px, 100% 1px;
-  background-position: 50% 100%, 50% 100%;
-  background-origin: border-box;
-}
-.p-input-filled .p-calendar-w-btn .p-inputtext {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
-  background-color: #ececec;
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
-}
-.p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-color: #dcdcdc;
-  border-color: transparent;
-  background-size: 100% 2px, 100% 1px;
-}
-.p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-calendar-w-btn .p-inputtext {
-  border: 0 none;
-}
-.p-input-filled .p-calendar.p-invalid .p-inputtext {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-calendar.p-invalid .p-inputtext:enabled:hover {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-calendar.p-invalid .p-inputtext:enabled:focus {
-  box-shadow: none;
-  border-color: transparent;
-}
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled):hover {
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
-.p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
-  border: 0 none;
-  background-image: none;
-}
-
-.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
-  background: #ff4081;
-  color: #ffffff;
-}
-
-.p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger {
-  background-image: none;
-  background: transparent;
-}
-.p-cascadeselect .p-cascadeselect-label {
-  border: 0 none;
-}
-.p-cascadeselect:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
-}
-
-.p-cascadeselect-item-content .p-ink {
-  background-color: rgba(63, 81, 181, 0.16);
-}
-
-.p-input-filled .p-cascadeselect {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid transparent;
-  background: #f5f5f5 no-repeat;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
-  background-size: 0 2px, 100% 1px;
-  background-position: 50% 100%, 50% 100%;
-  background-origin: border-box;
-}
-.p-input-filled .p-cascadeselect .p-inputtext {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
-  background-color: #ececec;
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
-}
-.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-color: #dcdcdc;
-  border-color: transparent;
-  background-size: 100% 2px, 100% 1px;
-}
-.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-cascadeselect .p-cascadeselect-label:hover {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-cascadeselect.p-invalid {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-
-.p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-
-.p-checkbox {
-  border-radius: 50%;
-  transition: box-shadow 0.2s;
-}
-.p-checkbox .p-checkbox-box {
-  border-color: #757575;
-  border-radius: 2px;
-  position: relative;
-}
-.p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  border-color: #757575;
-}
-.p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-  border-color: #757575;
-}
-.p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus {
-  border-color: #3F51B5;
-}
-.p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before {
-  content: "";
-  position: absolute;
-  top: 6px;
-  left: 1px;
-  border-right: 2px solid transparent;
-  border-bottom: 2px solid transparent;
-  transform: rotate(45deg);
-  transform-origin: 0% 100%;
-  animation: checkbox-check 125ms 50ms linear forwards;
-}
-.p-checkbox:not(.p-checkbox-disabled):hover {
-  box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
-}
-.p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused {
-  box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
-}
-.p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover {
-  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04);
-}
-.p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused {
-  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12);
-}
-
-.p-input-filled .p-checkbox .p-checkbox-box {
-  background-color: #ffffff;
-}
-.p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  background-color: #ffffff;
-}
-
-@keyframes checkbox-check {
-  0% {
-    width: 0;
-    height: 0;
-    border-color: #ffffff;
-    transform: translate3d(0, 0, 0) rotate(45deg);
-  }
-  33% {
-    width: 4px;
-    height: 0;
-    transform: translate3d(0, 0, 0) rotate(45deg);
-  }
-  100% {
-    width: 4px;
-    height: 10px;
-    border-color: #ffffff;
-    transform: translate3d(0, -10px, 0) rotate(45deg);
-  }
-}
-.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
-}
-
-.p-input-filled .p-chips-multiple-container {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid transparent;
-  background: #f5f5f5 no-repeat;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
-  background-size: 0 2px, 100% 1px;
-  background-position: 50% 100%, 50% 100%;
-  background-origin: border-box;
-}
-.p-input-filled .p-chips-multiple-container .p-inputtext {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-chips-multiple-container:not(.p-disabled):hover {
-  background-color: #ececec;
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
-}
-.p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-color: #dcdcdc;
-  border-color: transparent;
-  background-size: 100% 2px, 100% 1px;
-}
-.p-input-filled .p-chips-multiple-container .p-inputtext:enabled:hover, .p-input-filled .p-chips-multiple-container .p-inputtext:enabled:focus {
-  background-image: none;
-  background: transparent;
-}
-
-.p-float-label .p-chips-multiple-container .p-chips-token {
-  padding: 0.25rem 1rem;
-}
-
-.p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
-  font-size: 75%;
-}
-.p-input-filled .p-float-label .p-chips .p-chips-multiple-container .p-chips-input-token {
-  padding: 0;
-}
-.p-input-filled .p-chips.p-invalid .p-chips-multiple-container {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled):hover {
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-
-.p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-
-.p-datatable .p-sortable-column {
-  outline: 0 none;
-}
-.p-datatable .p-sortable-column:focus {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-.p-datatable .p-datatable-tbody > tr {
-  outline: 0 none;
-}
-.p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-
-.p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger {
-  background-image: none;
-  background: transparent;
-}
-.p-dropdown .p-inputtext {
-  border: 0 none;
-}
-.p-dropdown:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
-}
-
-.p-dropdown-item .p-ink {
-  background-color: rgba(63, 81, 181, 0.16);
-}
-
-.p-input-filled .p-dropdown {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid transparent;
-  background: #f5f5f5 no-repeat;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
-  background-size: 0 2px, 100% 1px;
-  background-position: 50% 100%, 50% 100%;
-  background-origin: border-box;
-}
-.p-input-filled .p-dropdown .p-inputtext {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-dropdown:not(.p-disabled):hover {
-  background-color: #ececec;
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
-}
-.p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-color: #dcdcdc;
-  border-color: transparent;
-  background-size: 100% 2px, 100% 1px;
-}
-.p-input-filled .p-dropdown .p-inputtext:enabled:hover, .p-input-filled .p-dropdown .p-inputtext:enabled:focus {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-dropdown .p-inputtext {
-  border: 0 none;
-}
-.p-input-filled .p-dropdown.p-invalid {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-dropdown.p-invalid:not(.p-disabled):hover {
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-dropdown.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-dropdown.p-invalid:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-
-.p-dropdown.p-invalid:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-
-.p-galleria .p-galleria-indicators {
-  padding: 1rem;
-}
-.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background: #ff4081;
-  color: #ffffff;
-}
-.p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
-  background: rgba(255, 64, 129, 0.68);
-  color: #ffffff;
-}
-
-.p-inputtext:enabled:focus {
-  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
-}
-.p-inputtext:enabled:focus.p-invalid {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-
-.p-input-filled .p-inputtext {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid transparent;
-  background: #f5f5f5 no-repeat;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
-  background-size: 0 2px, 100% 1px;
-  background-position: 50% 100%, 50% 100%;
-  background-origin: border-box;
-}
-.p-input-filled .p-inputtext:enabled:hover {
-  background-color: #ececec;
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
-}
-.p-input-filled .p-inputtext:enabled:focus {
-  box-shadow: none;
-  background-color: #dcdcdc;
-  border-color: transparent;
-  background-size: 100% 2px, 100% 1px;
-}
-.p-input-filled .p-inputtext.p-invalid.p-component {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-inputtext.p-invalid.p-component:enabled:hover {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-inputtext.p-invalid.p-component:enabled:focus {
-  box-shadow: none;
-  border-color: transparent;
-}
-
-.p-input-filled .p-inputgroup .p-inputgroup-addon {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid transparent;
-  background: #f5f5f5 no-repeat;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
-  background-size: 0 2px, 100% 1px;
-  background-position: 50% 100%, 50% 100%;
-  background-origin: border-box;
-}
-.p-input-filled .p-inputgroup .p-inputgroup-addon:last-child {
-  border-right-color: transparent;
-}
-.p-input-filled .p-inputgroup-addon:first-child,
-.p-input-filled .p-inputgroup button:first-child,
-.p-input-filled .p-inputgroup input:first-child {
-  border-bottom-left-radius: 0;
-}
-.p-input-filled .p-inputgroup .p-float-label:first-child input {
-  border-bottom-left-radius: 0;
-}
-.p-input-filled .p-inputgroup-addon:last-child,
-.p-input-filled .p-inputgroup button:last-child,
-.p-input-filled .p-inputgroup input:last-child {
-  border-bottom-right-radius: 0;
-}
-.p-input-filled .p-inputgroup .p-float-label:last-child input {
-  border-bottom-right-radius: 0;
-}
-
-.p-inputnumber.p-invalid .p-inputtext:enabled:focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-
-.p-input-filled .p-inputnumber.p-invalid .p-inputtext {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-inputnumber.p-invalid .p-inputtext:enabled:hover {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-inputnumber.p-invalid .p-inputtext:enabled:focus {
-  box-shadow: none;
-  border-color: transparent;
-}
-
-.p-inputswitch .p-inputswitch-slider:before {
-  transition-property: box-shadow transform;
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
-.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before {
-  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0 0 1px 10px rgba(0, 0, 0, 0.04);
-}
-.p-inputswitch.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before {
-  box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
-.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before {
-  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
-.p-inputswitch.p-inputswitch-checked.p-inputswitch-focus .p-inputswitch-slider:before, .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus:not(.p-disabled):hover .p-inputswitch-slider:before {
-  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-}
-
-.p-fieldset .p-fieldset-legend {
-  border: 0 none;
-}
-
-.p-float-label input:focus ~ label,
-.p-float-label input.p-filled ~ label,
-.p-float-label textarea:focus ~ label,
-.p-float-label textarea.p-filled ~ label,
-.p-float-label .p-inputwrapper-focus ~ label,
-.p-float-label .p-inputwrapper-filled ~ label {
-  top: -0.5rem !important;
-  background-color: #ffffff;
-  padding: 2px 4px;
-  margin-left: -4px;
-  margin-top: 0;
-}
-
-.p-float-label textarea ~ label {
-  margin-top: 0;
-}
-
-.p-float-label input:focus ~ label,
-.p-float-label .p-inputwrapper-focus ~ label {
-  color: #3F51B5;
-}
-
-.p-input-filled .p-float-label .p-inputtext {
-  padding-top: 1.25rem;
-  padding-bottom: 0.25rem;
-}
-.p-input-filled .p-float-label input:focus ~ label,
-.p-input-filled .p-float-label input.p-filled ~ label,
-.p-input-filled .p-float-label textarea:focus ~ label,
-.p-input-filled .p-float-label textarea.p-filled ~ label,
-.p-input-filled .p-float-label .p-inputwrapper-focus ~ label,
-.p-input-filled .p-float-label .p-inputwrapper-filled ~ label {
-  top: 0.25rem !important;
-  margin-top: 0;
-  background: transparent;
-}
-
-.p-listbox-item .p-ink {
-  background-color: rgba(63, 81, 181, 0.16);
-}
-
-.p-multiselect .p-multiselect-label, .p-multiselect .p-multiselect-trigger {
-  background-image: none;
-  background: transparent;
-}
-.p-multiselect .p-multiselect-label {
-  border: 0 none;
-}
-.p-multiselect:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
-}
-
-.p-multiselect-item .p-ink {
-  background-color: rgba(63, 81, 181, 0.16);
-}
-
-.p-input-filled .p-multiselect {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: 1px solid transparent;
-  background: #f5f5f5 no-repeat;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
-  background-size: 0 2px, 100% 1px;
-  background-position: 50% 100%, 50% 100%;
-  background-origin: border-box;
-}
-.p-input-filled .p-multiselect .p-inputtext {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-multiselect:not(.p-disabled):hover {
-  background-color: #ececec;
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
-}
-.p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-color: #dcdcdc;
-  border-color: transparent;
-  background-size: 100% 2px, 100% 1px;
-}
-.p-input-filled .p-multiselect .p-inputtext:enabled:hover, .p-input-filled .p-multiselect .p-inputtext:enabled:focus {
-  background-image: none;
-  background: transparent;
-}
-.p-input-filled .p-multiselect .p-multiselect-label:hover {
-  background-image: none;
-  background: transparent;
-}
-
-.p-float-label .p-multiselect-label .p-multiselect-token {
-  padding: 0.25rem 1rem;
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
-.p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
-  padding-top: 1.25rem;
-  padding-bottom: 0.25rem;
-}
-.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
-  padding-top: 1.25rem;
-  padding-bottom: 0.25rem;
-}
-.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token {
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
-  font-size: 75%;
-}
-.p-input-filled .p-multiselect.p-invalid {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-multiselect.p-invalid:not(.p-disabled):hover {
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-multiselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-multiselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
-  box-shadow: none;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-
-.p-multiselect.p-invalid:not(.p-disabled).p-focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-
-.p-overlaypanel .p-overlaypanel-content {
-  padding: 1.5rem;
-}
-
-.p-paginator {
-  justify-content: flex-end;
-}
-
-.p-input-filled .p-password.p-invalid > .p-inputtext {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-password.p-invalid > .p-inputtext:enabled:hover {
-  border-color: transparent;
-  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
-}
-.p-input-filled .p-password.p-invalid > .p-inputtext:enabled:focus {
-  box-shadow: none;
-  border-color: transparent;
-}
-
-.p-password.p-invalid > .p-inputtext:enabled:focus {
-  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
-}
-
-.p-panel {
-  border-radius: 4px;
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-}
-.p-panel .p-panel-header,
-.p-panel .p-panel-content,
-.p-panel .p-panel-footer {
-  border: 0 none;
-}
-.p-panel .p-panel-content {
-  padding-top: 0;
-}
-.p-panel .p-panel-title {
-  font-size: 1.25rem;
-}
-
-.p-panelmenu .p-panelmenu-panel {
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-  margin-bottom: 0;
-  border-radius: 0;
-  position: relative;
-  transition: margin-bottom 225ms;
-}
-.p-panelmenu .p-panelmenu-panel:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-}
-.p-panelmenu .p-panelmenu-panel:last-child {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-.p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-icon {
-  order: 1;
-  margin-left: auto;
-  margin-right: 0;
-}
-.p-panelmenu .p-panelmenu-panel .p-panelmenu-header.p-disabled {
-  opacity: 1;
-}
-.p-panelmenu .p-panelmenu-panel .p-panelmenu-header.p-disabled .p-panelmenu-header-link > * {
-  opacity: 0.38;
-}
-.p-panelmenu .p-panelmenu-panel .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-link:focus {
-  background: #f6f6f6;
-}
-
-.p-progressbar {
-  border-radius: 0;
-}
-.p-progressbar .p-progressbar-label {
-  display: none;
-}
-
-.p-radiobutton {
-  border-radius: 50%;
-  transition: box-shadow 0.2s;
-}
-.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border: 2px solid #757575;
-}
-.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  border: 2px solid #757575;
-}
-.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus {
-  border-color: #3F51B5;
-}
-.p-radiobutton:not(.p-radiobutton-disabled):hover {
-  box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
-}
-.p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused {
-  box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
-}
-.p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover {
-  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04);
-}
-.p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused {
-  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12);
-}
-
-.p-input-filled .p-radiobutton .p-radiobutton-box {
-  background-color: #ffffff;
-}
-.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
-  background-color: #ffffff;
-}
-
-.p-selectbutton .p-button:focus {
-  background: #e0e0e1;
-  border-color: #e0e0e1;
-}
-.p-selectbutton .p-button:focus.p-highlight {
-  background: #d9d8d9;
-  border-color: #d9d8d9;
-}
-
-.p-slider .p-slider-handle {
-  transition: transform 0.2s, box-shadow 0.2s;
-  transform: scale(0.7);
-}
-.p-slider .p-slider-handle:focus {
-  box-shadow: 0 0 1px 10px rgba(255, 64, 129, 0.2);
-}
-.p-slider.p-slider-sliding .p-slider-handle {
-  transform: scale(1);
-}
-
-.p-steps {
-  padding: 1rem 0;
-}
-.p-steps .p-steps-item {
-  justify-content: flex-start;
-  flex-direction: row-reverse;
-  align-items: center;
-}
-.p-steps .p-steps-item:before {
-  position: static;
-  left: auto;
-  top: auto;
-  margin-top: 0;
-}
-.p-steps .p-steps-item:last-child {
-  flex-grow: 0;
-}
-.p-steps .p-steps-item:last-child:before {
-  display: none;
-}
-.p-steps .p-steps-item .p-menuitem-link {
-  flex-direction: row;
-  flex: 1 1 auto;
-  overflow: visible;
-  padding: 0 0.5rem;
-}
-.p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  background-color: #9e9d9e;
-  color: #ffffff;
-  font-size: 0.857rem;
-  min-width: 1.714rem;
-  height: 1.714rem;
-  line-height: 1.714rem;
-}
-.p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  margin: 0;
-  padding-left: 0.5rem;
-}
-.p-steps .p-steps-item.p-highlight .p-steps-number {
-  background-color: #3F51B5;
-  color: #ffffff;
-}
-.p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 600;
-  color: rgba(0, 0, 0, 0.87);
-}
-.p-steps .p-steps-item.p-disabled {
-  opacity: 1;
-}
-
-.p-tabview .p-tabview-nav {
-  position: relative;
-}
-.p-tabview .p-tabview-nav li .p-tabview-nav-link {
-  transition: background-color 0.2s;
-  border-radius: 0;
-}
-.p-tabview .p-tabview-nav li .p-tabview-nav-link > .p-ink {
-  background-color: rgba(63, 81, 181, 0.16);
-}
-.p-tabview .p-tabview-nav li .p-tabview-nav-link:focus {
-  background-color: rgba(63, 81, 181, 0.12);
-}
-.p-tabview .p-tabview-nav .p-tabview-ink-bar {
-  z-index: 1;
-  display: block;
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background-color: #3F51B5;
-  transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-}
-
-.p-toolbar {
-  border: 0 none;
-}
-
-.p-tooltip .p-tooltip-text {
-  box-shadow: none;
-  font-size: 0.875rem;
-}
-.p-tooltip .p-tooltip-arrow {
-  display: none;
-}
-
-.p-treetable .p-sortable-column {
-  outline: 0 none;
-}
-.p-treetable .p-sortable-column:focus {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-.p-treetable .p-treetable-tbody > tr {
-  outline: 0 none;
-}
-.p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-
-.p-tabmenu .p-tabmenu-nav {
-  position: relative;
-}
-.p-tabmenu .p-tabmenu-nav li .p-menuitem-link {
-  transition: background-color 0.2s;
-  border-radius: 0;
-}
-.p-tabmenu .p-tabmenu-nav li .p-menuitem-link > .p-ink {
-  background-color: rgba(63, 81, 181, 0.16);
-}
-.p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus {
-  background-color: rgba(63, 81, 181, 0.12);
-}
-.p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar {
-  display: block;
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background-color: #3F51B5;
-  transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
-}
-
-.p-togglebutton.p-button:focus {
-  background: #e0e0e1;
-  border-color: #e0e0e1;
-}
-.p-togglebutton.p-button:focus.p-highlight {
-  background: #d9d8d9;
-  border-color: #d9d8d9;
-}
-
-/* Customizations to the designer theme should be defined here */

From 02bf9501576eda1f92d25a6afc807664cb86b847 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Fri, 2 Jan 2026 15:12:47 -0800
Subject: [PATCH 33/40] Updates to ScoreSetCreator to restore disabled Steps
 feature and improve handling of validation errors

---
 src/components/screens/ScoreSetCreator.vue | 185 ++++++++++++---------
 1 file changed, 107 insertions(+), 78 deletions(-)

diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 151c3026..9ede7884 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -16,11 +16,11 @@
         <Stepper v-model:value="activeWizardStep">
           <StepList>
             <Step :value="1">Parent experiment and context</Step>
-            <Step :value="2">Score set information</Step>
-            <Step :value="3">Targets</Step>
-            <Step v-for="(targetNum, targetIdx) in numTargets" :key="targetIdx" :value="targetIdx + 4">Target {{ targetIdx + 1 }}</Step>
-            <Step :value="numTargets + 4">Score Calibration</Step>
-            <Step :value="numTargets + 5">Variant Scores</Step>
+            <Step :disabled="maxWizardStepValidated < 1" :value="2">Score set information</Step>
+            <Step :disabled="maxWizardStepValidated < 2" :value="3">Targets</Step>
+            <Step v-for="(targetNum, targetIdx) in numTargets" :key="targetIdx" :disabled="maxWizardStepValidated < targetIdx + 3" :value="targetIdx + 4">Target {{ targetIdx + 1 }}</Step>
+            <Step :disabled="maxWizardStepValidated < numTargets + 3" :value="numTargets + 4">Score Calibration</Step>
+            <Step :disabled="maxWizardStepValidated < numTargets + 4" :value="numTargets + 5">Variant Scores</Step>
           </StepList>
           <StepPanels>
             <StepPanel v-slot="{ activateCallback }" :value="1">
@@ -219,7 +219,7 @@
                 <div class="mavedb-wizard-form-content-background"></div>
                 <div v-if="experiment" class="mavedb-wizard-row">
                   <div class="mavedb-wizard-content-pane">
-                    <Message closable severity="info">
+                    <Message class="mb-1" closable severity="info">
                       Some fields were autopopulated based on the selected experiment and should be inspected to ensure
                       they are still relevant to this score set.
                     </Message>
@@ -859,47 +859,49 @@
                             <AutoComplete
                               :id="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
                               v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].identifier"
+                              class="w-full"
                               field="identifier"
                               :force-selection="false"
                               option-label="identifier"
-                              style="width: 100%"
                               :suggestions="targetGeneIdentifierSuggestionsList[dbName]"
+                              @change="externalTargetIdentifierChanged(dbName, targetIdx, $event)"
                               @complete="searchTargetGeneIdentifiers(dbName, $event)"
-                              @update:model-value="externalTargetIdentifierChanged(dbName, targetIdx, $event)"
                             />
                             <label :for="scopedId(`input-${dbName.toLowerCase()}Identifier`)"
                               >{{ dbName }} identifier</label
                             >
                           </FloatLabel>
+                          <span
+                            v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.externalIdentifiers.${dbName}.identifier.identifier`]"
+                            class="mave-field-error"
+                            >{{
+                              validationErrors[`targetGenes.${targetIdx}.targetGene.externalIdentifiers.${dbName}.identifier.identifier`]
+                            }}</span
+                          >
+                        </div>
+                        <div class="field-column">
+                          <FloatLabel variant="on">
+                            <InputNumber
+                              :id="scopedId(`input-${dbName.toLowerCase()}Offset`)"
+                              v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].offset"
+                              button-layout="stacked"
+                              :min="0"
+                              show-buttons
+                              suffix=" bp"
+                            />
+                            <label :for="scopedId(`input-${dbName.toLowerCase()}Offset`)">Offset</label>
+                          </FloatLabel>
+                          <span
+                            v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.externalIdentifiers.${dbName}.offset`]"
+                            class="mave-field-error"
+                            >{{ validationErrors[`targetGenes.${targetIdx}.targetGene.externalIdentifiers.${dbName}.offset`] }}</span
+                          >
                         </div>
-                        <FloatLabel variant="on">
-                          <InputNumber
-                            :id="scopedId(`input-${dbName.toLowerCase()}Offset`)"
-                            v-model="createdTargetGenes[targetIdx].targetGene.externalIdentifiers[dbName].offset"
-                            button-layout="stacked"
-                            :min="0"
-                            show-buttons
-                            suffix=" bp"
-                          />
-                          <label :for="scopedId(`input-${dbName.toLowerCase()}Offset`)">Offset</label>
-                        </FloatLabel>
                       </div>
                       <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}`]"
+                        v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.externalIdentifiers.${dbName}`]"
                         class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}`] }}</span
-                      >
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.identifier`]"
-                        class="mave-field-error"
-                        >{{
-                          validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.identifier`]
-                        }}</span
-                      >
-                      <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.offset`]"
-                        class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.externalIdentifiers.${dbName}.offset`] }}</span
+                        >{{ validationErrors[`targetGenes.${targetIdx}.targetGene.externalIdentifiers.${dbName}`] }}</span
                       >
                     </div>
                   </div>
@@ -1636,7 +1638,7 @@ export default {
     investigatorIsProvidingScoreCalibrations: false,
 
     // track this separately, since it is a pain to reconstruct steps from target paths (targetGenes.**step**.rest.of.error.path)
-    minTargetGeneStepWithError: Infinity,
+    // minTargetGeneStepWithError: Infinity,
 
     /** The currently active step. */
     activeWizardStep: 1,
@@ -1644,31 +1646,57 @@ export default {
     /** The highest step that the user has entered. This can be used to prevent the user from jumping ahead. */
     maxWizardStepEntered: 1,
 
-    stepFields: [
-      ['experiment', 'supersededScoreSetUrn', 'metaAnalyzesScoreSetUrns'],
-      [
-        'title',
-        'shortDescription',
-        'methodText',
-        'abstractText',
-        'publicationIdentifiers',
-        'primaryPublicationIdentifiers',
-        'extraMetadata',
-        'dataUsagePolicy'
-      ],
-      ['targets'],
-      ['targetGene'],
-      ['scoreCalibrations'],
-      ['scoresFile', 'countsFile', 'scoreColumnsMetadataFile', 'countColumnsMetadataFile']
-    ]
+    // stepFields: [
+    //   ['experiment', 'supersededScoreSetUrn', 'metaAnalyzesScoreSetUrns'],
+    //   [
+    //     'title',
+    //     'shortDescription',
+    //     'methodText',
+    //     'abstractText',
+    //     'publicationIdentifiers',
+    //     'primaryPublicationIdentifiers',
+    //     'extraMetadata',
+    //     'dataUsagePolicy'
+    //   ],
+    //   ['targets'],
+    //   ['targetGene'],
+    //   ['scoreCalibrations'],
+    //   ['scoresFile', 'countsFile', 'scoreColumnsMetadataFile', 'countColumnsMetadataFile']
+    // ]
   }),
 
   computed: {
+    numSteps: function() {
+      return 5 + this.numTargets
+    },
+
+    stepFields: function() {
+      const fields = {
+        1: ['experiment', 'supersededScoreSetUrn', 'metaAnalyzesScoreSetUrns'],
+        2: [
+          'title',
+          'shortDescription',
+          'methodText',
+          'abstractText',
+          'publicationIdentifiers',
+          'primaryPublicationIdentifiers',
+          'extraMetadata',
+          'dataUsagePolicy'
+        ],
+        3: ['targets']
+      }
+      for (let i = 0; i < this.numTargets; i++) {
+        fields[4 + i] = [`targetGenes.${i}.targetGene`]
+      }
+      fields[4 + this.numTargets] = ['scoreCalibrations']
+      fields[5 + this.numTargets] = ['scoresFile', 'countsFile', 'scoreColumnsMetadataFile', 'countColumnsMetadataFile']
+      return fields
+    },
+
     maxWizardStepValidated: function () {
-      const numSteps = 5 + this.numTargets
-      // This yields the index of the maximum step validated, -1 if step 0 is not valid, and -2 if all steps are valid.
-      const maxStepValidated = _.findIndex(_.range(0, numSteps), (step) => !this.validateWizardStep(step)) - 1
-      return maxStepValidated == -2 ? numSteps - 1 : maxStepValidated + 1
+      // This yields the value of maximum step validated, 0 if step 1 is not valid.
+      const firstUnvalidatedStep = _.find(_.range(1, this.numSteps + 1), (step) => !this.validateWizardStep(step))
+      return firstUnvalidatedStep ? firstUnvalidatedStep - 1 : this.numSteps
     },
 
     targetGeneIdentifierSuggestionsList: function () {
@@ -1837,11 +1865,11 @@ export default {
         if (this.createdTargetGenes.length < this.numTargets) {
           for (let i = this.createdTargetGenes.length; i < this.numTargets; i++) {
             this.createdTargetGenes.push(emptyTargetGeneWizardObj())
-            this.stepFields.splice(3, 0, ['targetGene'])
+            // this.stepFields.splice(3, 0, ['targetGene'])
           }
         } else if (this.createdTargetGenes.length > this.numTargets) {
           this.createdTargetGenes = this.createdTargetGenes.slice(0, this.numTargets)
-          this.stepFields.splice(3, oldValue - newValue)
+          // this.stepFields.splice(3, oldValue - newValue)
         }
       }
     }
@@ -1933,7 +1961,7 @@ export default {
     validateWizardStep: function (step) {
       // Later, this may depend on server-side validation.
       switch (true) {
-        case step == 0: {
+        case step == 1: {
           // Step 0 is valid if
           // - The score set is a meta-analysis and at least one meta-analyzed score set has been chosen..
           // - The score set is a superseding score set, and the superseded score set has been chosen.
@@ -1944,14 +1972,14 @@ export default {
             !!((!this.isMetaAnalysis && !this.isSupersedingScoreSet && this.experiment) || this.experimentUrn)
           )
         }
-        case step == 1: {
+        case step == 2: {
           return this.title && this.shortDescription && this.abstractText && this.methodText
         }
-        case step == 2: {
+        case step == 3: {
           return this.numTargets > 0
         }
-        case step > 2 && step < 3 + this.numTargets: {
-          const currentTargetGene = this.createdTargetGenes[step - 3].targetGene
+        case step > 3 && step <= 3 + this.numTargets: {
+          const currentTargetGene = this.createdTargetGenes[step - 4].targetGene
           if (this.isTargetSequence) {
             return (
               currentTargetGene.name &&
@@ -1970,7 +1998,7 @@ export default {
             )
           }
         }
-        case step == 3 + this.numTargets: {
+        case step == 4 + this.numTargets: {
           if (!this.investigatorIsProvidingScoreCalibrations) {
             return true
           }
@@ -1999,23 +2027,15 @@ export default {
     },
 
     minStepWithError: function () {
-      const numSteps = this.stepFields.length
-      for (let i = 0; i < numSteps; i++) {
+      for (let i = 1; i <= this.numSteps; i++) {
         if (this.wizardStepHasError(i)) {
-          // errors in the target creation step
-          if (i > 2 && i < 3 + this.numTargets) {
-            return this.minTargetGeneStepWithError + 3
-          }
           return i
         }
       }
-      return numSteps - 1
+      return this.numSteps
     },
 
     wizardStepHasError: function (step) {
-      if (step >= this.stepFields.length) {
-        return false
-      }
       return !this.stepFields[step].every((field) => {
         for (const v of Object.keys(this.validationErrors)) {
           if (v.startsWith(field)) {
@@ -2584,6 +2604,8 @@ export default {
             )
         )
 
+      console.log('Preparing to save target genes:', this.createdTargetGenes)
+
       const editedFields = {
         experimentUrn: this.experimentUrn ? this.experimentUrn : this.experiment?.urn,
         title: this.title,
@@ -2615,8 +2637,13 @@ export default {
           }
 
           for (const [db, linked] of Object.entries(target.linkedAccessions)) {
+            console.log('Processing linked accession:', db, linked)
             if (linked) {
-              targetGene.externalIdentifiers.push(target.targetGene.externalIdentifiers[db])
+              const targetGeneExternalIdentifier = _.clone(target.targetGene.externalIdentifiers[db])
+              if (!targetGeneExternalIdentifier.identifier) {
+                targetGeneExternalIdentifier.identifier = {dbName: db}
+              }
+              targetGene.externalIdentifiers.push(targetGeneExternalIdentifier)
             }
           }
 
@@ -2668,7 +2695,7 @@ export default {
               path = path.slice(1)
             }
 
-            let customPath = error.ctx.error.custom_loc
+            let customPath = error.ctx?.error?.custom_loc
             if (customPath) {
               if (customPath[0] == 'body') {
                 customPath = customPath.slice(1)
@@ -2679,8 +2706,8 @@ export default {
               path = path.concat(customPath)
             }
 
-            if (_.isEqual(_.slice(path, 0, 1), ['targetGene'])) {
-              this.minTargetGeneStepWithError = Math.min(this.minTargetGeneStepWithError, path[1])
+            if (_.isEqual(_.first(path), 'targetGenes')) {
+              // this.minTargetGeneStepWithError = Math.min(this.minTargetGeneStepWithError, path[1])
 
               // Map errors on indexed external gene identifiers to inputs named for the identifier's database.
               if (_.isEqual(_.slice(path, 2, 3), ['externalIdentifiers'])) {
@@ -2690,11 +2717,13 @@ export default {
                 // preferable to not displaying the error.
                 path.splice(
                   3,
-                  2,
+                  1,
                   identifierOffset?.identifier?.dbName
                     ? identifierOffset.identifier.dbName
                     : this.externalGeneDatabases[identifierIndex]
                 )
+                // insert 'targetGene' after the targetGenes index to match the form's data structure
+                path.splice(2, 0, 'targetGene')
               }
             }
 

From 8485e3c47373b0f5ad95e96a31542f88d14a495c Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 5 Jan 2026 09:51:29 -0800
Subject: [PATCH 34/40] ScoreSetCreator: create copy of createdTargetGenes when
 creating editedFields object to avoid changing values on form

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

diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 9ede7884..79fdf164 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -2627,7 +2627,7 @@ export default {
 
         scoreCalibrations: this.investigatorIsProvidingScoreCalibrations ? [this.calibrationCreateDraft.value] : [],
 
-        targetGenes: this.createdTargetGenes.map((target) => {
+        targetGenes: _.cloneDeep(this.createdTargetGenes).map((target) => {
           const targetGene = {
             name: target.targetGene.name,
             category: target.targetGene.category,

From bbeeaf990c680bc67b9c2fa94a77a29ac9195068 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 5 Jan 2026 13:25:26 -0800
Subject: [PATCH 35/40] Fix validation error paths throughout ScoreSetCreator
 form, other cleanup

The path value for validation errors within the targetGenes portion of the form were not correctly matched with the API validation error responses and the structure of the form data. Updating throughout for consistency and to ensure validation errors result in redirecting the user to the relevant page and prompting on the appropriate field(s). This corresponds with VariantEffect/mavedb-api@6ae0d32e6efcc0a38bfcc2e21bed03dcf3240c03

This commit also includes some cleanup of previously commented out code and updates the disabled logic on file uploads to ensure they are properly enabled after failed validations elsewhere on the form.
---
 src/components/screens/ScoreSetCreator.vue | 95 +++++++---------------
 1 file changed, 30 insertions(+), 65 deletions(-)

diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 79fdf164..4060f9c3 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -773,8 +773,8 @@
                       />
                       <label :for="scopedId('input-targetGeneName')">Target name</label>
                     </FloatLabel>
-                    <span v-if="validationErrors[`targetGene.${targetIdx}.name`]" class="mave-field-error">{{
-                      validationErrors[`targetGene.${targetIdx}.name`]
+                    <span v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.name`]" class="mave-field-error">{{
+                      validationErrors[`targetGenes.${targetIdx}.targetGene.name`]
                     }}</span>
                   </div>
                 </div>
@@ -799,9 +799,9 @@
                         <label :for="scopedId('input-targetGeneLabel')">Target label</label>
                       </FloatLabel>
                       <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.label`]"
+                        v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.label`]"
                         class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.label`] }}</span
+                        >{{ validationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.label`] }}</span
                       >
                     </div>
                   </div>
@@ -819,8 +819,8 @@
                           :options="targetGeneCategories"
                         />
                       </span>
-                      <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{
-                        validationErrors[`targetGene.${targetIdx}.category`]
+                      <span v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.category`]" class="mave-field-error">{{
+                        validationErrors[`targetGenes.${targetIdx}.targetGene.category`]
                       }}</span>
                     </div>
                   </div>
@@ -944,9 +944,9 @@
                         <label :for="scopedId('input-targetGeneTaxonomyLabel')">Taxonomy</label>
                       </FloatLabel>
                       <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.taxonomy`]"
+                        v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.taxonomy`]"
                         class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.taxonomy`] }}</span
+                        >{{ validationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.taxonomy`] }}</span
                       >
                     </div>
                   </div>
@@ -963,9 +963,9 @@
                         />
                       </FloatLabel>
                       <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.sequenceType`]"
+                        v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.sequenceType`]"
                         class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.sequenceType`] }}</span
+                        >{{ validationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.sequenceType`] }}</span
                       >
                     </div>
                   </div>
@@ -1018,9 +1018,9 @@
                         </FileUpload>
                       </FloatLabel>
                       <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetSequence.sequence`]"
+                        v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.sequence`]"
                         class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetSequence.sequence`] }}</span
+                        >{{ validationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.sequence`] }}</span
                       >
                     </div>
                   </div>
@@ -1068,9 +1068,9 @@
                         <label :for="scopedId('input-targetGeneAssemblyLabel')">Assembly</label>
                       </FloatLabel>
                       <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.assembly`]"
+                        v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.targetAccession.assembly`]"
                         class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetAccession.assembly`] }}</span
+                        >{{ validationErrors[`targetGenes.${targetIdx}.targetGene.targetAccession.assembly`] }}</span
                       >
                     </div>
                   </div>
@@ -1093,9 +1093,9 @@
                         <label :for="scopedId('input-targetGeneGeneNameLabel')">HGNC Name</label>
                       </FloatLabel>
                       <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.gene`]"
+                        v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.targetAccession.gene`]"
                         class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetAccession.gene`] }}</span
+                        >{{ validationErrors[`targetGenes.${targetIdx}.targetGene.targetAccession.gene`] }}</span
                       >
                     </div>
                   </div>
@@ -1134,9 +1134,9 @@
                         />
                       </div>
                       <span
-                        v-if="validationErrors[`targetGene.${targetIdx}.targetAccession.accession`]"
+                        v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.targetAccession.accession`]"
                         class="mave-field-error"
-                        >{{ validationErrors[`targetGene.${targetIdx}.targetAccession.accession`] }}</span
+                        >{{ validationErrors[`targetGenes.${targetIdx}.targetGene.targetAccession.accession`] }}</span
                       >
                     </div>
                   </div>
@@ -1153,8 +1153,8 @@
                           :options="targetGeneCategories"
                         />
                       </span>
-                      <span v-if="validationErrors[`targetGene.${targetIdx}.category`]" class="mave-field-error">{{
-                        validationErrors[`targetGene.${targetIdx}.category`]
+                      <span v-if="validationErrors[`targetGenes.${targetIdx}.targetGene.category`]" class="mave-field-error">{{
+                        validationErrors[`targetGenes.${targetIdx}.targetGene.category`]
                       }}</span>
                     </div>
                   </div>
@@ -1295,7 +1295,7 @@
                         choose-label="Scores column metadata file"
                         :class="inputClasses.scoreColumnsMetadataFile || ''"
                         :custom-upload="true"
-                        :disabled="!($refs.scoresFileUpload?.files?.length == 1)"
+                        :disabled="($refs.scoresFileUpload?.files?.length || 0) != 1"
                         :file-limit="1"
                         :show-cancel-button="false"
                         :show-upload-button="false"
@@ -1364,7 +1364,7 @@
                         choose-label="Counts column metadata file"
                         :class="inputClasses.countColumnsMetadataFile || ''"
                         :custom-upload="true"
-                        :disabled="!($refs.countsFileUpload?.files?.length == 1)"
+                        :disabled="($refs.countsFileUpload?.files?.length || 0 ) != 1"
                         :file-limit="1"
                         :show-cancel-button="false"
                         :show-upload-button="false"
@@ -1637,32 +1637,11 @@ export default {
     isMultiTarget: false,
     investigatorIsProvidingScoreCalibrations: false,
 
-    // track this separately, since it is a pain to reconstruct steps from target paths (targetGenes.**step**.rest.of.error.path)
-    // minTargetGeneStepWithError: Infinity,
-
     /** The currently active step. */
     activeWizardStep: 1,
 
     /** The highest step that the user has entered. This can be used to prevent the user from jumping ahead. */
     maxWizardStepEntered: 1,
-
-    // stepFields: [
-    //   ['experiment', 'supersededScoreSetUrn', 'metaAnalyzesScoreSetUrns'],
-    //   [
-    //     'title',
-    //     'shortDescription',
-    //     'methodText',
-    //     'abstractText',
-    //     'publicationIdentifiers',
-    //     'primaryPublicationIdentifiers',
-    //     'extraMetadata',
-    //     'dataUsagePolicy'
-    //   ],
-    //   ['targets'],
-    //   ['targetGene'],
-    //   ['scoreCalibrations'],
-    //   ['scoresFile', 'countsFile', 'scoreColumnsMetadataFile', 'countColumnsMetadataFile']
-    // ]
   }),
 
   computed: {
@@ -1765,20 +1744,6 @@ export default {
         }
       }
     },
-    'targetGene.externalIdentifiers': {
-      deep: true,
-      handler: function (newValue) {
-        if (!newValue) {
-          return
-        }
-        // If an identifier has been set, set the offset to 0 by default.
-        for (const dbName of externalGeneDatabases) {
-          if (newValue[dbName]?.identifier?.identifier != null && newValue[dbName]?.offset == null) {
-            this.targetGene.externalIdentifiers[dbName].offset = 0
-          }
-        }
-      }
-    },
     existingTargetGene: {
       immediate: true,
       handler: function () {
@@ -1978,7 +1943,7 @@ export default {
         case step == 3: {
           return this.numTargets > 0
         }
-        case step > 3 && step <= 3 + this.numTargets: {
+        case step > 3 && step <= (3 + this.numTargets): {
           const currentTargetGene = this.createdTargetGenes[step - 4].targetGene
           if (this.isTargetSequence) {
             return (
@@ -2491,19 +2456,19 @@ export default {
                 }))
                 if (fastaData.length == 0) {
                   this.createdTargetGenes[targetIdx].targetGene.targetSequence.sequence = null
-                  this.clientSideValidationErrors['targetGene.targetSequence.sequence'] =
+                  this.clientSideValidationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.sequence`] =
                     'The FASTA file contains no sequences.'
                 } else if (fastaData.length > 1) {
                   this.createdTargetGenes[targetIdx].targetGene.targetSequence.sequence = null
-                  this.clientSideValidationErrors['targetGene.targetSequence.sequence'] =
+                  this.clientSideValidationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.sequence`] =
                     'The FASTA file contains more than one sequence.'
                 } else {
                   this.createdTargetGenes[targetIdx].targetGene.targetSequence.sequence = fastaData[0].sequence
-                  delete this.clientSideValidationErrors['targetGene.targetSequence.sequence']
+                  delete this.clientSideValidationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.sequence`]
                 }
               } catch (e) {
                 this.createdTargetGenes[targetIdx].targetGene.targetSequence.sequence = null
-                this.clientSideValidationErrors['targetGene.targetSequence.sequence'] =
+                this.clientSideValidationErrors[`targetGenes.${targetIdx}.targetGene.targetSequence.sequence`] =
                   'The file was not a valid FASTA file.'
                 console.log('Reference sequence file was not a valid FASTA file.')
               }
@@ -2706,7 +2671,7 @@ export default {
               path = path.concat(customPath)
             }
 
-            if (_.isEqual(_.first(path), 'targetGenes')) {
+            if (_.isEqual(_.first(path), 'targetGenes') && path.length >= 2) {
               // this.minTargetGeneStepWithError = Math.min(this.minTargetGeneStepWithError, path[1])
 
               // Map errors on indexed external gene identifiers to inputs named for the identifier's database.
@@ -2722,9 +2687,9 @@ export default {
                     ? identifierOffset.identifier.dbName
                     : this.externalGeneDatabases[identifierIndex]
                 )
-                // insert 'targetGene' after the targetGenes index to match the form's data structure
-                path.splice(2, 0, 'targetGene')
               }
+              // insert 'targetGene' after the targetGenes index to match the form's data structure
+              path.splice(2, 0, 'targetGene')
             }
 
             // Add calibration errors to a separate object which is consumed by the calibration sub-component.

From 612203595fd8190c254dcbbc46b96511416c1086 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 5 Jan 2026 14:13:44 -0800
Subject: [PATCH 36/40] Fix indentation of ul components on ScoreSetView

---
 src/components/screens/ScoreSetView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/screens/ScoreSetView.vue b/src/components/screens/ScoreSetView.vue
index 3a8c5fd3..ca7a5949 100644
--- a/src/components/screens/ScoreSetView.vue
+++ b/src/components/screens/ScoreSetView.vue
@@ -305,7 +305,7 @@
         <div class="mavedb-score-set-section-title">External identifier</div>
         <strong>DOI: </strong>
         <div v-if="item.doiIdentifiers.length != 0">
-          <ul class="list-[square]">
+          <ul class="pl-4 list-[square]">
             <li v-for="(doi, i) of item.doiIdentifiers" :key="i">
               <a :href="`${doi.url}`" target="blank">{{ doi.identifier }}</a>
             </li>
@@ -314,7 +314,7 @@
         <template v-else>No associated DOIs<br /></template>
         <strong>Raw reads: </strong>
         <div v-if="item.experiment.rawReadIdentifiers.length != 0">
-          <ul class="list-[square]">
+          <ul class="pl-4 list-[square]">
             <li v-for="(read, i) of item.experiment.rawReadIdentifiers" :key="i">
               <a :href="`${read.url}`" target="blank">{{ read.identifier }}</a>
             </li>

From 54015e89b6738bc759c867d01af7a1787d65475a Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Mon, 5 Jan 2026 16:36:11 -0800
Subject: [PATCH 37/40] Updates to ExperimentCreator and ExperimentEditor to
 separate functionality and reduce overlap

The ExperimentCreator had some logic related to editing existing experiments which is being removed. Similarly, the ExperimentEditor component had some logic for creating experiments which was still being used when adding new experiments to an existing experiment set.

With this change, the ExperimentCreator will be used for creating all new experiments, and the ExperimentEditor will only be used for editing existing experiments with any code extraneous to those functions has been removed.
---
 src/components/screens/ExperimentCreator.vue | 119 +++++++------------
 src/components/screens/ExperimentEditor.vue  |  66 +---------
 src/router/index.ts                          |   2 +-
 3 files changed, 44 insertions(+), 143 deletions(-)

diff --git a/src/components/screens/ExperimentCreator.vue b/src/components/screens/ExperimentCreator.vue
index bc0f7367..a086ca3b 100644
--- a/src/components/screens/ExperimentCreator.vue
+++ b/src/components/screens/ExperimentCreator.vue
@@ -3,18 +3,9 @@
     dialog="You must add an email address to your account to create or edit an experiment. You can do so below, or on the 'Settings' page."
     :is-first-login-prompt="false"
   />
-  {{ experimentSetUrn }}
   <DefaultLayout :require-auth="true">
     <div class="mave-experiment-editor">
-      <div v-if="itemStatus != 'NotLoaded'" class="mave-screen-title-bar">
-        <div class="mave-screen-title">Edit experiment {{ item.urn }}</div>
-        <div v-if="item" class="mavedb-screen-title-controls">
-          <Button @click="saveEditContent">Save changes</Button>
-          <Button severity="help" @click="resetForm">Clear</Button>
-          <Button severity="warn" @click="viewItem">Cancel</Button>
-        </div>
-      </div>
-      <div v-else class="mave-screen-title-bar">
+      <div class="mave-screen-title-bar">
         <div class="mave-screen-title">Create a new experiment</div>
         <div class="mavedb-screen-title-controls">
           <Button @click="validateAndSave">Save</Button>
@@ -33,8 +24,22 @@
               <div class="mavedb-wizard-form">
                 <div class="mavedb-wizard-form-content-background"></div>
                 <div class="mavedb-wizard-row">
+                  <div class="mavedb-wizard-help">
+                    <label :for="scopedId('field-value-experiment-set')" style="font-weight: bold; margin-right: 5px"
+                      >Experiment set:</label
+                    >
+                    <span :id="scopedId('field-value-experiment-set')">{{ experimentSetUrn || "(New experiment set)"}}</span>
+                    <span v-if="validationErrors.experimentSetUrn" class="mave-field-error">{{
+                      validationErrors.experimentSetUrn
+                    }}</span>
+                  </div>
                   <div class="mavedb-wizard-content-pane">
-                    <Message closable severity="info">
+                    <Message v-if="experimentSetUrn" closable severity="info">
+                      You are currently adding an experiment to an existing experiment set. To add to a different set,
+                      please navigate to the experiment set first and click "Add experiment.". To add to a new set,
+                      click "New experiment" from the navigation menu.
+                    </Message>
+                    <Message v-else closable severity="info">
                       You are currently adding an experiment to a new experiment set. To add an experiment to an
                       existing experiment set, navigate to the existing experiment set and click the "Add experiment"
                       button.
@@ -187,7 +192,7 @@
                     }}</span>
                   </div>
                 </div>
-                <div v-if="itemStatus == 'NotLoaded' || item.private == true">
+                <div>
                   <div class="mavedb-wizard-row">
                     <div class="mavedb-wizard-help">
                       <label>
@@ -374,8 +379,8 @@
                 </div>
               </div>
             </StepPanel>
-            <StepPanel v-if="itemStatus == 'NotLoaded' || item.private" v-slot="{ activateCallback }" :value="2">
-              <Message closable>
+            <StepPanel v-slot="{ activateCallback }" :value="2">
+              <Message class="mb-1" closable>
                 Experiments can be tagged with optional keywords. In a future release, the keyword vocabulary will
                 become restricted and keyword selection will be mandatory.
               </Message>
@@ -503,7 +508,6 @@ import EmailPrompt from '@/components/common/EmailPrompt'
 import useScopedId from '@/composables/scoped-id'
 import useAuth from '@/composition/auth'
 import useFormatters from '@/composition/formatters'
-import useItem from '@/composition/item'
 import useItems from '@/composition/items'
 import config from '@/config'
 import {normalizeDoi, normalizeRawRead, validateDoi, validateRawRead} from '@/lib/identifiers'
@@ -623,12 +627,9 @@ export default {
   props: {
     experimentSetUrn: {
       type: String,
-      required: false
+      required: false,
+      default: null
     },
-    itemId: {
-      type: String,
-      required: false
-    }
   },
 
   setup: () => {
@@ -667,7 +668,6 @@ export default {
     return {
       userProfile,
       ...useFormatters(),
-      ...useItem({itemTypeName: 'experiment'}),
       ...useScopedId(),
       variantLibraryKeywordOptions: variantLibraryKeywordOptions.items,
       endogenousSystemKeywordOptions: endogenousSystemKeywordOptions.items,
@@ -790,12 +790,6 @@ export default {
         this.resetForm()
       }
     },
-    itemId: {
-      handler: function () {
-        this.setItemId(this.itemId)
-      },
-      immediate: true
-    },
     'keywordKeys.Variant Library Creation Method': function (newValue) {
       if (newValue !== 'Endogenous locus library method') {
         this.keywordKeys['Endogenous Locus Library Method System'] = null
@@ -1110,47 +1104,24 @@ export default {
     ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
     resetForm: function () {
-      if (this.item) {
-        this.title = this.item.title
-        this.shortDescription = this.item.shortDescription
-        this.abstractText = this.item.abstractText
-        this.methodText = this.item.methodText
-        this.contributors = _.sortBy(this.item.contributors, ['familyName', 'givenName', 'orcidId'])
-        this.doiIdentifiers = this.item.doiIdentifiers
-        // So that the multiselect can populate correctly, build the primary publication identifiers
-        // indirectly by filtering publication identifiers list for those publications we know to be
-        // primary.
-        this.publicationIdentifiers = _.concat(
-          this.item.primaryPublicationIdentifiers,
-          this.item.secondaryPublicationIdentifiers
-        )
-        this.primaryPublicationIdentifiers = this.item.primaryPublicationIdentifiers.filter((publication) => {
-          return this.publicationIdentifiers.some((primary) => {
-            return primary.identifier === publication.identifier
-          })
-        })
-        this.secondaryPublicationIdentifiers = this.item.secondaryPublicationIdentifiers
-        this.rawReadIdentifiers = this.item.rawReadIdentifiers
-        this.extraMetadata = this.item.extraMetadata
-      } else {
-        this.title = null
-        this.shortDescription = null
-        this.abstractText = null
-        this.methodText = null
-        this.contributors = [
-          {
-            orcidId: this.userProfile?.sub,
-            givenName: this.userProfile?.given_name,
-            familyName: this.userProfile?.family_name
-          }
-        ]
-        this.doiIdentifiers = []
-        this.primaryPublicationIdentifiers = []
-        this.secondaryPublicationIdentifiers = []
-        this.publicationIdentifiers = []
-        this.rawReadIdentifiers = []
-        this.extraMetadata = {}
-      }
+      this.title = null
+      this.shortDescription = null
+      this.abstractText = null
+      this.methodText = null
+      this.contributors = [
+        {
+          orcidId: this.userProfile?.sub,
+          givenName: this.userProfile?.given_name,
+          familyName: this.userProfile?.family_name
+        }
+      ]
+      this.doiIdentifiers = []
+      this.primaryPublicationIdentifiers = []
+      this.secondaryPublicationIdentifiers = []
+      this.publicationIdentifiers = []
+      this.rawReadIdentifiers = []
+      this.extraMetadata = {}
+
       this.resetKeywords()
     },
 
@@ -1222,16 +1193,8 @@ export default {
         primaryPublicationIdentifiers: primaryPublicationIdentifiers,
         secondaryPublicationIdentifiers: secondaryPublicationIdentifiers,
         rawReadIdentifiers: this.rawReadIdentifiers.map((identifier) => _.pick(identifier, 'identifier')),
-        extraMetadata: this.extraMetadata
-      }
-      // empty item arrays so that deleted items aren't merged back into editedItem object
-      if (this.item) {
-        this.item.contributors = []
-        this.item.keywords = []
-        this.item.doiIdentifiers = []
-        this.item.publicationIdentifiers = []
-        this.item.primaryPublicationIdentifiers = []
-        this.item.rawReadIdentifiers = []
+        extraMetadata: this.extraMetadata,
+        experimentSetUrn: this.experimentSetUrn
       }
 
       const editedItem = _.merge({}, this.item || {}, editedFields)
diff --git a/src/components/screens/ExperimentEditor.vue b/src/components/screens/ExperimentEditor.vue
index 34f646a1..06171195 100644
--- a/src/components/screens/ExperimentEditor.vue
+++ b/src/components/screens/ExperimentEditor.vue
@@ -4,7 +4,6 @@
     :is-first-login-prompt="false"
   />
   <DefaultLayout :require-auth="true">
-    {{ experimentSetUrn }}
     <div class="mave-experiment-editor">
       <div class="grid">
         <div class="col-12">
@@ -16,41 +15,10 @@
               <Button severity="warn" @click="viewItem">Cancel</Button>
             </div>
           </div>
-          <div v-else class="mave-screen-title-bar">
-            <div class="mave-screen-title">Create a new experiment</div>
-            <div class="mavedb-screen-title-controls">
-              <Button @click="validateAndSave">Save experiment</Button>
-              <Button severity="help" @click="resetForm">Clear</Button>
-              <Button severity="warn" @click="backDashboard">Cancel</Button>
-            </div>
-          </div>
         </div>
         <div class="col-12 md:col-6">
           <Card>
             <template #content>
-              <div v-if="experimentSetUrn" class="field">
-                <label :for="scopedId('field-value-experiment-set')" style="font-weight: bold; margin-right: 5px"
-                  >Experiment set:</label
-                >
-                <span :id="scopedId('field-value-experiment-set')">{{ experimentSetUrn }}</span>
-                <span v-if="validationErrors.experimentSetUrn" class="mave-field-error">{{
-                  validationErrors.experimentSetUrn
-                }}</span>
-                <div v-if="!item" class="mave-field-help">
-                  To add an experiment to a different set, please navigate to the experiment set first and click "Add
-                  experiment."
-                </div>
-              </div>
-              <div v-else class="field">
-                <label :for="scopedId('field-value-experiment-set')" style="font-weight: bold; margin-right: 5px"
-                  >Experiment set:</label
-                >
-                <span :id="scopedId('field-value-experiment-set')">(New experiment set)</span>
-                <div class="mave-field-help">
-                  To add an experiment to an existing set, please navigate to the experiment set first and click "Add
-                  experiment."
-                </div>
-              </div>
               <div class="field">
                 <FloatLabel variant="on">
                   <InputText :id="scopedId('input-title')" v-model="title" />
@@ -518,13 +486,10 @@ export default {
   },
 
   props: {
-    experimentSetUrn: {
-      type: String,
-      required: false
-    },
     itemId: {
       type: String,
-      required: false
+      required: false,
+      default: null
     }
   },
 
@@ -984,24 +949,6 @@ export default {
         this.secondaryPublicationIdentifiers = this.item.secondaryPublicationIdentifiers
         this.rawReadIdentifiers = this.item.rawReadIdentifiers
         this.extraMetadata = this.item.extraMetadata
-      } else {
-        this.title = null
-        this.shortDescription = null
-        this.abstractText = null
-        this.methodText = null
-        this.contributors = [
-          {
-            orcidId: this.userProfile?.sub,
-            givenName: this.userProfile?.given_name,
-            familyName: this.userProfile?.family_name
-          }
-        ]
-        this.doiIdentifiers = []
-        this.primaryPublicationIdentifiers = []
-        this.secondaryPublicationIdentifiers = []
-        this.publicationIdentifiers = []
-        this.rawReadIdentifiers = []
-        this.extraMetadata = {}
       }
       this.resetKeywords()
     },
@@ -1094,11 +1041,6 @@ export default {
       try {
         if (this.item) {
           response = await axios.put(`${config.apiBaseUrl}/experiments/${this.item.urn}`, editedItem)
-        } else {
-          if (this.experimentSetUrn) {
-            editedItem.experimentSetUrn = this.experimentSetUrn
-          }
-          response = await axios.post(`${config.apiBaseUrl}/experiments/`, editedItem)
         }
       } catch (e) {
         response = e.response || {status: 500}
@@ -1112,10 +1054,6 @@ export default {
           //this.reloadItem()
           this.$router.replace({path: `/experiments/${savedItem.urn}`})
           this.$toast.add({severity: 'success', summary: 'Your changes were saved.', life: 3000})
-        } else {
-          console.log('Created item')
-          this.$router.replace({path: `/experiments/${savedItem.urn}`})
-          this.$toast.add({severity: 'success', summary: 'The new experiment was saved.', life: 3000})
         }
       } else if (response.data && response.data.detail) {
         if (typeof response.data.detail === 'string' || response.data.detail instanceof String) {
diff --git a/src/router/index.ts b/src/router/index.ts
index 578d1de4..f1f845fa 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -129,7 +129,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/experiment-sets/:urn/create-experiment',
     name: 'createExperimentInExperimentSet',
-    component: ExperimentEditor,
+    component: ExperimentCreator,
     props: (route) => ({experimentSetUrn: route.params.urn}),
     meta: {requiresAuth: true}
   },

From 865f72f7664c91660a47431cc0933c176fb6af29 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 6 Jan 2026 12:57:09 -0800
Subject: [PATCH 38/40] Add variables to track file counts for UploadFile
 components on ScoreSetCreator

Previously this was using properties of $refs to conditionally disable FileUpload components, but $refs are not reactive so the values were not updating correctly with this logic (a prior version also used $refs, but was not updating after form validation errors).

For this reason, now switching to defined data variables to track the current count of files for each FileUpload component on the final step of the wizard, and removing use of $refs.
---
 src/components/screens/ScoreSetCreator.vue | 48 +++++++++++++++++++---
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 4060f9c3..677f1027 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -1262,9 +1262,12 @@
                         choose-label="Scores file"
                         :class="inputClasses.scoresFile || ''"
                         :custom-upload="true"
+                        :disabled="scoresFileCount !== 0"
                         :file-limit="1"
                         :show-cancel-button="false"
                         :show-upload-button="false"
+                        @remove="fileCleared('scoresFile')"
+                        @select="fileSelected('scoresFile', $event)"
                       >
                         <template #empty>
                           <p>Drop a file here.</p>
@@ -1295,7 +1298,7 @@
                         choose-label="Scores column metadata file"
                         :class="inputClasses.scoreColumnsMetadataFile || ''"
                         :custom-upload="true"
-                        :disabled="($refs.scoresFileUpload?.files?.length || 0) != 1"
+                        :disabled="scoresFileCount !== 1 || scoreColumnsMetadataFileCount !== 0"
                         :file-limit="1"
                         :show-cancel-button="false"
                         :show-upload-button="false"
@@ -1331,9 +1334,12 @@
                         choose-label="Counts file"
                         :class="inputClasses.countsFile || ''"
                         :custom-upload="true"
+                        :disabled="countsFileCount !== 0"
                         :file-limit="1"
                         :show-cancel-button="false"
                         :show-upload-button="false"
+                        @remove="fileCleared('countsFile')"
+                        @select="fileSelected('countsFile', $event)"
                       >
                         <template #empty>
                           <p>Drop a file here.</p>
@@ -1364,7 +1370,7 @@
                         choose-label="Counts column metadata file"
                         :class="inputClasses.countColumnsMetadataFile || ''"
                         :custom-upload="true"
-                        :disabled="($refs.countsFileUpload?.files?.length || 0 ) != 1"
+                        :disabled="countsFileCount !== 1 || countColumnsMetadataFileCount !== 0"
                         :file-limit="1"
                         :show-cancel-button="false"
                         :show-upload-button="false"
@@ -1632,6 +1638,12 @@ export default {
     externalGeneDatabases,
     validationErrors: {},
 
+    // File upload states - reactive replacements for refs
+    scoresFileCount: 0,
+    countsFileCount: 0,
+    scoreColumnsMetadataFileCount: 0,
+    countColumnsMetadataFileCount: 0,
+
     isTargetSequence: true,
     isBaseEditor: false,
     isMultiTarget: false,
@@ -2374,6 +2386,9 @@ export default {
     },
 
     fileCleared: function (inputName) {
+      // Update reactive file counts
+      this.updateFileCount(inputName, 0)
+
       if (inputName == 'extraMetadataFile') {
         this.extraMetadata = null
         delete this.clientSideValidationErrors.extraMetadata
@@ -2390,6 +2405,23 @@ export default {
       this.mergeValidationErrors()
     },
 
+    updateFileCount: function (inputName, count) {
+      switch (inputName) {
+        case 'scoresFile':
+          this.scoresFileCount = count
+          break
+        case 'countsFile':
+          this.countsFileCount = count
+          break
+        case 'scoreColumnsMetadataFile':
+          this.scoreColumnsMetadataFileCount = count
+          break
+        case 'countColumnsMetadataFile':
+          this.countColumnsMetadataFileCount = count
+          break
+      }
+    },
+
     validateJsonObject: function (data, fieldName) {
       if (!_.isObject(data) || _.isArray(data)) {
         this.clientSideValidationErrors[fieldName] =
@@ -2401,6 +2433,10 @@ export default {
 
     fileSelected: async function (inputName, event, targetIdx) {
       const file = event.files[0]
+
+      // Update reactive file counts
+      this.updateFileCount(inputName, event.files.length)
+
       if (file) {
         const text = await file.text()
         switch (inputName) {
@@ -2712,12 +2748,12 @@ export default {
     },
 
     uploadData: async function (scoreSet) {
-      if (this.$refs.scoresFileUpload.files.length != 1) {
+      if (this.scoresFileCount !== 1) {
         this.validationErrors = {scores: 'Required'}
       } else {
         const formData = new FormData()
         formData.append('scores_file', this.$refs.scoresFileUpload.files[0])
-        if (this.$refs.countsFileUpload.files.length == 1) {
+        if (this.countsFileCount === 1) {
           formData.append('counts_file', this.$refs.countsFileUpload.files[0])
         }
         if (this.scoreColumnsMetadata) {
@@ -2758,8 +2794,8 @@ export default {
     validateAndSave: async function () {
       this.clientSideValidationErrors = {}
 
-      const hasScoresFile = this.$refs.scoresFileUpload.files.length == 1
-      const hasCountsFile = this.$refs.countsFileUpload.files.length == 1
+      const hasScoresFile = this.scoresFileCount === 1
+      const hasCountsFile = this.countsFileCount === 1
       if (hasCountsFile && !hasScoresFile) {
         this.clientSideValidationErrors.scoresFile = 'Required'
       }

From c781aca55c800c70d4cd738e58701a118fc329dc Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 6 Jan 2026 14:27:10 -0800
Subject: [PATCH 39/40] Additional style/layout updates to more closely match
 state prior to PrimeVue 4 upgrade

- Change the MaveDB tag text to white on ScoreSetView
- Put OrcID elements for creators and modifiers and UCSC logo on same lines as their associated text on ScoreSetView
- Customize theme to make secondary buttons pink to match previous style, otherwise their appearance is similar to that of disabled buttons
- Align ToggleSwitch labels with switches where they are misaligned
- Add top and bottom margin to .p-message class in app.css
- Remove 'Users' from toolbar
- Remove message for autopopulating fields on ScoreSetEditor, since it's only relevant to ScoreSetEditor
---
 src/assets/app.css                           |  5 ++++
 src/components/CalibrationEditor.vue         |  6 ++---
 src/components/CollectionBadge.vue           |  1 +
 src/components/ScoreSetSecondaryMetadata.vue | 12 +++++-----
 src/components/layout/Toolbar.vue            |  5 ----
 src/components/screens/ScoreSetCreator.vue   | 20 ++++++++--------
 src/components/screens/ScoreSetEditor.vue    |  6 +----
 src/main.js                                  | 24 ++++++++------------
 8 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/src/assets/app.css b/src/assets/app.css
index 36e3b1c7..bb2dc62f 100644
--- a/src/assets/app.css
+++ b/src/assets/app.css
@@ -73,3 +73,8 @@ body .p-button {
 .p-listbox-header {
   padding: 0 !important;
 }
+
+.p-message {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
diff --git a/src/components/CalibrationEditor.vue b/src/components/CalibrationEditor.vue
index 173576b8..eb75c6a1 100644
--- a/src/components/CalibrationEditor.vue
+++ b/src/components/CalibrationEditor.vue
@@ -294,7 +294,7 @@
             Optionally, you can provide a description of the evidence supporting this classification.
           </div>
         </div>
-        <div class="mavedb-wizard-content">
+        <div class="mavedb-wizard-content flex items-center">
           <ToggleSwitch
             v-model="functionalRangeHelpers[rangeIdx].isProvidingClassification"
             :aria-labelledby="scopedId('input-investigatorIsProvidingClassification')"
@@ -364,7 +364,7 @@
         <div class="mavedb-wizard-help">
           <label :id="scopedId('input-investigatorIsProvidingOddsPath')">Provide OddsPaths?</label>
         </div>
-        <div class="mavedb-wizard-content">
+        <div class="mavedb-wizard-content flex items-center">
           <ToggleSwitch
             v-model="functionalRangeHelpers[rangeIdx].isProvidingOddspaths"
             :aria-labelledby="scopedId('input-investigatorIsProvidingOddsPath')"
@@ -415,7 +415,7 @@
           used for variant interpretation.
         </div>
       </div>
-      <div class="mavedb-wizard-content">
+      <div class="mavedb-wizard-content flex items-center">
         <ToggleSwitch v-model="draft.researchUseOnly" />
         <div class="mavedb-switch-value">
           {{
diff --git a/src/components/CollectionBadge.vue b/src/components/CollectionBadge.vue
index ad7cbb20..4f78380d 100644
--- a/src/components/CollectionBadge.vue
+++ b/src/components/CollectionBadge.vue
@@ -63,5 +63,6 @@ export default defineComponent({
 
 .mavedb-collection-badge .mavedb-collection-badge-other {
   background-color: cadetblue;
+  color: white;
 }
 </style>
diff --git a/src/components/ScoreSetSecondaryMetadata.vue b/src/components/ScoreSetSecondaryMetadata.vue
index cc56738e..06cbd321 100644
--- a/src/components/ScoreSetSecondaryMetadata.vue
+++ b/src/components/ScoreSetSecondaryMetadata.vue
@@ -1,6 +1,6 @@
 <template>
-  <div v-if="scoreSet.creationDate">
-    Created {{ formatDate(scoreSet.creationDate) }}
+  <div v-if="scoreSet.creationDate" class="flex space-x-2">
+    <span>Created {{ formatDate(scoreSet.creationDate) }}</span>
     <span v-if="scoreSet.createdBy">
       <a class="flex items-center gap-1" :href="`https://orcid.org/${scoreSet.createdBy.orcidId}`" target="blank"
         ><img alt="ORCIDiD" src="@/assets/ORCIDiD_icon.png" />{{ scoreSet.createdBy.firstName }}
@@ -8,8 +8,8 @@
       ></span
     >
   </div>
-  <div v-if="scoreSet.modificationDate">
-    Last updated {{ formatDate(scoreSet.modificationDate) }}
+  <div v-if="scoreSet.modificationDate" class="flex space-x-2">
+    <span>Last updated {{ formatDate(scoreSet.modificationDate) }}</span>
     <span v-if="scoreSet.modifiedBy">
       <a class="flex items-center gap-1" :href="`https://orcid.org/${scoreSet.modifiedBy.orcidId}`" target="blank"
         ><img alt="ORCIDiD" src="@/assets/ORCIDiD_icon.png" />{{ scoreSet.modifiedBy.firstName }}
@@ -70,9 +70,9 @@
     </template>
   </div>
   <div v-if="scoreSet.externalLinks?.ucscGenomeBrowser?.url">
-    <a :href="scoreSet.externalLinks.ucscGenomeBrowser.url" target="blank">
+    <a class="flex space-x-2" :href="scoreSet.externalLinks.ucscGenomeBrowser.url" target="blank">
       <img alt="UCSC Genome Browser" src="@/assets/logo-ucsc-genome-browser.png" style="height: 20px" />
-      View in the UCSC Genome Browser
+      <span>View in the UCSC Genome Browser</span>
     </a>
   </div>
 </template>
diff --git a/src/components/layout/Toolbar.vue b/src/components/layout/Toolbar.vue
index e219c5fb..97c8cb1e 100644
--- a/src/components/layout/Toolbar.vue
+++ b/src/components/layout/Toolbar.vue
@@ -148,11 +148,6 @@ export default {
           url: 'https://mavedb.zulipchat.com/#narrow/channel/511813-beta-testers',
           available: ({config}) => config.PREVIEW_SITE
         },
-        {
-          label: 'Users',
-          route: '/users',
-          available: ({roles}) => roles.includes('admin')
-        },
         {
           label: this.userName,
           icon: 'pi pi-fw pi-user',
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 677f1027..8195521e 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -55,7 +55,7 @@
                         that you created?
                       </label>
                     </div>
-                    <div class="mavedb-wizard-content">
+                    <div class="mavedb-wizard-content flex items-center">
                       <ToggleSwitch
                         v-model="isSupersedingScoreSet"
                         :aria-labelledby="scopedId('input-superseding-score-set-label')"
@@ -81,7 +81,7 @@
                         </ul>
                       </div>
                     </div>
-                    <div class="mavedb-wizard-content">
+                    <div class="mavedb-wizard-content flex items-center">
                       <ToggleSwitch
                         v-model="isMetaAnalysis"
                         :aria-labelledby="scopedId('input-is-meta-analysis-label')"
@@ -219,7 +219,7 @@
                 <div class="mavedb-wizard-form-content-background"></div>
                 <div v-if="experiment" class="mavedb-wizard-row">
                   <div class="mavedb-wizard-content-pane">
-                    <Message class="mb-1" closable severity="info">
+                    <Message class="mb-1 mt-1" closable severity="info">
                       Some fields were autopopulated based on the selected experiment and should be inspected to ensure
                       they are still relevant to this score set.
                     </Message>
@@ -394,7 +394,7 @@
                       Would you like to define any additional restrictions governing the usage of data within this score
                       set?
                     </div>
-                    <div class="mavedb-wizard-content">
+                    <div class="mavedb-wizard-content flex items-center">
                       <ToggleSwitch
                         v-model="hasCustomUsagePolicy"
                         :aria-labelledby="scopedId('input-has-custom-usage-policy')"
@@ -617,7 +617,7 @@
                       accession instead of uploading the target locus sequence as your own target.
                     </div>
                   </div>
-                  <div class="mavedb-wizard-content">
+                  <div class="mavedb-wizard-content flex items-center">
                     <ToggleSwitch
                       v-model="isTargetSequence"
                       :aria-labelledby="scopedId('input-scoreSetIsSequenceBasedLabel')"
@@ -643,7 +643,7 @@
                       scores (and counts) file(s).
                     </div>
                   </div>
-                  <div class="mavedb-wizard-content">
+                  <div class="mavedb-wizard-content flex items-center">
                     <ToggleSwitch v-model="isBaseEditor" :aria-labelledby="scopedId('input-isBaseEditorData')" />
                     <div class="mavedb-switch-value">
                       {{
@@ -665,7 +665,7 @@
                       the case, your variants will need to be described explicitly from the target they came from.
                     </div>
                   </div>
-                  <div class="mavedb-wizard-content">
+                  <div class="mavedb-wizard-content flex items-center">
                     <ToggleSwitch
                       v-model="isMultiTarget"
                       :aria-labelledby="scopedId('input-scoreSetHasMultipleTargetsLabel')"
@@ -838,7 +838,7 @@
                         target sequence) in order to match the coordinates in the linked sequence.
                       </div>
                     </div>
-                    <div class="mavedb-wizard-content">
+                    <div class="mavedb-wizard-content flex items-center">
                       <ToggleSwitch
                         v-model="createdTargetGenes[targetIdx].linkedAccessions[dbName]"
                         :aria-labelledby="scopedId(`input-targetGeneExternalDatabase${dbName}Label`)"
@@ -1036,7 +1036,7 @@
                         describe variants relative to a RefSeq or Ensembl accession representing a gene.
                       </div>
                     </div>
-                    <div class="mavedb-wizard-content">
+                    <div class="mavedb-wizard-content flex items-center">
                       <ToggleSwitch
                         v-model="createdTargetGenes[targetIdx].isRelativeToChromosome"
                         :aria-labelledby="scopedId('input-targetDescribesChromosomeLabel')"
@@ -1189,7 +1189,7 @@
                       variants.
                     </div>
                   </div>
-                  <div class="mavedb-wizard-content">
+                  <div class="mavedb-wizard-content flex items-center">
                     <ToggleSwitch
                       v-model="investigatorIsProvidingScoreCalibrations"
                       :aria-labelledby="scopedId('input-investigatorIsProvidingScoreCalibrations')"
diff --git a/src/components/screens/ScoreSetEditor.vue b/src/components/screens/ScoreSetEditor.vue
index 45e47c0c..f83785f2 100644
--- a/src/components/screens/ScoreSetEditor.vue
+++ b/src/components/screens/ScoreSetEditor.vue
@@ -248,10 +248,6 @@
                     validationErrors.primaryPublicationIdentifiers
                   }}</span>
                 </div>
-                <Message v-if="experiment" closable severity="info">
-                  Some fields were autopopulated based on the selected experiment and should be inspected to ensure they
-                  are still relevant to this score set.
-                </Message>
                 <div class="field">
                   <FloatLabel variant="on">
                     <div v-if="extraMetadata">
@@ -734,7 +730,7 @@
                   </span>
 
                   <div class="field-column">
-                    <div class="field" style="margin-top: 1em">
+                    <div class="field mt-2 flex items-center">
                       <ToggleSwitch v-model="isBaseEditor" :aria-labelledby="scopedId('input-isBaseEditorData')" />
                       <span style="margin-left: 1em">{{
                         isBaseEditor
diff --git a/src/main.js b/src/main.js
index da2b41ce..357bbc25 100644
--- a/src/main.js
+++ b/src/main.js
@@ -92,20 +92,16 @@ const MaveDbTheme = definePreset(Aura, {
                   activeBackground: '{yellow.600}',
                   activeBorderColor: '{yellow.600}',
                 },
-              }
-            },
-            dark: {
-              root: {
-                warn: {
-                  background: '{yellow.400}',
-                  borderColor: '{yellow.400}',
-                  color: '{black.900}',
-                  hoverColor: '{black.900}',
-                  hoverBackground: '{yellow.500}',
-                  hoverBorderColor: '{yellow.500}',
-                  activeColor: '{black.900}',
-                  activeBackground: '{yellow.600}',
-                  activeBorderColor: '{yellow.600}',
+                secondary: {
+                  background: '{pink.400}',
+                  borderColor: '{pink.400}',
+                  color: '{surface.0}',
+                  hoverColor: '{surface.0}',
+                  hoverBackground: '{pink.500}',
+                  hoverBorderColor: '{pink.500}',
+                  activeColor: '{surface.0}',
+                  activeBackground: '{pink.600}',
+                  activeBorderColor: '{pink.600}',
                 },
               }
             },

From 9528d1a0e935c692c20faeba245e45eb30f91385 Mon Sep 17 00:00:00 2001
From: David Reinhart <davidrr@uw.edu>
Date: Tue, 6 Jan 2026 14:37:17 -0800
Subject: [PATCH 40/40] Cleanup

---
 src/components/CalibrationEditor.vue       | 6 ------
 src/components/screens/ScoreSetCreator.vue | 2 --
 2 files changed, 8 deletions(-)

diff --git a/src/components/CalibrationEditor.vue b/src/components/CalibrationEditor.vue
index eb75c6a1..27d76f31 100644
--- a/src/components/CalibrationEditor.vue
+++ b/src/components/CalibrationEditor.vue
@@ -960,12 +960,6 @@ export default {
       }
     },
 
-    // clearPublicationIdentifierSearch: function (refName: string) {
-    //   // This could change with a new Primevue version.
-    //   const input = this.$refs[refName]
-    //   input.$refs.focusInput.value = ''
-    // },
-
     searchPublicationIdentifiers: function (event: {query: string}) {
       const searchText = (event.query || '').trim()
       if (searchText.length > 0) {
diff --git a/src/components/screens/ScoreSetCreator.vue b/src/components/screens/ScoreSetCreator.vue
index 8195521e..79252e49 100644
--- a/src/components/screens/ScoreSetCreator.vue
+++ b/src/components/screens/ScoreSetCreator.vue
@@ -2708,8 +2708,6 @@ export default {
             }
 
             if (_.isEqual(_.first(path), 'targetGenes') && path.length >= 2) {
-              // this.minTargetGeneStepWithError = Math.min(this.minTargetGeneStepWithError, path[1])
-
               // Map errors on indexed external gene identifiers to inputs named for the identifier's database.
               if (_.isEqual(_.slice(path, 2, 3), ['externalIdentifiers'])) {
                 const identifierIndex = path[3]